✨ feat: 修改采购询价物料导入

src/components/UploadImport/index.less

+.ulStyle {
+  list-style: none;
+  padding-left: 0px;
+  .wranText {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #909399;
+    padding: 6px 0px 6px 70px;
+    span {
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      border-radius: 8px;
+      overflow: hidden;
+      display: inline-block;
+      color: #FFFFFF;
+      background-color: #6198FF;
+      margin-right: 8px;
+    }
+  }
+  .wranText1 {
+    text-align: center;
+    font-size: 14px;
+    color: #303133;
+  }
+  .wranText1:nth-child(2) {
+    color: #909399;
+  }
+}
+.iconParent {
+  text-align: center;
+  padding-top: 24px;
+  .iconStyle {
+    font-size: 45px;
+    color: #00b37a;
+  }
+}
+.footer {
+  margin-top: 66px;
+  padding: 12px 120px;
+  border-top: 1px solid #F4F5F7;
+  button {
+    width: 100%;
+  }
+}
+.firstStepCheck {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFFF;
+}

src/components/UploadImport/index.tsx

+import React, { ReactNode, useState } from 'react';
+import { Modal, Button, Result, Upload, Progress } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, FileExcelFilled } from '@ant-design/icons';
+import style from './index.less';
+import { uploadFileExcel } from '@/services/file';
+
+interface UploadImportProps {
+  /** 标题 */
+  title?: ReactNode,
+  /** 显示隐藏 */
+  visible?: boolean,
+  /** 宽度 */
+  width?: string | number,
+  /** 检查的接口 */
+  checkfetch?: string,
+  /** 导入的接口 */
+  importfetch?: Promise<unknown>,
+  /** 完成导入 */
+  onClose?: (e) => void,
+  /** 成功导入后返回数据 */
+  fetchData?: (e) => void,
+}
+
+const UploadImport: React.FC<UploadImportProps> = (props: any) => {
+  const { visible, title, width, fetchData, checkfetch, importfetch, onClose } = props;
+  const [percent, setPercent] = useState<number>(0);
+  const [step, setStep] = useState<number>(0);
+  const [fileList, setFileList] = useState<any[]>([]);
+  const [exceptionCheck, setExceptionCheck] = useState<boolean>(false)
+
+  /** 第一步: 导入检查 -> 成功 or 失败 */
+  const firstStep = <>
+    <ul className={style.ulStyle}>
+      <li className={style.wranText}><span>1</span>点击下载 EXCEL文件模板 下载</li>
+      <li className={style.wranText}><span>2</span>按照模板整理货品资料</li>
+      <li className={style.wranText}><span>3</span>点击导入按钮，导入整理好的货品资料</li>
+    </ul>
+  </>
+  const firstStepLoading = <>
+    <ul className={style.ulStyle}>
+      <li className={style.wranText1}>正在进行数据导入检查</li>
+      <li className={style.wranText1}>请稍后…</li>
+    </ul>
+  </>
+  const firstStep1 = <>
+    <ul className={style.ulStyle}>
+      <li className={style.wranText1}>无错误格式数据</li>
+      <li className={style.wranText1}>继续导入请按下一步</li>
+    </ul>
+  </>
+  const firstStep2 = <>
+    <ul className={style.ulStyle}>
+      <li className={style.wranText1}>存在错误格式数据，已生成错误日志</li>
+      <li className={style.wranText1}>请导出错误日志修正数据后再次导入</li>
+    </ul>
+  </>
+  const checkbeforeUpload = file => {
+    setFileList([file]);
+    let extension = file.name.split('.')[1];
+    const flag = ['xlsx', 'xls'].includes(extension)
+    return flag;
+  }
+  const checkOnChange = ({ file }) => {
+    setExceptionCheck(true)
+    setPercent(file.percent)
+    if (file.response) {
+      const { code } = file.response;
+      if (code !== 1000) {
+        setStep(2)
+        return
+      }
+      setStep(1)
+      console.log(file, 965)
+    }
+  }
+  const handleNext = () => {
+    console.log(fileList, 98)
+    const formData = new FormData();
+    fileList.forEach(file => {
+      formData.append('file', file);
+    });
+    uploadFileExcel(formData).then(res => {
+      if (res.code !== 1000) {
+        setStep(4)
+        return
+      }
+      fetchData(res.data)
+      setStep(3)
+    })
+  }
+  /** 第二步: 导入 -> 成功 or 失败 */
+  const firstStep3 = <>
+    <ul className={style.ulStyle}>
+      <li className={style.wranText1}>数据全部导入成功</li>
+      <li className={style.wranText1}>继续导入请点击继续导入，导入完成请点击导入完成</li>
+    </ul>
+  </>
+  const firstStep4 = <>
+  <ul className={style.ulStyle}>
+    <li className={style.wranText1}>数据导入失败，存在无法导入的数据</li>
+    <li className={style.wranText1}>已生成错误日志，请导出错误日志修正数据后再次导入</li>
+  </ul>
+</>
+  const continueImport = () => {
+    setStep(0)
+  }
+  return (
+    <Modal
+      title={title}
+      width={width}
+      footer={null}
+      bodyStyle={{ padding: 0, position: 'relative' }}
+      visible={visible}
+    >
+      {step === 0 && (
+        <>
+          <Result
+            style={{ padding: 0 }}
+            icon={<li className={style.iconParent}><FileExcelFilled className={style.iconStyle} /></li>}
+            title={firstStep}
+            extra={
+              <div className={style.footer}>
+                <Upload
+                  action={checkfetch}
+                  showUploadList={false}
+                  beforeUpload={checkbeforeUpload}
+                  onChange={checkOnChange}
+                >
+                  <Button type="primary">导入</Button>
+                </Upload>
+              </div>
+            }
+          />
+          { exceptionCheck && (
+            <div className={style.firstStepCheck}>
+              <Result
+                style={{ padding: 0 }}
+                icon={<Progress
+                  type="circle"
+                  format={percent => `${percent} %`}
+                  width={64}
+                  style={{ paddingTop: '24px' }}
+                  percent={percent}
+                />}
+                title={firstStepLoading}
+              />
+
+            </div>
+          )}
+        </>
+      )}
+      { step === 1 && (
+        <Result
+          icon={<li className={style.iconParent}><CheckCircleOutlined className={style.iconStyle} /></li>}
+          style={{ padding: 0, minHeight: '327px' }}
+          title={firstStep1}
+          extra={<Button type='primary' onClick={handleNext}>下一步</Button>}
+        />
+      )}
+      { step === 2 && (
+        <Result
+          icon={<li className={style.iconParent}><CloseCircleOutlined className={style.iconStyle} /></li>}
+          style={{ padding: 0, minHeight: '327px' }}
+          title={firstStep2}
+          extra={<Button>导出错误日志</Button>}
+        />
+      )}
+      { step === 3 && (
+        <Result
+          icon={<li className={style.iconParent}><CheckCircleOutlined className={style.iconStyle} /></li>}
+          style={{ padding: 0, minHeight: '327px' }}
+          title={firstStep3}
+          extra={
+            <>
+              <Button type='primary' onClick={continueImport}>继续导入</Button>
+              <Button onClick={onClose}>导入完成</Button>
+            </>
+          }
+        />
+      )}
+      { step === 4 && (
+        <Result
+          icon={<li className={style.iconParent}><CloseCircleOutlined className={style.iconStyle} /></li>}
+          style={{ padding: 0, minHeight: '327px' }}
+          title={firstStep4}
+          extra={<Button>导出错误日志</Button>}
+        />
+      )}
+    </Modal>
+  )
+}
+
+UploadImport.defaultProps = {
+  title: 'Modal',
+  width: 400,
+}
+
+UploadImport.displayName = 'UploadImport';
+export default UploadImport;

