fix(cas): 优化保养机油配置

杜志良
1 parent 318e0f45
Showing 5 changed files with 74 additions and 220 deletions
src/pages/cas/afterSaleConfiguration/maintainConfig/interface.d.ts
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/EngineOilSelector/components/NewOilModal/index.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/EngineOilSelector/components/OilSelector.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/EngineOilSelector/index.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/PartFilter/index.tsx
@@ -118,6 +118,7 @@ declare namespace Maintain {
   }
  
   interface OilGroup {
+    id: number;
     oilBrandId: number; //机油品牌id
     oilBrandName: string; //机油品牌名称
     oilModel: string; //机油型号名称
-import React, { useEffect, useState } from 'react';
-import { Form, Modal, Select } from 'antd';
-import useInitail from '@/hooks/useInitail';
-
-import { motorOilTypeData, oilViscosityData } from '@/pages/pms/entity';
-import { getBrandApi, getTypes } from '@/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/api';
-
-interface Props {
-  selected: Maintain.OilGroup[];
-  visible: boolean;
-  onCancel: () => void;
-  onOk: (data: Maintain.OilGroup[]) => any;
-  current: Maintain.OilGroup;
-  setCurrent: (value: any) => any;
-}
-
-function NewOilModal(props: Props) {
-  const { visible, onCancel, onOk, selected, current, setCurrent } = props;
-  const [form] = Form.useForm();
-  const [delay, setDelay] = useState(true);
-  const { data, setParams: setBrandParams } = useInitail<PmsPartOilSpace.Brand[], object>(getBrandApi, [], {}, delay);
-  const { data: oilLevelData, setParams: setOilLevelParams } = useInitail<PmsPartOilSpace.Type[], string>(getTypes, [], 'oil_level', delay);
-  const { data: oilModels, setParams } = useInitail<PmsPartOilSpace.Type[], string>(getTypes, [], 'oil_model', delay);
-  const { data: motorOilTypeData, setParams: oilType } = useInitail < PmsPartOilSpace.Type[], string> (getTypes, [], 'oil_type', delay);
-  const { data: oilViscosityData, setParams: oilViscosity } = useInitail < PmsPartOilSpace.Type[], string> (getTypes, [], 'oil_viscosity', delay);
-  useEffect(() => {
-    if (visible) {
-      setDelay(false);
-      setBrandParams({ oilType: 1 }, true);
-      oilType('oil_type', true);
-      oilViscosity('oil_viscosity', true);
-      setOilLevelParams('oil_level', true);
-      if (current.oilBrandId) {
-        form.setFieldsValue({ ...current });
-        setParams(`oil_model_${current.oilBrandId}`, true);
-      } else {
-        form.resetFields();
-      }
-    }
-  }, [visible]);
-
-  function _onOk(value: any) {
-    const data: Maintain.OilGroup = {
-      ...value,
-      oilBrandName: value.oil.label,
-      oilBrandId: value.oil.value,
-      defaultUse: false,
-    };
-    const index = selected.findIndex((e) => {
-      return (
-        e.oilBrandId === value.oil.value &&
-        e.motorOilType === value.motorOilType &&
-        e.oilLevel === value.oilLevel &&
-        e.oilModel === value.oilModel &&
-        e.oilViscosity === value.oilViscosity
-      );
-    });
-    if (current.index || current.index == 0) {
-      selected[current.index] = data;
-    } else if (index > -1) {
-      selected[index] = data;
-    } else {
-      selected.push(data);
-    }
-
-    setCurrent({});
-    onOk && onOk(selected);
-  }
-
-  const layout = {
-    labelCol: { span: 4 },
-    wrapperCol: { span: 20 },
-  };
-
-  return (
-    <Modal width={650} forceRender title={`${current.oilBrandId ? '编辑' : '添加'}机油`} open={visible} onOk={form.submit} onCancel={onCancel}>
-      <Form {...layout} labelAlign="left" form={form} onFinish={_onOk} component={false}>
-        <Form.Item label="机油品牌" name="oil" rules={[{ required: true }]}>
-          <Select
-            labelInValue
-            placeholder="请选择机油品牌"
-            showSearch 
-            optionFilterProp="children"
-            onChange={(id) => {
-              setParams(`oil_model_${id.value}`, true);
-              form.resetFields(['oilModel']);
-            }}
-          >
-            {data.map((i) => (
-              <Select.Option value={i.brandId || 0} key={i.brandId || 0}>
-                {i.brandName || '--'}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item label="机油型号" name="oilModel" rules={[{ required: true }]}>
-          <Select placeholder="请选择机油型号" showSearch optionFilterProp="children">
-            {oilModels.map((i) => (
-              <Select.Option value={i.value || ''} key={i.value || ''}>
-                {i.value || '--'}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item label="机油类型" name="motorOilType" rules={[{ required: true }]}>
-          <Select placeholder="请选择机油类型" showSearch optionFilterProp="children">
-            {motorOilTypeData.map((i) => (
-              <Select.Option value={i.value || 0} key={i.value || 0}>
-                {i.value || '--'}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item label="机油等级" name="oilLevel" rules={[{ required: true }]}>
-          <Select placeholder="请选择机油等级" showSearch optionFilterProp="children">
-            {oilLevelData.map((i) => (
-              <Select.Option value={i.value || 0} key={i.value || 0}>
-                {i.value || '--'}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item label="粘稠度" name="oilViscosity" rules={[{ required: true }]}>
-          <Select placeholder="请选择粘稠度" showSearch optionFilterProp="children">
-            {oilViscosityData.map((i) => (
-              <Select.Option value={i.value || 0} key={i.value || 0}>
-                {i.value || '--'}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-}
-
-export default NewOilModal;
-import React, { useState, useEffect } from 'react';
-import { Modal, Table, Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Modal, Spin, Table } from 'antd';
  
 import useInitail from '@/hooks/useInitail';
  
@@ -10,16 +10,15 @@ const Column = Table.Column;
  
 interface Props {
   visible: boolean;
-  confirming?: boolean;
+  selected: Maintain.OilGroup[]; // 已选机油
   onCancel: () => void;
-  onConfirm: (selectItems: Maintain.ItemListVO[]) => void;
+  onConfirm: (selectItems: Maintain.OilGroup[]) => void;
 }
  
 /**
  * 油料选择器
- * @onConfirm workItems：选中的油料
  */
-export default function OilSelector({ visible, confirming = false, onCancel, onConfirm }: Props) {
+export default function OilSelector({ visible, selected, onCancel, onConfirm }: Props) {
   const [delay, setDelay] = useState(true);
   const [selectItems, setSelectItems] = useState<Maintain.OilGroup[]>([]);
  
@@ -29,17 +28,25 @@ export default function OilSelector({ visible, confirming = false, onCancel, onC
     if (visible) {
       setDelay(false);
       setParams(undefined, true);
+
+      if (selected?.length > 0) {
+        setSelectItems(selected);
+      }
     }
-  }, [visible]);
+  }, [visible, selected]);
+
+  const handleConfirm = () => {
+    onConfirm(selectItems);
+    setSelectItems([]);
+  };
  
   return (
     <Modal
       title="选择作机油"
       width={780}
       open={visible}
-      confirmLoading={confirming}
       okButtonProps={{ disabled: selectItems.length === 0 }}
-      onOk={() => onConfirm(selectItems)}
+      onOk={handleConfirm}
       onCancel={onCancel}
       destroyOnClose
     >
@@ -52,7 +59,7 @@ export default function OilSelector({ visible, confirming = false, onCancel, onC
           rowSelection={{
             type: 'checkbox',
             selectedRowKeys: selectItems.map((si) => si.id) || [],
-            onChange: (selectedRowKeys, selectedRows: Maintain.ItemListVO[]) => {
+            onChange: (selectedRowKeys, selectedRows: Maintain.OilGroup[]) => {
               setSelectItems(selectedRows);
             },
           }}
@@ -65,12 +72,17 @@ export default function OilSelector({ visible, confirming = false, onCancel, onC
               }
             },
           })}
+          footer={() => (
+            <span>
+              已选：<span className={st.colorPrimary}>{`${selectItems.length} `}</span>项
+            </span>
+          )}
         >
-          <Column title="机油名称" dataIndex="oilBrandName" />
+          <Column title="机油品牌" dataIndex="oilBrandName" />
           <Column title="型号" dataIndex="oilModel" />
-          <Column title="粘稠度" dataIndex="oilViscosity" />
-          <Column title="等级" dataIndex="oilLevel" />
           <Column title="类型" dataIndex="motorOilType" />
+          <Column title="等级" dataIndex="oilLevel" />
+          <Column title="粘稠度" dataIndex="oilViscosity" />
         </Table>
       </Spin>
     </Modal>
 import React, { useEffect, useState } from 'react';
-import { Button, Row, Table } from 'antd';
+import { Button, Row, Table, Tag } from 'antd';
 import { MenuOutlined } from '@ant-design/icons';
 import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
  
-import NewOilModal from './components/NewOilModal';
 import OilSelector from './components/OilSelector';
 import OilData from './components/OilData';
  
@@ -21,18 +20,36 @@ export interface Props {
   oilGroups: Maintain.OilGroup[];
   capacity: number;
   disabled?: boolean;
-  onChange?: (data: any[]) => void;
+  onChange?: (data: Maintain.OilGroup[]) => void;
 }
  
-export default function EngineOilSelector(props: Props) {
-  const { oilGroups, capacity, disabled, onChange } = props;
-
+export default function EngineOilSelector({ oilGroups, capacity, disabled, onChange }: Props) {
   const [visible, setVisible] = useState<boolean>(false);
-  const [current, setCurrent] = useState({} as Maintain.OilGroup);
   const [oilData, setOilData] = useState<any>({ visible: false, data: {} });
  
   const [dataSource, setDataSource] = useState<any[]>([]);
  
+  useEffect(() => {
+    const _list = oilGroups.map((e) => {
+      return {
+        ...e,
+        // 拼接 e 中属性为 id值
+        id: `${e.oilBrandName}-${e.oilModel}-${e.motorOilType}-${e.oilLevel}-${e.oilViscosity}`
+      };
+    });
+    setDataSource([..._list]);
+  }, [oilGroups]);
+
+  const handleOilSelect = (selectOils: Maintain.OilGroup[]) => {
+    onChange && onChange(selectOils);
+    setVisible(false);
+  };
+
+  const handleOilDelete = (index: number) => {
+    oilGroups.splice(index, 1);
+    onChange && onChange(oilGroups);
+  };
+
   const onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable(dataSource.slice(), oldIndex, newIndex).filter((el: any) => !!el);
@@ -51,41 +68,6 @@ export default function EngineOilSelector(props: Props) {
     return <SortableItem index={index} {...restProps} />;
   };
  
-  useEffect(() => {
-    const _list = oilGroups.map((e, i) => {
-      return {
-        ...e,
-        id: i,
-      };
-    });
-    setDataSource([..._list]);
-  }, [oilGroups]);
-
-  function _onOk(data: Maintain.OilGroup[]) {
-    onChange && onChange(data);
-    setVisible(false);
-  }
-
-  function onDelete(record: Maintain.OilGroup) {
-    const _items = oilGroups;
-    const index = _items.findIndex((e) => {
-      return (
-        e.oilBrandId === record.oilBrandId &&
-        e.motorOilType === record.motorOilType &&
-        e.oilLevel === record.oilLevel &&
-        e.oilModel === record.oilModel &&
-        e.oilViscosity === record.oilViscosity
-      );
-    });
-    _items.splice(index, 1);
-    _onOk(_items);
-  }
-
-  function edit(record: Maintain.OilGroup, index: number) {
-    setCurrent({ ...record, oil: { value: record.oilBrandId, label: record.oilBrandName }, index });
-    setVisible(true);
-  }
-
   return (
     <div style={{ marginTop: 30 }}>
       <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
@@ -113,7 +95,22 @@ export default function EngineOilSelector(props: Props) {
         }}
       >
         <Column align="center" className="drag-visible" title="拖拽排序" dataIndex="sort" width={100} render={() => <DragHandle />} />
-        <Column className="drag-visible" title="推荐顺序" dataIndex="oilIndex" width={100} render={(text, record, index) => <div>{index + 1}</div>} />
+        <Column
+          className="drag-visible"
+          title="推荐顺序"
+          dataIndex="oilIndex"
+          width={160}
+          render={(text, record, index) => (
+            <div>
+              {index + 1}
+              {index === 0 && (
+                <Tag style={{ marginLeft: 5 }} color={'#FF9211'}>
+                  厂家首保机油
+                </Tag>
+              )}
+            </div>
+          )}
+        />
         <Column className="drag-visible" title="机油品牌" dataIndex="oilBrandName" />
         <Column className="drag-visible" title="机油型号" dataIndex="oilModel" />
         <Column className="drag-visible" title="机油类型" dataIndex="motorOilType" />
@@ -135,40 +132,20 @@ export default function EngineOilSelector(props: Props) {
           width={150}
           align="center"
           render={(text, record: Maintain.OilGroup, index) => (
-            <>
-              <Button onClick={() => edit(record, index)} type="link" size="small">
-                编辑
-              </Button>
-              <Button onClick={() => onDelete(record)} type="link" danger size="small">
-                删除
-              </Button>
-            </>
+            <Button onClick={() => handleOilDelete(index)} type="link" danger size="small">
+              删除
+            </Button>
           )}
         />
       </Table>
-      {/*<NewOilModal*/}
-      {/*  selected={[...oilGroups]}*/}
-      {/*  onOk={_onOk}*/}
-      {/*  visible={visible}*/}
-      {/*  onCancel={() => setVisible(false)}*/}
-      {/*  current={current}*/}
-      {/*  setCurrent={setCurrent}*/}
-      {/*/>*/}
-      <OilSelector
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        onConfirm={(selectOils) => {
-          console.log('log=>selectOils', selectOils);
-          setVisible(false);
-        }}
-      />
+
+      <OilSelector visible={visible} selected={dataSource} onCancel={() => setVisible(false)} onConfirm={handleOilSelect} />
       <OilData
         visible={oilData.visible}
+        data={oilData.data}
         onCancel={() => {
           setOilData({ visible: false, data: {} });
-          setCurrent({} as Maintain.OilGroup);
         }}
-        data={oilData.data}
       />
     </div>
   );
@@ -105,7 +105,8 @@ export default function PartFilter({ partFilters, brandId, onChange }: Props) {
   }
  
   const EditableCell: React.FC<EditableCellProps> = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {
-    const inputNode = <InputNumber />;
+    // todo 液态配件可以输入小数
+    const inputNode = <InputNumber precision={0} />;
  
     return (
       <td {...restProps}>