Переглянути джерело

feat: oss附件上传组件,请求数控制优化、以及多文件上传带有额外的附件信息的问题

lanjianrong 4 роки тому
батько
коміт
ca61a48d82

+ 30 - 15
src/components/FileModal/index.tsx

@@ -30,6 +30,7 @@ export default function FileModal(props: iFileModalProps) {
   const { dataId = "", visible = false, onCancel, dataType = 1, showUpload = false, uploadCallBack } = props
   const [ files, setFiles ] = useState<Array<iFileModalState>>([])
   const [ total, setTotal ] = useState<number>(0)
+  const [ fileList, setFileList ] = useState<UploadFile[]>([])
   const [ OSSData, setOssData ] = useState<iOSSData>({
     dir: '',
     expire: '',
@@ -38,6 +39,7 @@ export default function FileModal(props: iFileModalProps) {
     policy: '',
     signature: ''
   })
+  let curFileIndex = 0
   useEffect(() => {
     if (props.visible) {
       initOssData()
@@ -52,30 +54,42 @@ export default function FileModal(props: iFileModalProps) {
       setTotal(total)
     }
   }
+
+  const saveFiles = async (newFileList: iFile[]) => {
+    console.log(newFileList)
+
+    const { code = -1 } = await apiSaveFileInfo(newFileList, consts.DATA_TYPE.RETURN, dataId)
+    if (code === consts.RET_CODE.SUCCESS) {
+      initData()
+      uploadCallBack && uploadCallBack()
+    }
+  }
+
   // 上传文件改变时的状态
-  const onChange = async (info: UploadChangeParam) => {
+  const onChange = (info: UploadChangeParam) => {
     const { status } = info.file
-    if (status !== 'uploading') {
-      // console.log(info.file, info.fileList)
-    }
+    // if (status !== 'uploading') {
+    // }
     if (status === 'done') {
-      // message.success(`${info.file.name} 上传成功`)
-      const newFileList: iFile[] = [
-        {
+      curFileIndex++
+      if (curFileIndex === info.fileList.length) {
+        const newFileList: iFile[] = info.fileList.map(item => ({
           createTime: new Date(),
-          filepath: info.file.url,
-          filename: info.file.name
-        }
-      ]
-      const { code = -1 } = await apiSaveFileInfo(newFileList, consts.DATA_TYPE.RETURN, dataId)
-      if (code === consts.RET_CODE.SUCCESS) {
-        initData()
-        uploadCallBack && uploadCallBack()
+            filepath: item.url,
+            filename: item.name
+        }))
+        saveFiles(newFileList)
+        setFileList([])
+      } else {
+        setFileList(info.fileList)
       }
+
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败`)
     }
   }
+
+
   // 初始化、获取签名
   const initOssData = async () => {
     try {
@@ -175,6 +189,7 @@ export default function FileModal(props: iFileModalProps) {
           <div className="pi-mg-bottom-10">
             <Dragger
               name="file"
+              fileList={fileList}
               action={OSSData.host}
               multiple={true}
               onChange={onChange}

+ 0 - 2
src/pages/Contract/Content/Income/components/Tabs/Detail/index.tsx

@@ -14,8 +14,6 @@ const Detail:React.FC<DetailProps> = (props) => {
   const type_name = type === ContractType.INCOME ? '回款' : '支付'
   const progress = useMemo(() => {
     const i = parseFloat((parseFloat(type === ContractType.INCOME ? contract.returned : contract.paid) / parseFloat(contract.price)).toFixed(2))
-    console.log(i)
-
     const j: number = 1 - i
     const k: number = parseFloat(contract.price) - parseFloat(type === ContractType.INCOME ? contract.returned : contract.paid)
     return { returned: isNaN(i) ? '0%' : i * 100 + '%', unReturned: isNaN(j) ? '100%' : j * 100 + '%', unReturnedMoney: k }

+ 20 - 4
src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -26,15 +26,21 @@ const EditableCell: React.FC<iEditableCellProps> = ({
   ...restProps
 }) => {
 
-  const cellNode = cellType === 'text' ? <Input size="small" allowClear /> : <DatePicker size="small" allowClear locale={locale} />
+  const cellNode = cellType === 'text' ? <Input size="small" allowClear autoComplete="off"/> : <DatePicker size="small" allowClear />
 
+if(editing && dataIndex === 'price') {
+  console.log(record[dataIndex])
+
+}
   const isDate = useMemo(() => {
     return dataIndex === 'createTime' || dataIndex === 'time'
   }, [ dataIndex ])
+
+
   return (
     <td {...restProps}>
       {editing ? (
-        <Form.Item name={dataIndex} initialValue={isDate ? dayjs(record[dataIndex]) : record[dataIndex]} style={{ margin: 0 }} rules={[ dataIndex === 'remarks' ? {} : { required: true, message: `请输入${title}!` } ]}>
+        <Form.Item name={dataIndex} style={{ margin: 0 }} rules={[ dataIndex === 'remarks' ? {} : { required: true, message: `请输入${title}!` } ]}>
           {cellNode}
         </Form.Item>
       ) : (
@@ -102,7 +108,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
             ...row
           })
           setData(newData)
-          updateTreeAndContract()
+          await updateTreeAndContract()
         }
       }
       setEditingKey('')
@@ -182,7 +188,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
               editable ?
                 (<><span className="pi-link-blue pi-mg-right-5" onClick={() => save(record.id)}>保存</span><span className="pi-link-blue" onClick={() => setEditingKey('')}>取消</span></>)
                 :
-                <span className="pi-link-blue" onClick={() => setEditingKey(record.id)}>编辑</span>
+                <span className="pi-link-blue" onClick={() => handleRowEdit(record.id)}>编辑</span>
             }
             <Popconfirm title="确认删除?" cancelText="取消" okText="确认" okButtonProps={{ danger: true }} onConfirm={() => delConfirm(record.id, record.contractsId, record.bidsectionId)}>
               <span className="pi-link-red pi-mg-left-5">删除</span>
@@ -193,6 +199,16 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
     }
   ]
 
+  const handleRowEdit = (id: string) => {
+    const formItem = data.find(item => item.id === id)
+    if (formItem) {
+      const newFormItem = { ...formItem, createTime: dayjs(formItem.createTime), time: dayjs(formItem.time) }
+      form.setFieldsValue(newFormItem)
+      setEditingKey(id)
+
+    }
+  }
+
   const cancel = () => {
     setEditingKey('')
   }