Skip to content

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

fix: 重构了台账管理模块，流程模块选择表字段并排序的逻辑

parent aec5ad02
Expand all Show whitespace changes
Inline Side-by-side
Showing with 175 additions and 158 deletions
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less
View file @ e8376731
......@@ -78,27 +78,6 @@
margin-bottom: 16px;
height: 530px;
overflow-y: scroll;
table {
width: 100%;
td {
padding: 6px;
border: 1px solid #e8e8e8;
}
thead {
tr {
font-weight: 600;
background: #fafafa;
}
td {
width: 12rem;
}
}
tbody {
tr:hover {
background-color: #ededed;
}
}
}
}
}
.header {
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx
View file @ e8376731
......@@ -34,6 +34,7 @@ const NodeEdit = props => {
const [backType, setBackType] = useState([]); // 反馈类型
const [eventTable, setEventTable] = useState([]); // 表名
const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择
const [filedData, setFiledData] = useState([]); // 已选字段列表
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
......@@ -100,6 +101,9 @@ const NodeEdit = props => {
loadEventFields({ eventTableName: value.TableName }).then(res => {
if (res.code === 0) {
let defaultCheckedList = value[val] ? value[val].split(',') : [];
// 保存所有的字段用于右侧显示
setFiledData(defaultCheckedList);
let allFields = []; // 所有得字段用来判断是否为外部字段
// 处理树形结构
let checkList = res.data.map(item => {
......@@ -393,6 +397,7 @@ const NodeEdit = props => {
handleCancel={() => setShowField(false)}
fieldList={fieldList}
onSubumit={val => setFiled(val)}
filedData={filedData}
/>
</Drawer>
);
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx
View file @ e8376731
import React, { useEffect, useState } from 'react';
import Sortable from 'sortablejs';
import React, { useEffect, useState, useRef } from 'react';
import { Modal, Divider, Checkbox } from 'antd';
import styles from '../../flowNode.less';
import DragTable from '@/components/DragTable/DragTable';
const CheckboxGroup = Checkbox.Group;
const Fieldselection = props => {
const { onSubumit, handleCancel, visible, fieldList } = props;
// 自定义获取改变后的值hooks
const usePrevious = value => {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const { onSubumit, handleCancel, visible, fieldList, filedData } = props;
const [checkList, setCheckList] = useState([]);
const [selectList, setSelectList] = useState([]); // 选中字段列表
const [isFirst, setIsFirst] = useState(true);
const prevAmount = usePrevious({ checkList });
const columns = [
{
title: '字段名',
dataIndex: 'name',
width: 150,
key: 'name',
},
];
useEffect(() => {
if (visible) {
setCheckList(fieldList);
let newArr = filedData.map(item => {
return { name: item };
});
setSelectList(newArr);
} else {
setSelectList([]);
setCheckList([]);
setIsFirst(true);
}
}, [visible]);
useEffect(() => {
let arr = [];
if (checkList.length < 0) {
if (prevAmount) {
selectAll();
}
}, [checkList]);
const selectAll = () => {
if (!visible) {
return;
}
// 是否第一次保存数据
if (isFirst) {
setIsFirst(false);
return;
}
checkList.forEach(element => {
arr = [...arr, ...element.defaultCheckedList];
// 新的选择后的数据（已选字段列表数据）
let newSelect = JSON.parse(JSON.stringify(selectList));
// 当前选中的
let currentArr = [];
// 上一次选中的
let preArr = [];
// 获取扁平化后的数组
checkList.forEach(item => {
currentArr = [...currentArr, ...item.defaultCheckedList];
});
setSelectList(arr);
// 初始化拖拽
setTimeout(() => {
dragSort();
}, 0);
}, [checkList]);
prevAmount.checkList.forEach(item => {
preArr = [...preArr, ...item.defaultCheckedList];
});
currentArr = new Set(currentArr);
preArr = new Set(preArr);
// 找出相同的部分
let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
// 复选框事选中还是取消选中 add or del
let checkType;
if ([...currentArr].length > [...preArr].length) {
checkType = 'add';
} else if ([...currentArr].length < [...preArr].length) {
checkType = 'del';
}
if (checkType === 'add') {
// 添加新选中的元素
currentArr.forEach(item => {
if (someArr.indexOf(item) === -1) {
newSelect.push({ name: item });
}
});
} else if (checkType === 'del') {
// 删除取消勾选的元素
preArr.forEach(item => {
if (someArr.indexOf(item) === -1) {
newSelect.splice(newSelect.findIndex(ele => ele.name === item), 1);
}
});
}
console.log(newSelect, 'newSelect');
setSelectList(newSelect);
};
// 提交表单
const onFinish = () => {
onSubumit(selectList);
let callArr = selectList.map(item => item.name);
onSubumit(callArr);
};
// 复选框
const onChange = (list, index) => {
......@@ -55,23 +124,10 @@ const Fieldselection = props => {
return chooseList;
});
};
// 初始化排序
const dragSort = () => {
let el = document.getElementById('doctor-drag-items');
if (el) {
Sortable.create(el, {
animation: 100, // 动画参数
onEnd(evt) {
// 拖拽完毕之后发生，只需关注该事件
let arr = [];
let len = evt.from.children;
len.forEach(item => {
arr.push(item.getAttribute('drag-id'));
});
// 拖拽回调
const dragCallBack = arr => {
if (arr) {
setSelectList(arr);
},
});
}
};
return (
......@@ -126,30 +182,16 @@ const Fieldselection = props => {
</Divider>
</div>
<div className={styles.doctorTable}>
<table>
<thead>
<tr>
<td>字段名</td>
</tr>
</thead>
<tbody id="doctor-drag-items">
{selectList && selectList.length > 0 ? (
selectList.map((item, index) => (
<tr drag-id={item} key={index} style={{ cursor: 'move' }}>
<td>
<span title={item}>{item}</span>
</td>
</tr>
))
) : (
<tr>
<td colSpan="10" style={{ textAlign: 'center' }}>
暂无数据
</td>
</tr>
)}
</tbody>
</table>
<DragTable
bordered
rowKey={record => record.name}
columns={columns}
dataSource={selectList}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="stadingOrder"
/>
</div>
</div>
</div>
......
src/pages/platformCenter/standingBook/standingBook.jsx
View file @ e8376731
......@@ -16,12 +16,15 @@ import {
PlusSquareFilled,
RightOutlined,
EditTwoTone,
DeleteOutlined
DeleteOutlined,
} from '@ant-design/icons';
import classnames from 'classnames';
import PageContainer from '@/components/BasePageContainer';
import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
import AddModal from './editorModal'
import {
GetCM_Ledger_LoadLedgers,
CM_Ledger_RmoveLedger,
} from '@/services/standingBook/api';
import AddModal from './editorModal';
import styles from './standingBook.less';
const standingBook = props => {
const [allData, setAllData] = useState([]);
......@@ -40,7 +43,6 @@ const standingBook = props => {
setFormObj(record);
setIsType('edit');
setIsVisible(true);
};
const Submit = prop => {
setIsVisible(false);
......@@ -74,21 +76,18 @@ const standingBook = props => {
dataIndex: 'fields',
key: 'fields',
align: 'center',
},
{
title: '检索字段',
dataIndex: 'searchFields',
key: 'searchFields',
align: 'center',
},
{
title: '添加字段',
dataIndex: 'addFields',
key: 'addFields',
align: 'center',
},
{
......@@ -96,21 +95,18 @@ const standingBook = props => {
dataIndex: 'editFields',
key: 'editFields',
align: 'center',
},
{
title: '前端字段',
dataIndex: 'webFields',
key: 'webFields',
align: 'center',
},
{
title: '手持字段',
dataIndex: 'mobileFields',
key: 'mobileFields',
align: 'center',
},
{
title: '操作',
......@@ -125,15 +121,10 @@ const standingBook = props => {
/>
</Tooltip>
<Tooltip title="删除此表">
<Popconfirm
placement="bottomRight"
title={
<p>
是否删除此表
</p>
}
title={<p>是否删除此表</p>}
// title={`确认删除用户${currentUser}`}
okText="确认"
cancelText="取消"
......@@ -142,26 +133,24 @@ const standingBook = props => {
<DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
</Popconfirm>
</Tooltip>
</Space>
),
},
];
useEffect(() => {
setTreeLoading(true);
GetCM_Ledger_LoadLedgers().then(res => {
setTreeLoading(false);
if (res.msg === 'Ok' && res.data.root) {
console.log(res.data.root)
setMaxLength(res.data.root.length + 1)
let arr = formateArrDataA(res.data.root, 'type')
let newArr = []
console.log(res.data.root);
setMaxLength(res.data.root.length + 1);
let arr = formateArrDataA(res.data.root, 'type');
let newArr = [];
Object.keys(arr).map((item, index) => {
newArr.push(item)
})
console.log(arr)
newArr.push(item);
});
console.log(arr);
setAllData(arr);
// 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
......@@ -169,47 +158,46 @@ const standingBook = props => {
setTableData(newArr);
}
});
}, [flag]);
const formateArrDataA = (initialArr, name) => {
console.log(initialArr)
console.log(name)
console.log(initialArr);
console.log(name);
// 判定传参是否符合规则
if (!(initialArr instanceof Array)) {
return '请传入正确格式的数组'
return '请传入正确格式的数组';
}
if (!name) {
return '请传入对象属性'
return '请传入对象属性';
}
//先获取一下这个数组中有多少个"name"
let nameArr = []
// 先获取一下这个数组中有多少个"name"
let nameArr = [];
for (let i in initialArr) {
if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
nameArr.push(initialArr[i][`${name}`])
nameArr.push(initialArr[i][`${name}`]);
}
}
//新建一个包含多个list的结果对象
let tempObj = {}
// 新建一个包含多个list的结果对象
let tempObj = {};
// 根据不同的"name"生成多个数组
for (let k in nameArr) {
for (let j in initialArr) {
if (initialArr[j][`${name}`] == nameArr[k]) {
// 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
tempObj[nameArr[k]] = tempObj[nameArr[k]] || []
tempObj[nameArr[k]].push(initialArr[j])
tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
tempObj[nameArr[k]].push(initialArr[j]);
}
}
}
for (let keys in tempObj) {
let arr = []
let arr = [];
tempObj[keys].map((item, index) => {
tempObj[keys] = arr;
item.key = index
arr.push(item)
})
}
return tempObj
item.key = index;
arr.push(item);
});
}
return tempObj;
};
// 删除表字段
const deleteChart = record => {
CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
......@@ -229,34 +217,34 @@ const standingBook = props => {
}
});
};
//显示弹框
// 显示弹框
const showPopup = () => {
setIsVisible(true)
setIsType('add')
}
setIsVisible(true);
setIsType('add');
};
const onSubmit = () => {
setIsVisible(false);
setFlag(flag + 1)
setFlag(flag + 1);
};
return (
<PageContainer className={styles.userManageContainer}>
<div className={styles.contentContainers}>
<Spin spinning={treeLoading} tip="loading...">
<Card
className={classnames({
[styles.orgContainer]: true,
[styles.orgContainerHide]: !treeVisible,
})}
>
{treeVisible ? <>
{treeVisible ? (
<>
<div>
<span
style={{
fontSize: '15px ',
fontWeight: 'bold',
color: '#333E51',
paddingLeft: '14px'
paddingLeft: '14px',
}}
>
台账列表
......@@ -268,21 +256,33 @@ const standingBook = props => {
fontSize: '25px',
verticalAlign: 'middle',
float: 'right',
paddingRight: '14px'
paddingRight: '14px',
}}
onClick={e => showPopup()}
/>
</Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} />
{
tableData.length>0 && (tableData.map((item, index) => {
return <div className={classnames({
{tableData.length > 0 &&
tableData.map((item, index) => {
return (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item === pickItem,
})} onClick={e => setPickItem(item)} key={index}>{item}（{allData[item] ? allData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div>
})
})}
onClick={e => setPickItem(item)}
key={index}
>
{item}（{allData[item] ? allData[item].length : ''}）{' '}
{item === pickItem ? <RightOutlined /> : ''}{' '}
</div>
);
})}
</div>
</>
) : (
''
)}
</div></> : ''}
<div className={styles.switcher}>
{treeVisible && (
......@@ -306,11 +306,14 @@ const standingBook = props => {
>
<Table
size="small"
rowKey='ID'
rowKey="ID"
bordered
onRow={record => {
return {
onDoubleClick: event => {event.stopPropagation(); editor(record)}, //双击
onDoubleClick: event => {
event.stopPropagation();
editor(record);
}, // 双击
};
}}
columns={columns}
......@@ -328,11 +331,17 @@ const standingBook = props => {
}}
/>
</div>
<AddModal visible={isVisible} type={isType} formObj={formObj} maxLength={maxLength} callBackSubmit={onSubmit} onCancel={() => setIsVisible(false)} tableData={tableData} />
<AddModal
visible={isVisible}
type={isType}
formObj={formObj}
maxLength={maxLength}
callBackSubmit={onSubmit}
onCancel={() => setIsVisible(false)}
tableData={tableData}
/>
</div>
</PageContainer>
);
};
export default standingBook;
src/pages/platformCenter/standingBook/standingBook.less
View file @ e8376731
......@@ -295,7 +295,7 @@
padding: 0.5rem;
}
.cardContent{
height: 30rem;
height: 40rem;
overflow-y: scroll;
width: 19.5rem;
}
......@@ -311,24 +311,6 @@
.doctorTable {
margin-bottom: 16px;
table {
width: 100%;
td {
padding: 6px;
border: 1px solid #e8e8e8;
}
thead {
tr {
font-weight: 600;
background: #FAFAFA;
}
}
tbody{
tr:hover{
background-color:#ededed ;
}
}
}
}
.formData{
height: calc(100vh - 170px);
......
src/routes/config.js
View file @ e8376731
......@@ -22,7 +22,7 @@ import CurrentSolution from '@/pages/currentSolution/CurrentSolution';
import UserManage from '../pages/userCenter/userManage/UserManage';
import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
import SiteManage from '../pages/userCenter/siteManage/SiteManage';
import SiteManageV2 from '../pages/userCenter/siteManageV2/SiteManage';
import SiteManageV2 from '../pages/userCenter/siteManageV2/siteManage';
import Dictionary from '../pages/dataCenter/dictionary';
import Dictionary1 from '../pages/dataCenter/dictionary1';
// import Search from '../pages/dataCenter/search';
......
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