Merge branch 'd-cas-maintain-config' into 'master'

fix(cas): 优化保养机油配置 See merge request !749

Merge branch 'd-cas-maintain-config' into 'master'
fix(cas): 优化保养机油配置 See merge request !749
张志伟
2 parents f06bf99a 5bd9b0c0
Showing 9 changed files with 179 additions and 205 deletions
src/pages/cas/afterSaleConfiguration/maintainConfig/api.ts
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/components/style.less
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/EngineOilSelector/index.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/MachineFilter/components/EngineFilterModal/index.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/PartFilter/index.tsx
src/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/index.tsx
 import { http } from '@/typing/http';
 import request from '@/utils/request';
-import { CAS_HOST, OOP_HOST, PMS_HOST } from '@/utils/host';
+import { CAS_HOST, OOP_HOST, PMS_HOST } from '@/utils/host'; // 列表
  
 // 列表
 export function listApi(params: Maintain.ListParams): http.PromisePageResp<Maintain.ListVO> {
@@ -57,8 +57,10 @@ export interface PartItem {
   partNo?: string;
   /**配件数量 */
   partNumber?: number;
+
   [key: string]: any;
 }
+
 export interface QueryParams {
   current?: number;
   pageSize?: number;
@@ -70,3 +72,17 @@ export interface QueryParams {
 export function getPartItems(params: QueryParams): PromisePageResp<PartItem> {
   return request.get(`${PMS_HOST}/erp/part/list`, { params });
 }
+
+export interface OilItem {
+  oilBrandId: number; // 机油品牌id
+  oilBrandName: string; // 机油品牌名称
+  oilModel: string; // 机油型号
+  oilViscosity: string; // 机油粘稠度
+  oilLevel: string; // 机油等级
+  motorOilType: string; // 机油类型
+}
+
+/** 油料组合 */
+export function oilGroupListApi(): http.PromiseResp<Maintain.OilGroup[]> {
+  return request.get(`${CAS_HOST}/erp/basic/maintenance/config/oil/combination`);
+}
@@ -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, { useEffect, useState } from 'react';
+import { Modal, Spin, Table } from 'antd';
+
+import useInitail from '@/hooks/useInitail';
+
+import { oilGroupListApi } from '@/pages/cas/afterSaleConfiguration/maintainConfig/api';
+import st from './style.less';
+
+const Column = Table.Column;
+
+interface Props {
+  visible: boolean;
+  selected: Maintain.OilGroup[]; // 已选机油
+  onCancel: () => void;
+  onConfirm: (selectItems: Maintain.OilGroup[]) => void;
+}
+
+/**
+ * 油料选择器
+ */
+export default function OilSelector({ visible, selected, onCancel, onConfirm }: Props) {
+  const [delay, setDelay] = useState(true);
+  const [selectItems, setSelectItems] = useState<Maintain.OilGroup[]>([]);
+
+  const { data, loading, setParams } = useInitail(oilGroupListApi, [], undefined, delay);
+
+  useEffect(() => {
+    if (visible) {
+      setDelay(false);
+      setParams(undefined, true);
+
+      if (selected?.length > 0) {
+        setSelectItems(selected);
+      }
+    }
+  }, [visible, selected]);
+
+  const handleConfirm = () => {
+    onConfirm(selectItems);
+    setSelectItems([]);
+  };
+
+  return (
+    <Modal
+      title="选择作机油"
+      width={780}
+      open={visible}
+      okButtonProps={{ disabled: selectItems.length === 0 }}
+      onOk={handleConfirm}
+      onCancel={onCancel}
+      destroyOnClose
+    >
+      <Spin spinning={loading}>
+        <Table
+          loading={loading}
+          dataSource={data}
+          rowClassName={st.clickableRow}
+          rowKey="id"
+          rowSelection={{
+            type: 'checkbox',
+            selectedRowKeys: selectItems.map((si) => si.id) || [],
+            onChange: (selectedRowKeys, selectedRows: Maintain.OilGroup[]) => {
+              setSelectItems(selectedRows);
+            },
+          }}
+          onRow={(record) => ({
+            onClick: () => {
+              if (selectItems.some((si) => si.id === record.id)) {
+                setSelectItems([...selectItems.filter((si) => si.id !== record.id)]);
+              } else {
+                setSelectItems([...selectItems, record]);
+              }
+            },
+          })}
+          footer={() => (
+            <span>
+              已选：<span className={st.colorPrimary}>{`${selectItems.length} `}</span>项
+            </span>
+          )}
+        >
+          <Column title="机油品牌" dataIndex="oilBrandName" />
+          <Column title="型号" dataIndex="oilModel" />
+          <Column title="类型" dataIndex="motorOilType" />
+          <Column title="等级" dataIndex="oilLevel" />
+          <Column title="粘稠度" dataIndex="oilViscosity" />
+        </Table>
+      </Spin>
+    </Modal>
+  );
+}
+.clickableRow {
+  cursor: pointer;
+}
 \ No newline at end of file
 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';
  
 import './style.less';
@@ -20,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);
@@ -50,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 }}>
@@ -112,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" />
@@ -134,32 +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} 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>
   );
