fix: 选择模板添加高亮处理以及项目行编辑优化

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

@@ -60,4 +60,7 @@
   .rightTemplate {
     width: 45%;
   }
+  .active {
+    border-color: #007bff;
+  }
 }

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

@@ -7,12 +7,13 @@ import { iFile } from '@/types/file'
 import { apiSaveFileInfo } from '@/utils/common/api'
 import { contractConsts } from '@/utils/common/constStatus'
 import consts from '@/utils/consts'
+import { formatMoney } from '@/utils/util'
 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, { KeyboardEvent, useEffect, useRef, useState } from 'react'
+import React, { FocusEvent, KeyboardEvent, useEffect, useRef, useState } from 'react'
 import { apiGetIncome, apiResfulContractTree, apiUpdateName, apiUpdateSerial } from '../../api'
 import { apiContractIncome, apiSetTemplate } from '../Modal/api'
 import Detail from '../Tabs/Detail'
@@ -34,7 +35,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     template: '',
     loading: false
   })
-  const [ tempalte, setTempalte ] = useState<{template1: iTemplateState, template2: iTemplateState}>({
+  const [ tempalte, setTempalte ] = useState<{ template1: iTemplateState, template2: iTemplateState }>({
     template1: {
       attribution: '',
       children: undefined,
@@ -68,7 +69,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     initData()
   }, [])
   const initData = async () => {
-    const data  = await apiContractIncome(tenderStore.bid)
+    const data = await apiContractIncome(tenderStore.bid)
     if (data.code === consts.RET_CODE.SUCCESS) {
       if (data.isTemplate && data.isTemplate === 1) {
         setSectionTemplate({
@@ -142,12 +143,13 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       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)}
+            <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>
@@ -158,17 +160,17 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     {
       title: '项目名称',
       dataIndex: 'name',
-      render: (text:any, record: iIncomeTree) => {
+      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 })}
+            <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>
@@ -188,14 +190,14 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       dataIndex: 'contractPrice',
       align: 'right',
       // eslint-disable-next-line react/display-name
-      render: (text:any, record: iIncomeTree) => record.contractCode ? <span>{text}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
     {
       title: '回款金额',
       dataIndex: 'contractReturned',
       align: 'right',
       // eslint-disable-next-line react/display-name
-      render: (text:any, record: iIncomeTree) => record.contractCode ? <span>{text}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
     {
       title: '状态',
@@ -245,7 +247,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     }
   }
 
-  const onClickRow  = (record: iIncomeTree) => {
+  const onClickRow = (record: iIncomeTree) => {
     return {
       onClick() {
         rowClickHandler(record.id, record.bidsectionId, record.isEdit, record.isNew)
@@ -284,132 +286,140 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
   }
 
   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}>
-        <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>
+    <Modal
+      visible={sectionTemplate.isShow}
+      getContainer={false}
+      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}>
-        <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 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>
-    </div>
-  </Modal>
-  :
-  <div className={styles.spreadContent}>
-    <div className={styles.spreadSheets}>
-      {
-        contractReturnStore.showTable ?
-          <Table<iIncomeTree>
-            dataSource={contractReturnStore.tree}
-            columns={TableColumns}
-            bordered
-            pagination={false}
-            rowKey={record => record.id}
-            defaultExpandAllRows={true}
-            onRow={onClickRow}
-            rowClassName={handleRowClass}
-            style={{ height: '100%', overflowY: 'scroll' }}
-          />
-          : ''
+    </Modal>
+    :
+    <div className={styles.spreadContent}>
+      <div className={styles.spreadSheets}>
+        {
+          contractReturnStore.showTable ?
+            <Table<iIncomeTree>
+              dataSource={contractReturnStore.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">
+                {
+                  contractReturnStore.contract.id && contractReturnStore.contract.status === contractConsts.status.checking ?
+                    <>
+                      <Button type="primary" size="small" onClick={() => changeModalType('return')} >添加回款</Button>
+                    </>
+                    : null
+                }
+                {
+                  contractReturnStore.contract.id && contractReturnStore.contract.status !== contractConsts.status.closed ?
+                    <>
+                      <Authorization type="contract" auth="add">
+                        <Button type="primary" size="small" onClick={() => changeModalType('update')} className="pi-mg-left-5">编辑合同</Button>
+                      </Authorization>
+                      <Button type="primary" size="small" onClick={() => setVisible(true)} className="pi-mg-left-5">上传文件</Button>
+                    </>
+                    : null
+                }
+                {
+                  contractReturnStore.contract.id && contractReturnStore.contract.status === contractConsts.status.willClose ?
+                    <Button type="primary" size="small" danger className="pi-mg-left-5" onClick={() => changeModalType('close')}>关闭合同</Button>
+                    : null
+                }
+                {
+                  contractReturnStore.contract.id && contractReturnStore.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 {...contractReturnStore.contract} />
+          </TabPane>
+          <TabPane key="2" tab="合同回款">
+            <Receivable />
+          </TabPane>
+          <TabPane key="3" tab="合同文件">
+            <File />
+          </TabPane>
+        </Tabs>
+      </div>
+      <OssUploadModal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onCreate={onCreate}
+        onShow={onShow}
+      />
     </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">
-            {
-              contractReturnStore.contract.id && contractReturnStore.contract.status === contractConsts.status.checking ?
-              <>
-                <Authorization type="contract" auth="add">
-                  <Button type="primary" size="small" onClick={() => changeModalType('update')} className="pi-mg-right-5">编辑合同</Button>
-                </Authorization>
-                <Button type="primary" size="small" onClick={() => changeModalType('return')} className="pi-mg-right-5">添加回款</Button>
-                <Button type="primary" size="small" onClick={() => setVisible(true)}>上传文件</Button>
-              </>
-              : ''
-            }
-            {
-              contractReturnStore.contract.id && contractReturnStore.contract.status === contractConsts.status.willClose ?
-              <Button type="primary" size="small" danger className="pi-mg-right-3" onClick={() => changeModalType('close')}>关闭合同</Button>
-              : ''
-            }
-            {
-              contractReturnStore.contract.id && contractReturnStore.contract.status === contractConsts.status.closed ?
-              <ZhSubmitButton type="primary" size="small" danger className="pi-mg-right-3" onClick={() => changeModalType('unlock')}>解锁合同</ZhSubmitButton>
-              : ''
-            }
-          </div>
-        }}>
-        <TabPane key="1" tab="合同详情">
-          <Detail {...contractReturnStore.contract} />
-        </TabPane>
-        <TabPane key="2" tab="合同回款">
-          <Receivable />
-        </TabPane>
-        <TabPane key="3" tab="合同文件">
-          <File />
-        </TabPane>
-      </Tabs>
-    </div>
-    <OssUploadModal
-      visible={visible}
-      onCancel={() => setVisible(false)}
-      onCreate={onCreate}
-      onShow={onShow}
-     />
-  </div>
 }
 
 export default observer(GCsheet)

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

@@ -60,4 +60,7 @@
   .rightTemplate {
     width: 45%;
   }
+  .active {
+    border-color: #007bff;
+  }
 }

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

@@ -11,7 +11,7 @@ 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, { KeyboardEvent, useEffect, useRef, useState } from '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'
@@ -19,6 +19,7 @@ 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: iIncomeTree
@@ -33,7 +34,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     template: '',
     loading: false
   })
-  const [ tempalte, setTempalte ] = useState<{template1: iTemplateState, template2: iTemplateState}>({
+  const [ tempalte, setTempalte ] = useState<{ template1: iTemplateState, template2: iTemplateState }>({
     template1: {
       attribution: '',
       children: undefined,
@@ -67,7 +68,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     initData()
   }, [])
   const initData = async () => {
-    const data  = await apiContractExpenditure(tenderStore.bid)
+    const data = await apiContractExpenditure(tenderStore.bid)
     if (data.code === consts.RET_CODE.SUCCESS) {
       if (data.isTemplate && data.isTemplate === 1) {
         setSectionTemplate({
@@ -90,7 +91,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     name?: string
   }
 
-  const newLabelHandler = async (type: string, payload: iLabelHandlerProps) => {
+  const handleNewLabel = async (type: string, payload: iLabelHandlerProps) => {
     let RET_CODE: number = -1
     if (type === 'create') {
       payload.name = inputEl.current?.state.value
@@ -141,12 +142,13 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       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)}
+            <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>
@@ -157,17 +159,17 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     {
       title: '项目名称',
       dataIndex: 'name',
-      render: (text:any, record: iIncomeTree) => {
+      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={() => newLabelHandler(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
-            onBlur={() => newLabelHandler(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
+            <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>
@@ -187,14 +189,14 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
       dataIndex: 'contractPrice',
       align: 'right',
       // eslint-disable-next-line react/display-name
-      render: (text:any, record: iIncomeTree) => record.contractCode ? <span>{text}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
     {
       title: '支出金额',
       dataIndex: 'contractPaid',
       align: 'right',
       // eslint-disable-next-line react/display-name
-      render: (text:any, record: iIncomeTree) => record.contractCode ? <span>{text}</span> : ''
+      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
     },
     {
       title: '状态',
@@ -246,7 +248,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     }
   }
 
-  const onClickRow  = (record: iIncomeTree) => {
+  const onClickRow = (record: iIncomeTree) => {
     return {
       onClick() {
         rowClickHandler(record.id, record.bidsectionId, record.isEdit, record.isNew)
@@ -285,130 +287,138 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
   }
 
   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}>
-        <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}
-             /> : ''
-          }
+    <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 className={styles.rightTemplate}>
-        <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>
-        <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>
+    </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>
 
-        </div>
+                    </>
+                    : 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 />
+          </TabPane>
+          <TabPane key="3" tab="合同文件">
+            <File />
+          </TabPane>
+        </Tabs>
       </div>
+      <OssUploadModal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        onCreate={onCreate}
+        onShow={onShow}
+      />
     </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('update')} className="pi-mg-right-5">编辑合同</Button>
-                <Button type="primary" size="small" onClick={() => changeModalType('return')} className="pi-mg-right-5">添加支出</Button>
-                <Button type="primary" size="small" onClick={() => setVisible(true)}>上传文件</Button>
-              </>
-              : ''
-            }
-            {
-              contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.willClose ?
-              <Button type="primary" size="small" danger className="pi-mg-right-3" onClick={() => changeModalType('close')}>关闭合同</Button>
-              : ''
-            }
-            {
-              contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.closed ?
-              <ZhSubmitButton type="primary" size="small" danger className="pi-mg-right-3" onClick={() => changeModalType('unlock')}>解锁合同</ZhSubmitButton>
-              : ''
-            }
-          </div>
-        }}>
-        <TabPane key="1" tab="合同详情">
-          <Detail {...contractPaidStore.contract} />
-        </TabPane>
-        <TabPane key="2" tab="合同支出">
-          <Receivable />
-        </TabPane>
-        <TabPane key="3" tab="合同文件">
-          <File />
-        </TabPane>
-      </Tabs>
-    </div>
-    <OssUploadModal
-      visible={visible}
-      onCancel={() => setVisible(false)}
-      onCreate={onCreate}
-      onShow={onShow}
-     />
-  </div>
 }
 
 export default observer(GCsheet)

src/types/contract.d.ts

@@ -55,13 +55,14 @@ export interface iIncomeTree {
   isEdit?: boolean
   isNew?: boolean
 }
-export interface iModalBooleanProps {
+export interface iModalProps {
   type: string
   visible: boolean
   confirmLoading: boolean
+  contractType: 'income' | 'spending'
 }
 export interface iModalCommonProps {
-  modalObj: iModalBooleanProps
+  modalObj: iModalProps
   onConfirm: (values: any, type: string) => void
   onCancel: () => void
   row: iIncomeTree