Commit a0b143a5 authored by 田翔's avatar 田翔

fix: 代码优化

parent 74f5bfa7
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "5.5.7", "version": "5.5.8",
"description": "5.5.7 预览图片优化", "description": "5.5.8 增加台账树形结构",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
......
...@@ -204,6 +204,17 @@ export function GetAccountConfigInfo(accountName) { ...@@ -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) { export function GetAccountPageList(data) {
return request({ return request({
......
import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react' import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react'
import styles from './index.less' 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 { ExclamationCircleOutlined } from '@ant-design/icons'
import SearchGroup from './components/SearchGroup' import SearchGroup from './components/SearchGroup'
import TablePack from './components/TablePack' import TablePack from './components/TablePack'
import BatchEdit from './components/BatchEdit' import BatchEdit from './components/BatchEdit'
import { import {
GetAccountConfigInfo, GetAccountConfigInfo,
GetAccountTree,
GetAccountPageList, GetAccountPageList,
GetTableDataInfo, GetTableDataInfo,
EditTableDataInfo, EditTableDataInfo,
...@@ -37,7 +39,8 @@ const Account = (props, ref) => { ...@@ -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 userID = window?.globalConfig?.userInfo?.OID || 1
const initParams = { const initParams = {
user: userID, user: userID,
...@@ -51,6 +54,10 @@ const Account = (props, ref) => { ...@@ -51,6 +54,10 @@ const Account = (props, ref) => {
timeTo: '', timeTo: '',
queryWheres: [], 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 [detailShow, setDetailShow] = useState(false)
const [params, setParams] = useState(initParams) const [params, setParams] = useState(initParams)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
...@@ -61,9 +68,9 @@ const Account = (props, ref) => { ...@@ -61,9 +68,9 @@ const Account = (props, ref) => {
const [submitLoading, setSubmitLoading] = useState(false) const [submitLoading, setSubmitLoading] = useState(false)
const [operation, setOperation] = useState({ id: null, state: '添加' }) const [operation, setOperation] = useState({ id: null, state: '添加' })
const [keys, setKeys] = useState([]) const [keys, setKeys] = useState([])
const formRenderRef = useRef() const formRenderRef = useRef(null)
const tablePackRef = useRef() const tablePackRef = useRef(null)
const batchEditRef = useRef() const batchEditRef = useRef(null)
const getTableColumns = () => { const getTableColumns = () => {
return tablePackRef?.current?.fileColumns || [] return tablePackRef?.current?.fileColumns || []
...@@ -253,12 +260,12 @@ const Account = (props, ref) => { ...@@ -253,12 +260,12 @@ const Account = (props, ref) => {
getDataSource({ ...values }) getDataSource({ ...values })
} }
const getConfig = async () => { const getConfig = async ({ accountName }) => {
setConfigLoading(true) setConfigLoading(true)
const { code, data, msg } = await GetAccountConfigInfo(accountName) const { code, data, msg } = await GetAccountConfigInfo(accountName)
if (code === 0) { if (code === 0) {
setConfig({ ...data, formJson: isJson(data.formJson) ? JSON.parse(data.formJson) : {} }) setConfig({ ...data, formJson: isJson(data.formJson) ? JSON.parse(data.formJson) : {} })
getDataSource({ siteFilter: Boolean(data.enableSiteFilter) }) getDataSource({ siteFilter: Boolean(data.enableSiteFilter), accountName })
} else { } else {
message.error(msg) message.error(msg)
} }
...@@ -303,19 +310,66 @@ const Account = (props, ref) => { ...@@ -303,19 +310,66 @@ const Account = (props, ref) => {
getDataSource() 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(() => { useEffect(() => {
if (parentConfig) { if (parentConfig) {
setConfig(parentConfig) setConfig(parentConfig)
getDataSource({ siteFilter: Boolean(parentConfig.enableSiteFilter) }) getDataSource({ siteFilter: Boolean(parentConfig.enableSiteFilter) })
} else { } else {
getConfig() getConfig({ accountName })
} }
getTree()
}, []) }, [])
return ( return (
<div className={styles.account}> <div className={styles.account}>
<div className={styles.tableRender} style={{ display: !detailShow ? 'block' : 'none' }}> <div className={styles.tableRender} style={{ display: !detailShow ? 'block' : 'none' }}>
<div className={styles.content}> <div className={styles.content}>
{
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}
/>
<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}> <div className={styles.top}>
<SearchGroup <SearchGroup
onChange={search} onChange={search}
...@@ -347,7 +401,6 @@ const Account = (props, ref) => { ...@@ -347,7 +401,6 @@ const Account = (props, ref) => {
) : null ) : null
} }
</div> </div>
</div>
<div className={styles.footer}> <div className={styles.footer}>
<div className={styles.total}>共计{params.total}条数据</div> <div className={styles.total}>共计{params.total}条数据</div>
<div className={styles.pagination}> <div className={styles.pagination}>
...@@ -360,6 +413,8 @@ const Account = (props, ref) => { ...@@ -360,6 +413,8 @@ const Account = (props, ref) => {
/> />
</div> </div>
</div> </div>
</div>
</div>
<BatchEdit config={config} ref={batchEditRef} onOk={batchEditOk} /> <BatchEdit config={config} ref={batchEditRef} onOk={batchEditOk} />
</div> </div>
{ {
......
@import '~antd/es/style/themes/default.less'; @import '~antd/es/style/themes/default.less';
@imgSrc: '../../assets/images/accout';
.account { .account {
width: 100%; width: 100%;
height: 100%; height: 100%;
.tableRender { .tableRender {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-bottom: 50px;
position: relative;
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
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 { .top {
width: 100%; width: 100%;
height: 40px; height: 40px;
...@@ -18,7 +60,6 @@ ...@@ -18,7 +60,6 @@
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
} }
}
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -30,6 +71,8 @@ ...@@ -30,6 +71,8 @@
justify-content: space-between; justify-content: space-between;
} }
} }
}
}
.tableDetail { .tableDetail {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment