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

import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import RuleModal from '@/components/RuleModal'
import SvgIcon from '@/components/SvgIcon'
import { apiSaveRule } from '@/pages/Safe/Content/List/api'
import { contractStore, tenderStore } from '@/store/mobx'
import { iIncomeTree, iModalBooleanProps } from '@/types/contract'
import { contractTreeBaseId } from '@/utils/common/constStatus'
import consts from '@/utils/consts'
import { SettingOutlined } from '@ant-design/icons'
import { Button, message, Tooltip } from 'antd'
import React, { useMemo, useState } from 'react'
import { apiResfulContract, apiResfulContractTree } from './api'
import ContractModal from './components/Modal'
import TableContent from './components/TableContent'

interface iModal {
  visible: boolean
  loading: boolean
}

export default function Income() {
  const [ modalObj, setModalObj ] = useState<iModalBooleanProps>({
    type: 'create',
    visible: false,
    confirmLoading: false
  })
  const [ row, setRow ] = useState<iIncomeTree>({
    elderBrother: false,
    isEnd: false,
    attribsortution: 0,
    attribution: '',
    bidsectionId: '',
    children: undefined,
    code: '',
    contractCode: '',
    contractId: '',
    contractName: '',
    contractPrice: '',
    contractReturned: '',
    contractStatus: 0,
    contractsPaid: '',
    createTime: '',
    depth: 0,
    id: '',
    name: '',
    operation: '',
    parentId: '',
    projectId: '',
    serial: 0,
    templateNumber: 0
  })
  const [ ruleModal, setRuleModal ] = useState<iModal>({
    visible: false,
    loading: false
  })
  const onCreate = async (values: any, type: any) => {
    setModalObj({
      ...modalObj,
      confirmLoading: true
    })
    const { code = -1 } = await apiResfulContract(type, values)
    if (code === consts.RET_CODE.SUCCESS) {
      // contractStore.updateContract(section)
      contractStore.resetTree(tenderStore.bid)
      if (type === 'return') {
        contractStore.changeUpdate('2')
      }
    }
    setModalObj({
      ...modalObj,
      type: '',
      visible: false,
      confirmLoading: false
    })
  }
  const modalHandler = (type: string) => {
    setModalObj({
      ...modalObj,
      visible: true,
      type
    })
  }
  const treeResfulApiHandler = async (type: string, payload: any) => {
    if (type === 'add') {
      return contractStore.addRowTree(payload.id)
    }
    const { code = -1, section = {} } = await apiResfulContractTree(type, payload)
    if ( code === consts.RET_CODE.SUCCESS) {
      contractStore.resetTree(tenderStore.bid)
      if (type !== 'add' && type !== 'del') {
        setRow({ ...row, ...section })
      }
    }
  }

  const onRuleCreate = async (ruleValue: any) => {
    setRuleModal({ ...ruleModal, loading: true })
    const { code = -1 } = await apiSaveRule({ bidsectionId: tenderStore.bid, type: 'contract_rule', rule: ruleValue })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success("规则更改成功!")
    }
    setRuleModal({ ...ruleModal, loading: false, visible: false })
  }

  // 切换到删除合同弹窗
  const reloadHandler = (type: string) => {
    setModalObj({ ...modalObj, visible: false })
    setTimeout(() => {
      setModalObj({ ...modalObj, visible: true, type })
    }, 300)
  }
  const showCBtn = useMemo(() => {
    return !row.children && !row.contractCode && row.id
  }, [ row ])

  return (
    <div className="wrap-contaniner">
      <Header title="维护项目节：">
        <Slot position="left">
          <div className="pi-flex-row">
            {
              row.id ?
              <>
                <Tooltip title="添加子项">
                  <Button type="text" icon={<SvgIcon type="xxh-plus" style={{ color: '#007bff', fontSize: 12 }}></SvgIcon>} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId })}></Button>
                </Tooltip>
                {
                  !row.children?.length ?
                  <Tooltip title="删除">
                    <Button type="text" icon={<SvgIcon type="xxh-times" style={{ color: '#007bff', fontSize: 12 }}></SvgIcon>} onClick={() => treeResfulApiHandler('del', { id: row.id, bidsectionId: row.bidsectionId })} />
                  </Tooltip>
                  : <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-times" style={{ color: '#9a9a9a', fontSize: 12 }}></SvgIcon></span>
                }
                {
                  row.parentId && row.parentId !== contractTreeBaseId ?
                  <Tooltip title="升级">
                    <Button type="text" icon={<SvgIcon type="xxh-arrow-left" style={{ color: '#007bff', fontSize: 12 }} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upDepth' })}></SvgIcon>}></Button>
                  </Tooltip>
                  :
                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-left" style={{ color: '#9a9a9a', fontSize: 12 }}/></span>
                }
                {
                  row.elderBrother ?
                  <Tooltip title="降级">
                    <Button type="text" icon={<SvgIcon type="xxh-arrow-right" style={{ color: '#007bff', fontSize: 12 }}/>} onClick={() => treeResfulApiHandler('depth', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downDepth' })} ></Button>
                  </Tooltip>
                  :
                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-right" style={{ color: '#9a9a9a', fontSize: 12 }}/></span>
                }
                {
                  row.elderBrother ?
                  <Tooltip title="上移">
                    <Button type="text" icon={<SvgIcon type="xxh-arrow-up" style={{ color: '#007bff', fontSize: 12 }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'upSerial' })}  disabled={!row.elderBrother}></Button>
                  </Tooltip>
                  :
                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-up" style={{ color: '#9a9a9a', fontSize: 12 }}/></span>
                }
                {
                  !row.isEnd ?
                  <Tooltip title="下移">
                    <Button type="text" icon={<SvgIcon type="xxh-arrow-down" style={{ color: '#007bff', fontSize: 12 }}/>} onClick={() => treeResfulApiHandler('serial', { id: row.id, bidsectionId: row.bidsectionId, operation: 'downSerial' })} disabled={row.isEnd}></Button>
                  </Tooltip>
                  :
                  <span className="pi-width-32 pi-height-32 pi-pd-tb-4 pi-flex-row-center"><SvgIcon type="xxh-arrow-down" style={{ color: '#9a9a9a', fontSize: 12 }}/></span>
                }
              </>
              : ''
            }
          </div>
        </Slot>
        <Slot position="right">
          <Button type="ghost" size="small" icon={<SvgIcon type="xxh-cog" />} className="pi-mg-right-3" style={{ color: '#007bff' }} onClick={() => setRuleModal({ ...ruleModal, visible: true })}>设置</Button>
          {
            showCBtn ? <Button type="primary" size="small" onClick={() => setModalObj({ ...modalObj, type: 'create', visible: true })}>新建收入合同</Button>
            : ""
          }
        </Slot>
      </Header>
      <TableContent modalHandler={modalHandler} row={row} setRow={(record: iIncomeTree) => setRow({ ...row, ...record })}></TableContent>
      <RuleModal
        type={consts.RULE.CONTRACT}
        title="合同管理编号设置"
        visible={ruleModal.visible}
        onCreate={onRuleCreate}
        loading={ruleModal.loading}
        onCancel={() => setRuleModal({ ...ruleModal, visible: false })}
      ></RuleModal>
      <ContractModal row={row} modalObj={modalObj} onConfirm={onCreate} onCancel={ () => setModalObj({ ...modalObj, visible: false })} reload={(type) => reloadHandler(type)}></ContractModal>
    </div>
  )
}