ソースを参照

feat: 项目节第一层字体加粗且不能删除

lanjianrong 4 年 前
コミット
d5a075f22c

+ 13 - 0
src/pages/Contract/Content/Income/components/TableContent/index.scss

@@ -6,6 +6,19 @@
   min-height: 28px;
   padding: 5px 12px;
   cursor: pointer;
+  .table-cell-line {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 41px;
+    &::before {
+      position: absolute;
+      top: -13px;
+      height: 250%;
+      content: '';
+      border-right: 1px solid #666666;
+    }
+  }
 }
 
 .editable-cell-value-wrap:hover {

+ 28 - 1
src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -37,6 +37,7 @@ interface iTableContentPorps {
 }
 
 const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, history, type }) => {
+  const [ expandedRowKeys, setRowKeys ] = useState<string[]>([])
 
   const [ sectionTemplate, setSectionTemplate ] = useState<iShowTemplateState>({
     isShow: false,
@@ -92,6 +93,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
         })
       } else {
         contractStore.updateTree(data.sectionTree.children)
+        setRowKeys(expandTree(data.sectionTree.children))
       }
     }
     // 初始化时如果id存在说明只是table更新了,那么要将store里面的合同数据也一起更新,防止合同详情不是最新的数据
@@ -265,7 +267,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     if (dataIndex === 'code') {
       codeChange(value, row)
     } else {
-      handleUpdateContractName({ id: row.id, bidsectionId: row.bidsectionId, treeType: type === 'income' ? 0 : 1, name: value })
+      handleUpdateContractName({ id: row.id, bidsectionId: row.bidsectionId, treeType: type === ContractType.INCOME ? 0 : 1, name: value })
     }
 
   }
@@ -280,10 +282,12 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
         editable: col.editable,
         dataIndex: col.dataIndex,
         title: col.title,
+        expandedRowKeys,
         handleSave
       })
     }
   })
+
   return sectionTemplate.isShow ?
     <Modal
       visible={sectionTemplate.isShow}
@@ -358,6 +362,15 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
               // rowKey={record => record.id}
               defaultExpandAllRows={true}
               onRow={onClickRow}
+              expandable={{ expandedRowKeys, onExpand: (expanded, record: any) => {
+                if (expanded) {
+                  const ids = [ ...expandedRowKeys, record.id ]
+                  setRowKeys(ids)
+                } else {
+                  const ids = expandedRowKeys.filter(item => item !== record.id)
+                  setRowKeys(ids)
+                }
+              } }}
               rowClassName={handleRowClass}
               style={{ height: '100%', overflowY: 'scroll' }}
             />
@@ -422,4 +435,18 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     </div>
 }
 
+function expandTree(data: ContractTree[]): string[] {
+  let idArr: Array<string> = []
+
+  data.forEach((item: ContractTree) => {
+    if (item.children?.length) {
+      idArr.push(item.id)
+      const childIds = expandTree(item.children)
+      idArr = [ ...idArr, ...childIds ]
+    }
+  })
+  return idArr
+}
+
+
 export default observer(GCsheet)

+ 4 - 3
src/pages/Contract/Content/Income/components/Tabs/Receivable/index.tsx

@@ -1,6 +1,7 @@
 import DatePicker from '@/components/DatePicker'
 import FileModal from '@/components/FileModal'
 import { contractStore } from '@/store/mobx'
+import { ContractType } from '@/store/mobx/contract'
 import { iReceivableState, iEditableCellProps } from '@/types/contract'
 import { iFileModal } from '@/types/file'
 import consts from '@/utils/consts'
