WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Approval/BudgetModal.js

import React, { useEffect } from 'react';
import { Form, Modal, InputNumber } from 'antd';
import { connect } from 'dva';

function BudgetModal(props) {
  const { visible, onCancel, onOk, loading, currentItem, dispatch, budget } = props;
  const [form] = Form.useForm();

  useEffect(() => form.resetFields(), [visible]);

  const subTypeList = [
    { name: '建设期项目管理人员', code: '02-010', id: 12 },
    { name: '工程设计人日（含BIM设计）', code: '04-010', id: 13 },
    { name: '设计联络人日', code: '05-010', id: 14 },
    { name: '金科陪客户设计联络/培训人日', code: '05-050', id: 16 },
    { name: '采购和质量控制人日', code: '06-010', id: 17 },
    { name: '双胞胎运营平台实施人日', code: '07-010', id: 18 },
    { name: '预算审核及费控人日', code: '08-010', id: 19 },
    { name: '现场安装/调试/性能测试/试运行人日', code: '10-010', id: 20 },
    { name: '质保期项目经理人日', code: '11-010', id: 21 },
    { name: '质保期服务工程师人日', code: '11-030', id: 22 },
    { name: '运营期项目管理人员', code: '02-030', id: 26 },
    { name: '运营期培训人日', code: '05-070', id: 27 },
    { name: '运营期采购和质量控制人日', code: '06-030', id: 28 },
    { name: '运营期预算审核及费控人日', code: '08-030', id: 29 },
    { name: '质保采购工程师人日', code: '11-050', id: 30 },
    { name: '投资技术服务人日', code: '18-010', id: 31 },
    { name: '运营期技术服务人日', code: '18-030', id: 32 },
  ];

  const handleOk = () => {
    form.validateFields().then(values => {
      console.log(values);
      let params = [];
      let isUpdate = budget?.length !== 0;
      Object.keys(values).forEach(item => {
        let elm = {
          project_id: Number(currentItem?.id),
          type_id: Number(item),
          workload: Number(values[item]),
        };
        if (isUpdate) {
          elm.id = budget?.find(child => child.type_id == item)?.id;
        }
        params.push(elm);
      });
      console.log(params);
      dispatch({
        type: 'approval/setBudget',
        payload: params,
        callback: () => onOk?.(),
      });
    });
  };
  return (
    <Modal
      title="项目预算"
      visible={visible}
      width={800}
      onOk={handleOk}
      onCancel={onCancel}
      confirmLoading={loading}
      destroyOnClose
    >
      <Form form={form} labelCol={{ span: 10 }} wrapperCol={{ span: 10 }}>
        {subTypeList.map(item => (
          <Form.Item
            label={item.name}
            name={item.id}
            initialValue={Number(budget?.find(child => child.type_id === item.id)?.workload) || 0}
          >
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
}

export default connect()(BudgetModal);