src/pages/transaction/purchaseAbility/components/detail/components/demandPlanMaterialLayout/index.tsx

@@ -30,7 +30,7 @@ const DemandPlanMaterialLayout: React.FC<IPROPS> = (props: any) => {
       dataIndex: 'number',
       render: (text: any, record: any) => (
         <Space direction='vertical' size={0}>
-          <EyePreview class type='button'>{text}</EyePreview>
+          <Typography.Text>{text}</Typography.Text>
           <Typography.Text>{record.name}</Typography.Text>
         </Space>
       )

src/pages/transaction/purchaseAbility/components/detail/components/purchasePlanMaterialLayout/drawer.tsx

+import React from 'react';
+import { Drawer, Table, Space, Typography } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import moment from 'moment';
+
+interface DrawerLayoutProps {
+  dataSource: any,
+  visible: boolean,
+  onClose: () => void,
+}
+
+const DrawerLayout: React.FC<DrawerLayoutProps> = (props: any) => {
+  const { dataSource, visible, onClose } = props;
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '需求计划编号/摘要',
+      key: 'needPlanNo',
+      dataIndex: 'needPlanNo',
+      render: (text: any, record: any) => (
+        <Space direction='vertical' size={0}>
+          <Typography.Text>{text}</Typography.Text>
+          <Typography.Text>{record.summary}</Typography.Text>
+        </Space>
+      )
+    },
+    {
+      title: '计划开始日期/结束时间',
+      key: 'startTime',
+      dataIndex: 'startTime',
+      render: (text: any, record: any) => (
+        <Space direction='vertical' size={0}>
+          <Typography.Text>{format(text)}</Typography.Text>
+          <Typography.Text>{format(record.endTime)}</Typography.Text>
+        </Space>
+      )
+    },
+    {
+      title: '编制部门',
+      key: 'department',
+      dataIndex: 'department',
+    },
+    {
+      title: '编制人',
+      key: 'userName',
+      dataIndex: 'userName',
+    },
+    {
+      title: '需求数量',
+      key: 'needCount',
+      dataIndex: 'needCount',
+    },
+    {
+      title: '成本价',
+      key: 'costPrice',
+      dataIndex: 'costPrice',
+    },
+    {
+      title: '需求金额',
+      key: 'needPrice',
+      dataIndex: 'needPrice',
+    },
+    {
+      title: '到货日期',
+      key: 'arriveTime',
+      dataIndex: 'arriveTime',
+      render: (text: any) => format(text)
+    },
+  ]
+
+  return (
+    <Drawer
+      title='需求计划明细'
+      placement='right'
+      visible={visible}
+      onClose={onClose}
+      width="72.9%"
+    >
+      <Table
+        rowKey={'id'}
+        columns={columns}
+        dataSource={dataSource}
+      />
+    </Drawer>
+  )
+}
+export default DrawerLayout;