@@ -121,7 +122,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
       }
     },
     {
-      title: '回款日期',
+      title: type === ContractType.INCOME ? '回款日期' : '支付日期',
       dataIndex: 'time',
       editable: true,
       width: '12%',
@@ -129,7 +130,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
       render: (text: string) => <span>{dayjsFormat(text, 'YYYY-MM-DD')}</span>
     },
     {
-      title: '回款金额',
+      title:  type === ContractType.INCOME ? '回款金额' : '支付金额',
       dataIndex: 'price',
       editable: true,
       width: '12%',
@@ -137,7 +138,7 @@ const Receivable: React.FC<ReceivableProps> = ({ updateTreeAndContract, type })
       render: (text: string) => <span className="pi-text-right pi-width-100P">{formatMoney(text)}</span>
     },
     {
-      title: '回款方式',
+      title:  type === ContractType.INCOME ? '回款方式' : '支付方式',
       dataIndex: 'way',
       editable: true,
       width: '12%'

+ 1 - 1
src/pages/Contract/Content/Income/index.tsx

@@ -133,7 +133,7 @@ const Income: React.FC<RouteComponentProps> = (props) => {
                     <Button type="text" icon={<SvgIcon type="xxh-plus" style={{ color: '#007bff', fontSize: 12 }} />} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId, name: '' })} />
                   </Tooltip>
                   {
-                    !row.children?.length && row.depth !== 1?
+                    !row.children?.length && row.depth !== 1 ?
                       <Tooltip title="删除">
                         <Button type="text" icon={<SvgIcon type="xxh-times" style={{ color: '#007bff', fontSize: 12 }} />} onClick={() => treeResfulApiHandler('del', { id: row.id, bidsectionId: row.bidsectionId })} />
                       </Tooltip>

+ 1 - 1
src/pages/Contract/Content/Spending/index.tsx

@@ -130,7 +130,7 @@ const Expenditure: React.FC<RouteComponentProps> = ({ history }) => {
                     <Button type="text" icon={<SvgIcon type="xxh-plus" style={{ color: '#007bff', fontSize: 12 }} />} onClick={() => treeResfulApiHandler('add', { id: row.id, bidsectionId: row.bidsectionId })} />
                   </Tooltip>
                   {
-                    !row.children?.length ?
+                    !row.children?.length && row.depth !== 1 ?
                       <Tooltip title="删除">
                         <Button type="text" icon={<SvgIcon type="xxh-times" style={{ color: '#007bff', fontSize: 12 }} />} onClick={() => treeResfulApiHandler('del', { id: row.id, bidsectionId: row.bidsectionId })} />
                       </Tooltip>

+ 1 - 1
src/pages/Contract/List/index.tsx

@@ -31,7 +31,7 @@ const List: React.FC<{}> = () => {
   }
 
   const [ tree, setTree ] = useContractTree()
-  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree)
+  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree.children)
 
   const handleLinkClick = (id: string, name: string) => {
     tenderStore.saveTenderInfo({ bidsectionId: id, name })

+ 1 - 1
src/pages/Quality/List/index.tsx

@@ -20,7 +20,7 @@ const List: React.FC<RouteComponentProps> = () => {
     getTree()
   }, [])
   const [ tree, setTree ] = useContractTree()
-  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree)
+  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree.children)
 
   const [ loading, setLoading ] = useState<boolean>(false)
   const getTree = async () => {

+ 1 - 1
src/pages/Safe/List/index.tsx

@@ -30,7 +30,7 @@ const List: React.FC<RouteComponentProps> = () => {
     }
   }
   const [ tree, setTree ] = useContractTree()
-  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree)
+  const [ expandedRowKeys, setRowKeys ] = useTableExpand(tree.children)
 
   const handleLinkClick = (id: string, name: string) => {
     tenderStore.saveTenderInfo({ bidsectionId: id, name })

+ 4 - 4
src/utils/common/customHooks.ts

@@ -41,10 +41,10 @@ export const useContractTree = (): [ContractListTree, (newTree: ContractListTree
 }
 
 /** 树列表展开收起自定义hook */
-export const useTableExpand = (tree: ContractListTree): [string[], (expanded: boolean, record?: ContractListTree) => void] => {
+export const useTableExpand = (tree: ContractListTree[]): [string[], (expanded: boolean, record?: ContractListTree) => void] => {
   const [ ids, setIds ] = useState<Array<string>>([])
   useEffect(() => {
-    const newIds = expandTree(tree.children as ContractListTree[])
+    const newIds = expandTree(tree as ContractListTree[])
 
     setIds(newIds)
   }, [ tree ])
@@ -60,8 +60,8 @@ export const useTableExpand = (tree: ContractListTree): [string[], (expanded: bo
       }
     } else {
       // 手动控制展开收起全部节点
-      if (expanded && tree.children) {
-        const newIds = expandTree(tree.children)
+      if (expanded && tree.length) {
+        const newIds = expandTree(tree)
         setIds(newIds)
       } else {
         setIds([])