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

import DatePicker from '@/components/DatePicker'
import { apiAutoCode } from '@/pages/Safe/Content/List/api'
import { contractStore, tenderStore } from '@/store/mobx'
import { iModalCommonProps } from '@/types/contract'
import consts from '@/utils/consts'
import { dayjsFormat } from '@/utils/util'
import { Button, Form, Input, Modal, Select } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import React, { 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 }, 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="" } = contractStore.contract
        form.setFieldsValue({ content, name, price, partyA, partyB, partyASigner, partyBSigner })
      } 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: contractStore.contract.id })
      } else {
        form.setFieldsValue({ id: contractStore.contract.id })
      }
    }
  }, [ visible ])
  const autoCodeHandler = async () => {
    const { code = -1, data = "" } = await apiAutoCode(tenderStore.tender.bidsectionId, 'contractRule')
    if (code === consts.RET_CODE.SUCCESS) {
      if (data) {
        const ruleArr: string[] = []
        const code = JSON.parse(data)
        for (const key in code) {
          if (Object.prototype.hasOwnProperty.call(code, key)) {
            const element = code[key]
            if (element) {
              ruleArr.push(element)
            }
          }
        }
        form.setFieldsValue({ code: ruleArr.join("-") })
      }
    }
  }
  return (
    <Modal
      getContainer={false}
      visible={visible}
      title={modalObj[type]?.title}
      onCancel={onCancel}
      footer={<div className="pi-justify-end">
        {type === 'update' ? <Button type="primary" key="delete" size="small" danger onClick={() => reload('del')}>删除合同</Button> : ''}
        <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></Input>
        </Form.Item>
        <Form.Item name="treeId" label="合同劳务" hidden>
          <Input></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={() => autoCodeHandler()}>自动编号</span>}></Input>
            </Form.Item>
            <Form.Item name="name" label="合同名称" rules={[ { required: true, message: '请输入合同名称' } ]}>
              <Input placeholder="输入合同名称"></Input>
            </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 placeholder="输入合同金额" addonAfter={<span>元</span>}></Input>
            </Form.Item>
          </>
          ) : ''
        }
        {
          type === 'update' ? (
            <>
              <Form.Item name="content" label="项目内容" rules={[ { required: true, message: '请输入项目内容' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="name" label="合同名称" rules={[ { required: true, message: '请输入项目内容' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="price" label="合同金额" rules={[ { required: true, message: '请输入项目金额' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="partyA" label="甲方" rules={[ { required: true, message: '请输入甲方' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="partyASigner" label="甲方签约人" rules={[ { required: true, message: '请输入甲方签约人' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="partyB" label="乙方" rules={[ { required: true, message: '请输入乙方' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="partyBSigner" label="乙方签约人" rules={[ { required: true, message: '请输入乙方签约人' } ]}>
                <Input></Input>
              </Form.Item>
              <Form.Item name="signerTime" label="合同签约日期" rules={[ { required: true, message: '请选择签约日期' } ]}>
                <DatePicker allowClear locale={locale} className="pi-width-100P"></DatePicker>
              </Form.Item>
              <Form.Item name="remarks" label="备注">
                <Input.TextArea maxLength={100}></Input.TextArea >
              </Form.Item>
            </>
          ) : ''
        }
        {
          type === 'close' ? (
            <>
              <Form.Item name="id" hidden><Input></Input></Form.Item>
              <span>关闭后，合同将锁定，无法进行编辑、上传文件等操作。</span>
            </>
          ) : ''
        }
        {
          type === 'unlock' ? (
            <>
              <Form.Item name="id" hidden><Input></Input></Form.Item>
              <span>解锁后，合同将锁定，无法进行编辑、上传文件等操作。</span>
            </>
          ) : ''
        }
        {
          type === "del" ? (
            <>
              <Form.Item name="id" hidden><Input></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="输入文本, 确认删除"></Input>
              </Form.Item>
            </>
          ) : ''
        }
        {
          type === 'return' ?
          <>
            <Form.Item name="contractsId" hidden><Input></Input></Form.Item>
            <Form.Item name="time" label="回款日期" rules={[ { required: true, message: '请选择回款日期' } ]}>
              <DatePicker allowClear locale={locale} className="pi-width-100P"></DatePicker>
            </Form.Item>
            <Form.Item name="price" label="回款金额" rules={[ { required: true, message: '请选择回款金额' } ]}>
              <Input></Input>
            </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}></Input.TextArea >
            </Form.Item>
          </>
          : ''
        }
      </Form>
    </Modal>
  )
}

export default ContractModal