src/pages/transaction/purchaseAbility/components/detail/components/purchasePlanMaterialLayout/index.tsx

-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { StandardTable } from 'god';
 import { Space, Typography, Button } from 'antd';
 import Card from '../../../card';
 import EyePreview from '@/components/EyePreview';
 import { ColumnType } from 'antd/lib/table/interface';
-import moment from 'moment';
+import DrawerLayout from './drawer';
 
 export interface IPROPS {
   id?: number,
@@ -17,11 +17,10 @@ export interface IPROPS {
 }
 
 const PurchasePlanMaterialLayout: React.FC<IPROPS> = (props: any) => {
-  const format = (text) => {
-    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
-  }
   const { id, fetch, layoutTitle, column } = props;
   const currentRef = useRef({});
+  const [visible, setVisible] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any>([]);
 
   const columns: ColumnType<any>[] = [
     {
@@ -76,10 +75,15 @@ const PurchasePlanMaterialLayout: React.FC<IPROPS> = (props: any) => {
       title: '操作',
       key: 'operate',
       dataIndex: 'operate',
-      render: (_t: any) => <Button type='link'>查看需求计划明细</Button>
+      render: (_t: any, record: any) => <Button type='link' onClick={() => handleClick(record)}>查看需求计划明细</Button>
     }
   ];
 
+  const handleClick = (data: any) => {
+    setDataSource(data.purchaseNeedPlanDetailList);
+    setVisible(true);
+  }
+
   const productlist = (params: any) => {
     return new Promise(resolve => {
       fetch({ id, ...params }).then((res: any) => {
@@ -99,6 +103,11 @@ const PurchasePlanMaterialLayout: React.FC<IPROPS> = (props: any) => {
         tableProps={{ rowKey: 'id' }}
         fetchTableData={(params: any) => productlist(params)}
       />
+      <DrawerLayout
+        dataSource={dataSource}
+        visible={visible}
+        onClose={() => setVisible(false)}
+      />
     </Card>
   )
 }

src/pages/transaction/purchaseAbility/demandPlan/demandPlanAdded/add.tsx

@@ -8,6 +8,7 @@ import Material from './components/material';
 import moment from 'moment'
 import { PublicApi } from '@/services/api';
 import { isEmpty } from 'lodash';
+import UploadImport from '@/components/UploadImport';
 
 const { TabPane } = Tabs;
 
@@ -120,8 +121,10 @@ const DemandPlanAddedForm = () => {
           </TabPane>
         </Tabs>
       </Card>
+      <UploadImport
+        width='400px'
+      />
     </PageHeaderWrapper>
-
   )
 }
 

src/pages/transaction/purchaseAbility/demandPlan/detail/index.tsx

@@ -95,7 +95,7 @@ const DemandDetailed = () => {
           memberId: null,
           memberRoleId: null,
           operation: item.operate,
-          position: '',
+          position: item.jobTitle,
           purchaseInquiryId: null,
           roleName: item.operator,
           state: item.step + 1,

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/components/material.tsx

@@ -13,9 +13,8 @@ import { ColumnType } from 'antd/lib/table/interface';
 import { PlusOutlined } from '@ant-design/icons';
 import style from './index.less';
 import DrawerWrite from '../modal/drawerWrite';
-import Import from '../modal/import';
 import { PublicApi } from '@/services/api';
-import UploadModal from '@/components/UploadModal';
+import UploadImport from '@/components/UploadImport';
 
 const layout: any = {
   colon: false,
@@ -212,6 +211,12 @@ const Material: React.FC<Iprops> = (props: any) => {
       setFlag(false);
     }
   }
+  /** 导入列表 */
+  const fetchData = (data: any) => {
+    if (Object.keys(data).length > 0) {
+      setDataSource([...dataSource, ...data]);
+    }
+  }
   useEffect(() => {
     searchCategoryTree('0');
   }, [])
@@ -295,15 +300,13 @@ const Material: React.FC<Iprops> = (props: any) => {
           )}
         {materielMode === 2
           && (
-            <UploadModal
-              visibleModal={flag}
-              fileText='货品资料'
-              onCancel={() => setFlag(false)}
+            <UploadImport
+              visible={flag}
+              title='导入'
+              checkfetch='/api/purchase/purchase/inquiry/import/excel/check'
+              fetchData={fetchData}
+              onClose={() => setFlag(false)}
             />
-            // <Import
-            //   flag={flag}
-            //   onClose={() => setFlag(false)}
-            // />
           )}
       </Form>
     </>

src/pages/transaction/purchaseAbility/purchaseInquiry/submitInquiry/index.tsx

@@ -73,7 +73,7 @@ const SubmitInquiry = () => {
       <>
         <Popconfirm title="确定要审核吗？" okText="是" cancelText="否" onConfirm={() => fetchSubmitBatch(record.id)}>
           <Button type='link'>
-            审核
+            提交
           </Button>
         </Popconfirm>
       </>
@@ -93,9 +93,9 @@ const SubmitInquiry = () => {
           <Col span={6}>
             <Button
               disabled={rowkeys.length === 0}
-              onClick={fetchSubmitBatch}
+              onClick={() => fetchSubmitBatch()}
             >
-              批量提交审核
+              批量提交
             </Button>
           </Col>
         </Row>

src/services/file/API.d.ts

+declare namespace FileAPI {
+}
\ No newline at end of file

src/services/file/index.ts

+import umiRequest from 'umi-request';
+import request from '@/utils/request';
+
+/**
+ * @description 上传文件
+ * @author xjm
+ * @date 2020-06-15
+ * @export
+ */
+export async function uploadFile(params) {
+  return request('/file/upload', {
+    prefix: '/api/file',
+    method: 'post',
+    data: params,
+    headers: {
+      'Content-Type': "application/formData"
+    },
+    ctlType: 'message'
+  })
+}
+
+export async function uploadFileExcel(params) {
+  return umiRequest('/purchase/inquiry/import/excel', {
+    prefix: '/api/purchase',
+    method: 'post',
+    data: params,
+    requestType: 'form'
+  })
+}