management/src/pages/Contract/Content/Income/components/Modal/index.tsx

import Authorization from '@/components/Authorization'
import DatePicker from '@/components/DatePicker'
import { contractReturnStore, tenderStore } from '@/store/mobx'
import { iModalCommonProps } from '@/types/contract'
import consts from '@/utils/consts'
import { dayjsFormat, handleAutoCode } from '@/utils/util'
import { Button, Form, Input, Modal, Select, Tree } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import dayjs from 'dayjs'
import React, { ChangeEvent, useEffect, useState } from 'react'
import { apiGetReturnWay } from '../Tabs/Receivable/api'
import styles from './index.module.scss'
const ContractModal: React.FC<iModalCommonProps> = ({ modalObj: { type, visible, confirmLoading, contractType }, onConfirm, onCancel, reload, row }) => {
  const { Option } = Select
  const [ form ] = Form.useForm()
  const [ options, setOptions ] = useState<string[]>([])
  const modalObj = {
    create: {
      title: '新建合同',
      cancelText: '取消',
      okText: '确认添加'
    },
    update: {
      title: '编辑合同',
      cancelText: '取消',
      okText: '确认'
    },
    close: {
      title: '关闭合同',
      cancelText: '取消',
      okText: '确认关闭'
    },
    del: {
      title: '删除合同',
      cancelText: '取消',
      okText: '确认删除'
    },
    unlock: {
      title: '解锁合同',
      cancelText: '取消',
      okText: '确认解锁'
    },
    return: {
      title: '添加回款',
      cancelText: '关闭',
      okText: '确认'
    }
  }

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ treeId: row.id, bidsectionId: row.bidsectionId })
      if (type === 'update') {
        const { content = '', name = '', price = '', partyA = '', partyB = '', partyASigner = '', partyBSigner = '', signerTime = '', remarks = '' } = contractReturnStore.contract
        form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner, signerTime: signerTime ? dayjs(signerTime) : '', remarks })
      } else if (type === 'return') {
        apiGetReturnWay().then(({ code = -1, data = [] }) => {
          if (code === consts.RET_CODE.SUCCESS) {
            const options = data.map((item: string) => (
              <Option key={item} value={item}>
                {item}
              </Option>
            ))
            setOptions(options)
          }
        })
        form.setFieldsValue({ contractsId: contractReturnStore.contract.id })
      } else {
        form.setFieldsValue({ id: contractReturnStore.contract.id })
      }
    }
  }, [ visible ])
  const autoCode = async () => {
    const ruleArr = await handleAutoCode(tenderStore.tender.bidsectionId, contractType === 'income' ? 'contractReturnRule' : 'contractPaidRule')
    form.setFieldsValue({ code: ruleArr.join('-') })
  }

  // 处理添加回款的金额不应该超出最大值
  const handleReturnPrice = (e: ChangeEvent<HTMLInputElement>) => {
    const maxPrice = parseFloat(contractReturnStore.contract.price) - parseFloat(contractReturnStore.contract.returned)
    if (parseFloat(e.target.value) > maxPrice) {
      form.setFieldsValue({ price: maxPrice })
    }
  }
  return (
    <Modal
      getContainer={false}
      visible={visible}
      title={modalObj[type]?.title}
      onCancel={onCancel}
      footer={
        <div className="pi-justify-end">
          {type === 'update' ? (
            <Authorization type="contract" auth="delete">
              <Button type="primary" key="delete" size="small" danger onClick={() => reload('del')}>
                删除合同
              </Button>
            </Authorization>
          ) : null}
          <Button type="default" size="small" key="cancel" className="pi-btn-secondary" onClick={onCancel}>
            {modalObj[type]?.cancelText}
          </Button>
          <Button
            type="primary"
            size="small"
            key="ok"
            loading={confirmLoading}
            danger={type === 'del'}
            onClick={() => {
              form
                .validateFields()
                .then(values => {
                  form.resetFields()
                  if (type === 'update') {
                    values.signerTime = dayjsFormat(values.signerTime, 'YYYY-MM-DD HH:mm:ss')
                  }
                  if (type === 'del') {
                    delete values.warningText
                  }
                  if (type === 'return') {
                    values.time = dayjsFormat(values.time, 'YYYY-MM-DD HH:mm:ss')
                  }
                  onConfirm(values, type)
                })
                .catch(info => {
                  console.error('Validate Failed:', info)
                })
            }}>
            {modalObj[type]?.okText}
          </Button>
        </div>
      }>
      <Form form={form} layout="vertical" style={type === 'update' ? { maxHeight: '482px', overflowY: 'scroll', paddingRight: 5 } : { overflow: 'hidden' }}>
        <Form.Item name="bidsectionId" hidden>
          <Input />
        </Form.Item>
        {/* <Form.Item name="treeId" label="合同劳务" hidden>
          <Tree showLine={true} treeData={contractReturnStore.tree} />
        </Form.Item> */}
        <Form.Item name="treeId" label="合同劳务" hidden>
          <Input />
        </Form.Item>
        {type === 'create' ? (
          <>
            <Form.Item name="code" label="合同编号" rules={[ { required: true, message: '请输入合同编号' } ]} className={styles.contractFormItem}>
              <Input
                addonAfter={
                  <span className="pi-pd-lr-11" onClick={() => autoCode()}>
                    自动编号
                  </span>
                } />
            </Form.Item>
            <Form.Item name="name" label="合同名称" rules={[ { required: true, message: '请输入合同名称' } ]}>
              <Input placeholder="输入合同名称" />
            </Form.Item>
            {/* <Form.Item name="contractsType" label="合同类型" rules={[ { required: true, message: '请选择合同类型' } ]}>
              <Select showSearch>
                <Option value={1}>支出合同</Option>
                <Option value={2}>收入合同</Option>
              </Select>
            </Form.Item> */}
            <Form.Item name="price" label="合同金额" rules={[ { required: true, message: '请输入合同金额' } ]}>
              <Input type="number" placeholder="输入合同金额" addonAfter={<span>元</span>} />
            </Form.Item>
          </>
        ) : (
          ''
        )}
        {type === 'update' ? (
          <>
            <Form.Item name="content" label="项目内容" rules={[ { required: true, message: '请输入项目内容' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="name" label="合同名称" rules={[ { required: true, message: '请输入项目内容' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="price" label="合同金额" rules={[ { required: true, message: '请输入项目金额' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="partyA" label="甲方" rules={[ { required: true, message: '请输入甲方' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="partyASigner" label="甲方签约人" rules={[ { required: true, message: '请输入甲方签约人' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="partyB" label="乙方" rules={[ { required: true, message: '请输入乙方' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="partyBSigner" label="乙方签约人" rules={[ { required: true, message: '请输入乙方签约人' } ]}>
              <Input />
            </Form.Item>
            <Form.Item name="signerTime" label="合同签约日期" rules={[ { required: true, message: '请选择签约日期' } ]}>
              <DatePicker allowClear locale={locale} className="pi-width-100P" />
            </Form.Item>
            <Form.Item name="remarks" label="备注">
              <Input.TextArea maxLength={100} />
            </Form.Item>
          </>
        ) : (
          ''
        )}
        {type === 'close' ? (
          <>
            <Form.Item name="id" hidden>
              <Input />
            </Form.Item>
            <span>关闭后，合同将锁定，无法进行编辑、上传文件等操作。</span>
          </>
        ) : (
          ''
        )}
        {type === 'unlock' ? (
          <>
            <Form.Item name="id" hidden>
              <Input />
            </Form.Item>
            <span>解锁后，合同将锁定，无法进行编辑、上传文件等操作。</span>
          </>
        ) : (
          ''
        )}
        {type === 'del' ? (
          <>
            <Form.Item name="id" hidden>
              <Input />
            </Form.Item>
            <p className="mb-2">删除后，数据无法恢复，请谨慎操作。</p>
            <p className="mb-2">
              请在下方文本框输入文本「<span className="pi-red">确认删除本合同</span>」，以此确认删除操作。
            </p>
            <Form.Item
              name="warningText"
              rules={[
                () => ({
                  validator(rule, value) {
                    if (!value || value !== '确认删除本合同') {
                      return Promise.reject('请按照提示信息进行删除操作!')
                    }
                    return Promise.resolve()
                  }
                })
              ]}>
              <Input placeholder="输入文本, 确认删除" />
            </Form.Item>
          </>
        ) : (
          ''
        )}
        {type === 'return' ? (
          <>
            <Form.Item name="contractsId" hidden>
              <Input />
            </Form.Item>
            <Form.Item name="time" label="回款日期" rules={[ { required: true, message: '请选择回款日期' } ]}>
              <DatePicker allowClear locale={locale} className="pi-width-100P" />
            </Form.Item>
            <Form.Item name="price" label="回款金额" rules={[ { required: true, message: '请选择回款金额' } ]}>
              <Input onChange={handleReturnPrice}/>
            </Form.Item>
            <Form.Item name="way" label="支付方式" rules={[ { required: true, message: '请选择回款方式' } ]}>
              <Select>{options}</Select>
            </Form.Item>
            <Form.Item name="remarks" label="备注">
              <Input.TextArea maxLength={100} />
            </Form.Item>
          </>
        ) : (
          ''
        )}
      </Form>
    </Modal>
  )
}

export default ContractModal