canrd-main / canrd-erp-front · Files

import {
  getOrderErpTicketsDetail,
  postOrderErpTicketsGetType,
  postOrderErpTicketsUpdate,
  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, Space, Upload, message } from 'antd';
import { UploadFile } from 'antd/es/upload/interface';
import { useEffect, useState } from 'react';
import SolveBtnModal from './solveBtnModal';

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

export default ({ id, toReload }) => {
  const [form] = Form.useForm();
  const [isEditMode, setIsEditMode] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [status, setStatus] = useState('');
  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() {
    setIsEditMode(false);
    setIsProcessing(false);

    const res = await getOrderErpTicketsDetail({
      query: {
        id: id,
      },
    });

    const ticketData = res.data;
    form.setFieldsValue(ticketData);
    setStatus(ticketData.status);
    setFileList(
      ticketData.annexUrl
        ? [
            {
              uid: ticketData.annexUrl,
              name: ticketData.annexName,
              url: ticketData.annexUrl,
            },
          ]
        : [],
    );
  }

  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 updateForm = async () => {
    let requestBody = {
      id: form.getFieldValue('id'),
      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 postOrderErpTicketsUpdate({
      data: { ...requestBody },
    });
    toReload();
  };

  const shouldShowUploadButton = fileList.length === 0;

  return (
    <ModalForm
      title="查看"
      width={660}
      form={form}
      trigger={<a onClick={refresh}>查看</a>}
      modalProps={{
        okText: '确定',
        cancelText: '取消',
        destroyOnClose: true,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [
            defaultDoms[0],
            <Space key="buttons">
              {!isEditMode && !isProcessing && (
                <Button
                  type="primary"
                  onClick={() => setIsEditMode(true)}
                  disabled={status === 'SOLVED'}
                >
                  编辑
                </Button>
              )}
              {!isEditMode && !isProcessing && (
                <SolveBtnModal
                  id={id}
                  reload={toReload}
                  show={status === 'SOLVED'}
                  solved={refresh}
                />
              )}
              {(isEditMode || isProcessing) && (
                <Button
                  type="primary"
                  onClick={async () => {
                    form.submit();
                    setIsEditMode(false);
                    setIsProcessing(false);
                    updateForm();
                    await waitTime(2000);
                  }}
                >
                  确认
                </Button>
              )}
            </Space>,
          ];
        },
      }}
      onFinish={async () => {
        return true;
      }}
    >
      <ProCard split="horizontal" bordered headerBordered>
        <ProCard>
          <ProCard.Group split="vertical">
            <ProCard>
              <Form.Item label="创建人">
                <ProFormText
                  name="createByName"
                  placeholder="请输入名称"
                  width={200}
                  readonly
                />
              </Form.Item>
            </ProCard>
            <ProCard>
              <Form.Item label="创建时间">
                <ProFormText
                  name="createTime"
                  placeholder="请输入名称"
                  width={200}
                  readonly
                />
              </Form.Item>
            </ProCard>
          </ProCard.Group>
        </ProCard>
        <ProCard>
          <ProCard.Group split="horizontal" direction="column">
            <ProCard>
              <Form.Item label="工单来源">
                <ProFormText
                  name="origin"
                  placeholder="请输入名称"
                  width={200}
                  readonly={!isEditMode}
                />
              </Form.Item>
            </ProCard>
            <ProCard>
              <Form.Item label="工单类型">
                {isEditMode ? (
                  <ProFormSelect
                    name="type"
                    placeholder="请选择工单类型"
                    options={ticketTypeOptions}
                    width={200}
                    onChange={(value) => {
                      const selectedType = ticketTypeOptions.find(
                        (option) => option.value === value,
                      );
                      if (selectedType) {
                        form.setFieldsValue({ typeText: selectedType.label });
                      }
                    }}
                  />
                ) : (
                  <ProFormText
                    name="typeText"
                    placeholder="请输入工单类型"
                    width={200}
                    readonly
                  />
                )}
              </Form.Item>
            </ProCard>
            <ProCard>
              <Form.Item label="工单详情">
                <ProFormTextArea
                  name="detailText"
                  placeholder="请输入工单详情"
                  readonly={!isEditMode}
                />
              </Form.Item>
            </ProCard>
            <ProCard>
              <Form.Item label="附件" name="annexUrl">
                {isEditMode ? (
                  <Upload {...uploadProps}>
                    {shouldShowUploadButton && (
                      <Button icon={<UploadOutlined />}>上传附件</Button>
                    )}
                  </Upload>
                ) : form.getFieldValue('annexUrl') ? (
                  <a
                    href={form.getFieldValue('annexUrl')}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {form.getFieldValue('annexName') || '附件'}
                  </a>
                ) : (
                  <span>无附件</span>
                )}
              </Form.Item>
            </ProCard>
            <ProCard>
              <Form.Item label="指派人员" name="assignPeople">
                {isEditMode ? (
                  <ProFormSelect
                    name="assignPeople"
                    options={assignPeopleOptions}
                    placeholder="请选择指派人员"
                  />
                ) : (
                  <ProFormText
                    name="assignPeople"
                    placeholder="请输入指派人员"
                    readonly
                  />
                )}
              </Form.Item>
            </ProCard>
          </ProCard.Group>
        </ProCard>
        <ProCard>
          <ProCard.Group split="horizontal">
            <ProCard>
              <Form.Item label="工单状态">
                <span>{status === 'SOLVED' ? '已处理' : '待处理'}</span>
              </Form.Item>
            </ProCard>
            {status === 'SOLVED' && (
              <>
                <ProCard>
                  <Form.Item label="处理结果">
                    <ProFormText
                      name="result"
                      placeholder="请输入处理结果"
                      width={200}
                      readonly
                    />
                  </Form.Item>
                </ProCard>
                <ProCard>
                  <Form.Item label="附件">
                    {form.getFieldValue('resultAnnexUrl') ? (
                      <a
                        href={form.getFieldValue('resultAnnexUrl')}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {form.getFieldValue('resultAnnexName') || '附件'}
                      </a>
                    ) : (
                      <span>无附件</span>
                    )}
                  </Form.Item>
                </ProCard>
              </>
            )}
          </ProCard.Group>
        </ProCard>
      </ProCard>
    </ModalForm>
  );
};