feat: 完成供应商批量导入功能

src/pages/ManufacturerMng/ManufacturerList.js

@@ -11,6 +11,7 @@ import {
   Divider,
   Select,
   Input,
+  Upload,
 } from 'antd';
 import { useRequest, useModel } from '@umijs/max';
 import FirmModal from './ManufacturerModal';
@@ -27,10 +28,8 @@ import {
 } from '@/services/manufacturer';
 function ManufacturerList(props) {
   const { projectId = 1, data } = props;
-  const {
-    initialState,
-  } = useModel('@@initialState');
-  const user = initialState?.user || {}
+  const { initialState } = useModel('@@initialState');
+  const user = initialState?.user || {};
   const [visible, setVisible] = useState(false);
   const [curItem, setCurItem] = useState(null);
   const [formDisabled, setFormDisabled] = useState(false);
@@ -44,6 +43,35 @@ function ManufacturerList(props) {
     page: 1,
     page_size: pageSize,
   });
+
+  const [uploading, setUploading] = useState(false);
+
+  const uploadProps = {
+    accept: '.xls, .xlsx',
+    action: '/api/supplier/v1/supplier/import',
+    headers: {
+      'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
+    },
+    defaultFileList: [],
+    data: { project_id: projectId, user_name: user?.CName },
+    showUploadList: false,
+    onChange(info) {
+      if (info.file.status === 'uploading') {
+        if (!uploading) {
+          setUploading(true);
+        }
+      }
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name} 已导入`);
+        setUploading(false);
+        handleSearch();
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name} 导入失败`);
+        setUploading(false);
+      }
+    },
+  };
+
   const queryMfrListRequest = useRequest(queryMfrList, {
     manual: true,
     onSuccess: (data) => {
@@ -52,7 +80,9 @@ function ManufacturerList(props) {
       setTotal(data.count);
     },
   });
+
   const queryCreaterListRequest = useRequest(queryCreaterList, {});
+
   const saveMfrRequest = useRequest(saveMfr, {
     manual: true,
     onSuccess: () => {
@@ -61,6 +91,7 @@ function ManufacturerList(props) {
       queryCreaterListRequest.run({});
     },
   });
+
   const editMfrRequest = useRequest(editMfr, {
     manual: true,
     onSuccess: () => {
@@ -69,6 +100,7 @@ function ManufacturerList(props) {
       queryCreaterListRequest.run({});
     },
   });
+
   const deleteMfrRequest = useRequest(deleteMfr, {
     manual: true,
     onSuccess: () => {
@@ -77,19 +109,23 @@ function ManufacturerList(props) {
       queryCreaterListRequest.run({});
     },
   });
+
   const loading = useMemo(() => {
     var loading =
       queryMfrListRequest.loading ||
       saveMfrRequest.loading ||
       queryCreaterListRequest.loading ||
-      editMfrRequest.loading;
+      editMfrRequest.loading ||
+      uploading;
     return loading;
   }, [
     queryMfrListRequest.loading,
     saveMfrRequest.loading,
     queryCreaterListRequest.loading,
     editMfrRequest.loading,
+    uploading,
   ]);
+
   const columns = [
     {
       title: '供应商（自然人）名称',
@@ -193,10 +229,12 @@ function ManufacturerList(props) {
       width: '12%',
     },
   ];
+
   const onCancel = () => {
     setVisible(false);
     setFormDisabled(false);
   };
+
   const handleDeleteItem = (record) => {
     console.log(record);
     Modal.confirm({
@@ -213,6 +251,7 @@ function ManufacturerList(props) {
       },
     });
   };
+
   const handleExportChange = async () => {
     const data = {
       project_id: 1,
@@ -226,6 +265,13 @@ function ManufacturerList(props) {
       false,
     );
   };
+
+  const downloadTemplate = async () => {
+    window.open(
+      'https://gt-digitization.oss-cn-hangzhou.aliyuncs.com/public/bom/%E4%BE%9B%E5%BA%94%E5%95%86%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx',
+    );
+  };
+
   const handleSearch = () => {
     console.log(formData);
     let value = {
@@ -241,6 +287,7 @@ function ManufacturerList(props) {
     };
     queryList(value);
   };
+
   const queryList = (fieldsValue) => {
     console.log(fieldsValue);
     setFormData(fieldsValue);
@@ -250,6 +297,7 @@ function ManufacturerList(props) {
       : user?.CName || undefined;
     queryMfrListRequest.run({ ...fieldsValue, created_by });
   };
+
   const onDateChange = (data) => {
     let start_time = '';
     let end_time = '';
@@ -259,6 +307,7 @@ function ManufacturerList(props) {
     }
     setFormData({ ...formData, start_time: start_time, end_time: end_time });
   };
+
   const onOk = (fieldsValue) => {
     console.log(fieldsValue);
     setVisible(false);
@@ -276,102 +325,119 @@ function ManufacturerList(props) {
         created_by: user?.CName,
       });
   };
+
   const onChange = (name) => {
     setFormData({ ...formData, created_by: name });
   };
+
   const onTypeChange = (type) => {
     setFormData({ ...formData, type: type });
   };
+
   const onPaginationChange = (pagination) => {
     var tempFormData = { ...formData, page: pagination.current };
     setFormData(tempFormData);
     queryList(tempFormData);
   };
+
   const onInputChange = (e) => {
     setFormData({ ...formData, name: e.target.value });
   };
+
   useEffect(() => {
     queryList({ ...formData });
   }, []);
+
   return (
     <>
-      <Form>
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <div style={{ margin: '0 24px' }}>
-            <Form.Item label="日期:">
-              <RangePicker onChange={onDateChange} />
+      <Form layout="inline" style={{ marginBottom: '24px' }}>
+        <div style={{ margin: '0 24px' }}>
+          <Form.Item label="日期:">
+            <RangePicker onChange={onDateChange} />
+          </Form.Item>
+        </div>
+        {user?.IsSuper && (
+          <div>
+            <Form.Item label="主体类型:">
+              <Select
+                onChange={onTypeChange}
+                options={[
+                  { value: 1, label: '供应商' },
+                  { value: 4, label: '自然人' },
+                ]}
+                style={{ width: 100 }}
+                allowClear
+              />
             </Form.Item>
           </div>
-          {user?.IsSuper && (
-            <div>
-              <Form.Item label="主体类型:">
-                <Select
-                  onChange={onTypeChange}
-                  options={[
-                    { value: 1, label: '供应商' },
-                    { value: 4, label: '自然人' },
-                  ]}
-                  style={{ width: 180 }}
-                  allowClear
-                />
-              </Form.Item>
-            </div>
-          )}
-          <div style={{ margin: '0 24px' }}>
-            <Form.Item label="名称:">
-              <Input
-                placeholder="请输入供应商名称"
-                onChange={(e) => {
-                  onInputChange(e);
-                }}
+        )}
+        <div style={{ margin: '0 24px' }}>
+          <Form.Item label="名称:">
+            <Input
+              placeholder="请输入供应商名称"
+              onChange={(e) => {
+                onInputChange(e);
+              }}
+            />
+          </Form.Item>
+        </div>
+        {user?.IsSuper && (
+          <div>
+            <Form.Item label="创建人:">
+              <Select
+                onChange={onChange}
+                options={queryCreaterListRequest?.data?.list || []}
+                style={{ width: 100 }}
+                allowClear
               />
             </Form.Item>
           </div>
-          {user?.IsSuper && (
-            <div>
-              <Form.Item label="创建人:">
-                <Select
-                  onChange={onChange}
-                  options={queryCreaterListRequest?.data?.list || []}
-                  style={{ width: 180 }}
-                  allowClear
-                />
-              </Form.Item>
-            </div>
-          )}
-          <div style={{ display: 'flex' }}>
-            <Form.Item>
-              <Button
-                style={{ marginLeft: 24 }}
-                type="primary"
-                onClick={() => {
-                  handleSearch();
-                }}
-              >
-                查询
-              </Button>
-            </Form.Item>
+        )}
+        <div style={{ display: 'flex' }}>
+          <Form.Item>
             <Button
-              style={{ marginLeft: 10 }}
-              loading={loading}
+              style={{ marginLeft: 24 }}
               type="primary"
               onClick={() => {
-                setCurItem(null);
-                setVisible(true);
-                setTypeDisabled(false);
+                handleSearch();
               }}
             >
-              新增
+              查询
             </Button>
-            <Button
-              style={{ marginLeft: 10 }}
-              loading={loading}
-              onClick={() => handleExportChange()}
-              type="primary"
-            >
-              导出
+          </Form.Item>
+          <Button
+            style={{ marginLeft: 10 }}
+            loading={loading}
+            type="primary"
+            onClick={() => {
+              setCurItem(null);
+              setVisible(true);
+              setTypeDisabled(false);
+            }}
+          >
+            新增
+          </Button>
+          <Button
+            style={{ marginLeft: 10 }}
+            loading={loading}
+            onClick={() => handleExportChange()}
+            type="primary"
+          >
+            导出
+          </Button>
+          <Button
+            style={{ marginLeft: 10 }}
+            loading={loading}
+            onClick={() => downloadTemplate()}
+            type="primary"
+          >
+            下载模板
+          </Button>
+          <Upload {...uploadProps}>
+            <Button style={{ marginLeft: 10 }} type="primary">
+              导入
             </Button>
-          </div>
+          </Upload>
         </div>
       </Form>
       <Table