fix: 代码优化

package.json

 {
   "name": "panda-xform",
-  "version": "5.5.7",
-  "description": "5.5.7 预览图片优化",
+  "version": "5.5.8",
+  "description": "5.5.8 增加台账树形结构",
   "keywords": [
     "panda-xform"
   ],

src/apis/process.js

@@ -204,6 +204,17 @@ export function GetAccountConfigInfo(accountName) {
   });
 }
 
+//台账树形查询
+export function GetAccountTree(accountName) {
+  return request({
+    headers: {
+      'Civ-Site': window?.globalConfig?.userInfo?.site
+    },
+    url: `${BASEURL}/GetAccountTree?accountName=${accountName}`,
+    method: 'get',
+  });
+}
+
 // 台账的表查询
 export function GetAccountPageList(data) {
   return request({

src/core/Account/index.js

 import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react'
 import styles from './index.less'
-import { message, Button, Pagination, Modal } from 'antd'
+import { message, Button, Pagination, Modal, Input, Tree } from 'antd'
+import { DownOutlined } from '@ant-design/icons'
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import SearchGroup from './components/SearchGroup'
 import TablePack from './components/TablePack'
 import BatchEdit from './components/BatchEdit'
 import {
   GetAccountConfigInfo,
+  GetAccountTree,
   GetAccountPageList,
   GetTableDataInfo,
   EditTableDataInfo,
@@ -37,7 +39,8 @@ const Account = (props, ref) => {
     }
   ))
 
-  const { accountName, parentConfig, notUse } = props
+  const { accountName, parentConfig, notUse, superAccount } = props
+  const isTreeAccount = Boolean(superAccount === 'true')
   const userID = window?.globalConfig?.userInfo?.OID || 1
   const initParams = {
     user: userID,
@@ -51,6 +54,10 @@ const Account = (props, ref) => {
     timeTo: '',
     queryWheres: [],
   }
+  const [treeShow, setTreeShow] = useState(true)
+  const [treeData, setTreeData] = useState([])
+  const [expandedKeys, setExpandedKeys] = useState([])
+  const [treeValue, setTreeValue] = useState([accountName])
   const [detailShow, setDetailShow] = useState(false)
   const [params, setParams] = useState(initParams)
   const [loading, setLoading] = useState(false)
@@ -61,9 +68,9 @@ const Account = (props, ref) => {
   const [submitLoading, setSubmitLoading] = useState(false)
   const [operation, setOperation] = useState({ id: null, state: '添加' })
   const [keys, setKeys] = useState([])
-  const formRenderRef = useRef()
-  const tablePackRef = useRef()
-  const batchEditRef = useRef()
+  const formRenderRef = useRef(null)
+  const tablePackRef = useRef(null)
+  const batchEditRef = useRef(null)
 
   const getTableColumns = () => {
     return tablePackRef?.current?.fileColumns || []
@@ -253,12 +260,12 @@ const Account = (props, ref) => {
     getDataSource({ ...values })
   }
 
-  const getConfig = async () => {
+  const getConfig = async ({ accountName }) => {
     setConfigLoading(true)
     const { code, data, msg } = await GetAccountConfigInfo(accountName)
     if (code === 0) {
       setConfig({ ...data, formJson: isJson(data.formJson) ? JSON.parse(data.formJson) : {} })
-      getDataSource({ siteFilter: Boolean(data.enableSiteFilter) })
+      getDataSource({ siteFilter: Boolean(data.enableSiteFilter), accountName })
     } else {
       message.error(msg)
     }
@@ -303,61 +310,109 @@ const Account = (props, ref) => {
     getDataSource()
   }
 
+  const treeChange = (value) => {
+    if (value.length) {
+      setTreeValue(value)
+      getConfig({ accountName: value[0] })
+    }
+  }
+
+  const getTree = async () => {
+    const { code, data, msg } = await GetAccountTree(accountName)
+    if (code === 0) {
+      setExpandedKeys([data.accountName])
+      setTreeData([data])
+    } else {
+      message.error(msg)
+    }
+  }
+
   useEffect(() => {
     if (parentConfig) {
       setConfig(parentConfig)
       getDataSource({ siteFilter: Boolean(parentConfig.enableSiteFilter) })
     } else {
-      getConfig()
+      getConfig({ accountName })
     }
+    getTree()
   }, [])
 
   return (
     <div className={styles.account}>
       <div className={styles.tableRender} style={{ display: !detailShow ? 'block' : 'none' }}>
         <div className={styles.content}>
-          <div className={styles.top}>
-            <SearchGroup
-              onChange={search}
-              btnsClick={btnsClick}
-              keys={keys}
-              accountName={accountName}
-              config={config}
-              notUse={notUse}
-            />
-          </div>
-          <div className={styles.bottom}>
-            {
-              !configLoading ? (
-                <TablePack
-                  loading={loading}
-                  notUse={notUse}
-                  config={config}
-                  dataSource={dataSource}
-                  rowSelection={{
-                    type: 'checkbox',
-                    selectedRowKeys: keys,
-                    fixed: 'left',
-                    onChange: (keys) => setKeys(keys)
-                  }}
-                  btnsClick={btnsClick}
-                  tableChange={tableChange}
-                  ref={tablePackRef}
+          {
+            isTreeAccount ? (
+              <div
+                style={{
+                  width: treeShow ? '236px' : '0',
+                  padding: treeShow ? '10px' : '0',
+                }}
+                className={styles.left}
+              >
+                <div className={styles['t-header']} style={{ padding: treeShow ? '5px 10px' : '0' }}>台账列表</div>
+                <Tree
+                  style={{ overflow: 'hidden' }}
+                  checkable
+                  checkStrictly
+                  showIcon
+                  blockNode
+                  expandedKeys={expandedKeys}
+                  onExpand={(expandedKeys) => setExpandedKeys(expandedKeys)}
+                  fieldNames={{ title: 'accountName', key: 'accountName', children: 'children' }}
+                  switcherIcon={<DownOutlined />}
+                  checkedKeys={treeValue}
+                  treeData={treeData}
+                  onSelect={treeChange}
                 />
-              ) : null
-            }
-          </div>
-        </div>
-        <div className={styles.footer}>
-          <div className={styles.total}>共计{params.total}条数据</div>
-          <div className={styles.pagination}>
-            <Pagination
-              showQuickJumper
-              pageSize={params.pageSize}
-              current={params.pageIndex}
-              total={params.total}
-              onChange={pageChange}
-            />
+                <div className={styles.shrink} type={`${treeShow}`} onClick={() => setTreeShow(!treeShow)}></div>
+              </div>
+            ) : null
+          }
+          <div className={styles.right} style={{ width: isTreeAccount && treeShow ? 'calc(100% - 250px)' : '100%' }}>
+            <div className={styles.top}>
+              <SearchGroup
+                onChange={search}
+                btnsClick={btnsClick}
+                keys={keys}
+                accountName={accountName}
+                config={config}
+                notUse={notUse}
+              />
+            </div>
+            <div className={styles.bottom}>
+              {
+                !configLoading ? (
+                  <TablePack
+                    loading={loading}
+                    notUse={notUse}
+                    config={config}
+                    dataSource={dataSource}
+                    rowSelection={{
+                      type: 'checkbox',
+                      selectedRowKeys: keys,
+                      fixed: 'left',
+                      onChange: (keys) => setKeys(keys)
+                    }}
+                    btnsClick={btnsClick}
+                    tableChange={tableChange}
+                    ref={tablePackRef}
+                  />
+                ) : null
+              }
+            </div>
+            <div className={styles.footer}>
+              <div className={styles.total}>共计{params.total}条数据</div>
+              <div className={styles.pagination}>
+                <Pagination
+                  showQuickJumper
+                  pageSize={params.pageSize}
+                  current={params.pageIndex}
+                  total={params.total}
+                  onChange={pageChange}
+                />
+              </div>
+            </div>
           </div>
         </div>
         <BatchEdit config={config} ref={batchEditRef} onOk={batchEditOk} />

src/core/Account/index.less

 @import '~antd/es/style/themes/default.less';
+@imgSrc: '../../assets/images/accout';
 .account {
   width: 100%;
   height: 100%;
   .tableRender {
     width: 100%;
     height: 100%;
-    padding-bottom: 50px;
-    position: relative;
     .content {
       width: 100%;
       height: 100%;
-      .top {
-        width: 100%;
-        height: 40px;
-      }
-      .bottom {
-        width: 100%;
-        height: calc(100% - 50px);
-      }
-    }
-    .footer {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 50px;
       display: flex;
-      align-items: center;
       justify-content: space-between;
+      .left {
+        width: 236px;
+        height: 100%;
+        padding: 10px;
+        margin-right: 14px;
+        position: relative;
+        transition: all 0.3s ease-out;
+        .t-header {
+          overflow: hidden;
+          font-size: 15px;
+          font-weight: bold;
+          background: linear-gradient(#add7fc, #ffffff);
+          padding: 5px 10px;
+          color: #1890ff;
+        }
+        .shrink {
+          position: absolute;
+          right: -14px;
+          top: 50%;
+          transform: translateY(-50%);
+          height: 100px;
+          width: 14px;
+          &:hover {
+            cursor: pointer;
+          }
+          &[type='true'] {
+            background: url('@{imgSrc}/show_true.png');
+            background-size: 100% 100%;
+          }
+          &[type='false'] {
+            background: url('@{imgSrc}/show_false.png');
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .right {
+        transition: all 0.3s ease-out;
+        width: calc(100% - 250px);
+        height: 100%;
+        padding-bottom: 50px;
+        position: relative;
+        .top {
+          width: 100%;
+          height: 40px;
+        }
+        .bottom {
+          width: 100%;
+          height: calc(100% - 50px);
+        }
+        .footer {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
     }
   }
   .tableDetail {