@@ -4,6 +4,7 @@ import debounce from &#39;lodash/debounce&#39;;
 import Search from 'antd/lib/input/Search';
  
 import { getPartItems } from '../../../../../../api';
+import st from '@/pages/cas/afterSaleConfiguration/maintainConfig/subpages/MaintainEdit/components/EngineOilSelector/components/style.less';
  
 const { Column } = Table;
  
@@ -86,6 +87,9 @@ function EngineOilModal(props: Props) {
       <Table
         dataSource={data}
         loading={loading}
+        pagination={{ total, defaultPageSize: 10, current, pageSize, onChange: onPageChange, onShowSizeChange: onPageChange }}
+        rowClassName={st.clickableRow}
+        rowKey="partCode"
         rowSelection={{
           selectedRowKeys: selectedRow.map((item) => item.partCode),
           onSelect: (row: any, _selected: boolean) => {
@@ -111,8 +115,15 @@ function EngineOilModal(props: Props) {
             setSelectedRow(newData);
           },
         }}
-        pagination={{ total, defaultPageSize: 10, current, pageSize, onChange: onPageChange, onShowSizeChange: onPageChange }}
-        rowKey="partCode"
+        onRow={(record) => ({
+          onClick: () => {
+            if (selectedRow.some((si) => si.partCode === record.partCode)) {
+              setSelectedRow([...selectedRow.filter((si) => si.partCode !== record.partCode)]);
+            } else {
+              setSelectedRow([...selectedRow, record]);
+            }
+          },
+        })}
       >
         <Column title="名称" dataIndex="partName" width={250} />
         <Column title="编号" dataIndex="partCode" />
@@ -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}>
@@ -142,8 +143,8 @@ export default function PartFilter({ partFilters, brandId, onChange }: Props) {
         <Table
           dataSource={dataSource}
           bordered
-          rowClassName="editable-row"
           pagination={false}
+          rowClassName="editable-row"
           rowKey={(row) => `${row.partCode}_${row.partName}`}
           components={{
             body: {
 import React, { useEffect, useState } from 'react';
-import { Button, Card, Empty, Form, Input, message, Row, Select, Spin, Tabs } from 'antd';
+import { Button, Card, Empty, Form, Input, message, Modal, Row, Select, Spin, Tabs } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import useInitial from '@/hooks/useInitail';
 import { ConnectProps } from '@/typing/common';
@@ -411,8 +411,11 @@ export default function ConfigPage({ match }: Props) {
         }
       })
       .catch((e) => {
-        message.error(e.message);
         setSubmitting(false);
+        Modal.error({
+          title: '提示',
+          content: e.message,
+        });
       });
   }