Skip to content

C
CivManage
Commit 4a1f6436 authored by 邓超's avatar 邓超
Browse files
Options

fix: 解决树卡顿

parent 4023f242
Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 268 deletions
src/components/Upload/index.tsx
View file @ 4a1f6436
......@@ -429,7 +429,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
</div>
<Modal
visible={previewVisible}
title={previewTitle}
// title={previewTitle}
footer={null}
onCancel={this.handleCancel}
>
......
src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx
View file @ 4a1f6436
......@@ -57,7 +57,7 @@ const AddModal = props => {
const [selectTreeData, setSelectTreeData] = useState([]);
const [selectDataFirst, setSelectDataFirst] = useState([]);
const [multiOperate, setMultiOperate] = useState(true); // 是否禁用用户批量操作
const [selectedRowKeys, setSelectedRowKeys] = useState(['13926', '13941']); // 已选字段配置数,机构改变时重置
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选字段配置数,机构改变时重置
const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 批量删除
const [checkStrictly, setCheckStrictly] = useState(false);
const [selectGroup, setSelectGroup] = useState([]);
......@@ -412,13 +412,16 @@ const AddModal = props => {
// 返回上一级
const back = () => {
console.log(props.location.state);
let { template, tableScroll, keepValue } = props.location.state;
let { template, tableScroll, keepValue, pickIndex, groupArr } = props.location.state;
console.log(keepValue);
console.log(pickIndex, groupArr, 'back');
history.push({
pathname: '/bsmanger/base/tablemanger',
query: {
template,
tableScroll,
backIndex: pickIndex,
group: groupArr,
keepValue,
},
});
......
src/pages/bsmanager/base/tablemanager/index.jsx
View file @ 4a1f6436
......@@ -14,6 +14,7 @@ import {
Tooltip,
Badge,
Spac,
Card,
} from 'antd';
import {
EditOutlined,
......@@ -23,6 +24,8 @@ import {
SortDescendingOutlined,
PlusOutlined,
BorderInnerOutlined,
DoubleLeftOutlined,
DoubleRightOutlined,
} from '@ant-design/icons';
import PageContainer from '@/components/BasePageContainer';
import {
......@@ -37,7 +40,6 @@ import AddTablelList from './components/Field/addTable';
import AffiliateAdd from './components/Field/affiliateAdd';
import LoadGroup from './components/Field/loadGroup';
import LoadGroupNew from './components/Field/loadGroupNew';
import { ChangedEvent } from 'gojs';
const { Search } = Input;
const { Option } = Select;
const placeholder = '请输入表名';
......@@ -48,6 +50,7 @@ const TableManager = props => {
const [type, setType] = useState(''); // 弹窗类型
const [formObj, setFormObj] = useState({});
const [flag, setFlag] = useState(0); // 弹窗类型
// const [initNum, setIntNum] = useState(0);
const [searchValue, setSearchValue] = useState('');
const [treeLoading, setTreeLoading] = useState(true);
const [tableList, setTableList] = useState([]);
......@@ -61,6 +64,10 @@ const TableManager = props => {
const [keepValue, setKeepValue] = useState([0]);
const [keepTreeSelect, setKeepTreeSelect] = useState([]);
const [keepTreeFirst, setKeepTreeFirst] = useState([]);
const [treeVisible, setTreeVisible] = useState(true); // 是否显示左侧树
const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
const [pickIndex, setPickIndex] = useState(0);
let initNum = 0;
useEffect(
record => {
loadTable(searchValue);
......@@ -77,18 +84,29 @@ const TableManager = props => {
let arr = Object.keys(allData);
console.log(selectTableName, 'selectTableName');
console.log(arr, 'arr');
console.log(initNum, 'initNum');
console.log(props.history.location.query, 'props.history.location.query');
if (arr.length > 0 && props.history.location.query && selectTableName == '') {
if (arr.length > 0 && props.history.location.query && selectTableName == '' && initNum == 0) {
console.log(234534256342);
let { tableScroll, template, keepValue } = props.history.location.query;
let { tableScroll, template, keepValue, group, backIndex } = props.history.location.query;
setSelectTableName(template);
console.log(group, 'group');
setTimeout(() => {
setSelect(group[backIndex].type);
setPickIndex(backIndex);
console.log(group, 'group');
setGroupArr(group);
document.querySelector('.ant-table-body').scrollTop = tableScroll;
}, 0);
setChooseLine(keepValue);
setKeepValue(keepValue);
}
}, [allData]);
useEffect(() => {
console.log(groupArr, 'groupArr');
}, [groupArr]);
// 附加
const add = record => {
setFormObj(record);
......@@ -146,6 +164,8 @@ const TableManager = props => {
state: {
template: record,
tableScroll: document.querySelector('.ant-table-body').scrollTop,
groupArr: groupArr,
pickIndex: pickIndex,
keepValue: keepValue,
keepTreeSelect: keepTreeSelect,
keepTreeFirst: keepTreeFirst,
......@@ -168,6 +188,8 @@ const TableManager = props => {
const handleSearch = text => {
loadTable(text);
setSearchValue(text);
setSelectTableName('');
setPickIndex(1);
setShowSearchStyle(true);
};
const getField = () => {
......@@ -188,26 +210,32 @@ const TableManager = props => {
.then(res => {
setTreeLoading(false);
if (res.msg === 'Ok') {
setTableData(res.data.root);
// setTableData(res.data.root);
let groupData = formateArrDataA(res.data.root, 'groupName');
let newArr = [];
Object.keys(groupData).map((item, index) => {
newArr.push({ type: item, key: index });
});
console.log(newArr);
setAllData(groupData);
console.log(groupData);
let aa = [];
let bb = [];
Object.keys(groupData).forEach((item, index) => {
Object.keys(groupData).map((item, index) => {
newArr.push({ type: item, key: index, page: 1, pageSize: 20 });
aa.push({ name: item, key: index, ID: index, children: groupData[item] });
bb.push(item);
});
console.log(groupData, 'groupData');
setAllData(groupData);
if (!props.history.location.query || keyword) {
console.log(keyword, 'keyword');
console.log(newArr, 'newArr');
setSelect(newArr[0].type);
setGroupArr(newArr);
}
console.log(bb);
setKeepTreeFirst(bb);
setKeepTreeSelect(aa);
setGroupArr(newArr);
setSelect(newArr);
// setIntNum(initNum + 1);
initNum += 1;
}
})
.catch(e => {
......@@ -255,8 +283,21 @@ const TableManager = props => {
Object.entries(record).toString() === Object.entries(selectTableName).toString()
? styles.clickRowStyle
: '';
const expandedRowRender = item => {
const columns1 = [
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
if (showSearchStyle) {
n = val.replace(
new RegExp(searchValue, 'g'),
`<span style='color:red'>${searchValue}</span>`,
);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
const columns = [
{
title: '名称',
dataIndex: 'tableName',
......@@ -271,12 +312,14 @@ const TableManager = props => {
dataIndex: 'tableAlias',
key: 'tableAlias',
align: 'center',
render: text => <div>{text || '(无)'}</div>,
},
{
title: '表格样式',
dataIndex: 'tableStyle',
key: 'tableStyle',
align: 'center',
render: text => <div>{text || '大'}</div>,
},
{
title: '附加字段',
......@@ -316,6 +359,7 @@ const TableManager = props => {
ellipsis: true,
key: 'tableID',
align: 'center',
width: 300,
render: (text, record) => (
<Space>
<Tooltip title="修改">
......@@ -360,134 +404,76 @@ const TableManager = props => {
),
},
];
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
if (showSearchStyle) {
n = val.replace(
new RegExp(searchValue, 'g'),
`<span style='color:red'>${searchValue}</span>`,
);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
return (
<Table
columns={columns1}
bordered
size="small"
onRow={record => ({
onDoubleClick: event => {
console.log(keepValue);
event.stopPropagation();
history.push({
pathname: `/bsmanger/base/filedConfig/${record.tableName}`,
state: {
template: record,
tableScroll: document.querySelector('.ant-table-body').scrollTop,
keepValue: keepValue,
keepTreeSelect: keepTreeSelect,
keepTreeFirst: keepTreeFirst,
},
});
},
onClick: event => {
event.stopPropagation();
setSelectTableName(record);
}, // 点击行
})}
rowClassName={setRowClassName}
showHeader={false}
dataSource={allData[item.type]}
pagination={false}
/>
);
};
const columns = [
{
title: '名称',
dataIndex: 'type',
key: 'type',
render: text => (
<a style={{ fontWeight: 'bold' }}>
{text}({allData && allData[text] ? allData[text].length : 0}个)
</a>
),
width: 260,
},
{
title: '别名',
dataIndex: 'tableAlias',
key: 'tableAlias',
align: 'center',
},
{
title: '表格样式',
dataIndex: 'tableStyle',
key: 'tableStyle',
align: 'center',
},
{
title: '附加字段',
dataIndex: 'fieldCount',
key: 'fieldCount',
align: 'center',
},
{
title: '缺少字段',
dataIndex: 'missingFieldCount',
key: 'missingFieldCount',
align: 'center',
render: text => <div>{text}</div>,
},
{
title: '未附加',
dataIndex: 'extraFieldCount',
key: 'extraFieldCount',
align: 'center',
},
{
title: '分组数量',
dataIndex: 'groupCount',
key: 'groupCount',
align: 'center',
},
{
title: '操作',
dataIndex: 'title',
key: 'title',
align: 'center',
},
];
const onUnfold = (expanded, record) => {
const data = [...select];
let index = data.indexOf(record);
if (expanded) {
data.push(record);
} else {
data.splice(index, 1);
}
setSelect(data);
let arr = [];
arr.push(record.key);
if (expanded === true) {
setChooseLine(arr);
console.log(arr);
setKeepValue(arr);
} else {
setChooseLine([]);
setKeepValue([]);
}
const pageChage = (page, pageSize) => {
const list = JSON.parse(JSON.stringify(groupArr));
list[pickIndex].page = page;
list[pickIndex].pageSize = pageSize;
setGroupArr(list);
};
return (
<Spin tip="loading..." spinning={treeLoading}>
<PageContainer>
<div className={styles.content}>
{/* 左侧树 */}
<Spin spinning={treeLoading} tip="loading...">
<Card
className={classnames({
[styles.orgContainer]: true,
[styles.orgContainerHide]: !treeVisible,
})}
>
<div style={{ display: `${treeVisible ? 'block' : 'none'}` }}>
<span className={styles.processTitle}>表分组</span>
<hr className={styles.splitLine} />
<div
style={{
overflowY: 'scroll',
height: 'calc(100vh - 150px)',
overflowX: 'hidden',
}}
>
{groupArr.length > 0 &&
groupArr.map((item, index) => (
<div
key={index}
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item.type === select,
[styles.listHover]: item.type !== select && item.type === hoverItemIndex,
})}
onMouseEnter={() => {
setHoverItemIndex(item.type);
}}
onMouseLeave={() => {
setHoverItemIndex('');
}}
onClick={() => {
setPickIndex(index);
setSelect(item.type);
setTableData(item.root);
}}
>
{item.type}（{allData[item.type]?.length}）
</div>
))}
</div>
</div>
<div className={styles.switcher}>
{treeVisible && (
<Tooltip title="隐藏分组列表">
<DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
</Tooltip>
)}
{!treeVisible && (
<Tooltip title="显示分组列表">
<DoubleRightOutlined onClick={() => setTreeVisible(true)} />
</Tooltip>
)}
</div>
</Card>
</Spin>
<div className={styles.tablemanager_container}>
<div className={styles.operate_bar}>
<div className={styles.fast_search}>
......@@ -520,47 +506,52 @@ const TableManager = props => {
附加表
</Button>
</div>
<div
style={{
width: '100vm',
height: 'calc(100vh - 150px) ',
background: '#ffffff',
}}
>
{/* <Table
columns={columns}
dataSource={tableData}
//pagination={{ pageSize: 10 }}
scroll={{ x: 'max-content', y: 'calc(100vh - 228px)' }}
<div style={{ flex: 1, position: 'relative', width: '100%' }}>
<Table
rowKey={record => record.key}
size="small"
style={{height:'8rem'}}
rowKey={(record, index) => `complete${record.tableID}${index}`}
bordered
style={{ position: 'absolute' }}
columns={columns}
dataSource={allData[select]}
scroll={{ x: 'max-content', y: 'calc(100vh - 222px)' }}
rowClassName={setRowClassName}
onRow={record => ({
onDoubleClick: event => {
console.log(keepValue);
event.stopPropagation();
history.push({
pathname: `/bsmanger/base/filedConfig/${record.tableName}`,
state: {
template: record,
tableScroll: document.querySelector('.ant-table-body').scrollTop,
groupArr: groupArr,
pickIndex: pickIndex,
keepValue: keepValue,
keepTreeSelect: keepTreeSelect,
keepTreeFirst: keepTreeFirst,
},
});
},
onClick: event => {
event.stopPropagation();
setSelectTableName(record);
}, // 点击行
})}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
showQuickJumper: true,
showSizeChanger: true,
current: groupArr[pickIndex] ? groupArr[pickIndex].page : 1,
pageSize: groupArr[pickIndex] ? groupArr[pickIndex].pageSize : 20,
onChange: (page, pageSize) => pageChage(page, pageSize),
}}
/> */}
<Table
className="components-table-demo-nested"
columns={columns}
expandable={{ expandedRowRender }}
defaultExpandedRowKeys={[0]}
expandRowByClick
expandedRowKeys={chooseLine}
dataSource={groupArr}
scroll={{ y: 'calc(100vh - 170px)' }}
size="small"
pagination={false}
onExpand={onUnfold}
style={{ height: '8rem' }}
/>
</div>
</div>
</div>
{visible && type == 'edit' && (
<Editor
visible={visible}
......
src/pages/bsmanager/base/tablemanager/index.less
View file @ 4a1f6436
.content {
position: relative;
display: flex;
width: 100%;
}
.tablemanager_container {
position: relative;
display: flex;
flex-direction: column;
width: 100vm;
width: 100%;
border: 1px solid #f0f0f0;
.lack{
.lack {
background-color: rgb(255, 255, 0);
color: rgb(255, 0, 0);
}
.ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
.ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table {
margin-left: 0;
}
.ant-table.ant-table-bordered > .ant-table-container{
.ant-table.ant-table-bordered > .ant-table-container {
border: none;
}
.ant-table-thead tr th{
.ant-table-thead tr th {
font-weight: 600;
color:rgba(0,0,0,0.85);
color: rgba(0, 0, 0, 0.85);
}
.ant-btn{
.ant-btn {
display: flex;
align-items: center;
}
.clickRowStyle{
.clickRowStyle {
background: #cfe7fd;
}
.operate_bar {
......@@ -46,5 +54,56 @@
}
}
}
}
.orgContainer {
position: relative;
left: 0;
top: 0;
height: calc(100vh - 74px);
width: 250px;
margin-right: 10px;
transition-property: width;
transition-duration: 0.5s;
white-space: nowrap;
.processTitle {
font-size: 15px;
font-weight: bold;
color: #333e51;
padding-left: 14px;
}
.splitLine {
width: 100%;
color: #eeecec;
}
.listItem {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
line-height: 28px;
font-size: 14px;
font-weight: 400;
color: #414e65;
cursor: pointer;
}
.listHover {
background-color: #f5f6f9;
}
.pickItem {
background-color: #aed8fa;
}
.switcher {
display: block;
position: absolute;
font-size: 18px;
color: #1890ff !important;
top: 50%;
right: 2px;
transform: translate(0%, -50%);
z-index: 1;
}
}
.orgContainerHide {
width: 26px;
}
src/pages/bsmanager/workOrder/workFlow/flow.less
View file @ 4a1f6436
......@@ -10,7 +10,7 @@
height: calc(100vh - 74px);
width: 250px;
margin-right: 10px;
transition-property: width, left;
transition-property: width;
transition-duration: 0.5s;
white-space: nowrap;
.processTitle {
......@@ -53,8 +53,6 @@
}
}
.orgContainerHide {
left: 0px;
top: 0;
width: 26px;
}
.processContainer {
......
src/pages/userCenter/userManage/UserManage.jsx
View file @ 4a1f6436
......@@ -80,6 +80,11 @@ import MapScopeEditModal from '@/components/MapScope';
import AuthModal from './AuthModal';
import styles from './UserManage.less';
import { createGuid } from '@/utils/transformUtil';
const TdCell = props => {
// onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
const { onMouseEnter, onMouseLeave, ...restProps } = props;
return <td {...restProps} />;
};
const UserManage = () => {
const { TreeNode } = Tree;
......@@ -842,26 +847,6 @@ const UserManage = () => {
// 查找用户
const submitSearchUser = () => {
// getUserByKey(searchWord)
// .then(res => {
// if (res.success) {
// setSelectedRowKeys([]); // 重置选中用户数
// setCurrentOrgOperate(true); // 禁止当前机构操作
// setMultiOperate(true); // 禁用批量操作
// setOrgTitle('全部机构搜索结果'); // 设置表头
// setCurrentSelectOrg('-1'); // 清空选中机构
// setTableData(res.root);
// setTableLength(res.root.length);
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// message.error(err);
// });
GetUserByKeyNew({ key: searchWord })
.then(res => {
if (res.code === 0) {
......@@ -891,25 +876,6 @@ const UserManage = () => {
// 根据当前 userID 获取用户关联角色
const getRoleList = e => {
setLoading(true);
// getUserRelationList(currentUser.userID)
// .then(res => {
// setLoading(false);
// if (res.success) {
// const { roleList, stationList } = res;
// setRolelist(roleList);
// setStationlist(stationList);
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// setLoading(false);
// setTableLoading(false);
// message.error(err);
// });
GetUserRelationListNew({ userID: e.userID })
.then(res => {
console.log(111);
......@@ -934,25 +900,6 @@ const UserManage = () => {
// 获取全部未勾选的角色列表与站点列表
const getEmptyRoleList = () => {
setLoading(true);
// getUserRelationList('')
// .then(res => {
// setLoading(false);
// if (res.roleList && res.roleList.length > 0) {
// const { roleList, stationList } = res;
// setRolelist(roleList);
// setStationlist(stationList);
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// setLoading(false);
// setTableLoading(false);
// message.error(err);
// });
GetUserRelationListNew({ userID: 0 })
.then(res => {
console.log(222);
......@@ -1133,29 +1080,6 @@ const UserManage = () => {
// };
// 提交-删除用户
const submitDeleteUser = () => {
// postDeleteUser(currentUser.userID)
// .then(res => {
// if (res.success) {
// setDeleteUserVisible(false);
// notification.success({
// message: '提交成功',
// duration: 2,
// });
// // eslint-disable-next-line no-unused-expressions
// currentSelectOrg === '-1'
// ? submitSearchUser()
// : onSelect([currentSelectOrg]);
// } else {
// notification.error({
// message: '提交失败',
// description: res.message,
// });
// }
// })
// .catch(err => {
// setTableLoading(false);
// message.error(err);
// });
DeleteUserNew({
userID: currentUser.userID,
ouID: currentUser.OUID,
......@@ -1462,7 +1386,6 @@ const UserManage = () => {
<div
className={classnames({
[styles.userContainer]: true,
[styles.userContainerHide]: !treeVisible,
})}
>
<div style={{ height: '50px' }}>
......
src/pages/userCenter/userManage/UserManage.less
View file @ 4a1f6436
......@@ -153,7 +153,7 @@
overflow-x: hidden;
margin-right: 10px;
position: relative;
transition-property: width, left;
transition-property: width;
transition-duration: 0.5s;
white-space: nowrap;
.ant-tree {
......@@ -181,8 +181,6 @@
.orgContainerHide {
// transform: translateX(-230px);
left: 0px;
top: 0;
width: 26px;
}
.ant-popover-message-title {
......
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