refactor: 支出合同套用收入合同的table组件

src/pages/Contract/Content/Income/api.ts

@@ -38,7 +38,7 @@ export async function apiResfulContractTree(type: string, payload: object, contr
  * @param id - 项目节id
  * @param bidsectionId - 标段id
  */
-export async function apiGetIncome(id: string, bidsectionId: string, contractType: 'income' | 'expenditure') {
+export async function apiGetContractWithDetail(id: string, bidsectionId: string, contractType: 'income' | 'expenditure') {
   const { data } = await request.get(`/api/contract/${contractType}`, { id, bidsectionId })
   return data
 }

src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -2,6 +2,7 @@ import Authorization from '@/components/Authorization'
 import { ZhSubmitButton } from '@/components/Button'
 import OssUploadModal from '@/components/OssUpload'
 import { contractPaidStore, contractReturnStore, tenderStore } from '@/store/mobx'
+import { ContractType } from '@/store/mobx/contractReturn'
 import { ContractTree, iShowTemplateState, iTemplateState } from '@/types/contract'
 import { iFile } from '@/types/file'
 import { apiSaveFileInfo } from '@/utils/common/api'
@@ -14,7 +15,7 @@ import { RadioChangeEvent } from 'antd/lib/radio'
 import { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
-import { apiGetIncome, apiUpdateContractName, apiUpdateSerial } from '../../api'
+import { apiGetContractWithDetail, apiUpdateContractName, apiUpdateSerial } from '../../api'
 import { apiContractTree, apiSetTemplate } from '../Modal/api'
 import Detail from '../Tabs/Detail'
 import File from '../Tabs/File'
@@ -35,12 +36,6 @@ interface iTableContentPorps {
   type: 'income' | 'expenditure'
 }
 
-interface HandleLabelProps {
-  id: string
-  bidsectionId: string
-  name?: string
-}
-
 const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, history, type }) => {
 
   const [ sectionTemplate, setSectionTemplate ] = useState<iShowTemplateState>({
@@ -96,7 +91,8 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
           template2: data.sectionTemplate2
         })
       } else {
-        contractReturnStore.updateTree(data.sectionTree.children)
+        type === 'income' && (contractReturnStore.updateTree(data.sectionTree.children))
+        type === 'expenditure' && (contractPaidStore.updateTree(data.sectionTree.children))
       }
     }
     // 初始化时如果id存在说明只是table更新了，那么要将store里面的合同数据也一起更新，防止合同详情不是最新的数据
@@ -149,22 +145,6 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       dataIndex: 'name',
       width: '20%',
       editable: true
-      // render: (text: any, record: iIncomeTree) => {
-      //   if (record.isEdit || record.isNew) {
-      //     const type = record.isEdit ? 'edit' : 'create'
-      //     return (
-      //       <Input
-      //         defaultValue={record.name}
-      //         size="small"
-      //         type="text"
-      //         ref={inputEl}
-      //         onPressEnter={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
-      //         onBlur={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
-      //       />)
-      //   } else {
-      //     return <span>{text}</span>
-      //   }
-      // }
     },
     {
       title: '合同名称',
@@ -215,7 +195,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       })
       return message.error('请选择项目节模板')
     }
-    const { code = -1 } = await apiSetTemplate(sectionTemplate.template, tenderStore.tender.bidsectionId, 0)
+    const { code = -1 } = await apiSetTemplate(sectionTemplate.template, tenderStore.tender.bidsectionId, type === 'income' ? 0 : 1)
     if (code === consts.RET_CODE.SUCCESS) {
       await initData()
     }
