fix: 合同回款-附件弹窗提供一个callback解决数据实时更新的问题

src/components/FileModal/index.tsx

@@ -17,6 +17,7 @@ interface iFileModalProps {
   dataType: number
   onCancel: () => void
   showUpload?: boolean
+  uploadCallBack?: () => void
 }
 interface iFileModalState {
   id: string
@@ -26,7 +27,7 @@ interface iFileModalState {
   createTime: string
 }
 export default function FileModal(props: iFileModalProps) {
-  const { dataId = "", visible = false, onCancel, dataType = 1, showUpload = false } = props
+  const { dataId = "", visible = false, onCancel, dataType = 1, showUpload = false, uploadCallBack } = props
   const [ files, setFiles ] = useState<Array<iFileModalState>>([])
   const [ total, setTotal ] = useState<number>(0)
   const [ OSSData, setOssData ] = useState<iOSSData>({
@@ -69,6 +70,7 @@ export default function FileModal(props: iFileModalProps) {
       const { code = -1 } = await apiSaveFileInfo(newFileList, consts.DATA_TYPE.RETURN, dataId)
       if (code === consts.RET_CODE.SUCCESS) {
         initData()
+        uploadCallBack && uploadCallBack()
       }
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败!`)
@@ -121,6 +123,8 @@ export default function FileModal(props: iFileModalProps) {
 
   // 移除文件
   const onRemove = (file: any) => {
+    console.log(file)
+
   }
   const columns: ColumnsType<iFileModalState> = [
     {

src/components/OssUpload/index.tsx

@@ -41,10 +41,10 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
       // console.log(info.file, info.fileList)
     }
     if (status === 'done') {
-      const newFileList = [ ...fileList, ...info.fileList ]
+      const newFileList = [ ...fileList, info.file ]
       // newFileList.push(info.file)
       setFileList(newFileList)
-      const newFiles = [ ...files, ...info.fileList.map(item => ({ createTime: new Date(), filepath: item.url,filename: item.name })) ]
+      const newFiles = [ ...files, { createTime: new Date(), filepath: info.file.url,filename: info.file.name } ]
       setFiles(newFiles)
     } else if (status === 'error') {
       message.error(`${info.file.name} 上传失败!`)
@@ -102,7 +102,11 @@ const UploadModal:React.FC<iUploadModalProps> = (props) => {
 
   // 移除文件
   const onRemove = (file: any) => {
-    (file)
+    const { uid = '', name = '' } = file
+    const newFiles = files.filter(item => item.filename !== name)
+    const newFileList = fileList.filter(item => item.uid !== uid)
+    setFileList(newFileList)
+    setFiles(newFiles)
   }
   return (
     <Modal

src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -233,6 +233,7 @@ const Receivable: React.FC<{}> = () => {
         dataId={fileModal.dataId}
         onCancel={() => setFileModal({ ...fileModal, visible: false })}
         showUpload={true}
+        uploadCallBack={() => initData()}
       />
     </>
   )

src/pages/Contract/Content/Spending/components/Tabs/Receivable/index.tsx

@@ -25,7 +25,7 @@ const EditableCell: React.FC<iEditableCellProps> = ({
 }) => {
   // console.log(dataIndex, record)
 
-  const cellNode = cellType === 'text' ? <Input size="small" allowClear/> : <DatePicker size="small" allowClear locale={locale} />
+  const cellNode = cellType === 'text' ? <Input size="small" allowClear /> : <DatePicker size="small" allowClear locale={locale} />
 
   const isDate = useMemo(() => {
     return dataIndex === 'createTime' || dataIndex === 'time'
@@ -37,14 +37,14 @@ const EditableCell: React.FC<iEditableCellProps> = ({
           {cellNode}
         </Form.Item>
       ) : (
-        children
-      )}
+          children
+        )}
     </td>
   )
 }
 
 
-const Receivable:React.FC<{}> = () => {
+const Receivable: React.FC<{}> = () => {
   const [ form ] = Form.useForm()
   const [ data, setData ] = useState<Array<iReceivableState>>([])
   const [ id, setId ] = useState<string>('')
@@ -74,11 +74,11 @@ const Receivable:React.FC<{}> = () => {
       contractPaidStore.shouldUpdate && (contractPaidStore.changeUpdate(''))
     }
   }, [ contractPaidStore.contract.id, contractPaidStore.shouldUpdate ])
-  const initData = async() => {
+  const initData = async () => {
     const { code = -1, data = [] } = await apiGetPaids(contractPaidStore.contract.id, contractPaidStore.contract.bidsectionId)
-      if (code === consts.RET_CODE.SUCCESS) {
-        setData(data)
-      }
+    if (code === consts.RET_CODE.SUCCESS) {
+      setData(data)
+    }
   }
   const save = async (key: React.Key) => {
     try {
@@ -170,17 +170,17 @@ const Receivable:React.FC<{}> = () => {
       render: (text: any, record: iReceivableState) => {
         const editable = isEditing(record)
         return (
-        <div>
-          {
-            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>
-          }
-          <Popconfirm title="确认删除?" cancelText="取消" okText="确认" onConfirm={() => delConfirm(record.id, record.contractsId, record.bidsectionId)}>
-            <span className="pi-link-red pi-mg-left-5">删除</span>
-          </Popconfirm>
-        </div>
+          <div>
+            {
+              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>
+            }
+            <Popconfirm title="确认删除?" cancelText="取消" okText="确认" onConfirm={() => delConfirm(record.id, record.contractsId, record.bidsectionId)}>
+              <span className="pi-link-red pi-mg-left-5">删除</span>
+            </Popconfirm>
+          </div>
         )
       }
     }
@@ -216,9 +216,9 @@ const Receivable:React.FC<{}> = () => {
           columns={mergedColumns}
           bordered
           rowClassName="editable-row"
-          pagination={{ onChange: cancel, size:"small", pageSize: 7 }}
+          pagination={{ onChange: cancel, size: "small", pageSize: 7 }}
           rowKey={record => record.id}
-           />
+        />
       </Form>
       <FileModal
         visible={fileModal.visible}
@@ -226,7 +226,8 @@ const Receivable:React.FC<{}> = () => {
         dataId={fileModal.dataId}
         onCancel={() => setFileModal({ ...fileModal, visible: false })}
         showUpload={true}
-       />
+        uploadCallBack={() => initData()}
+      />
     </>
   )
 }