feat: 添加自动处理tab下的高度的hook

src/hooks/tabHooks.ts

@@ -0,0 +1,16 @@
+import BigNumber from 'bignumber.js'
+import { useState, useEffect } from 'react'
+
+/** 解决tab高度问题，实现tab下的table自动扩展高度 */
+export const useTabHeighAuto = () => {
+  const [ clientHeight, setClientHeight ] = useState(document.body.clientHeight)
+  useEffect(() => {
+    const handleScroll = () => setClientHeight(document.body.clientHeight)
+    window.addEventListener('resize', handleScroll)
+    return () => {
+      window.removeEventListener('resize', handleScroll)
+    }
+  }, [])
+
+  return new BigNumber(clientHeight).minus(34).multipliedBy(0.38).minus(36).minus(32).minus(32).toString() + 'px'
+}

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

@@ -36,6 +36,9 @@
   .extraControl {
     width: 100%;
     height: 38%;
+    :global(.ant-tabs-top > .ant-tabs-nav) {
+      margin: 0 0 4px 0;
+    }
   }
 }
 .modalWarnText {

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

@@ -7,7 +7,7 @@ import { ContractTree, iShowTemplateState, iTemplateState } from '@/types/contra
 import { iFile } from '@/types/file'
 import { apiSaveFileInfo } from '@/utils/common/api'
 import { contractConsts } from '@/utils/common/constStatus'
-import { useTableExpand } from '@/utils/common/customHooks'
+import { useTableExpand } from '@/hooks/tableHooks'
 import consts from '@/utils/consts'
 import { formatMoney } from '@/utils/util'
 import { Button, message, Radio, Table, Tabs } from 'antd'

src/pages/Contract/Content/Income/components/Tabs/File/index.module.scss

@@ -0,0 +1,5 @@
+.contractFileTab {
+  :global(.ant-table-pagination.ant-pagination) {
+    margin: 8px 0;
+  }
+}

src/pages/Contract/Content/Income/components/Tabs/File/index.tsx

@@ -1,13 +1,14 @@
+import { useTabHeighAuto } from '@/hooks/tabHooks'
 import { contractStore } from '@/store/mobx'
 import { ContractType } from '@/store/mobx/contract'
 import { apiDelFile, apiGetFileList } from '@/utils/common/api'
 import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
-import { ConfigProvider, Popconfirm } from 'antd'
+import { Popconfirm } from 'antd'
 import Table, { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
-
+import styles from './index.module.scss'
 
 interface iFileState {
   id: string
@@ -25,9 +26,9 @@ interface FiltTable {
 }
 
 const File: React.FC<{ type: 'income' | 'expenditure' }> = ({ type }) => {
-  const [ state, setState ] = useState<FiltTable>({ data: [], total: 0, pageNo: 1, pageSize: 7 })
+  const [ state, setState ] = useState<FiltTable>({ data: [], total: 0, pageNo: 1, pageSize: 8 })
   const [ id, setId ] = useState<string>('')
-
+  const y = useTabHeighAuto()
   useEffect(() => {
     if (contractStore.contract.id) {
       if (contractStore.contract.id !== id) {
@@ -42,7 +43,7 @@ const File: React.FC<{ type: 'income' | 'expenditure' }> = ({ type }) => {
     }
   }, [ contractStore.contract.id, contractStore.activeKey ])
 
-  const initData = async (pageNo: number = 1, pageSize: number = 7) => {
+  const initData = async (pageNo: number = 1, pageSize: number = 8) => {
     setState({ ...state, pageNo, pageSize })
     const { code = -1, data = [], total = 0 } = await apiGetFileList(type === ContractType.INCOME ? consts.DATA_TYPE.INCOME : consts.DATA_TYPE.EXPENDITURE, contractStore.contract.id, pageNo, pageSize)
     if (code === consts.RET_CODE.SUCCESS) {
@@ -63,26 +64,26 @@ const File: React.FC<{ type: 'income' | 'expenditure' }> = ({ type }) => {
       dataIndex: 'sort',
       // eslint-disable-next-line react/display-name
       render: (_: any, record: iFileState, idx: number) => <span>{idx + 1}</span>,
-      width: 5
+      width: '5%'
     },
     {
       title: '名称',
       dataIndex: 'filename',
       // eslint-disable-next-line react/display-name
       render: (text: string, record: iFileState) => <a href={consts.OSS_PATH.REVIEW + record.filepath} target="_blank" rel="noopener noreferrer">{text}</a>,
-      width: 50
+      width: '50%'
     },
     {
       title: '上传者',
       dataIndex: 'accountName',
-      width: 10
+      width: '10%'
     },
     {
       title: '上传时间',
       dataIndex: 'createTime',
       // eslint-disable-next-line react/display-name
       render: (time: string) => <span>{dayjsFormat(time, 'YYYY-MM-DD')}</span>,
-      width: 20
+      width: '20%'
     },
     {
       title: '操作',
@@ -96,23 +97,28 @@ const File: React.FC<{ type: 'income' | 'expenditure' }> = ({ type }) => {
           </Popconfirm>
         </div>
       },
-      width: 15
+      width: '15%'
     }
   ]
   return (
-    <Table
-      dataSource={state.data}
-      columns={columns}
-      bordered
-      rowKey={record => record.id}
-      pagination={{
-        hideOnSinglePage: true,
-        size: "small",
-        pageSize: 7,
-        onChange: (page, pageSize) => initData(page, pageSize),
-        total: state.total
-      }}
-    />
+    <div className={styles.contractFileTab}>
+      <Table
+        dataSource={state.data}
+        columns={columns}
+        bordered
+        rowKey={record => record.id}
+        scroll={{ y }}
+        pagination={{
+          hideOnSinglePage: true,
+          size: "small",
+          defaultPageSize: 8,
+          showSizeChanger:false,
+          onChange: (page, pageSize) => initData(page, pageSize),
+          total: state.total
+        }}
+      />
+
+    </div>
   )
 }
 

src/pages/Contract/Content/Income/components/Tabs/Receivable/index.module.scss

@@ -0,0 +1,5 @@
+.contractProveTab {
+  :global(.ant-table-pagination.ant-pagination) {
+    margin: 8px 0;
+  }
+}

src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -1,5 +1,6 @@
 import DatePicker from '@/components/DatePicker'
 import FileModal from '@/components/FileModal'
+import { useTabHeighAuto } from '@/hooks/tabHooks'
 import { commonStore, contractStore } from '@/store/mobx'
 import { ContractType } from '@/store/mobx/contract'
 import { iReceivableState, iEditableCellProps } from '@/types/contract'
@@ -15,7 +16,7 @@ import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { apiDelReturn, apiGetReturns, apiUpdateReturn } from './api'
 const { Option } = Select
-
+import styles from './index.module.scss'
 const EditableCell: React.FC<iEditableCellProps> = ({
   editing,
   dataIndex,
@@ -65,6 +66,7 @@ interface ReceivableProps {
   type: 'income' | 'expenditure'
 }
 const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type }) => {
+  const y = useTabHeighAuto()
   const [ form ] = Form.useForm()
   const [ data, setData ] = useState<Array<iReceivableState>>([])
   const [ id, setId ] = useState<string>('')
@@ -249,7 +251,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
   })
 
   return (
-    <>
+    <div className={styles.contractProveTab}>
       <Form form={form} component={false}>
         <Table
           components={{ body: { cell: EditableCell } }}
@@ -257,7 +259,8 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
           columns={mergedColumns}
           bordered
           rowClassName="editable-row"
-          pagination={{ onChange: cancel, size: "small", pageSize: 7 }}
+          scroll={{ y }}
+          pagination={{ onChange: cancel, size: "small", pageSize: 8 }}
           rowKey={record => record.id}
         />
       </Form>
@@ -269,7 +272,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
         showUpload={true}
         uploadCallBack={() => initData()}
       />
-    </>
+    </div>
   )
 }
 export default observer(Receivable)

src/pages/Contract/List/index.tsx

@@ -5,7 +5,7 @@ import { tenderStore } from '@/store/mobx'
 import { ContractListTree } from '@/types/contract'
 import consts from '@/utils/consts'
 import { CaretDownOutlined } from '@ant-design/icons'
-import { useAutoTable, useContractTree, useTableExpand } from '@/utils/common/customHooks'
+import { useAutoTable, useContractTree, useTableExpand } from '@/hooks/tableHooks'
 import { Button, Dropdown, Menu, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useState, useEffect } from 'react'

src/pages/Management/Tender/List/index.tsx

@@ -2,7 +2,7 @@ import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import SvgIcon from '@/components/SvgIcon'
 import { iModalProps, iTenderFormValue, TenderTree } from '@/types/tender'
-import { useAutoTable } from '@/utils/common/customHooks'
+import { useAutoTable } from '@/hooks/tableHooks'
 import consts from '@/utils/consts'
 import { CaretDownOutlined, FolderAddFilled } from '@ant-design/icons'
 import { Button, Dropdown, Menu, Table, Tooltip } from 'antd'

src/pages/Quality/Content/List/index.tsx

@@ -7,7 +7,7 @@ import SvgIcon from '@/components/SvgIcon'
 import { tenderStore } from '@/store/mobx'
 import { iCreateSafe } from '@/types/safe'
 import { safeStatus } from '@/utils/common/constStatus'
-import { useListModal } from '@/utils/common/customHooks'
+import { useListModal } from '@/hooks/tableHooks'
 import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
 import { Button, message, Table } from 'antd'

src/pages/Quality/Content/List/modal.tsx

@@ -20,12 +20,13 @@ const QualityCreateForm: React.FC<iQualityCreateFormProps> = ({
 }) => {
   const [ form ] = Form.useForm()
   const autoCode = async () => {
-    const ruleArr = await handleAutoCode(tenderStore.tender.bidsectionId, 'qualityRule')
+    const ruleArr = await handleAutoCode(tenderStore.bid, 'qualityRule')
     form.setFieldsValue({ code: ruleArr.join('-') })
   }
   useEffect(() => {
     if (visible) {
-      form.setFieldsValue({ bidsectionId: tenderStore.tender.bidsectionId })
+      form.setFieldsValue({ bidsectionId: tenderStore.bid })
+      form.resetFields([ 'code', 'inspection', 'createTime', 'position' ])
     }
 
   }, [ visible ])
@@ -44,7 +45,7 @@ const QualityCreateForm: React.FC<iQualityCreateFormProps> = ({
         form
           .validateFields()
           .then((values) => {
-            form.resetFields()
+            // form.resetFields()
             onCreate(values)
           })
           .catch(info => {

src/pages/Quality/List/index.tsx

@@ -4,7 +4,7 @@ import SvgIcon from '@/components/SvgIcon'
 import { tenderStore } from '@/store/mobx'
 import { ContractListTree } from '@/types/contract'
 import { apiContractList } from '@/utils/common/api'
-import { useAutoTable, useContractTree, useTableExpand } from '@/utils/common/customHooks'
+import { useAutoTable, useContractTree, useTableExpand } from '@/hooks/tableHooks'
 import consts from '@/utils/consts'
 import { handleIntoBidsection } from '@/utils/util'
 import { CaretDownOutlined } from '@ant-design/icons'

src/pages/Safe/Content/List/index.tsx

@@ -7,7 +7,7 @@ import SvgIcon from '@/components/SvgIcon'
 import { tenderStore } from '@/store/mobx'
 import { iCreateSafe, iSafeList } from '@/types/safe'
 import { safeStatus } from '@/utils/common/constStatus'
-import { useListModal } from '@/utils/common/customHooks'
+import { useListModal } from '@/hooks/tableHooks'
 import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
 import { Button, message, Table } from 'antd'

src/pages/Safe/Content/List/modal.tsx

@@ -20,14 +20,15 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
 }) => {
   const [ form ] = Form.useForm()
   const autoCode = async () => {
-    form.validateFields([ 'code' ])
-    const ruleArr = await handleAutoCode(tenderStore.tender.bidsectionId, 'safeRule')
+    // form.validateFields([ 'code' ])
+    const ruleArr = await handleAutoCode(tenderStore.bid, 'safeRule')
     form.setFieldsValue({ code: ruleArr.join('-') })
   }
 
   useEffect(() => {
     if (visible) {
-      form.setFieldsValue({ bidsectionId: tenderStore.tender.bidsectionId })
+      form.setFieldsValue({ bidsectionId: tenderStore.bid })
+      form.resetFields([ 'code', 'inspection', 'createTime', 'position' ])
     }
 
   }, [ visible ])
@@ -46,7 +47,7 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
         form
           .validateFields()
           .then((values) => {
-            form.resetFields()
+
             onCreate(values)
           })
           .catch(info => {
@@ -64,7 +65,7 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
         {/* <Input /> */}
         {/* </Form.Item> */}
         <Form.Item name="code" label="安全编号" rules={[ { required: true, message: '请输入安全编号' } ]}>
-          <Input addonAfter={<span className="pi-pd-lr-11" onClick={() => autoCode()}>自动编号</span>} />
+          <Input addonAfter={<span className="pi-pd-lr-11" onClick={() => autoCode()}>自动编号</span>} autoComplete="off"/>
         </Form.Item>
         <Form.Item name="inspection" label="检查项" rules={[ { required: true, message: '请填写检查项' } ]}>
           <Input placeholder="请填写巡检项" />

src/pages/Safe/List/index.tsx

@@ -1,5 +1,5 @@
 import Header from '@/components/Header'
-import { useAutoTable, useContractTree, useTableExpand } from '@/utils/common/customHooks'
+import { useAutoTable, useContractTree, useTableExpand } from '@/hooks/tableHooks'
 import Slot from '@/components/Header/slot'
 import SvgIcon from '@/components/SvgIcon'
 import { tenderStore } from '@/store/mobx'