Skip to content

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

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

parent aec5ad02
Hide whitespace changes
Inline Side-by-side
Showing with 622 additions and 510 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'));
});
setSelectList(arr);
},
});
// 拖拽回调
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/changeAdd.jsx
View file @ e8376731
/* eslint-disable indent */
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
import styles from './standingBook.less'
import styles from './standingBook.less';
import Sortable from 'sortablejs';
import DragTable from '@/components/DragTable/DragTable';
const CheckboxGroup = Checkbox.Group;
const AddModal = props => {
const { callBackSubmit = () => { }, isType, pickItem, visible, filed, characterValue, newCheckedList } = props;
// 自定义获取改变后的值hooks
const usePrevious = value => {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const {
callBackSubmit = () => {},
isType,
pickItem,
visible,
filed,
characterValue,
newCheckedList,
} = props;
const [loading, setLoading] = useState(false);
const [value, setValue] = useState('');
const [checkValue, setCheckValue] = useState([]);
const [form] = Form.useForm();
const [title, setTitle] = useState([])
const [title, setTitle] = useState([]);
const { Item } = Form;
const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
const [indeterminate, setIndeterminate] = useState([]);
const [checkAll, setCheckAll] = useState([]);
const [selectData, setSelectData] = useState([])
let objArr = []
const [selectData, setSelectData] = useState([]);
const [isFirst, setIsFirst] = useState(true);
const prevAmount = usePrevious({ checkedList });
const onChangeList = (list, index, title) => {
const checkedListArr = [...checkedList]
checkedListArr[index] = list
const checkedListArr = [...checkedList];
checkedListArr[index] = list;
setCheckedList(checkedListArr);
const indeterminateArr = [...indeterminate]
const checkAllArr = [...checkAll]
indeterminateArr[index] = !!list.length && list.length < filed[title].length
checkAllArr[index] = list.length === filed[title].length
setIndeterminate(indeterminateArr)
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
indeterminateArr[index] =
!!list.length && list.length < filed[title].length;
checkAllArr[index] = list.length === filed[title].length;
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
};
const onCheckAllChange = e => {
const indeterminateArr = [...indeterminate]
const checkAllArr = [...checkAll]
const checkedListArr = [...checkedList]
checkAllArr[e.target.index] = e.target.checked
indeterminateArr[e.target.index] = false
e.target.checked ? checkedListArr[e.target.index] = e.target.checkvalue : checkedListArr[e.target.index] = []
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
const checkedListArr = [...checkedList];
checkAllArr[e.target.index] = e.target.checked;
indeterminateArr[e.target.index] = false;
// eslint-disable-next-line no-unused-expressions
e.target.checked
? (checkedListArr[e.target.index] = e.target.checkvalue)
: (checkedListArr[e.target.index] = []);
setCheckedList(checkedListArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
};
//监听用户选择的字段名
// 监听用户选择的字段名
useEffect(() => {
selectAll()
if (prevAmount) {
selectAll();
}
}, [checkedList]);
const selectAll = () => {
objArr = []
checkedList.map(item => {
objArr = objArr.concat(item)
})
setSelectData(objArr)
}
if (!visible) {
return;
}
// 是否第一次保存数据
if (isFirst) {
setIsFirst(false);
return;
}
// 新的选择后的数据（已选字段列表数据）
let newSelect = JSON.parse(JSON.stringify(selectData));
// 当前选中的
let currentArr;
// 上一次选中的
let preArr;
// 获取扁平化后的数组
currentArr = new Set(checkedList.flat());
preArr = new Set(prevAmount.checkedList.flat());
const onSubmit = () => {
isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(","), pickItem });
// 找出相同的部分
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);
}
});
}
setSelectData(newSelect);
};
const onSubmit = () => {
let newArr = selectData.map(item => item.name);
callBackSubmit({ checkedList, str: newArr.join(','), pickItem });
};
const columns = [
{
title: '字段名',
dataIndex: 'name',
width: 150,
key: 'name',
},
];
useEffect(() => {
if (isType != '') {
let arr = Object.keys(filed)
console.log(arr)
console.log(newCheckedList)
console.log(characterValue)
setTitle(arr)
let checkArr = []
let indeterminateArr = []
let checkAllArr = []
if (visible) {
let arr = Object.keys(filed);
setTitle(arr);
let checkArr = [];
let indeterminateArr = [];
let checkAllArr = [];
arr.map((item, index) => {
checkArr[index] = []
checkArr[index] = [];
newCheckedList.map(checkItem => {
if (filed[item].includes(checkItem)) {
checkArr[index].push(checkItem)
checkArr[index].push(checkItem);
}
})
indeterminateArr.push(!!checkArr[index].length && checkArr[index].length < filed[item].length)
checkAllArr.push(checkArr[index].length === filed[item].length)
})
console.log(checkArr)
setCheckedList(checkArr)
setIndeterminate(indeterminateArr)
setCheckAll(checkAllArr)
let newArr = characterValue.length ? characterValue.split(",") : []
setSelectData(newArr)
draftSort()
});
indeterminateArr.push(
!!checkArr[index].length &&
checkArr[index].length < filed[item].length,
);
checkAllArr.push(checkArr[index].length === filed[item].length);
});
setCheckedList(checkArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
let newArr = newCheckedList.map(item => {
return { name: item };
});
if (newArr.length === 1 && newArr[0].name === '') {
newArr = [];
}
setSelectData(newArr);
} else {
// 弹窗关闭时清空数据
setSelectData([]);
setCheckedList([]);
setCheckAll([]);
setIndeterminate([]);
setIsFirst(true);
}
}, [visible]);
//拖拽初始化及逻辑
const draftSort = () => {
let el = document.getElementById('doctor-drag-items');
if (el) {
let sortable = Sortable.create(el, {
animation: 100, //动画参数
onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
let arr = [];
let len = evt.from.children.length;
for (let i = 0; i < len; i++) {
arr.push(evt.from.children[i].getAttribute('drag-id'))
}
setSelectData(arr)
}
});
const dragCallBack = arr => {
if (arr && !isFirst) {
setSelectData(arr);
}
}
};
return (
<Modal
title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }}
width="700px"
destroyOnClose
centered={true}
centered
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
forceRender={true}
forceRender
getContainer={false}
destroyOnClose
>
{visible && (
<div className={styles.listCard}>
<div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
<Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>待选字段列表</Divider>
<div
className={styles.cardItem}
style={{ borderRight: '1px solid #99bbe8' }}
>
<Divider
orientation="left"
style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
>
待选字段列表
</Divider>
<div className={styles.cardContent}>
{title.map((item, index) => {
return <div className={styles.cardItemData} key={index}>
<Divider orientation="left" style={{ margin: '0 0 10px 0', color: '#15428b', borderTopColor: '#99bbe8' }}>{item} <Checkbox indeterminate={indeterminate[index]} onChange={onCheckAllChange} index={index} checkvalue={filed[item]} checked={checkAll[index]}> </Checkbox></Divider>
<CheckboxGroup options={filed[item]} value={checkedList[index]} onChange={(e) => onChangeList(e, index, item)} /></div>
return (
<div className={styles.cardItemData} key={index}>
<Divider
orientation="left"
style={{
margin: '0 0 10px 0',
color: '#15428b',
borderTopColor: '#99bbe8',
}}
>
{item}{' '}
<Checkbox
indeterminate={indeterminate[index]}
onChange={onCheckAllChange}
index={index}
checkvalue={filed[item]}
checked={checkAll[index]}
>
{' '}
</Checkbox>
</Divider>
<CheckboxGroup
options={filed[item]}
value={checkedList[index]}
onChange={e => onChangeList(e, index, item)}
/>
</div>
);
})}
</div>
</div>
<div className={styles.cardItem}>
<Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>已选字段列表</Divider>
<Divider
orientation="left"
style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
>
已选字段列表
</Divider>
<div className={styles.cardContent}>
<div className={styles.doctorTable}>
<table>
<thead>
<tr>
<td>字段名</td>
</tr>
</thead>
<tbody id='doctor-drag-items'>
{selectData && selectData.length > 0 ?
selectData.map((item, index) => {
return <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
style={{ marginBottom: '10px' }}
rowKey={record => record.name}
columns={columns}
dataSource={selectData}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="stadingOrder"
/>
</div>
</div>
</div>
</div>
)
}
)}
</Modal>
);
};
......
src/pages/platformCenter/standingBook/standingBook.jsx
View file @ e8376731
import React, { useState, useEffect } from 'react';
import {
Form,
Card,
Space,
Table,
Popconfirm,
Spin,
Tooltip,
notification,
Form,
Card,
Space,
Table,
Popconfirm,
Spin,
Tooltip,
notification,
} from 'antd';
import {
DoubleLeftOutlined,
DoubleRightOutlined,
PlusSquareFilled,
RightOutlined,
EditTwoTone,
DeleteOutlined
DoubleLeftOutlined,
DoubleRightOutlined,
PlusSquareFilled,
RightOutlined,
EditTwoTone,
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([]);
const [tableData, setTableData] = useState([]);
const [treeLoading, setTreeLoading] = useState(false);
const [maxLength, setMaxLength] = useState(0);
const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
const [formObj, setFormObj] = useState('');
const [flag, setFlag] = useState(0); // 弹窗类型
const [isVisible, setIsVisible] = useState(false); // 弹窗
const [isType, setIsType] = useState(''); // 弹窗类型
const [pickItem, setPickItem] = useState('');
const { Item } = Form;
const editor = record => {
setFormObj(record);
setIsType('edit');
setIsVisible(true);
};
const Submit = prop => {
setIsVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '台账类型',
dataIndex: 'AccountType',
key: 'AccountType',
width: 100,
},
{
title: '台账名称',
dataIndex: 'name',
key: 'name',
align: 'center',
width: 200,
},
{
title: '台账表名',
dataIndex: 'tableName',
key: 'tableName',
align: 'center',
width: 300,
},
{
title: '台账字段',
dataIndex: 'fields',
key: 'fields',
align: 'center',
},
{
title: '检索字段',
dataIndex: 'searchFields',
key: 'searchFields',
align: 'center',
},
{
title: '添加字段',
dataIndex: 'addFields',
key: 'addFields',
align: 'center',
},
const [allData, setAllData] = useState([]);
const [tableData, setTableData] = useState([]);
const [treeLoading, setTreeLoading] = useState(false);
const [maxLength, setMaxLength] = useState(0);
const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
const [formObj, setFormObj] = useState('');
const [flag, setFlag] = useState(0); // 弹窗类型
const [isVisible, setIsVisible] = useState(false); // 弹窗
const [isType, setIsType] = useState(''); // 弹窗类型
const [pickItem, setPickItem] = useState('');
const { Item } = Form;
{
title: '编辑字段',
dataIndex: 'editFields',
key: 'editFields',
align: 'center',
},
{
title: '前端字段',
dataIndex: 'webFields',
key: 'webFields',
align: 'center',
},
{
title: '手持字段',
dataIndex: 'mobileFields',
key: 'mobileFields',
align: 'center',
},
{
title: '操作',
ellipsis: true,
align: 'center',
render: (text, record) => (
<Space>
<Tooltip title="编辑此表">
<EditTwoTone
onClick={() => editor(record)}
style={{ fontSize: '16px' }}
/>
</Tooltip>
const editor = record => {
setFormObj(record);
setIsType('edit');
setIsVisible(true);
};
const Submit = prop => {
setIsVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '台账类型',
dataIndex: 'AccountType',
key: 'AccountType',
width: 100,
},
{
title: '台账名称',
dataIndex: 'name',
key: 'name',
align: 'center',
width: 200,
},
<Tooltip title="删除此表">
<Popconfirm
placement="bottomRight"
title={
<p>
是否删除此表
</p>
}
// title={`确认删除用户${currentUser}`}
okText="确认"
cancelText="取消"
onConfirm={() => deleteChart(record)}
>
<DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
</Popconfirm>
</Tooltip>
{
title: '台账表名',
dataIndex: 'tableName',
key: 'tableName',
align: 'center',
width: 300,
},
{
title: '台账字段',
dataIndex: 'fields',
key: 'fields',
align: 'center',
},
{
title: '检索字段',
dataIndex: 'searchFields',
key: 'searchFields',
align: 'center',
},
{
title: '添加字段',
dataIndex: 'addFields',
key: 'addFields',
align: 'center',
},
</Space>
),
},
];
{
title: '编辑字段',
dataIndex: 'editFields',
key: 'editFields',
align: 'center',
},
{
title: '前端字段',
dataIndex: 'webFields',
key: 'webFields',
align: 'center',
},
{
title: '手持字段',
dataIndex: 'mobileFields',
key: 'mobileFields',
align: 'center',
},
{
title: '操作',
ellipsis: true,
align: 'center',
render: (text, record) => (
<Space>
<Tooltip title="编辑此表">
<EditTwoTone
onClick={() => editor(record)}
style={{ fontSize: '16px' }}
/>
</Tooltip>
<Tooltip title="删除此表">
<Popconfirm
placement="bottomRight"
title={<p>是否删除此表</p>}
// title={`确认删除用户${currentUser}`}
okText="确认"
cancelText="取消"
onConfirm={() => deleteChart(record)}
>
<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 = []
Object.keys(arr).map((item, index) => {
newArr.push(item)
})
console.log(arr)
setAllData(arr);
// 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
console.log(newArr, 'newArr');
setTableData(newArr);
}
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 = [];
Object.keys(arr).map((item, index) => {
newArr.push(item);
});
}, [flag]);
const formateArrDataA = (initialArr, name) => {
console.log(initialArr)
console.log(name)
// 判定传参是否符合规则
if (!(initialArr instanceof Array)) {
return '请传入正确格式的数组'
}
if (!name) {
return '请传入对象属性'
}
//先获取一下这个数组中有多少个"name"
let nameArr = []
for (let i in initialArr) {
if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
nameArr.push(initialArr[i][`${name}`])
}
}
//新建一个包含多个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])
}
}
}
for (let keys in tempObj) {
let arr = []
tempObj[keys].map((item, index) => {
tempObj[keys] = arr;
item.key = index
arr.push(item)
})
console.log(arr);
setAllData(arr);
// 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
console.log(newArr, 'newArr');
setTableData(newArr);
}
});
}, [flag]);
const formateArrDataA = (initialArr, name) => {
console.log(initialArr);
console.log(name);
// 判定传参是否符合规则
if (!(initialArr instanceof Array)) {
return '请传入正确格式的数组';
}
if (!name) {
return '请传入对象属性';
}
// 先获取一下这个数组中有多少个"name"
let nameArr = [];
for (let i in initialArr) {
if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
nameArr.push(initialArr[i][`${name}`]);
}
}
// 新建一个包含多个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]);
}
return tempObj
}
}
// 删除表字段
const deleteChart = record => {
CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
if (res.msg === 'Ok' || res.msg === '') {
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
});
setFlag(flag + 1);
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
//显示弹框
const showPopup = () => {
setIsVisible(true)
setIsType('add')
for (let keys in tempObj) {
let arr = [];
tempObj[keys].map((item, index) => {
tempObj[keys] = arr;
item.key = index;
arr.push(item);
});
}
const onSubmit = () => {
setIsVisible(false);
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 ? <>
<div>
<span
style={{
fontSize: '15px ',
fontWeight: 'bold',
color: '#333E51',
paddingLeft: '14px'
}}
>
台账列表
</span>
<Tooltip title="添加台账表">
<PlusSquareFilled
style={{
color: '#1890FF',
fontSize: '25px',
verticalAlign: 'middle',
float: 'right',
paddingRight: '14px'
}}
onClick={e => showPopup()}
/>
</Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} />
{
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>
})
)}
</div></> : ''}
<div className={styles.switcher}>
{treeVisible && (
<Tooltip title="隐藏台账列表">
<DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
</Tooltip>
)}
{!treeVisible && (
<Tooltip title="显示台账列表">
<DoubleRightOutlined onClick={() => setTreeVisible(true)} />
</Tooltip>
)}
return tempObj;
};
// 删除表字段
const deleteChart = record => {
CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
if (res.msg === 'Ok' || res.msg === '') {
notification.success({
message: '提示',
duration: 3,
description: '删除成功',
});
setFlag(flag + 1);
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
// 显示弹框
const showPopup = () => {
setIsVisible(true);
setIsType('add');
};
const onSubmit = () => {
setIsVisible(false);
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 ? (
<>
<div>
<span
style={{
fontSize: '15px ',
fontWeight: 'bold',
color: '#333E51',
paddingLeft: '14px',
}}
>
台账列表
</span>
<Tooltip title="添加台账表">
<PlusSquareFilled
style={{
color: '#1890FF',
fontSize: '25px',
verticalAlign: 'middle',
float: 'right',
paddingRight: '14px',
}}
onClick={e => showPopup()}
/>
</Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} />
{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>
</Card>
</Spin>
<div
className={classnames({
[styles.userContainer]: true,
[styles.userContainerHide]: !treeVisible,
);
})}
>
<Table
size="small"
rowKey='ID'
bordered
onRow={record => {
return {
onDoubleClick: event => {event.stopPropagation(); editor(record)}, //双击
};
}}
columns={columns}
dataSource={allData[pickItem]}
// loading={tableLoading}
scroll={{ x: 'max-content', y: 'calc(100vh - 150px)' }}
// scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</div>
<AddModal visible={isVisible} type={isType} formObj={formObj} maxLength={maxLength} callBackSubmit={onSubmit} onCancel={() => setIsVisible(false)} tableData={tableData} />
</div>
</PageContainer>
</>
) : (
''
)}
);
<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={classnames({
[styles.userContainer]: true,
[styles.userContainerHide]: !treeVisible,
})}
>
<Table
size="small"
rowKey="ID"
bordered
onRow={record => {
return {
onDoubleClick: event => {
event.stopPropagation();
editor(record);
}, // 双击
};
}}
columns={columns}
dataSource={allData[pickItem]}
// loading={tableLoading}
scroll={{ x: 'max-content', y: 'calc(100vh - 150px)' }}
// scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</div>
<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