Merge branch 'develop'

src/components/DDComponents/DIYTable/index.tsx

@@ -30,14 +30,76 @@ function DIYTable(props: IProps) {
   const { table, columns, displayOnly, onChange } = props;
   // table数据
   const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
-  // table 列配置
-  const [tableColumnDef, setTableColumnDef] = useState<ColumnsType<any>>([
+
+  // 列配置
+  const tableColumnDef: ColumnsType<any> = [
     {
       title: '序号',
       dataIndex: 'index',
       className: 'hidden',
     },
-  ]);
+  ];
+
+  const [commitValue, setCommitValue] = useState<any[]>([]);
+
+  const handleValueChange = (value: any, id: string, label: string) => {
+    let ids = id.split(';');
+    let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
+    let [columnID, tableID] = ids[1].split('>');
+    let [columnLabel, tableLabel] = label.split('>');
+
+    const cell = {
+      name: columnLabel,
+      id: columnID,
+      type: columnID.split('_')[0],
+      value: [value],
+    };
+    // 组装可能用到的数据
+    const cols = [];
+    cols[colIndex] = cell;
+    const rows = [];
+    rows[rowIndex] = cols;
+
+    const newValues = JSON.parse(JSON.stringify(commitValue)) || [];
+
+    if (newValues.length !== 0 && newValues[rowIndex] !== undefined) {
+      newValues.forEach((row: any, rindex: number) => {
+        if (rindex === rowIndex) {
+          if (row[colIndex] !== undefined) {
+            row.forEach((_col: any, cindex: number) => {
+              if (cindex === colIndex) {
+                row[colIndex] = cell;
+              }
+            });
+          } else {
+            row[colIndex] = cell;
+          }
+        }
+      });
+    } else {
+      newValues[rowIndex] = cols;
+    }
+
+    const textNode = columns?.find((item) => item.componentName === 'TextNote');
+    if (textNode) {
+      const textNodeIndex = columns?.findIndex(
+        (item) => item.componentName === 'TextNote',
+      );
+      const textCell = {
+        name: textNode.props.label,
+        id: textNode.props.id,
+        type: textNode.componentName,
+        value: [textNode.props.placeholder],
+      };
+      newValues.forEach((item) => {
+        if (textNodeIndex !== -1) {
+          item[textNodeIndex] = textCell;
+        }
+      });
+    }
+    setCommitValue(newValues);
+    onChange(newValues);
+  };
 
   // 表单填写时的表格生成
   const handleGenerateTable = () => {
@@ -63,7 +125,13 @@ function DIYTable(props: IProps) {
                   style={{ padding: '0', margin: '0' }}
                   options={column.props.options}
                   disabled={column.props.disabled}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -81,7 +149,13 @@ function DIYTable(props: IProps) {
                   placeholder={column.props.placeholder}
                   format={column.props.format}
                   disabled={column.props.disabled}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -99,7 +173,13 @@ function DIYTable(props: IProps) {
                   style={{ padding: '4px 11px' }}
                   disabled={column.props.disabled}
                   unit={column.props.unit}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -112,13 +192,13 @@ function DIYTable(props: IProps) {
                 <Input
                   disabled={column.props.disabled}
                   placeholder={column.props.placeholder}
-                  onChange={(e) =>
-                    onChange?.(
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    handleValueChange(
                       e.target.value,
                       id,
                       columnLabel + '>' + table.props.label,
-                    )
-                  }
+                    );
+                  }}
                 />
               );
             };
@@ -146,30 +226,25 @@ function DIYTable(props: IProps) {
   // 当仅用作展示时
   const handleDisplayOnly = () => {
     const rows = columns;
-    const newTableData = [];
-    const newColumnDef: ColumnsType<any> = [];
-    if (rows && columns.length) {
+    if (rows && rows.length) {
       for (let index = 0; index < rows.length; index++) {
         // 把每一行的数据提出来到一个对象里
         if (rows) {
           const row = rows[index];
-
           if (index === 0) {
             // 列配置
             row.forEach((col: any) => {
-              newColumnDef.push({ title: col.name, dataIndex: col.type });
+              if (col) {
+                tableColumnDef.push({
+                  title: col?.name || '',
+                  dataIndex: col?.type || '',
+                  className: '',
+                });
+              }
             });
           }
-          let rowData: any = {};
-          row.forEach((col: any) => {
-            rowData[col.type] = col.value[0];
-            rowData.key = col.id + index;
-          });
-          newTableData.push(rowData);
         }
       }
-      setTableColumnDef(newColumnDef);
-      setTableData(newTableData);
     }
   };
 
@@ -177,17 +252,48 @@ function DIYTable(props: IProps) {
     setTableData([...tableData, { index: tableData.length }]);
   };
 
+  if (displayOnly) {
+    handleDisplayOnly();
+  } else {
+    handleGenerateTable();
+  }
+
   useEffect(() => {
-    if (displayOnly) {
-      handleDisplayOnly();
-    } else {
-      handleGenerateTable();
+    if (columns?.length === 0) {
+      return;
+    }
+    const rows = columns;
+    const newTableData = [];
+    if (rows && rows.length) {
+      if (displayOnly) {
+        for (let index = 0; index < rows.length; index++) {
+          // 把每一行的数据提出来到一个对象里
+          const row = rows[index];
+          const rowData: any = {};
+          if (displayOnly) {
+            row.forEach((col: any) => {
+              if (col) {
+                rowData.index = index + 1;
+                // eslint-disable-next-line prefer-destructuring
+                rowData[col.type] = col.value[0];
+                rowData.key = col.id + index;
+              }
+            });
+            newTableData.push(rowData);
+          }
+        }
+      } else {
+        newTableData.push({
+          index: 1,
+        });
+      }
+      setTableData(newTableData);
     }
-  }, []);
+  }, [columns]);
 
   return (
     <>
-      {table.name ? table.name : table.props.label}
+      {/* {table.name ? table.name : table.props.label} */}
       <Table
         style={displayOnly ? { margin: '10px 24px 10px 0' } : {}}
         columns={tableColumnDef}

src/components/UserDropdown/index.tsx

@@ -7,7 +7,6 @@ import styles from './index.less';
 import { useModel } from '@umijs/max';
 
 const RenderDropDown = (menu: any) => {
-  console.log(menu);
   return (
     <div className={styles.dropdown}>
       <a key="1" href="/safety">
@@ -22,10 +21,8 @@ const RenderDropDown = (menu: any) => {
 };
 
 export default function UserDropdown(props: any) {
-  const {
-    initialState,
-  } = useModel('@@initialState');
-  const user = initialState?.user || {}
+  const { initialState } = useModel('@@initialState');
+  const user = initialState?.user || {};
   return (
     <div className={styles.root}>
       <Dropdown placement="top" dropdownRender={(menu) => RenderDropDown(menu)}>

src/pages/Flow/OaAuditDetail.js

@@ -1,19 +1,19 @@
 // 审批详情
-import React, {useState, useMemo, useEffect} from 'react';
-import {Steps, Button, Tooltip, message, Spin} from 'antd';
-import {useRequest, useModel, useLocation} from 'umi';
+import React, { useState, useMemo, useEffect } from 'react';
+import { Steps, Button, Tooltip, message, Spin } from 'antd';
+import { useRequest, useModel, useLocation } from 'umi';
 import AuditModal from './components/AuditModal';
 import FormAndFilesNode from './components/FormAndFilesNode';
-import {queryAuditDetail, updateAuditList} from '@/services/boom';
-import {queryGetContractList} from '@/services/contract';
+import { queryAuditDetail, updateAuditList } from '@/services/boom';
+import { queryGetContractList } from '@/services/contract';
 import PageContent from '@/components/PageContent';
 import SignModal from './components/SignModal';
 import ContractDetail from '../ContractManager/detail';
-import {Type} from '../Profile';
-import {queryContractDetail} from '../../services/contract';
+import { Type } from '../Profile';
+import { queryContractDetail } from '../../services/contract';
 
-function OaAuditDetail() {
-  const {initialState} = useModel('@@initialState');
+function OaAuditDetail(props) {
+  const { initialState } = useModel('@@initialState');
   const user = initialState?.user || {};
   const [auditVisible, setAuditVisible] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -23,20 +23,19 @@ function OaAuditDetail() {
   // 使用queryParams来获取特定查询参数
   const id = queryParams.get('id');
   const code = queryParams.get('code');
-  const token = queryParams.get('JWT-TOKEN')
+  const token = queryParams.get('JWT-TOKEN');
   if (!localStorage['JWT-TOKEN']) {
-    localStorage['JWT-TOKEN'] = token
+    localStorage['JWT-TOKEN'] = token;
   }
 
-  const type = code ? Type.CON : Type.OA
-
+  const type = code ? Type.CON : Type.OA;
 
   useEffect(() => {
-    if (type == Type.CON) runCon({code});
+    if (type == Type.CON) runCon({ code });
   }, [type]);
 
-  const {data, loading, refresh} = useRequest(queryAuditDetail, {
-    defaultParams: [{id}],
+  const { data, loading, refresh } = useRequest(queryAuditDetail, {
+    defaultParams: [{ id }],
   });
   const {
     current_seq,
@@ -58,8 +57,7 @@ function OaAuditDetail() {
     formatResult: (res) => {
       return res?.data?.detail;
     },
-    onSuccess: (res) => {
-    },
+    onSuccess: (res) => {},
   });
   // console.log(conData);
 
@@ -73,7 +71,7 @@ function OaAuditDetail() {
           {str}
           <div>
             <Tooltip title={node.desc}>
-              <span style={{color: '#1A73E8', textDecoration: 'undeline'}}>
+              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
                 审批意见
               </span>
             </Tooltip>
@@ -119,7 +117,7 @@ function OaAuditDetail() {
       return [
         <Button
           key={1}
-          style={{marginRight: 10}}
+          style={{ marginRight: 10 }}
           type="primary"
           onClick={() => setAuditVisible(1)}
         >
@@ -139,7 +137,7 @@ function OaAuditDetail() {
   return (
     <PageContent extra={btns} loading={loading && conLoading}>
       <Steps
-        style={{marginBottom: 20}}
+        style={{ marginBottom: 20 }}
         current={audit_status == 3 ? OaAuditList?.length : current_seq - 1}
         status={audit_status == 2 ? 'error' : 'process'}
         items={OaAuditList?.map((item) => ({
@@ -148,9 +146,9 @@ function OaAuditDetail() {
         }))}
       ></Steps>
       {type == Type.OA ? (
-        <FormAndFilesNode formData={form} fileList={Files}/>
+        <FormAndFilesNode formData={form} fileList={Files} />
       ) : (
-        <ContractDetail data={conData}/>
+        <ContractDetail data={conData} />
       )}
 
       <AuditModal

src/pages/Flow/OaDetail.js

@@ -57,7 +57,7 @@ const OaDetail = () => {
 
   //填写表单实时计算审批流程
   const advanceSubmit = async (changedFields, allValues) => {
-    console.log(changedFields, allValues);
+    // console.log(changedFields, allValues);
     let formValues = (data?.formData || [])
       .map((item) => {
         const itemProps = item.props;
@@ -68,6 +68,7 @@ const OaDetail = () => {
           return {
             name: itemProps.label,
             id: itemProps.id,
+            type: item.componentName,
             value: [...val],
           };
         } else if (allValues[itemProps.id]) {
@@ -87,122 +88,123 @@ const OaDetail = () => {
       formComponentValues: formValues,
       audit_list: [],
     };
+
     formValueRef.current.form = formValues;
     run(params);
   };
 
-  const handleTableValChange = (value, id, label) => {
-    let ids = id.split(';');
-    let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
-    let [columnID, tableID] = ids[1].split('>');
-    let [columnLabel, tableLabel] = label.split('>');
+  // const handleTableValChange = (value, id, label) => {
+  //   let ids = id.split(';');
+  //   let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
+  //   let [columnID, tableID] = ids[1].split('>');
+  //   let [columnLabel, tableLabel] = label.split('>');
 
-    const cell = {
-      name: columnLabel,
-      id: columnID,
-      type: columnID.split('_')[0],
-      value: [value],
-    };
-    // 组装可能用到的数据
-    const cols = [];
-    cols[colIndex] = cell;
-    const rows = [];
-    rows[rowIndex] = cols;
-    // 如果已经有数据
-    let oldTableData = [];
-    // 这里不知道为什么不能直接读取state（tableData）
-    setTableData((prevState) => {
-      oldTableData = prevState;
-      return prevState;
-    });
-    if (oldTableData && oldTableData.length > 0) {
-      let table = oldTableData.find((item) => item.id === tableID);
-      // 如果某个表格数据存在
-      if (table) {
-        const oldRows = table.value;
-        // 如果某个表格的行数据存在
-        if (oldRows) {
-          let odlCols = oldRows[rowIndex];
-          // 如果某个表格的某个行数据存在
-          if (odlCols) {
-            // 记录可编辑控件
-            table.value[rowIndex][colIndex] = cell;
-            // 不可编辑控件
-            table.value[rowIndex] = addUnEditableColumn(
-              table.value[rowIndex],
-              tableID,
-            );
-            const newTableData = oldTableData.map((item) => {
-              if (item.id === table.id) {
-                return table;
-              }
-              return item;
-            });
+  //   const cell = {
+  //     name: columnLabel,
+  //     id: columnID,
+  //     type: columnID.split('_')[0],
+  //     value: [value],
+  //   };
+  //   // 组装可能用到的数据
+  //   const cols = [];
+  //   cols[colIndex] = cell;
+  //   const rows = [];
+  //   rows[rowIndex] = cols;
+  //   // 如果已经有数据
+  //   let oldTableData = [];
+  //   // 这里不知道为什么不能直接读取state（tableData）
+  //   setTableData((prevState) => {
+  //     oldTableData = prevState;
+  //     return prevState;
+  //   });
+  //   if (oldTableData && oldTableData.length > 0) {
+  //     let table = oldTableData.find((item) => item.id === tableID);
+  //     // 如果某个表格数据存在
+  //     if (table) {
+  //       const oldRows = table.value;
+  //       // 如果某个表格的行数据存在
+  //       if (oldRows) {
+  //         let odlCols = oldRows[rowIndex];
+  //         // 如果某个表格的某个行数据存在
+  //         if (odlCols) {
+  //           // 记录可编辑控件
+  //           table.value[rowIndex][colIndex] = cell;
+  //           // 不可编辑控件
+  //           table.value[rowIndex] = addUnEditableColumn(
+  //             table.value[rowIndex],
+  //             tableID,
+  //           );
+  //           const newTableData = oldTableData.map((item) => {
+  //             if (item.id === table.id) {
+  //               return table;
+  //             }
+  //             return item;
+  //           });
 
-            setTableData(newTableData);
-          } else {
-            // 如果某个表格的某个行数据不存在
-            // 写入可编辑控件
-            table.value[rowIndex] = cols;
-            // 写入不可编辑控件的值
-            table.value[rowIndex] = addUnEditableColumn(
-              table.value[rowIndex],
-              tableID,
-            );
-            const newTableData = oldTableData.map((item) => {
-              if (item.id === table.id) {
-                return table;
-              }
-              return item;
-            });
-            setTableData([]);
-            setTableData(newTableData);
-          }
-        } else {
-          // 如果某个表格的行数据不存在
-          // 写入可编辑控件
-          table.value = rows;
-          // 写入不可编辑控件
-          table.value[rowIndex] = addUnEditableColumn(
-            table.value[rowIndex],
-            tableID,
-          );
-          const newTableData = oldTableData.map((item) => {
-            if (item.id === table.id) {
-              return table;
-            }
-            return item;
-          });
-          setTableData(newTableData);
-        }
-      } else {
-        // 如果某个table的数据不存在
-        rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
-        const newTableData = [
-          {
-            name: tableLabel,
-            id: tableID,
-            type: tableID.split('_')[0],
-            value: rows,
-          },
-        ];
-        setTableData([...oldTableData, ...newTableData]);
-      }
-    } else {
-      // 如果没有数据
-      // 添加不可编辑控件
-      rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
-      const newTableData = [
-        {
-          name: tableLabel,
-          id: tableID,
-          type: tableID.split('_')[0],
-          value: rows,
-        },
-      ];
-      setTableData(newTableData);
-    }
-  };
+  //           setTableData(newTableData);
+  //         } else {
+  //           // 如果某个表格的某个行数据不存在
+  //           // 写入可编辑控件
+  //           table.value[rowIndex] = cols;
+  //           // 写入不可编辑控件的值
+  //           table.value[rowIndex] = addUnEditableColumn(
+  //             table.value[rowIndex],
+  //             tableID,
+  //           );
+  //           const newTableData = oldTableData.map((item) => {
+  //             if (item.id === table.id) {
+  //               return table;
+  //             }
+  //             return item;
+  //           });
+  //           setTableData([]);
+  //           setTableData(newTableData);
+  //         }
+  //       } else {
+  //         // 如果某个表格的行数据不存在
+  //         // 写入可编辑控件
+  //         table.value = rows;
+  //         // 写入不可编辑控件
+  //         table.value[rowIndex] = addUnEditableColumn(
+  //           table.value[rowIndex],
+  //           tableID,
+  //         );
+  //         const newTableData = oldTableData.map((item) => {
+  //           if (item.id === table.id) {
+  //             return table;
+  //           }
+  //           return item;
+  //         });
+  //         setTableData(newTableData);
+  //       }
+  //     } else {
+  //       // 如果某个table的数据不存在
+  //       rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
+  //       const newTableData = [
+  //         {
+  //           name: tableLabel,
+  //           id: tableID,
+  //           type: tableID.split('_')[0],
+  //           value: rows,
+  //         },
+  //       ];
+  //       setTableData([...oldTableData, ...newTableData]);
+  //     }
+  //   } else {
+  //     // 如果没有数据
+  //     // 添加不可编辑控件
+  //     rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
+  //     const newTableData = [
+  //       {
+  //         name: tableLabel,
+  //         id: tableID,
+  //         type: tableID.split('_')[0],
+  //         value: rows,
+  //       },
+  //     ];
+  //     setTableData(newTableData);
+  //   }
+  // };
 
   const addUnEditableColumn = (rows, tableID) => {
     const { columns: originColumns } = data.formData.find(
@@ -310,7 +312,6 @@ const OaDetail = () => {
             form={form}
             items={data?.formData}
             onValuesChange={advanceSubmit}
-            onTableValChange={handleTableValChange}
           />
         </Col>
         <Col span={12}>

src/pages/Flow/components/AuditDetailed.js

@@ -5,13 +5,7 @@ import { FormulaType } from '@/components/AuditForm/FormulaModal';
 
 const AuditDetailed = (props) => {
   // const [form] = Form.useForm();
-  const {
-    allValues = [],
-    items,
-    form,
-    onValuesChange,
-    onTableValChange,
-  } = props;
+  const { allValues = [], items, form, onValuesChange } = props;
 
   const depId = useMemo(() => {
     const id = items.find((item) => item.componentName == 'DepartmentField')
@@ -20,7 +14,7 @@ const AuditDetailed = (props) => {
     if (value) return value[0];
   }, [allValues, items]);
 
-  console.log(items, allValues);
+  // console.log(items, allValues);
   const data = useMemo(() => {
     let linkedData = {};
     items.forEach((d) => {
@@ -86,7 +80,7 @@ const AuditDetailed = (props) => {
             return formu.label;
           }
         });
-        console.log('-------44444-------------', item, strList);
+        // console.log('-------44444-------------', item, strList);
         const evalStr = strList?.join('');
         content = <DDComponents item={item} evalStr={evalStr} />;
       } else {
@@ -99,18 +93,14 @@ const AuditDetailed = (props) => {
     // if (!component) return null;
     return (
       <>
-        {item?.isTable === undefined ? (
-          <Form.Item
-            key={id}
-            name={id}
-            label={formLabel}
-            rules={[{ required: required }]}
-          >
-            {renderComponents()}
-          </Form.Item>
-        ) : (
-          <DDComponents item={item} onChange={onTableValChange} />
-        )}
+        <Form.Item
+          key={id}
+          name={id}
+          label={formLabel}
+          rules={[{ required: required }]}
+        >
+          {renderComponents()}
+        </Form.Item>
       </>
     );
   };

src/pages/Flow/components/FormAndFilesNode.js

@@ -6,13 +6,17 @@ import AttachmentTable from '@/components/AttachmentTable';
 import InnerContactField from '@/components/DDComponents/InnerContactField';
 import DepartmentField from '@/components/DDComponents/DepartmentField';
 import ProjectField from '@/components/DDComponents/ProjectField';
-import DIYTable from '../../../components/DDComponents/DIYTable';
+import DIYTable from '@/components/DDComponents/DIYTable';
 
 const FormAndFilesNode = (props) => {
   const { formData, fileList } = props;
 
   const renderFormItem = (type, value, item) => {
     switch (type) {
+      case 'DIYTable':
+        return (
+          <DIYTable table={item} columns={item.value} displayOnly={true} />
+        );
       case 'InnerContactField':
         return <InnerContactField value={value} disabled={true} />;
       case 'DepartmentField':
@@ -48,25 +52,15 @@ const FormAndFilesNode = (props) => {
             const value = item.value.join(',');
             return (
               <>
-                {item.type !== 'DIYTable' ? (
-                  <Form.Item
-                    key={`FormAndFilesNode_${idx}`}
-                    labelCol={{ span: 4 }}
-                    wrapperCol={{ span: 14 }}
-                    label={item.name}
-                    labelAlign="left"
-                  >
-                    {renderFormItem(item.type, value, item)}
-                  </Form.Item>
-                ) : (
-                  <div style={{ marginBottom: '24px' }}>
-                    <DIYTable
-                      table={item}
-                      columns={item.value}
-                      displayOnly={true}
-                    ></DIYTable>
-                  </div>
-                )}
+                <Form.Item
+                  key={`FormAndFilesNode_${idx}`}
+                  labelCol={{ span: 4 }}
+                  wrapperCol={{ span: 14 }}
+                  label={item.name}
+                  labelAlign="left"
+                >
+                  {renderFormItem(item.type, value, item)}
+                </Form.Item>
               </>
             );
           })}

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