feat(cas): 保养配置优化

杜志良
1 parent 32033702
Showing 4 changed files with 112 additions and 6 deletions
src/pages/cas/afterSaleConfiguration/maintainConfig/api.ts
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
 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`);
+}
+import React, { useState, useEffect } from 'react';
+import { Modal, Table, Spin } 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;
+  confirming?: boolean;
+  onCancel: () => void;
+  onConfirm: (selectItems: Maintain.ItemListVO[]) => void;
+}
+
+/**
+ * 油料选择器
+ * @onConfirm workItems：选中的油料
+ */
+export default function OilSelector({ visible, confirming = false, 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);
+    }
+  }, [visible]);
+
+  return (
+    <Modal
+      title="选择作机油"
+      width={780}
+      open={visible}
+      confirmLoading={confirming}
+      okButtonProps={{ disabled: selectItems.length === 0 }}
+      onOk={() => onConfirm(selectItems)}
+      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.ItemListVO[]) => {
+              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]);
+              }
+            },
+          })}
+        >
+          <Column title="机油名称" dataIndex="oilBrandName" />
+          <Column title="型号" dataIndex="oilModel" />
+          <Column title="粘稠度" dataIndex="oilViscosity" />
+          <Column title="等级" dataIndex="oilLevel" />
+          <Column title="类型" dataIndex="motorOilType" />
+        </Table>
+      </Spin>
+    </Modal>
+  );
+}
+.clickableRow {
+  cursor: pointer;
+}
 \ No newline at end of file
@@ -6,6 +6,7 @@ import { SortableContainer, SortableElement, SortableHandle } from &#39;react-sortab
 import { arrayMoveImmutable } from 'array-move';
  
 import NewOilModal from './components/NewOilModal';
+import OilSelector from './components/OilSelector';
 import OilData from './components/OilData';
  
 import './style.less';
@@ -145,13 +146,21 @@ export default function EngineOilSelector(props: Props) {
           )}
         />
       </Table>
-      <NewOilModal
-        selected={[...oilGroups]}
-        onOk={_onOk}
+      {/*<NewOilModal*/}
+      {/*  selected={[...oilGroups]}*/}
+      {/*  onOk={_onOk}*/}
+      {/*  visible={visible}*/}
+      {/*  onCancel={() => setVisible(false)}*/}
+      {/*  current={current}*/}
+      {/*  setCurrent={setCurrent}*/}
+      {/*/>*/}
+      <OilSelector
         visible={visible}
         onCancel={() => setVisible(false)}
-        current={current}
-        setCurrent={setCurrent}
+        onConfirm={(selectOils) => {
+          console.log('log=>selectOils', selectOils);
+          setVisible(false);
+        }}
       />
       <OilData
         visible={oilData.visible}