GtDigManageWeb/src/pages/Cad/components/CreateModal.js

import { advanceSubmitNextNode } from '@/services/boom';
import { CloudUploadOutlined } from '@ant-design/icons';
import { useModel, useRequest } from '@umijs/max';
import {
  Modal,
  Form,
  Input,
  Upload,
  Select,
  Button,
  Steps,
  Row,
  Col,
  Cascader,
} from 'antd';
import { useEffect, useState } from 'react';
import ApprovalProcess from '@/pages/Flow/components/ApprovalProcess';
import { getRandomString } from '@/utils/utils';
//计算审批流数据
const advance = {
  flow_id: 67,
  form_list: null,
  formComponentValues: '',
};
const formItemValues = [
  {
    name: '是否PID图或平面图',
    id: 'DDSelectField_b8169258-d569-442e-a7b0-e2bd171aaac2',
    type: 'DDSelectField',
    value: [],
  },
  // {
  //   name: '图纸审批"',
  //   id: 'TextField_eb5b191b-6135-48ba-a01c-5609ed367d83"',
  //   type: 'TextField',
  //   value: [],
  // },
];

const CreateModal = ({
  loading,
  projectList,
  dirList,
  open,
  onOk,
  handleCancel,
}) => {
  const { userList, run: userListRun } = useModel('userList');
  const [form] = Form.useForm();
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  const [upLoading, setUpLoading] = useState([]);
  const [auditCheck, setAuditCheck] = useState([]);
  const [approvalProcess, setApprovalProcess] = useState([]);
  const pic_type = Form.useWatch('pic_type', form);
  const [cadPath, setCadPath] = useState([]);

  useEffect(() => {
    if (!open) return;
    form.resetFields();
    setCadPath([]);
    setApprovalProcess([]);
    userListRun();
    const params = { ...advance };
    runAuditList(params);
  }, [open]);

  useEffect(() => {
    const formComponentValues = [...formItemValues];
    formComponentValues[0].value = [pic_type];
    runAuditList({ ...advance, formComponentValues });
  }, [pic_type]);

  //填写表单时计算审批流接口
  const { run: runAuditList } = useRequest(
    (data) => advanceSubmitNextNode(data),
    {
      debounceInterval: 500,
      manual: true,
      formatResult(res) {
        setApprovalProcess(res.data[0]);
      },
    },
  );

  const UploadProps = {
    action: `https://cad.greentech.com.cn/sdk/doc/upload`,
    multiple: true,
    data: { path: getRandomString() },
    headers: {
      'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
    },
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        setCadPath([...cadPath, file.response.data.path]);
      }
    },
  };

  const handleOk = () => {
    let audit_list = [];
    let cc_list = [];
    approvalProcess?.forEach((item, index) => {
      let arr = item[0].is_cc === 1 ? cc_list : audit_list;

      if (item[0].type === 'role') arr.push(auditCheck[index]);
      else if (item[0].type === 'leader')
        arr.push(
          ...leaderData.slice(0, item[0].value).map((leader) => leader.ID),
        );
      else arr.push(item.map((cur) => cur.value));
    });

    form.validateFields().then((values) => {
      if (values.project_id)
        values.project_name = projectList.find(
          (item) => item.value == values.project_id,
        )?.label;
      if (values.dir_id) values.dir_name = values.dir_id.join(',');
      values.dir_id = 0;
      if (!values.cad_path) values.cad_path = cadPath.join(',');
      console.log(values, audit_list);
      onOk(values, { audit_list: audit_list.flat(), cc_list: cc_list.flat() });
    });
  };

  return (
    <Modal
      title="新建图纸"
      width={1200}
      open={open}
      confirmLoading={loading}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Row gutter={24}>
        <Col span={16}>
          <Form {...layout} name="basic" form={form}>
            <Form.Item
              name="name"
              label="图纸名称："
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="project_id"
              label="所属项目："
              rules={[{ required: true }]}
            >
              <Select
                showSearch
                allowClear
                options={projectList}
                filterOption={(input, option) =>
                  (option?.label ?? '')
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }
              />
            </Form.Item>
            <Form.Item
              name="dir_id"
              label="归档目录："
              rules={[{ required: true }]}
            >
              <Cascader
                options={dirList}
                fieldNames={{
                  label: 'value',
                  value: 'value',
                  children: 'children',
                }}
              />
            </Form.Item>
            <Form.Item
              name="pic_type"
              label="是否PID图和平面图"
              rules={[{ required: true }]}
            >
              <Select
                options={[
                  {
                    value: '是',
                  },
                  {
                    value: '否',
                  },
                ]}
              />
            </Form.Item>
            <Form.Item
              name="version"
              label="版本："
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="上传：">
              <Upload {...UploadProps}>
                <Button icon={<CloudUploadOutlined />}>Upload</Button>
              </Upload>
              {/* {form.getFieldValue('cad_path')} */}
            </Form.Item>
            <Form.Item name="remark" label="备注：">
              <Input.TextArea />
            </Form.Item>
          </Form>
        </Col>
        <Col span={8}>
          <ApprovalProcess
            leaderData={[]}
            approvalProcess={approvalProcess}
            onChange={setAuditCheck}
          />
        </Col>
      </Row>
    </Modal>
  );
};
export default CreateModal;