canrd-main / canrd-erp-front · Files

import {
  postOrderErpTicketsCreate,
  postOrderErpTicketsGetType,
  postOrderErpTicketsUpload,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { enumToSelect } from '@/utils';
import { UploadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProCard,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, Upload, message } from 'antd';
import { UploadFile } from 'antd/es/upload/interface';
import { useEffect, useState } from 'react';

type Ticket = {
  origin?: string;
  detailText?: string;
  type?: string;
  typeText?: string;
  assignPeople?: string;
  status?: string;
  statusText?: string;
  annexUrl?: string;
  annexName?: string;
  resolveTime?: Date;
};

const waitTime = (time = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default ({ toReload }) => {
  const [form] = Form.useForm<Ticket>();
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [assignPeopleOptions, setAssignPeopleOptions] = useState([]);
  const [ticketTypeOptions, setTicketTypeOptions] = useState([]);

  useEffect(() => {
    const fetchTicketTypes = async () => {
      try {
        const res = await postOrderErpTicketsGetType();
        const options = enumToSelect(res.data);
        setTicketTypeOptions(options);
      } catch (error) {
        console.error('Failed to fetch ticket types:', error);
      }
    };

    fetchTicketTypes();
  }, []);

  useEffect(() => {
    const fetchAssignPeopleOptions = async () => {
      try {
        const res = await postServiceOrderQuerySalesCode();
        const options = res.data?.map((item) => ({
          label: item.userName,
          value: item.userName,
        }));
        setAssignPeopleOptions(options || []);
      } catch (error) {
        console.error('Failed to fetch assign people options:', error);
      }
    };

    fetchAssignPeopleOptions();
  }, []);

  async function refresh() {
    setFileList([]);
  }

  const handleUploadChange = async (info) => {
    if (info.file.status === 'uploading' && !info.file.uploaded) {
      info.file.uploaded = true;

      const formData = new FormData();
      formData.append('file', info.file.originFileObj);

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

        if (res.message === '成功') {
          message.success('上传成功');
          const uploadedFile = {
            uid: info.file.uid,
            name: info.file.name,
            url: res.data,
          };
          setFileList([uploadedFile]);

          form.setFieldsValue({
            annexUrl: res.data,
          });
          form.setFieldsValue({
            annexName: info.file.name,
          });
        } else {
          message.error('上传失败');
        }
      } catch (error) {
        message.error('上传错误');
      }
    }
  };

  const uploadProps = {
    onChange: handleUploadChange,
    fileList: fileList,
    onRemove: () => {
      setFileList([]);
      form.setFieldsValue({ annexUrl: null, annexName: null });
    },
  };

  const addForm = async () => {
    let requestBody = {
      origin: form.getFieldValue('origin'),
      type: form.getFieldValue('type'),
      typeText: form.getFieldValue('typeText'),
      detailText: form.getFieldValue('detailText'),
      annexUrl: form.getFieldValue('annexUrl'),
      annexName: form.getFieldValue('annexName'),
      assignPeople: form.getFieldValue('assignPeople'),
    };
    await postOrderErpTicketsCreate({
      data: { ...requestBody },
    });
  };

  const shouldShowUploadButton = fileList.length === 0;

  return (
    <ModalForm
      title="新增"
      width={660}
      form={form}
      trigger={
        <Button onClick={refresh} type="primary">
          新增
        </Button>
      }
      modalProps={{
        okText: '确定',
        cancelText: '取消',
        destroyOnClose: true,
      }}
      onFinish={async () => {
        addForm();
        await waitTime(2000);
        toReload();
        return true;
      }}
    >
      <ProCard split="horizontal" bordered>
        <ProCard>
          <ProCard.Group direction="column">
            <Form.Item label="工单来源">
              <ProFormText
                name="origin"
                placeholder="请输入名称"
                width={200}
                rules={[{ required: true, message: '此项为必填项' }]}
              />
            </Form.Item>

            <Form.Item label="工单类型">
              <ProFormSelect
                name="type"
                placeholder="请选择工单类型"
                options={ticketTypeOptions}
                width={200}
                rules={[{ required: true, message: '此项为必填项' }]}
                onChange={(value) => {
                  const selectedType = ticketTypeOptions.find(
                    (option) => option.value === value,
                  );
                  if (selectedType) {
                    form.setFieldsValue({ typeText: selectedType.label });
                  }
                }}
              />
            </Form.Item>
            <Form.Item label="工单详情">
              <ProFormTextArea name="detailText" placeholder="请输入工单详情" />
            </Form.Item>
            <Form.Item label="附件" name="annexUrl">
              <Upload {...uploadProps}>
                {shouldShowUploadButton && (
                  <Button icon={<UploadOutlined />}>上传附件</Button>
                )}
              </Upload>
            </Form.Item>
            <Form.Item label="指派人员" name="assignPeople">
              <ProFormSelect
                name="assignPeople"
                options={assignPeopleOptions}
                placeholder="请选择指派人员"
                rules={[{ required: true, message: '此项为必填项' }]}
              />
            </Form.Item>
          </ProCard.Group>
        </ProCard>
      </ProCard>
    </ModalForm>
  );
};