加装车选择车型展示配置代码

莫红玲
1 parent 768deac2
Showing 6 changed files with 182 additions and 88 deletions
src/pages/stock/TicketImport/api.ts
src/pages/stock/TicketImport/components/ComfirmOrder.tsx
src/pages/stock/VehicleAdditional/SelelctCarTreeAuth/SelectSpec.tsx
src/pages/stock/VehicleAdditional/components/CarSelect.tsx → src/pages/stock/VehicleAdditional/SelelctCarTreeAuth/index.tsx
src/pages/stock/VehicleAdditional/components/EditModal.tsx
src/pages/stock/VehicleAdditional/index.tsx
@@ -53,7 +53,7 @@ export function getTicketBrand(): http.PromiseRespA&lt;TicketImport.BrandListVO&gt; {
  
 //启票模板校验
 export function getTemplateCheck(params: { brandId: number, fid: string }): http.PromiseResp<void> {
-  return request.get(`${FVM_HOST}/erp/ticket/template/valid`, {params});
+  return request.get(`${FVM_HOST}/erp/ticket/template/valid`, { params });
 }
  
 /**
@@ -74,12 +74,12 @@ export function saveCollateralApi(params: TicketImport.CollateralItem[]): http.P
 /**
  * 物料等待数据列表(选择指定客户列表)
  */
-export function queryPersonApi(params: { keyword?: string, current?: number, pageSize?: number }): http.PromisePageResp<TicketImport.PersonItem> {
+export function queryPersonApi(params: { keyword?: string, current?: number, pageSize?: number, seriesId?: number }): http.PromisePageResp<TicketImport.PersonItem> {
   return request.get(`${FVM_HOST}/erp/ticket/waiting/material/query`, { params });
 }
 /**
  * 查询物料选装项（加装车）
  */
-export function queryOptionalListApi(params: { materialCode: string}): http.PromiseResp<TicketImport.OptionalList[]> {
+export function queryOptionalListApi(params: { materialCode: string, keyword?: string }): http.PromiseResp<TicketImport.OptionalList[]> {
   return request.get(`${FVM_HOST}/erp/ticket/material/optional/item`, { params });
 }
@@ -46,7 +46,7 @@ export default function ComfirmModal() {
  
   useEffect(() => {
     if (visible) {
-      setParams({ ...innerParams, optionalTag: currentItem.optionalTag }, true);
+      setParams({ ...innerParams, optionalTag: currentItem.optionalTag, seriesId: currentItem.seriesId }, true);
     }
   }, [currentItem.optionalTag]);
  
@@ -69,9 +69,9 @@ export default function ComfirmModal() {
     setCurrentItem({ ...currentItem, ...pa });
   };
  
-  function getOptionals(materialCode: string) {
+  function getOptionals(materialCode: string, keyword?: string) {
     setOptionalLoading(true);
-    materialCode && queryOptionalListApi({ materialCode }).then((res) => {
+    materialCode && queryOptionalListApi({ materialCode, keyword }).then((res) => {
       setOptionalList(res.data || []);
       setOptionalLoading(false);
     }).catch((err) => {
@@ -262,7 +262,16 @@ export default function ComfirmModal() {
               </Table>
             ) : currentItem.optionalTag && !currentItem.customTag ? (
               <>
-                <div style={{ marginTop: 20 }}>选择加装车项目:</div>
+                <Row style={{ marginTop: 20, marginBottom: 10, alignItems: "center" }} justify="space-between">
+                  <div>选择加装车项目:</div>
+                  <Input.Search
+                    style={{ width: 250 }}
+                    enterButton="搜索"
+                    allowClear
+                    placeholder="项目名称"
+                    onSearch={(v) => getOptionals(currentItem.materialCode!, v)}
+                  />
+                </Row>
                 <Table
                   rowSelection={{
                     type: "checkbox",
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Select,
+} from "antd";
+import {
+  CarOptionVo,
+} from "@/pages/stock/Components/api";
+import { ColumnsType } from 'antd/lib/table';
+
+interface Props {
+  onChange?: (pa: any) => void;
+  value?: any[];
+  disabled?: boolean;
+  level?: number; //1品牌，2车系，3车型
+  specList?: CarOptionVo[]
+}
+
+interface Item {
+  label: string;
+  value: number;
+  key?: number;
+}
+const { Column } = Table;
+const { Option } = Select;
+
+const columns: ColumnsType<CarOptionVo> = [
+  {
+    title: '车型',
+    dataIndex: 'name',
+  },
+  {
+    title: '配置代码',
+    dataIndex: 'specConfigCodeList',
+    render: (t) => t.map((i: string, key: number) => (<div key={i}>{key + 1}.{i}</div>))
+  },
+];
+export default function index({ onChange: onSelected, value, disabled, specList = [] }: Props) {
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[], selectedRows: CarOptionVo[]) => {
+      onSelected && onSelected(selectedRows);
+    },
+  };
+
+  return (
+    <>
+      <Table
+        rowSelection={{
+          type: "checkbox",
+          selectedRowKeys: value && value.map(item => item.id),
+          ...rowSelection,
+        }}
+        pagination={false}
+        // loading={}
+        rowKey="id"
+        size="small"
+        scroll={{ y: 500 }}
+        columns={columns}
+        dataSource={specList}
+      />
+    </>
+  );
+}
@@ -7,22 +7,24 @@ import {
   Form,
   Select,
   Space,
+  Spin,
+  message,
 } from "antd";
-import useInitial from "@/hooks/useInitail";
 import {
   CarOptionVo,
-  getOnsaleBrandApi,
   getOnsaleSeriesApi,
   getOnsaleSpecApi,
 } from "@/pages/stock/Components/api";
 import { PlusOutlined } from '@ant-design/icons';
+import { ColumnsType } from 'antd/lib/table';
+import SelectSpec from './SelectSpec';
  
 interface Props {
   onChange?: (pa: any) => void;
   value?: any[];
   disabled?: boolean;
   level?: number; //1品牌，2车系，3车型
-  brandList?: CarOptionVo[]
+  brandList?: CommonApi.OptionVO[]
 }
  
 interface Item {
@@ -33,7 +35,18 @@ interface Item {
 const { Column } = Table;
 const { Option } = Select;
  
-export default function index({ onChange, value, disabled, brandList }: Props) {
+const columns: ColumnsType<CarOptionVo> = [
+  {
+    title: '车型',
+    dataIndex: 'name',
+  },
+  {
+    title: '配置代码',
+    dataIndex: 'specConfigCodeList',
+    render: (t) => t.map((i: string, key: number) => (<div key={i}>{key + 1}.{i}</div>))
+  },
+];
+export default function index({ onChange, value, disabled, brandList = [] }: Props) {
   const [form] = Form.useForm();
   // 控制Modal是否可见
   const [visible, setVisible] = useState<boolean>(false);
@@ -49,6 +62,7 @@ export default function index({ onChange, value, disabled, brandList }: Props) {
   const [savaData, setSavadata] = useState<any>([]);
   // 存储已经选中的车系
   const [selectedSeries, setSelectedSeries] = useState<any[]>([]);
+  const [fetchLoading, setFetchLoading] = useState(false);
  
   useEffect(() => {
     if (value && value.length) {
@@ -94,9 +108,9 @@ export default function index({ onChange, value, disabled, brandList }: Props) {
         }
         if (level === 3) {
           const { spec } = fileds;
-          const _spec = spec.map((item: Item) => ({
-            specId: item.value,
-            specName: item.label,
+          const _spec = spec.map((item: any) => ({
+            specId: item.id,
+            specName: item.name,
           }));
           currentItem.children = _spec;
           currentItem.authType = 2;
@@ -153,16 +167,30 @@ export default function index({ onChange, value, disabled, brandList }: Props) {
     setVisible(true);
     if (record.brandId) {
       setLevel(2);
-      const { data } = await getOnsaleSeriesApi(record.brandId);
-      const selectedSeries = savaData.filter((brand: any) => brand.brandId === record.brandId)[0].children;
-      selectedSeries && form.setFieldValue("series", selectedSeries.map(i => ({ value: i.seriesId, label: i.seriesName })));
-      setSeries(data);
+      setFetchLoading(true);
+      try {
+        const { data } = await getOnsaleSeriesApi(record.brandId);
+        const selectedSeries = savaData.filter((brand: any) => brand.brandId === record.brandId)[0].children;
+        selectedSeries && form.setFieldValue("series", selectedSeries.map(i => ({ value: i.seriesId, label: i.seriesName })));
+        setSeries(data);
+        setFetchLoading(false);
+      } catch (err: any) {
+        message.error(err.message);
+        setFetchLoading(false);
+      }
     }
     if (record.seriesId) {
       setLevel(3);
-      const { data } = await getOnsaleSpecApi(record.seriesId);
-      record.children && form.setFieldValue("spec", record.children.map(i => ({ value: i.specId, label: i.specName })));
-      setSpecList(data);
+      setFetchLoading(true);
+      try {
+        const { data } = await getOnsaleSpecApi(record.seriesId);
+        record.children && form.setFieldValue("spec", record.children.map(i => ({ id: i.specId, name: i.specName })));
+        setSpecList(data);
+        setFetchLoading(false);
+      } catch (err: any) {
+        message.error(err.message);
+        setFetchLoading(false);
+      }
     }
   };
  
@@ -231,8 +259,8 @@ export default function index({ onChange, value, disabled, brandList }: Props) {
                 return (
                   <Space>
                     <Button
-                      type="link"
-                      style={{ padding: 0 }}
+                      type={record.brandId ? "primary" : "link"}
+                      style={{ padding: 2 }}
                       onClick={() => onSelectSpec(record)}
                       disabled={disabled}
                     >
@@ -271,59 +299,60 @@ export default function index({ onChange, value, disabled, brandList }: Props) {
           setCurrentItem({});
         }}
       >
-        <Form onFinish={_onOk} form={form}>
-          {level === 1 ? (
-            <Form.Item
-              label="品牌"
-              name="brand"
-            // rules={[{ required: true, message: "请选择品牌：" }]}
-            >
-              <Select
-                labelInValue
-                mode="multiple"
-                placeholder="选择品牌"
+        <Spin spinning={fetchLoading}>
+          <Form onFinish={_onOk} form={form}>
+            {level === 1 ? (
+              <Form.Item
+                label="品牌"
+                name="brand"
               >
-                {brandList.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          ) : null}
+                <Select
+                  labelInValue
+                  mode="multiple"
+                  placeholder="选择品牌"
+                >
+                  {brandList.map((item) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            ) : null}
  
-          {/* 车系 */}
-          {level === 2 && (
-            <Form.Item
-              label="车系"
-              name="series"
-            // rules={[{ required: true, message: "请选择车系" }]}
-            >
-              <Select labelInValue mode="multiple" placeholder="选择车系" allowClear>
-                {series.map((item: any) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          )}
-          {level === 3 ? (
-            <Form.Item
-              label="车型"
-              name="spec"
-            // rules={[{ required: true, message: "请选择车型" }]}
-            >
-              <Select labelInValue mode="multiple" placeholder="选择车型" allowClear>
-                {specList.map((item: any) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          ) : null}
-        </Form>
+            {/* 车系 */}
+            {level === 2 && (
+              <Form.Item
+                label="车系"
+                name="series"
+              // rules={[{ required: true, message: "请选择车系" }]}
+              >
+                <Select labelInValue mode="multiple" placeholder="选择车系" allowClear>
+                  {series.map((item: any) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            )}
+            {level === 3 ? (
+              <Form.Item
+                label=""
+                name="spec"
+              >
+                {/* <Select labelInValue mode="multiple" placeholder="选择车型" allowClear>
+                  {specList.map((item: any) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select> */}
+                <SelectSpec specList={specList} />
+              </Form.Item>
+            ) : null}
+          </Form>
+        </Spin>
       </Modal>
     </>
   );
@@ -5,8 +5,7 @@ import { saveApi } from &#39;../api&#39;;
 import { UploadOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import _ from 'lodash';
 import FeeweeUploadAttachment from '@/components/FeeweeUploadAttachment';
-import CarSelect from './CarSelect';
-import { CarOptionVo } from '@/pages/stock/Components/api';
+import CarSelect from '../SelelctCarTreeAuth';
  
 const Item = Form.Item;
 const Option = Select.Option;
@@ -14,23 +13,22 @@ interface Props {
   visible: boolean,
   onCancel: Function,
   item?: AdditionalCarSpace.Item,
-  brands: CarOptionVo[],
+  brands: CommonApi.OptionVO[],
   fetchList: () => any,
-
 }
  
 function EditModal(props: Props) {
   const { item, onCancel, fetchList, brands, visible } = props;
   const [loading, setLoading] = useState(false);
-  const [brandId, setBrandId] = useState<number>();
-  const [storageList, setStorageList] = useState<any[]>([]);
   const [form] = Form.useForm();
  
   useEffect(() => {
     if (visible && item != null) {
       const a = item.optionalAuth.map((brand: any) => {
         if (brand.authSeries) {
-          const newItem = brand.authSeries.map((child: any) => (child.authSpec ? { ...child, children: child.authSpec, authSpec: undefined } : child));
+          const newItem = brand.authSeries.map((child: any) => (child.authSpec ? {
+            ...child, brandId: undefined, children: child.authSpec.map((i: any) => ({ ...i, seriesId: undefined })), authSpec: undefined
+          } : child));
           return { ...brand, children: newItem, authSeries: undefined };
         }
         return brand;
@@ -42,7 +40,6 @@ function EditModal(props: Props) {
       });
     } else {
       form.resetFields();
-      setBrandId(undefined);
     }
   }, [visible]);
  
@@ -72,10 +69,6 @@ function EditModal(props: Props) {
     });
   }
  
-  /**获取授权库 */
-  function onChange(values: any, option: any) {
-    setStorageList(option.map((i: any) => ({ type: i.type, storageId: i.value, storageName: i.children })));
-  }
   return (
     <Modal
       title={item ? '编辑' : '新增'}
@@ -138,7 +131,7 @@ function EditModal(props: Props) {
           rules={[{ required: true, message: "选择车辆" }]}
           tooltip={<span style={{ color: '#ccc', fontSize: 12 }}>*点击图标<PlusSquareOutlined />展开授权详情</span>}
         >
-          <CarSelect disabled={!!item && item.disabled} brandList={brands} />
+          <CarSelect disabled={!!item && item.disabled} brandList={brands.filter(i => !!i.optional)} />
         </Item>
       </Form>
     </Modal>
@@ -75,7 +75,7 @@ export default function StorageList() {
         <Table size="small" loading={loading} pagination={paginationConfig} rowKey={(item) => String(item.id)} dataSource={list} onChange={(_pagination) => setParams({ ..._pagination }, true)}>
           <Column title="加装项目" dataIndex="name" />
           <Column
-            title="图片"
+            title="加装项目图片"
             dataIndex="image"
             render={(image, record: AdditionalCarSpace.Item) => (
               <>