@@ -251,7 +231,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
 
   // 行点击回调
   const handleRowClick = async (id: string, bid: string) => {
-    const { code = -1, section = {}, contract: newContract = {} } = await apiGetIncome(id, bid, type)
+    const { code = -1, section = {}, contract: newContract = {} } = await apiGetContractWithDetail(id, bid, type)
     if (code === consts.RET_CODE.SUCCESS) {
       setRow(section)
       type === 'income' && (contractReturnStore.updateContract(newContract))
@@ -269,7 +249,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
   // 阿里oss上传弹窗
   const onShow = (show: boolean) => setVisible(show)
   const onCreate = async (fileList: iFile[]) => {
-    const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.CONTRACT_RETURN, row.contractId)
+    const { code = -1 } = await apiSaveFileInfo(fileList, type === 'income' ? 0 : 1, row.contractId)
     if (code === consts.RET_CODE.SUCCESS) {
       setVisible(false)
       type === 'income' && (contractReturnStore.changeUpdate('3'))
@@ -371,10 +351,10 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     <div className={styles.spreadContent}>
       <div className={styles.spreadSheets}>
         {
-          contractReturnStore.showTable ?
+          (type === ContractType.INCOME && contractReturnStore.showTable || type === ContractType.EXPENDITURE && contractPaidStore.showTable) ?
             <Table
               components={components}
-              dataSource={type === 'income' ? contractReturnStore.tree : contractPaidStore.tree}
+              dataSource={type === ContractType.INCOME ? contractReturnStore.tree : contractPaidStore.tree}
               columns={_tableColumns as ColumnTypes}
               bordered
               pagination={false}

src/pages/Contract/Content/Spending/api.ts

@@ -1,68 +1,6 @@
 import request from '@/utils/common/request'
 import consts from '@/utils/consts'
 
-/**
- * 标段升降、上下移、增删
- * @param type - 操作类型
- * @param payload - 载荷
- */
-export async function apiResfulContractTree(type: string, payload: object) {
-  let url: string = '', method: string = ''
-  switch (type) {
-    case 'serial':
-      url = '/api/contract/section/serial'
-      method = 'post'
-      break
-    case 'depth':
-      url = '/api/contract/section/depth'
-      method = 'post'
-      break
-    case 'add':
-      url = '/api/contract/section/add'
-      method = 'post'
-      break
-    case 'del':
-      url = '/api/contract/section'
-      method = 'del'
-      break
-    default:
-      break
-  }
-  const { data } = await request[method](url, { ...payload, treeType: consts.CONTRACT_TREE.PAID })
-  return data
-}
-
-/**
- * 获取单个合同详情和项目节详情
- * @param id - 项目节id
- * @param bidsectionId - 标段id
- */
-export async function apiGetExpenditure(id: string, bidsectionId: string) {
-  const { data } = await request.get('/api/contract/expenditure', { id, bidsectionId })
-  return data
-}
-
-/**
- * 修改合同节序号
- * @param id 项目节id
- * @param bidsectionId 标段id
- * @param serial 序号
- */
-export async function apiUpdateSerial(id: string, bidsectionId: string, serial: string) {
-  const { data } = await request.post('/api/contract/section/serial/update', { id, bidsectionId, serial: parseInt(serial), treeType: consts.CONTRACT_TREE.PAID })
-  return data
-}
-
-/**
- * 修改合同节名称
- * @param id 项目节id
- * @param bidsectionId 标段id
- * @param name 名称
- */
-export async function apiUpdateName(id: string, bidsectionId: string, name: string) {
-  const { data } = await request.post('/api/contract/section/save', { id, bidsectionId, name, treeType: consts.CONTRACT_TREE.PAID })
-  return data
-}
 
 /**
  * 合同增删改(包括添加已支付)

src/pages/Contract/Content/Spending/components/TableContent/api.ts

@@ -1,11 +0,0 @@
-import request from '@/utils/common/request'
-
-/**
- * 获得标段支出-项目节信息
- * @param bidsectionId 标段id
- */
-export async function apiContractExpenditure(bidsectionId: string) {
-  const { data } = await request.get('/api/contract/expenditure/section/all', { bidsectionId })
-  return data
-}
-

src/pages/Contract/Content/Spending/components/TableContent/index.module.scss

@@ -1,66 +0,0 @@
-.projectTable {
-  :global(.ant-table-cell) {
-    padding: 0.3rem;
-  }
-}
-
-.spreadContent {
-  position: relative;
-  height: calc(100vh - 34px);
-  overflow: hidden;
-  .spreadSheets {
-    width: 100%;
-    height: 62%;
-    overflow: hidden;
-    :global(.ant-input-group-addon) {
-      padding: 0 6px;
-    }
-    // :global(.ant-table-tbody > tr > td) {
-    //   padding: 0.3rem;
-    // }
-    // :global(.ant-table-thead > tr > th) {
-    //   padding: 0.3rem;
-    //   color: #000000;
-    //   text-align: center;
-    //   background: #e9ecef;
-    //   border-bottom: 2px solid #dee2e6;
-    //   border-bottom-width: 2px;
-    // }
-  }
-  .extraControl {
-    width: 100%;
-    height: 38%;
-  }
-}
-.modalWarnText {
-  padding: 0.5rem;
-  margin-bottom: 1rem;
-  color: #856404;
-  background-color: #fff3cd;
-  border: 1px solid transparent;
-  border-color: #ffeeba;
-  border-radius: 0.25rem;
-}
-
-.modalTemplateContent {
-  display: flex;
-  justify-content: space-between;
-  & > div {
-    background-color: #ffffff;
-    background-clip: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: 0.25rem;
-    &:hover {
-      border-color: #007bff;
-    }
-  }
-  .leftTemplate {
-    width: 45%;
-  }
-  .rightTemplate {
-    width: 45%;
-  }
-  .active {
-    border-color: #007bff;
-  }
-}

src/pages/Contract/Content/Spending/components/TableContent/index.tsx

@@ -1,432 +0,0 @@
-// import { ZhSubmitButton } from '@/components/Button'
-// import OssUploadModal from '@/components/OssUpload'
-// import { contractPaidStore, tenderStore } from '@/store/mobx'
-// import { ContractTree, iShowTemplateState, iTemplateState } from '@/types/contract'
-// import { iFile } from '@/types/file'
-// import { apiSaveFileInfo } from '@/utils/common/api'
-// import { contractConsts } from '@/utils/common/constStatus'
-// import consts from '@/utils/consts'
-// import { Button, Input, message, Radio, Table, Tabs } from 'antd'
-// import Modal from 'antd/lib/modal/Modal'
-// import { RadioChangeEvent } from 'antd/lib/radio'
-// import { ColumnsType } from 'antd/lib/table'
-// import { observer } from 'mobx-react'
-// import React, { FocusEvent, KeyboardEvent, useEffect, useRef, useState } from 'react'
-// import { apiSetTemplate } from '../../../Income/components/Modal/api'
-// import { apiGetExpenditure, apiResfulContractTree, apiUpdateName, apiUpdateSerial } from '../../api'
-// import { apiContractExpenditure } from './api'
-// import Detail from '../Tabs/Detail'
-// import File from '../Tabs/File'
-// import Receivable from '../Tabs/Receivable'
-// import styles from './index.module.scss'
-// import { formatMoney } from '@/utils/util'
-// interface iTableContentPorps {
-//   changeModalType: (type: string) => void
-//   row: ContractTree
-//   setRow: (record: ContractTree) => void
-//   history: any
-// }
-
-
-// const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, history }) => {
-//   const [ sectionTemplate, setSectionTemplate ] = useState<iShowTemplateState>({
-//     isShow: false,
-//     template: '',
-//     loading: false
-//   })
-//   const [ tempalte, setTempalte ] = useState<{ template1: iTemplateState, template2: iTemplateState }>({
-//     template1: {
-//       attribution: '',
-//       children: undefined,
-//       depth: 0,
-//       id: 0,
-//       isEnd: false,
-//       leaf: false,
-//       name: '',
-//       parentId: 0,
-//       serial: ''
-//     },
-//     template2: {
-//       attribution: '',
-//       children: undefined,
-//       depth: 0,
-//       id: 0,
-//       isEnd: false,
-//       leaf: false,
-//       name: '',
-//       parentId: 0,
-//       serial: ''
-//     }
-//   })
-
-//   // 阿里oss弹窗控制器
-//   const [ visible, setVisible ] = useState<boolean>(false)
-
-//   const { TabPane } = Tabs
-
-//   useEffect(() => {
-//     initData()
-//   }, [])
-//   const initData = async () => {
-//     const data = await apiContractExpenditure(tenderStore.bid)
-//     if (data.code === consts.RET_CODE.SUCCESS) {
-//       if (data.isTemplate && data.isTemplate === 1) {
-//         setSectionTemplate({
-//           ...sectionTemplate,
-//           isShow: true
-//         })
-//         setTempalte({
-//           ...tempalte,
-//           template1: data.sectionTemplate1,
-//           template2: data.sectionTemplate2
-//         })
-//       } else {
-//         contractPaidStore.updateTree(data.sectionTree.children)
-//       }
-//     }
-//     if (row.id) {
-//       handleRowClick(row.id, row.bidsectionId)
-//     }
-//   }
-//   interface iLabelHandlerProps {
-//     id: string
-//     bidsectionId: string
-//     name?: string
-//   }
-
-//   const handleNewLabel = async (type: string, payload: iLabelHandlerProps) => {
-//     let RET_CODE: number = -1
-//     if (type === 'create') {
-//       payload.name = inputEl.current?.state.value
-//       const { code = -1 } = await apiResfulContractTree('add', payload)
-//       RET_CODE = code
-//     }
-//     if (type === 'edit') {
-//       const name = inputEl.current?.state.value
-//       const { code = -1 } = await apiUpdateName(payload.id, payload.bidsectionId, name)
-//       RET_CODE = code
-//     }
-//     if (RET_CODE === consts.RET_CODE.SUCCESS) {
-//       contractPaidStore.resetTree(tenderStore.tender.bidsectionId)
-//     }
-//   }
-
-//   const codeChange = async (row: ContractTree, value: string) => {
-//     const { code = -1 } = await apiUpdateSerial(row.id, row.bidsectionId, value)
-//     if (code === consts.RET_CODE.SUCCESS) {
-//       initData()
-//     }
-//   }
-//   const inputEl = useRef<Input>(null)
-//   const modalColumns: ColumnsType<iTemplateState> = [
-//     {
-//       title: '项目节',
-//       dataIndex: 'serial',
-//       width: '30%',
-//       // eslint-disable-next-line react/display-name
-//       render: (text: string, row: iTemplateState) => {
-//         const { attribution = '', serial = '' } = row
-//         return <span>{`${attribution}${serial}`}</span>
-//       }
-//     },
-//     {
-//       title: '名称',
-//       dataIndex: 'name',
-//       width: '70%'
-//     }
-//   ]
-
-//   const TableColumns: ColumnsType<iIncomeTree> = [
-//     {
-//       title: '编号',
-//       dataIndex: 'code',
-//       width: '15%',
-//       // eslint-disable-next-line react/display-name
-//       render: (text: string, row: iIncomeTree) => {
-//         if (row.isEdit) {
-//           return (
-//             <Input
-//               defaultValue={row.serial}
-//               addonBefore={row.attribution}
-//               size="small"
-//               style={{ width: 80 }}
-//               onPressEnter={(e: KeyboardEvent<HTMLInputElement>) => codeChange(row, e.currentTarget.value)}
-//               onBlur={(e: FocusEvent<HTMLInputElement>) => codeChange(row, e.currentTarget.value)}
-//             />)
-//         } else {
-//           return <span>{row.code}</span>
-//         }
-//         // return <span>{row.code}</span>
-//       }
-//     },
-//     {
-//       title: '项目名称',
-//       dataIndex: 'name',
-//       width: '25%',
-//       render: (text: any, record: iIncomeTree) => {
-//         if (record.isEdit || record.isNew) {
-//           const type = record.isEdit ? 'edit' : 'create'
-//           return (
-//             <Input
-//               defaultValue={record.name}
-//               size="small"
-//               type="text"
-//               ref={inputEl}
-//               onPressEnter={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
-//               onBlur={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
-//             />)
-//         } else {
-//           return <span>{text}</span>
-//         }
-//       }
-//     },
-//     {
-//       title: '合同名称',
-//       dataIndex: 'contractName',
-//       width: '15%'
-//     },
-//     {
-//       title: '合同编号',
-//       dataIndex: 'contractCode',
-//       width: '15%'
-//     },
-//     {
-//       title: '合同金额',
-//       dataIndex: 'contractPrice',
-//       align: 'right',
-//       width: '10%',
-//       // eslint-disable-next-line react/display-name
-//       render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
-//     },
-//     {
-//       title: '支出金额',
-//       dataIndex: 'contractPaid',
-//       align: 'right',
-//       width: '10%',
-//       // eslint-disable-next-line react/display-name
-//       render: (text: string, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
-//     },
-//     {
-//       title: '状态',
-//       dataIndex: 'contractStatus',
-//       width: '10%',
-//       // eslint-disable-next-line react/display-name
-//       render: (_: any, record: iIncomeTree) => record.contractCode ? <span className={contractConsts[record.contractStatus].className}>{contractConsts[record.contractStatus].text}</span> : ''
-//     }
-
-//   ]
-
-//   // modal 确认 - 回调
-//   const handleModalConfirm = async () => {
-//     setSectionTemplate({
-//       ...sectionTemplate,
-//       loading: true
-//     })
-//     if (!sectionTemplate.template) {
-//       setSectionTemplate({
-//         ...sectionTemplate,
-//         loading: false
-//       })
-//       return message.error('请选择项目节模板')
-//     }
-//     const { code = -1 } = await apiSetTemplate(sectionTemplate.template, tenderStore.tender.bidsectionId, 1)
-//     if (code === consts.RET_CODE.SUCCESS) {
-//       await initData()
-//     }
-//     setSectionTemplate({
-//       ...sectionTemplate,
-//       loading: false,
-//       isShow: false
-//     })
-//   }
-
-
-//   // modal 关闭 - 回调
-//   const handleModalCancel = () => {
-//     history.push('/console/contract/content/summary')
-//   }
-
-
-//   // 模板选择radio切换回调
-//   const handleRadioEvent = (e: RadioChangeEvent) => {
-//     if (e.target.checked) {
-//       setSectionTemplate({
-//         ...sectionTemplate,
-//         template: e.target.value
-//       })
-//     }
-//   }
-
-//   const onClickRow = (record: iIncomeTree) => {
-//     return {
-//       onClick() {
-//         handleRowClick(record.id, record.bidsectionId, record.isEdit, record.isNew)
-//       },
-//       onDoubleClick() {
-//         contractPaidStore.rowChange(row.id)
-//       }
-//     }
-//   }
-
-//   // 行点击回调
-//   const handleRowClick = async (id: string, bid: string, isEdit?: boolean, isNew?: boolean) => {
-//     if (!isEdit && !isNew) {
-//       const { code = -1, section = {}, contract: newContract = {} } = await apiGetExpenditure(id, bid)
-//       if (code === consts.RET_CODE.SUCCESS) {
-//         setRow(section)
-//         contractPaidStore.updateContract(newContract)
-//       }
-//     }
-//   }
-//   const handleRowClass = (record: iIncomeTree) => {
-//     return record.id === row.id ? 'ant-table-row-selected' : ''
-//   }
-//   const tabOnClick = (key: string) => {
-//     contractPaidStore.changeUpdate(key)
-//   }
-
-//   // 阿里oss上传弹窗
-//   const onShow = (show: boolean) => setVisible(show)
-//   const onCreate = async (fileList: iFile[]) => {
-//     const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.CONTRACT_PAID, row.contractId)
-//     if (code === consts.RET_CODE.SUCCESS) {
-//       setVisible(false)
-//       contractPaidStore.changeUpdate('3')
-//     }
-//   }
-
-//   return sectionTemplate.isShow ?
-//     <Modal
-//       visible={sectionTemplate.isShow}
-//       maskClosable={false}
-//       title="选择合同项目节模板"
-//       okText="确定"
-//       confirmLoading={sectionTemplate.loading}
-//       cancelText="关闭"
-//       onCancel={handleModalCancel}
-//       closable={false}
-//       keyboard={false}
-//       onOk={() => handleModalConfirm()}
-//       width='70vw'
-//     >
-//       <div className={styles.modalWarnText}>默认项目节无法修改，可自行增加维护子节点</div>
-//       <div className={styles.modalTemplateContent}>
-//         <div className={[ styles.leftTemplate, sectionTemplate.template == '1' ? styles.active : '' ].join(' ')}>
-//           <div className="pi-pd-20">
-//             <Radio value="1" checked={sectionTemplate.template === '1'} onChange={(e: RadioChangeEvent) => handleRadioEvent(e)}><span className="pi-gray">项目节模板1</span></Radio>
-//           </div>
-//           <div className={styles.projectTable}>
-//             {
-//               tempalte.template1?.children && tempalte.template1?.children.length ?
-//                 <Table
-//                   dataSource={tempalte.template1?.children}
-//                   columns={modalColumns}
-//                   pagination={false}
-//                   bordered
-//                   scroll={{ y: '300px' }}
-//                   rowKey={record => record.id}
-//                   defaultExpandAllRows={true}
-//                 /> : ''
-//             }
-//           </div>
-
-//         </div>
-//         <div className={[ styles.rightTemplate, sectionTemplate.template == '2' ? styles.active : '' ].join(' ')}>
-//           <div className="pi-pd-20 pi-gray">
-//             <Radio value="2" checked={sectionTemplate.template === '2'} onChange={(e: RadioChangeEvent) => handleRadioEvent(e)}><span className="pi-gray">项目节模板2</span></Radio>
-//           </div>
-//           <div className={styles.projectTable}>
-//             {
-//               tempalte.template2?.children && tempalte.template2?.children.length ?
-//                 <Table
-//                   dataSource={tempalte.template2?.children}
-//                   columns={modalColumns}
-//                   bordered
-//                   pagination={false}
-//                   scroll={{ y: '300px' }}
-//                   rowKey={record => record.id}
-//                   defaultExpandAllRows={true}
-//                 />
-//                 : ''
-//             }
-
-//           </div>
-//         </div>
-//       </div>
-//     </Modal>
-//     :
-//     <div className={styles.spreadContent}>
-//       <div className={styles.spreadSheets}>
-//         {
-//           contractPaidStore.showTable ?
-//             <Table<iIncomeTree>
-//               dataSource={contractPaidStore.tree}
-//               columns={TableColumns}
-//               bordered
-//               pagination={false}
-//               rowKey={record => record.id}
-//               defaultExpandAllRows={true}
-//               onRow={onClickRow}
-//               rowClassName={handleRowClass}
-//               style={{ height: '100%', overflowY: 'scroll' }}
-//             />
-//             : ''
-//         }
-//       </div>
-//       <div className={styles.extraControl}>
-//         <Tabs
-//           type="card"
-//           size="small"
-//           defaultActiveKey="1"
-//           onTabClick={(key: string) => tabOnClick(key)}
-//           tabBarExtraContent={{
-//             right:
-//               <div className="pi-mg-right-5 pi-flex-row">
-//                 {
-//                   contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.checking ?
-//                     <>
-//                       <Button type="primary" size="small" onClick={() => changeModalType('return')} >添加支出</Button>
-//                     </>
-//                     : null
-//                 }
-//                 {
-//                   contractPaidStore.contract.id && contractPaidStore.contract.status !== contractConsts.status.closed ?
-//                     <>
-//                       <Button type="primary" size="small" onClick={() => changeModalType('update')} className="pi-mg-left-5">编辑合同</Button>
-//                       <Button type="primary" size="small" onClick={() => setVisible(true)} className="pi-mg-left-5">上传文件</Button>
-//                     </>
-//                     : null
-//                 }
-//                 {
-//                   contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.willClose ?
-//                     <Button type="primary" size="small" danger className="pi-mg-left-5" onClick={() => changeModalType('close')}>关闭合同</Button>
-//                     : null
-//                 }
-//                 {
-//                   contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.closed ?
-//                     <ZhSubmitButton type="primary" size="small" danger className="pi-mg-left-5" onClick={() => changeModalType('unlock')}>解锁合同</ZhSubmitButton>
-//                     : null
-//                 }
-//               </div>
-//           }}>
-//           <TabPane key="1" tab="合同详情">
-//             <Detail {...contractPaidStore.contract} />
-//           </TabPane>
-//           <TabPane key="2" tab="合同支出">
-//             <Receivable updateTreeAndContract={initData}/>
-//           </TabPane>
-//           <TabPane key="3" tab="合同文件">
-//             <File />
-//           </TabPane>
-//         </Tabs>
-//       </div>
-//       <OssUploadModal
-//         visible={visible}
-//         onCancel={() => setVisible(false)}
-//         onCreate={onCreate}
-//         onShow={onShow}
-//       />
-//     </div>
-// }
-
-// export default observer(GCsheet)