GtDigManageWeb/src/pages/ContractManager/component/Modal.jsx

import {
  Form,
  Modal,
  Row,
  Col,
  Input,
  DatePicker,
  Upload,
  Button,
  Divider,
  Steps,
} from 'antd';
import ModuleTitle from '../../../components/ModuleTitle/moduleTitle';
import { CloudUploadOutlined } from '@ant-design/icons';
import moment from 'moment';

const ContractModal = (props) => {
  const Type = {
    add: 0, //新增
    detail: 1, //详情
    cancel: 2, //作废
  };
  const FORMAT = 'YYYY-MM-DD';
  const { title, type, visible, handleOk, handleCancel } = props;
  const [form] = Form.useForm();
  const data = {
    company_name: 'hdhdhdh',
    name: 'kkkk',
    effect_on: moment('2020-02-02'),
    party_a: 'aaaaa',
    party_b: 'bbbbbb',
    party_c: 'ccccc',
    created_dep: 'fffff',
    dep_id: '1111',
    code: '132456',
    amount: '1111111111777',
    project_code: '444444',
    deal_by: 'hhhhh',
    perform: 'dnjfndjfnjdnfjd',
    created_by: '77777',
    created_on: moment().format(FORMAT),
  };

  const UploadProps = {
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
      }
    },
    defaultFileList: [
      {
        uid: '1',
        name: 'xxx.png',
        status: 'uploading',
        url: 'http://www.baidu.com/xxx.png',
        percent: 33,
      },
      {
        uid: '2',
        name: 'yyy.png',
        status: 'done',
        url: 'http://www.baidu.com/yyy.png',
      },
      {
        uid: '3',
        name: 'zzz.png',
        status: 'error',
        response: 'Server Error 500',
        // custom error message to show
        url: 'http://www.baidu.com/zzz.png',
      },
    ],
  };

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      console.log(values);
      let timeObj = {
        effect_on: moment(values.effect_on).format(FORMAT),
        created_on: values.created_on || moment().format(FORMAT),
      };
      handleOk({ ...values, ...timeObj });
    });
  };

  return (
    <Modal
      width={'85%'}
      title={title}
      open={visible}
      okText="提交"
      cancelText="返回"
      onOk={handleSubmit}
      onCancel={handleCancel}
    >
      <Divider />
      <ModuleTitle title="合同信息" />
      <Form
        form={form}
        initialValues={data}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 17 }}
      >
        <Row>
          <Col span={10} offset={1}>
            <Form.Item
              name="company_name"
              label="所属公司："
              tooltip="所属公司"
              rules={[
                {
                  required: true,
                  message: '请填写所属公司',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="name"
              label="合同名称："
              tooltip="合同名称"
              rules={[
                {
                  required: true,
                  message: '请填写合同名称',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="effect_on"
              label="合同生效日期："
              rules={[
                {
                  required: true,
                  message: '请填写合同名称',
                },
              ]}
            >
              <DatePicker />
            </Form.Item>
            <Form.Item
              name="party_a"
              label="甲方："
              rules={[
                {
                  required: true,
                  message: '请选择甲方',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="party_c"
              label="丙方（及其他）："
              rules={[
                {
                  required: true,
                  message: '请选择（支持多选）',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="created_dep"
              label="签约承办部门："
              rules={[
                {
                  required: true,
                  message: '请选择签约承办部门',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item
              name="dep_id"
              label="所属部门："
              rules={[
                {
                  required: true,
                  message: '请选择所属部门',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item name="code" label="合同编号：">
              <Input disabled />
            </Form.Item>

            <Form.Item label="合同总价款：">
              <Row gutter={8}>
                <Col span={12}>
                  <Form.Item
                    style={{ marginBottom: 0 }}
                    name="amount"
                    rules={[
                      {
                        required: true,
                        message: '请输入合同总价款',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <div style={{ lineHeight: '32px' }}>万元</div>
                </Col>
              </Row>
            </Form.Item>

            <Form.Item name="project_code" label="项目编号：">
              <Input disabled />
            </Form.Item>
            <Form.Item
              name="party_b"
              label="乙方："
              rules={[
                {
                  required: true,
                  message: '请选择乙方',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="deal_by"
              label="经办人："
              rules={[
                {
                  required: true,
                  message: '请选择经办人',
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item name="perform" label="合同履行情况：" labelCol={{ span: 4 }}>
          <Input.TextArea />
        </Form.Item>
        <Form.Item label="合同上传：" labelCol={{ span: 4 }}>
          <Upload {...UploadProps}>
            <Button icon={<CloudUploadOutlined />}>Upload</Button>
          </Upload>
        </Form.Item>
        <Row>
          <Col span={10} offset={1}>
            <Form.Item name="created_by" label="创建人：">
              <Input disabled />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item name="created_on" label="创建时间：">
              <Input disabled />
            </Form.Item>
          </Col>
        </Row>
        {type == Type.detail && (
          <>
            <ModuleTitle title="归档流程" />
            <Steps
              current={1}
              items={[
                {
                  title: 'Finished',
                  description,
                },
                {
                  title: 'In Progress',
                  description,
                  subTitle: 'Left 00:00:08',
                },
                {
                  title: 'Waiting',
                  description,
                },
              ]}
            />
          </>
        )}
        {type == Type.cancel && (
          <>
            <ModuleTitle title="作废信息" />
            <Form.Item
              name="cancel_desc"
              label="作废原因："
              labelCol={{ span: 4 }}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="cancel_on"
              label="创建时间："
              labelCol={{ span: 4 }}
            >
              <Input defaultValue={moment(new Date()).format('YYYY-MM-DD')} />
            </Form.Item>
          </>
        )}
      </Form>
      <Divider />
    </Modal>
  );
};
export default ContractModal;