Blame view

src/pages/Tickets/components/solveBtnModal.tsx 3.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  postOrderErpTicketsUpdate,
  postOrderErpTicketsUpload,
} from '@/services';
import { UploadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProCard,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, Space, Upload, message } from 'antd';
import type { RcFile, UploadProps } from 'antd/es/upload';
import { useState } from 'react';

const waitTime = (time = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
23
export default ({ id, reload, show, solved }) => {
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
  const [form] = Form.useForm<{ result: string }>();
  const [fileList, setFileList] = useState<file[]>([]);

  type file = {
    uid: number;
    name: string;
    url: string;
  };

  const handleUploadChange = async (value) => {
    setFileList(value.fileList);

    if (value.fileList.length && value.fileList[0].status === 'uploading') {
      if (value.fileList[0].originFileObj instanceof File) {
        const formData = new FormData();
        formData.append('file', value.fileList[0].originFileObj as RcFile);

        const res = await postOrderErpTicketsUpload({
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        if (res.message === '成功') {
          message.success('上传成功');
          setFileList([
            {
              uid: value.fileList[0].originFileObj.uid,
              name: value.fileList[0].originFileObj.name,
              url: res.data,
            },
          ]);
        }
      }
    }
  };

  const uploadProps: UploadProps = {
    onChange: handleUploadChange,
    fileList: fileList.filter((item) => item.url),
  };

  const shouldShowUploadButton = fileList.length !== 1 || !fileList[0].url;

  return (
    <Space>
      <ModalForm<{ result: string }>
        title="处理工单"
        width={660}
        form={form}
75
        trigger={<Button disabled={show}>处理</Button>}
76
77
78
79
80
81
82
83
84
85
86
87
88
        modalProps={{
          okText: '确定',
          cancelText: '取消',
          destroyOnClose: true,
        }}
        onFinish={async (values) => {
          let ticketRequest = {};
          ticketRequest.id = id;
          ticketRequest.status = 'SOLVED';
          if (values.result) {
            ticketRequest.result = values.result;
          }
          if (fileList.length !== 0) {
89
90
            ticketRequest.resultAnnexUrl = fileList[0].url;
            ticketRequest.resultAnnexName = fileList[0].name;
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
          }
          let res = postOrderErpTicketsUpdate({
            data: {
              ...ticketRequest,
            },
          });
          if (res.message === '成功') {
            message.success('操作成功');
          }
          await waitTime(2000);
          setFileList([]);
          reload();
          solved();
          return true;
        }}
      >
        <ProCard bordered>
          <Form.Item label="处理结果">
            <ProFormTextArea name="result" />
          </Form.Item>
          <Form.Item label="附件">
            <Upload {...uploadProps}>
              {shouldShowUploadButton && (
                <Button icon={<UploadOutlined />}>上传附件</Button>
              )}
            </Upload>
          </Form.Item>
        </ProCard>
      </ModalForm>
    </Space>
  );
};