Blame view

src/pages/Order/components/AttachmentModal.tsx 4.53 KB
zhongnanhuang authored
1
2
3
4
import { getAliYunOSSFileNameFromUrl, isImageName } from '@/utils';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Card, Divider, Empty, Form, Image, List, message } from 'antd';
import Base64 from 'base-64';
zhongnanhuang authored
5
import { cloneDeep } from 'lodash';
zhongnanhuang authored
6
import React, { useEffect, useState } from 'react';
zhongnanhuang authored
7
8
9
10

export default ({ data, onClose }) => {
  let newData = cloneDeep(data);
  const [fileList, setFileList] = useState<[]>([]);
zhongnanhuang authored
11
  console.log(fileList);
zhongnanhuang authored
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  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;
zhongnanhuang authored
28
29
30
31
32
33
34
35
36
37
38
39

  //将图片和其他文件区分开
  let images: any[] = [];
  let otherAnnex: any[] = [];
  newListAnnex.forEach((item: any) => {
    if (isImageName(item.name)) {
      images.push(item);
    } else {
      otherAnnex.push(item);
    }
  });
zhongnanhuang authored
40
41
42
43
44
45
  useEffect(() => {
    setFileList(newData.listAnnex);
  }, []);

  return (
    <ModalForm
zhongnanhuang authored
46
      width={800}
zhongnanhuang authored
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
      open
      title="查看附件"
      initialValues={newData}
      form={form}
      modalProps={{
        onCancel: onClose,
      }}
      submitter={{
        render: () => {
          return [
            <Button
              key="back"
              onClick={() => {
                onClose();
              }}
            >
              返回
            </Button>,
          ];
        },
      }}
    >
zhongnanhuang authored
69
70
71
      {newListAnnex?.length <= 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : (
zhongnanhuang authored
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
        // <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
        //   }}
        // />
        <>
          <Card>
            <Image.PreviewGroup
              className="mr-10"
              preview={{
                onChange: (current, prev) =>
                  console.log(`current index: ${current}, prev index: ${prev}`),
              }}
            >
              {images.map((item, index) => (
                <React.Fragment key={index}>
                  <Image
                    className="max-h-[200px] max-w-[200px]"
                    src={item.url}
                    title={item.name}
                  />{' '}
                  <Divider type="vertical" />
                </React.Fragment>
              ))}
            </Image.PreviewGroup>
          </Card>
          <Divider />

          <div>
            <List
              size="small"
              header={<div>其他类型文件</div>}
              bordered
              dataSource={otherAnnex}
              renderItem={(item) => (
                <List.Item
                  actions={[
                    <Button
                      type="link"
                      key="key"
                      href={item.url}
                      className="py-1"
                    >
                      下载
                    </Button>,
                    <Button
                      type="link"
                      key="key"
                      className="py-1"
                      onClick={() => {
                        message.info(item.url);
                        window.open(
                          '/previewApi/onlinePreview?url=' +
                            encodeURIComponent(Base64.encode(item.url)),
                        );
                      }}
                    >
                      预览
                    </Button>,
                  ]}
                >
                  <div>
                    <span>{item.name}</span>
                  </div>
                </List.Item>
              )}
            />
          </div>
        </>
zhongnanhuang authored
158
      )}
zhongnanhuang authored
159
160
161
    </ModalForm>
  );
};