Browse Source

feat: 表格默认全部行展开

lanjianrong 4 years ago
parent
commit
ad36083e33

+ 13 - 13
src/pages/Login/index.tsx

@@ -60,7 +60,7 @@ class NormalLoginForm extends Component<iLoginProps, iState> {
           name="code"
           rules={[ { required: true, message: 'Please input your Project!' } ]}
         >
-          <Input placeholder="项目编号" onChange={this.handleProjectCode}/>
+          <Input placeholder="项目编号" onChange={this.handleProjectCode} autoFocus/>
         </Form.Item>
         <Form.Item
           name="account"
@@ -72,15 +72,15 @@ class NormalLoginForm extends Component<iLoginProps, iState> {
           name="password"
           rules={[ { required: true, message: 'Please input your Password!' } ]}
         >
-          <Input.Password type="password" placeholder="密码"/>
+          <Input.Password type="password" placeholder="密码" />
         </Form.Item>
 
         <Form.Item>
           <Button type="primary" htmlType="submit">登录</Button>
         </Form.Item>
-        <div className={styles.textRight}>
+        {/* <div className={styles.textRight}>
           <span onClick={this.handleForgetPsw}>忘记密码?</span>
-        </div>
+        </div> */}
         <RetrieveForm visible={this.state.visible} setVisible={this.setVisible} />
       </Form>
     )
@@ -88,7 +88,7 @@ class NormalLoginForm extends Component<iLoginProps, iState> {
 }
 
 // 找回密码Form表单
-const RetrieveForm:React.FC<iRetrieveFormProps>= ({ visible, setVisible }) => {
+const RetrieveForm: React.FC<iRetrieveFormProps> = ({ visible, setVisible }) => {
   const handleOk = () => {
     console.log('ok')
 
@@ -99,14 +99,14 @@ const RetrieveForm:React.FC<iRetrieveFormProps>= ({ visible, setVisible }) => {
   }
   return (
     <Modal
-          title="找回密码"
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-          cancelText="取消"
-          closable={false}
-          okText="重置密码"
-         />
+      title="找回密码"
+      visible={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      cancelText="取消"
+      closable={false}
+      okText="重置密码"
+    />
   )
 }
 

+ 13 - 8
src/pages/Management/Tender/List/index.tsx

@@ -178,14 +178,19 @@ const Tender: React.FC<{}> = () => {
           <h3>没有标段数据</h3>
         </div> */}
         <div className={styles.tableContent}>
-          <Table<TenderTree>
-            columns={columns}
-            dataSource={tree.children}
-            pagination={false}
-            rowKey={record => record.id}
-            indentSize={20}
-            bordered
-          />
+          {
+            tree.children?.length ?
+            <Table<TenderTree>
+              columns={columns}
+              dataSource={tree.children}
+              pagination={false}
+              rowKey={record => record.id}
+              indentSize={20}
+              expandable={{ defaultExpandAllRows: true }}
+              bordered
+            />
+            : null
+          }
         </div>
         <ModalForm modalObj={modal} treeObj={tree} onCreate={onCreate} onCancel={() => setModal({
           ...modal,

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

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

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

@@ -1,5 +1,5 @@
 /** 自定义hooks库 */
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ContractTree } from '@/types/contract'
 import { ListModal } from '@/types/safe'
 
@@ -43,6 +43,12 @@ export const useContractTree = (): [ContractTree, (newTree: ContractTree) => voi
 /** 树列表展开收起自定义hook */
 export const useTableExpand = (tree: ContractTree): [string[], (expanded: boolean, record?: ContractTree) => void] => {
   const [ ids, setIds ] = useState<Array<string>>([])
+  useEffect(() => {
+    const newIds = expandTree(tree.children as ContractTree[])
+    console.log(newIds)
+
+    setIds(newIds)
+  }, [ tree ])
   const onChange = (expanded: boolean, record?: ContractTree) => {
     // 点击图标的展开收起
     if (record) {
@@ -64,12 +70,13 @@ export const useTableExpand = (tree: ContractTree): [string[], (expanded: boolea
     }
   }
   function expandTree(data: ContractTree[]): string[] {
-    const idArr: Array<string> = []
+    let idArr: Array<string> = []
 
     data.forEach((item: ContractTree) => {
-      if (item.isfolder && item.children?.length) {
+      if (!!item.isfolder && item.children?.length) {
         idArr.push(item.id)
-        idArr.concat(expandTree(item.children))
+        const childIds = expandTree(item.children)
+        idArr = [ ...idArr, ...childIds ]
       }
     })
     return idArr