AttachmentModal.tsx 2.03 KB
import { getAliYunOSSFileNameFromUrl } from '@/utils';
import { ModalForm, ProFormUploadDragger } from '@ant-design/pro-components';
import { Button, Form } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useState } from 'react';

export default ({ data, onClose }) => {
  let newData = cloneDeep(data);
  const [fileList, setFileList] = useState<[]>([]);
  const [form] = Form.useForm<{
    subOrderId: '';
    listAnnex: [];
  }>();

  let newListAnnex = newData.listAnnex?.map((path) => {
    let i = 0;
    return {
      uid: i++,
      name: getAliYunOSSFileNameFromUrl(path),
      status: 'uploaded',
      url: path,
      response: { data: [path] },
    };
  });
  newData.listAnnex = newListAnnex;
  useEffect(() => {
    setFileList(newData.listAnnex);
  }, []);

  return (
    <ModalForm
      width={500}
      open
      title="查看附件"
      initialValues={newData}
      form={form}
      modalProps={{
        onCancel: onClose,
      }}
      submitter={{
        render: () => {
          return [
            <Button
              key="back"
              onClick={() => {
                onClose();
              }}
            >
              返回
            </Button>,
          ];
        },
      }}
    >
      <ProFormUploadDragger
        name="listAnnex"
        action="/api/service/order/fileProcess"
        disabled
        fieldProps={{
          headers: { Authorization: localStorage.getItem('token') },
          // onRemove: (file) => {
          //   const index = fileList[listMeta.index].indexOf(file);
          //   console.log(index);
          //   const newFileList = fileList.slice();
          //   newFileList.splice(index, 1);
          //   setFileList(newFileList);
          // },
          // beforeUpload: (file) => {
          //   fileList[listMeta.index] = [...fileList[listMeta.index], file as RcFile];
          //   setFileList(fileList);
          //   return true;
          // },
          fileList,
          // defaultFileList: itemFileList
        }}
      />
    </ModalForm>
  );
};