AttachmentModal.tsx 2.19 KB
import { getAliYunOSSFileNameFromUrl } from '@/utils';
import { ModalForm, ProFormUploadDragger } from '@ant-design/pro-components';
import { Button, Empty, 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>,
          ];
        },
      }}
    >
      {newListAnnex?.length <= 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : (
        <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>
  );
};