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 @@ ...@@ -78,27 +78,6 @@
margin-bottom: 16px; margin-bottom: 16px;
height: 530px; height: 530px;
overflow-y: scroll; 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 { .header {
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx
View file @ e8376731
...@@ -34,6 +34,7 @@ const NodeEdit = props => { ...@@ -34,6 +34,7 @@ const NodeEdit = props => {
const [backType, setBackType] = useState([]); // 反馈类型 const [backType, setBackType] = useState([]); // 反馈类型
const [eventTable, setEventTable] = useState([]); // 表名 const [eventTable, setEventTable] = useState([]); // 表名
const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择 const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择
const [filedData, setFiledData] = useState([]); // 已选字段列表
const [form] = Form.useForm(); const [form] = Form.useForm();
useEffect(() => { useEffect(() => {
form.resetFields(); form.resetFields();
...@@ -100,6 +101,9 @@ const NodeEdit = props => { ...@@ -100,6 +101,9 @@ const NodeEdit = props => {
loadEventFields({ eventTableName: value.TableName }).then(res => { loadEventFields({ eventTableName: value.TableName }).then(res => {
if (res.code === 0) { if (res.code === 0) {
let defaultCheckedList = value[val] ? value[val].split(',') : []; let defaultCheckedList = value[val] ? value[val].split(',') : [];
// 保存所有的字段用于右侧显示
setFiledData(defaultCheckedList);
let allFields = []; // 所有得字段用来判断是否为外部字段 let allFields = []; // 所有得字段用来判断是否为外部字段
// 处理树形结构 // 处理树形结构
let checkList = res.data.map(item => { let checkList = res.data.map(item => {
...@@ -393,6 +397,7 @@ const NodeEdit = props => { ...@@ -393,6 +397,7 @@ const NodeEdit = props => {
handleCancel={() => setShowField(false)} handleCancel={() => setShowField(false)}
fieldList={fieldList} fieldList={fieldList}
onSubumit={val => setFiled(val)} onSubumit={val => setFiled(val)}
filedData={filedData}
/> />
</Drawer> </Drawer>
); );
......
src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx
View file @ e8376731
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import Sortable from 'sortablejs';
import { Modal, Divider, Checkbox } from 'antd'; import { Modal, Divider, Checkbox } from 'antd';
import styles from '../../flowNode.less'; import styles from '../../flowNode.less';
import DragTable from '@/components/DragTable/DragTable';
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const Fieldselection = props => { 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 [checkList, setCheckList] = useState([]);
const [selectList, setSelectList] = useState([]); // 选中字段列表 const [selectList, setSelectList] = useState([]); // 选中字段列表
const [isFirst, setIsFirst] = useState(true);
const prevAmount = usePrevious({ checkList });
const columns = [
{
title: '字段名',
dataIndex: 'name',
width: 150,
key: 'name',
},
];
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
setCheckList(fieldList); setCheckList(fieldList);
let newArr = filedData.map(item => {
return { name: item };
});
setSelectList(newArr);
} else {
setSelectList([]);
setCheckList([]);
setIsFirst(true);
} }
}, [visible]); }, [visible]);
useEffect(() => { useEffect(() => {
let arr = []; if (prevAmount) {
if (checkList.length < 0) { selectAll();
}
}, [checkList]);
const selectAll = () => {
if (!visible) {
return;
}
// 是否第一次保存数据
if (isFirst) {
setIsFirst(false);
return; 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); prevAmount.checkList.forEach(item => {
// 初始化拖拽 preArr = [...preArr, ...item.defaultCheckedList];
setTimeout(() => { });
dragSort(); currentArr = new Set(currentArr);
}, 0); preArr = new Set(preArr);
}, [checkList]); // 找出相同的部分
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 = () => { const onFinish = () => {
onSubumit(selectList); let callArr = selectList.map(item => item.name);
onSubumit(callArr);
}; };
// 复选框 // 复选框
const onChange = (list, index) => { const onChange = (list, index) => {
...@@ -55,23 +124,10 @@ const Fieldselection = props => { ...@@ -55,23 +124,10 @@ const Fieldselection = props => {
return chooseList; return chooseList;
}); });
}; };
// 拖拽回调
// 初始化排序 const dragCallBack = arr => {
const dragSort = () => { if (arr) {
let el = document.getElementById('doctor-drag-items'); setSelectList(arr);
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);
},
});
} }
}; };
return ( return (
...@@ -126,30 +182,16 @@ const Fieldselection = props => { ...@@ -126,30 +182,16 @@ const Fieldselection = props => {
</Divider> </Divider>
</div> </div>
<div className={styles.doctorTable}> <div className={styles.doctorTable}>
<table> <DragTable
<thead> bordered
<tr> rowKey={record => record.name}
<td>字段名</td> columns={columns}
</tr> dataSource={selectList}
</thead> pagination={false}
<tbody id="doctor-drag-items"> size="small"
{selectList && selectList.length > 0 ? ( dragCallBack={dragCallBack}
selectList.map((item, index) => ( ItemTypes="stadingOrder"
<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>
</div> </div>
</div> </div>
</div> </div>
......
src/pages/platformCenter/standingBook/changeAdd.jsx
View file @ e8376731
/* eslint-disable indent */
import React, { useState, useEffect, useCallback, useRef } from 'react'; import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd'; import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
import styles from './standingBook.less' import styles from './standingBook.less';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import DragTable from '@/components/DragTable/DragTable';
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const AddModal = props => { 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 [loading, setLoading] = useState(false);
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [checkValue, setCheckValue] = useState([]); const [checkValue, setCheckValue] = useState([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [title, setTitle] = useState([]) const [title, setTitle] = useState([]);
const { Item } = Form; const { Item } = Form;
const [checkedList, setCheckedList] = useState([]);//选中的复选框内容 const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
const [indeterminate, setIndeterminate] = useState([]); const [indeterminate, setIndeterminate] = useState([]);
const [checkAll, setCheckAll] = useState([]); const [checkAll, setCheckAll] = useState([]);
const [selectData, setSelectData] = useState([]) const [selectData, setSelectData] = useState([]);
let objArr = [] const [isFirst, setIsFirst] = useState(true);
const prevAmount = usePrevious({ checkedList });
const onChangeList = (list, index, title) => { const onChangeList = (list, index, title) => {
const checkedListArr = [...checkedList] const checkedListArr = [...checkedList];
checkedListArr[index] = list checkedListArr[index] = list;
setCheckedList(checkedListArr); setCheckedList(checkedListArr);
const indeterminateArr = [...indeterminate] const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll] const checkAllArr = [...checkAll];
indeterminateArr[index] = !!list.length && list.length < filed[title].length indeterminateArr[index] =
checkAllArr[index] = list.length === filed[title].length !!list.length && list.length < filed[title].length;
setIndeterminate(indeterminateArr) checkAllArr[index] = list.length === filed[title].length;
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr); setCheckAll(checkAllArr);
}; };
const onCheckAllChange = e => { const onCheckAllChange = e => {
const indeterminateArr = [...indeterminate] const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll] const checkAllArr = [...checkAll];
const checkedListArr = [...checkedList] const checkedListArr = [...checkedList];
checkAllArr[e.target.index] = e.target.checked checkAllArr[e.target.index] = e.target.checked;
indeterminateArr[e.target.index] = false indeterminateArr[e.target.index] = false;
e.target.checked ? checkedListArr[e.target.index] = e.target.checkvalue : checkedListArr[e.target.index] = [] // eslint-disable-next-line no-unused-expressions
e.target.checked
? (checkedListArr[e.target.index] = e.target.checkvalue)
: (checkedListArr[e.target.index] = []);
setCheckedList(checkedListArr); setCheckedList(checkedListArr);
setIndeterminate(indeterminateArr); setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr); setCheckAll(checkAllArr);
}; };
//监听用户选择的字段名 // 监听用户选择的字段名
useEffect(() => { useEffect(() => {
selectAll() if (prevAmount) {
selectAll();
}
}, [checkedList]); }, [checkedList]);
const selectAll = () => { const selectAll = () => {
objArr = [] if (!visible) {
checkedList.map(item => { return;
objArr = objArr.concat(item) }
}) // 是否第一次保存数据
setSelectData(objArr) 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(() => { useEffect(() => {
if (isType != '') { if (visible) {
let arr = Object.keys(filed) let arr = Object.keys(filed);
console.log(arr) setTitle(arr);
console.log(newCheckedList) let checkArr = [];
console.log(characterValue) let indeterminateArr = [];
setTitle(arr) let checkAllArr = [];
let checkArr = []
let indeterminateArr = []
let checkAllArr = []
arr.map((item, index) => { arr.map((item, index) => {
checkArr[index] = [] checkArr[index] = [];
newCheckedList.map(checkItem => { newCheckedList.map(checkItem => {
if (filed[item].includes(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) indeterminateArr.push(
checkAllArr.push(checkArr[index].length === filed[item].length) !!checkArr[index].length &&
}) checkArr[index].length < filed[item].length,
console.log(checkArr) );
setCheckedList(checkArr) checkAllArr.push(checkArr[index].length === filed[item].length);
setIndeterminate(indeterminateArr) });
setCheckAll(checkAllArr) setCheckedList(checkArr);
let newArr = characterValue.length ? characterValue.split(",") : [] setIndeterminate(indeterminateArr);
setSelectData(newArr) setCheckAll(checkAllArr);
draftSort() 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]); }, [visible]);
const dragCallBack = arr => {
//拖拽初始化及逻辑 if (arr && !isFirst) {
const draftSort = () => { setSelectData(arr);
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)
}
});
} }
};
}
return ( return (
<Modal <Modal
title={isType === 'rule' ? '选择验证规则' : '字段集选择'} title={isType === 'rule' ? '选择验证规则' : '字段集选择'}
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }} style={{ top: '10px' }}
width="700px" width="700px"
destroyOnClose centered
centered={true}
maskClosable={false} maskClosable={false}
cancelText="取消" cancelText="取消"
okText="确认" okText="确认"
{...props} {...props}
onOk={() => onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
forceRender={true} forceRender
getContainer={false} getContainer={false}
destroyOnClose
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
<div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}> <div
<Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}>待选字段列表</Divider> className={styles.cardItem}
style={{ borderRight: '1px solid #99bbe8' }}
>
<Divider
orientation="left"
style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }}
>
待选字段列表
</Divider>
<div className={styles.cardContent}> <div className={styles.cardContent}>
{title.map((item, index) => { {title.map((item, index) => {
return <div className={styles.cardItemData} key={index}> return (
<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> <div className={styles.cardItemData} key={index}>
<CheckboxGroup options={filed[item]} value={checkedList[index]} onChange={(e) => onChangeList(e, index, item)} /></div> <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> </div>
<div className={styles.cardItem}> <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.cardContent}>
<div className={styles.doctorTable}> <div className={styles.doctorTable}>
<table> <DragTable
<thead> bordered
<tr> style={{ marginBottom: '10px' }}
<td>字段名</td> rowKey={record => record.name}
</tr> columns={columns}
</thead> dataSource={selectData}
<tbody id='doctor-drag-items'> pagination={false}
{selectData && selectData.length > 0 ? size="small"
selectData.map((item, index) => { dragCallBack={dragCallBack}
return <tr drag-id={item} key={index} style={{ cursor: 'move' }}> ItemTypes="stadingOrder"
<td><span title={item}>{item}</span></td> />
</tr>
})
: <tr><td colSpan='10' style={{ textAlign: 'center' }}>暂无数据</td></tr>
}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) )}
}
</Modal> </Modal>
); );
}; };
......
src/pages/platformCenter/standingBook/standingBook.jsx
View file @ e8376731
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { import {
Form, Form,
Card, Card,
Space, Space,
Table, Table,
Popconfirm, Popconfirm,
Spin, Spin,
Tooltip, Tooltip,
notification, notification,
} from 'antd'; } from 'antd';
import { import {
DoubleLeftOutlined, DoubleLeftOutlined,
DoubleRightOutlined, DoubleRightOutlined,
PlusSquareFilled, PlusSquareFilled,
RightOutlined, RightOutlined,
EditTwoTone, EditTwoTone,
DeleteOutlined DeleteOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import classnames from 'classnames'; import classnames from 'classnames';
import PageContainer from '@/components/BasePageContainer'; import PageContainer from '@/components/BasePageContainer';
import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api'; import {
import AddModal from './editorModal' GetCM_Ledger_LoadLedgers,
CM_Ledger_RmoveLedger,
} from '@/services/standingBook/api';
import AddModal from './editorModal';
import styles from './standingBook.less'; import styles from './standingBook.less';
const standingBook = props => { const standingBook = props => {
const [allData, setAllData] = useState([]); const [allData, setAllData] = useState([]);
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
const [treeLoading, setTreeLoading] = useState(false); const [treeLoading, setTreeLoading] = useState(false);
const [maxLength, setMaxLength] = useState(0); const [maxLength, setMaxLength] = useState(0);
const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见 const [treeVisible, setTreeVisible] = useState(true); // 左边列表是否可见
const [formObj, setFormObj] = useState(''); const [formObj, setFormObj] = useState('');
const [flag, setFlag] = useState(0); // 弹窗类型 const [flag, setFlag] = useState(0); // 弹窗类型
const [isVisible, setIsVisible] = useState(false); // 弹窗 const [isVisible, setIsVisible] = useState(false); // 弹窗
const [isType, setIsType] = useState(''); // 弹窗类型 const [isType, setIsType] = useState(''); // 弹窗类型
const [pickItem, setPickItem] = useState(''); const [pickItem, setPickItem] = useState('');
const { Item } = Form; 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 editor = record => {
title: '编辑字段', setFormObj(record);
dataIndex: 'editFields', setIsType('edit');
key: 'editFields', setIsVisible(true);
align: 'center', };
const Submit = prop => {
}, setIsVisible(false);
{ setFlag(flag + 1);
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 columns = [
{
title: '台账类型',
dataIndex: 'AccountType',
key: 'AccountType',
width: 100,
},
{
title: '台账名称',
dataIndex: 'name',
key: 'name',
align: 'center',
width: 200,
},
<Tooltip title="删除此表"> {
<Popconfirm title: '台账表名',
placement="bottomRight" dataIndex: 'tableName',
title={ key: 'tableName',
<p> align: 'center',
是否删除此表 width: 300,
</p> },
} {
// title={`确认删除用户${currentUser}`} title: '台账字段',
okText="确认" dataIndex: 'fields',
cancelText="取消" key: 'fields',
onConfirm={() => deleteChart(record)} align: 'center',
> },
<DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> {
</Popconfirm> title: '检索字段',
</Tooltip> 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(() => { useEffect(() => {
setTreeLoading(true); setTreeLoading(true);
GetCM_Ledger_LoadLedgers().then(res => { GetCM_Ledger_LoadLedgers().then(res => {
setTreeLoading(false); setTreeLoading(false);
if (res.msg === 'Ok' && res.data.root) { if (res.msg === 'Ok' && res.data.root) {
console.log(res.data.root) console.log(res.data.root);
setMaxLength(res.data.root.length + 1) setMaxLength(res.data.root.length + 1);
let arr = formateArrDataA(res.data.root, 'type') let arr = formateArrDataA(res.data.root, 'type');
let newArr = [] let newArr = [];
Object.keys(arr).map((item, index) => { Object.keys(arr).map((item, index) => {
newArr.push(item) newArr.push(item);
})
console.log(arr)
setAllData(arr);
// 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
console.log(newArr, 'newArr');
setTableData(newArr);
}
}); });
console.log(arr);
}, [flag]); setAllData(arr);
const formateArrDataA = (initialArr, name) => { // 第一次进入展示第一页 不是第一次进入根据当前选择的来进行展示
console.log(initialArr) flag === 0 ? setPickItem(newArr[0]) : setPickItem(pickItem);
console.log(name) console.log(newArr, 'newArr');
// 判定传参是否符合规则 setTableData(newArr);
if (!(initialArr instanceof Array)) { }
return '请传入正确格式的数组' });
} }, [flag]);
if (!name) { const formateArrDataA = (initialArr, name) => {
return '请传入对象属性' console.log(initialArr);
} console.log(name);
//先获取一下这个数组中有多少个"name" // 判定传参是否符合规则
let nameArr = [] if (!(initialArr instanceof Array)) {
for (let i in initialArr) { return '请传入正确格式的数组';
if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) { }
nameArr.push(initialArr[i][`${name}`]) if (!name) {
} return '请传入对象属性';
} }
//新建一个包含多个list的结果对象 // 先获取一下这个数组中有多少个"name"
let tempObj = {} let nameArr = [];
// 根据不同的"name"生成多个数组 for (let i in initialArr) {
for (let k in nameArr) { if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
for (let j in initialArr) { nameArr.push(initialArr[i][`${name}`]);
if (initialArr[j][`${name}`] == nameArr[k]) { }
// 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变 }
tempObj[nameArr[k]] = tempObj[nameArr[k]] || [] // 新建一个包含多个list的结果对象
tempObj[nameArr[k]].push(initialArr[j]) let tempObj = {};
} // 根据不同的"name"生成多个数组
} for (let k in nameArr) {
} for (let j in initialArr) {
for (let keys in tempObj) { if (initialArr[j][`${name}`] == nameArr[k]) {
let arr = [] // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
tempObj[keys].map((item, index) => { tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
tempObj[keys] = arr; tempObj[nameArr[k]].push(initialArr[j]);
item.key = index
arr.push(item)
})
} }
return tempObj }
} }
// 删除表字段 for (let keys in tempObj) {
const deleteChart = record => { let arr = [];
CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => { tempObj[keys].map((item, index) => {
if (res.msg === 'Ok' || res.msg === '') { tempObj[keys] = arr;
notification.success({ item.key = index;
message: '提示', arr.push(item);
duration: 3, });
description: '删除成功',
});
setFlag(flag + 1);
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
//显示弹框
const showPopup = () => {
setIsVisible(true)
setIsType('add')
} }
const onSubmit = () => { return tempObj;
setIsVisible(false); };
setFlag(flag + 1) // 删除表字段
}; const deleteChart = record => {
return ( CM_Ledger_RmoveLedger({ ledgerId: record.ID }).then(res => {
<PageContainer className={styles.userManageContainer}> if (res.msg === 'Ok' || res.msg === '') {
<div className={styles.contentContainers}> notification.success({
<Spin spinning={treeLoading} tip="loading..."> message: '提示',
duration: 3,
<Card description: '删除成功',
className={classnames({ });
[styles.orgContainer]: true, setFlag(flag + 1);
[styles.orgContainerHide]: !treeVisible, } else {
})} notification.error({
> message: '提示',
{treeVisible ? <> duration: 3,
<div> description: res.msg,
<span });
style={{ }
fontSize: '15px ', });
fontWeight: 'bold', };
color: '#333E51', // 显示弹框
paddingLeft: '14px' const showPopup = () => {
}} setIsVisible(true);
> setIsType('add');
台账列表 };
</span> const onSubmit = () => {
<Tooltip title="添加台账表"> setIsVisible(false);
<PlusSquareFilled setFlag(flag + 1);
style={{ };
color: '#1890FF', return (
fontSize: '25px', <PageContainer className={styles.userManageContainer}>
verticalAlign: 'middle', <div className={styles.contentContainers}>
float: 'right', <Spin spinning={treeLoading} tip="loading...">
paddingRight: '14px' <Card
}} className={classnames({
onClick={e => showPopup()} [styles.orgContainer]: true,
/> [styles.orgContainerHide]: !treeVisible,
</Tooltip> })}
<hr style={{ width: '100%', color: '#eeecec' }} /> >
{ {treeVisible ? (
tableData.length>0 && (tableData.map((item, index) => { <>
return <div className={classnames({ <div>
[styles.listItem]: true, <span
[styles.pickItem]: item === pickItem, style={{
})} onClick={e => setPickItem(item)} key={index}>{item}（{allData[item] ? allData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div> fontSize: '15px ',
}) fontWeight: 'bold',
)} color: '#333E51',
</div></> : ''} paddingLeft: '14px',
}}
<div className={styles.switcher}> >
{treeVisible && ( 台账列表
<Tooltip title="隐藏台账列表"> </span>
<DoubleLeftOutlined onClick={() => setTreeVisible(false)} /> <Tooltip title="添加台账表">
</Tooltip> <PlusSquareFilled
)} style={{
{!treeVisible && ( color: '#1890FF',
<Tooltip title="显示台账列表"> fontSize: '25px',
<DoubleRightOutlined onClick={() => setTreeVisible(true)} /> verticalAlign: 'middle',
</Tooltip> 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>
</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> </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; export default standingBook;
src/pages/platformCenter/standingBook/standingBook.less
View file @ e8376731
...@@ -295,7 +295,7 @@ ...@@ -295,7 +295,7 @@
padding: 0.5rem; padding: 0.5rem;
} }
.cardContent{ .cardContent{
height: 30rem; height: 40rem;
overflow-y: scroll; overflow-y: scroll;
width: 19.5rem; width: 19.5rem;
} }
...@@ -311,24 +311,6 @@ ...@@ -311,24 +311,6 @@
.doctorTable { .doctorTable {
margin-bottom: 16px; 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{ .formData{
height: calc(100vh - 170px); height: calc(100vh - 170px);
......
src/routes/config.js
View file @ e8376731
...@@ -22,7 +22,7 @@ import CurrentSolution from '@/pages/currentSolution/CurrentSolution'; ...@@ -22,7 +22,7 @@ import CurrentSolution from '@/pages/currentSolution/CurrentSolution';
import UserManage from '../pages/userCenter/userManage/UserManage'; import UserManage from '../pages/userCenter/userManage/UserManage';
import RoleManage from '@/pages/userCenter/roleManage/RoleManage'; import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
import SiteManage from '../pages/userCenter/siteManage/SiteManage'; 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 Dictionary from '../pages/dataCenter/dictionary';
import Dictionary1 from '../pages/dataCenter/dictionary1'; import Dictionary1 from '../pages/dataCenter/dictionary1';
// import Search from '../pages/dataCenter/search'; // 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