GovernmentDataResourceCenter/web/client/src/sections/dataQuality/components/fileModal.js

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import moment from 'moment';
import { UploadLocal } from '$components';


import { Tabs, Form, Input, DatePicker, Button, Modal, Select, Tag } from 'antd';


function FileModal ({ loading, parent, user, actions, editData = {}, dispatch, close, success,remove }) {

   const { dataQuality } = actions
   const [tabsKey, setTabsKey] = useState("stay")
   const [query, setQuery] = useState({ page: 0, limit: 10 });
   const [proTableList, setProTableList] = useState({ rows: [], count: 0 });
   const [approve, setApprove] = useState()

   const [form] = Form.useForm();
   const [editUrl, setEditUrl] = useState([]);
   useEffect(() => {

   }, [])



   const vsjunct = (params) => {
      if (params.length) {
         let appendix = []
         for (let p of params) {
            appendix.push({
               fName: p.name,
               size: p.size,
               fileSize: p.size,
               storageUrl: p.storageUrl,//必须有storageUrl
            })
         }
         setEditUrl(appendix)
      } else {
         setEditUrl([])
      }
   }

   return <>
      <Modal title="标准文档上传" open={true} width={600}
         onOk={e => {
            form.validateFields().then(v => {
               dispatch(dataQuality.postStandardDocs({
                  ...v,
                  path: v?.files[0]?.url, docName: v?.files[0]?.name,
                  folder: parent || null,
               })).then(res => {
                  if (res.success) {
                     close()
                     success()
                  }
               })
            })
         }}
         onCancel={() => {
            if (form.getFieldValue('files') && form.getFieldValue('files').length) {
               remove(form.getFieldValue('files')[0]?.url)
            }
            close()
         }}
      >
         <Form
            style={{ marginLeft: 20 }}
            form={form}
            onValuesChange={v => {

            }}
            autoComplete="off"
            labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}
         >
            <Form.Item label="标准类型" name="standardType" rules={[{ required: true, message: '请选择标准类型' }]}>
               <Select style={{ width: 200, }} allowClear
                  options={[{ value: '国家标准', label: '国家标准', }, { value: '行业标准', label: '行业标准', }, { value: '地方标准', label: '地方标准', },]}
               />
            </Form.Item>
            <Form.Item label="标签" name="tags" >
               <Input allowClear placeholder='请输入标签' maxLength={50} style={{ width: 300, marginRight: 16 }} />
            </Form.Item>
            <Form.Item
               label='文件'
               name='files'
               key='files'
               rules={[{ required: true, message: '文件不可为空' }]}>
               <UploadLocal
                  // addNew={editData.add || !editData.record.files.length}
                  isLocal={true}
                  maxFilesNum={1}
                  maxFileSize={40}
                  onChange={vsjunct}
                  fileTypes={["jpg", "png", "gif", "txt", "doc", "docx", "pdf", "xls", "xlsx", "zip", "rar"]}
                  value={editUrl}
               // fileList={editData.record.files || []}
               />
            </Form.Item>
            <Form.Item style={{ marginLeft: 42 }} key='tip'>
               <Tag color="orange">文件大小不超过40MB，开放资源包含多个文件，建议将文件进行压缩，形成压缩包再上传</Tag>
               <Tag color="orange">支持的文件格式：jpg,png,gif,txt,doc,docx,pdf,xsl,xlsx,zip,rar</Tag>
            </Form.Item>
         </Form>
      </Modal >

   </>
}
function mapStateToProps (state) {
   const { global, auth, resourceCatalog } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientHeight: global.clientHeight,
      //  resourceCatalog: resourceCatalog?.data || [],
      //  isRequesting: resourceCatalog.isRequesting
   };
}
export default connect(mapStateToProps)(FileModal)