Skip to content

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

fix: 用户管理3个模块添加菜单拖拽，修复左侧菜单树滚动条

parent 5369c2b2
Hide whitespace changes
Inline Side-by-side
Showing with 670 additions and 289 deletions
src/pages/mobileConfig/index.js
View file @ be5f3ba7
......@@ -26,7 +26,7 @@ import { appConnector } from '@/containers/App/store';
const { TabPane } = Tabs;
const MobileConfigPage = props => {
const { userMode } = props;
const [activeKey, setActiveKey] = useState('0'); // tabs活动页
const [activeKey, setActiveKey] = useState('1'); // tabs活动页
const [miniTitle, setMiniTitle] = useState(''); // 应用名称
const [flag, setFlag] = useState(1); // 刷新标志
const [showConfig, setShowConfig] = useState(true);
......@@ -206,26 +206,26 @@ const MobileConfigPage = props => {
);
const tabArr = [
{
title: '应用配置',
key: '0',
title: '菜单管理',
key: '1',
component: (
<SiteConfig
miniTitle={miniTitle}
submitCallback={submitCallback}
subType={subType}
addCallback={addCallback}
<MiniMenu
clientName={clientName}
userMode={userMode}
parentKey={parentKey}
/>
),
},
{
title: '菜单管理',
key: '1',
title: '应用配置',
key: '0',
component: (
<MiniMenu
<SiteConfig
miniTitle={miniTitle}
submitCallback={submitCallback}
subType={subType}
addCallback={addCallback}
clientName={clientName}
userMode={userMode}
parentKey={parentKey}
/>
),
......
src/pages/mobileConfig/menuconfig/editForm.jsx
View file @ be5f3ba7
......@@ -21,8 +21,8 @@ const EditForm = props => {
otherForm.resetFields();
}, [info]);
useEffect(() => {
if(JSON.stringify(info)!='{}' ){
let data =info.data
if (JSON.stringify(info) != '{}') {
let data = info.data;
if (nodeType === 1 || nodeType === 2) {
let arr = Object.keys(form.getFieldsValue());
let obj = {};
......@@ -40,7 +40,6 @@ const EditForm = props => {
otherForm.setFieldsValue({ ...obj, shortName: data.menuShortName });
}
}
}, [info]);
const submit = () => {
......@@ -61,13 +60,7 @@ const EditForm = props => {
return (
<div className={classnames({ [styles.divbox]: true })}>
{(nodeType === 1 || nodeType === 2) && (
<Form
form={form}
name="editGroup"
{...layout}
className={styles.formStyle}
onFinish={onFinish}
>
<Form form={form} name="editGroup" {...layout} onFinish={onFinish}>
<Item
label="菜单组名称"
name="menuName"
......@@ -138,13 +131,7 @@ const EditForm = props => {
)}
{(nodeType === 3 || nodeType === 4) && (
<Form
form={otherForm}
name="editMenu"
{...layout}
onFinish={onFinish}
className={styles.formStyle}
>
<Form form={otherForm} name="editMenu" {...layout} onFinish={onFinish}>
<Item
label="菜单名称"
name="menuName"
......@@ -218,7 +205,7 @@ const EditForm = props => {
<Input />
</Item>
<CheckList
info={info.data?info.data:{}}
info={info.data ? info.data : {}}
nodeType={nodeType}
valueCallback={valueCallback}
/>
......
src/pages/mobileConfig/menuconfig/miniMenu.jsx
View file @ be5f3ba7
......@@ -579,18 +579,20 @@ const MiniMenu = props => {
</div>
</div>
{treeData.length > 0 ? (
<Tree
showIcon
onSelect={handleSelect}
treeData={treeData.map(item => mapTree(item))}
blockNode
draggable
autoExpandParent
onDrop={handleDrop}
// onDragEnter={handleDragEnter}
selectedKeys={[menuID]}
// expandedKeys={[menuID]}
/>
<div style={{ height: 'calc(100vh - 300px)', overflowY: 'scroll' }}>
<Tree
showIcon
onSelect={handleSelect}
treeData={treeData.map(item => mapTree(item))}
blockNode
draggable
autoExpandParent
onDrop={handleDrop}
// onDragEnter={handleDragEnter}
selectedKeys={[menuID]}
// expandedKeys={[menuID]}
/>
</div>
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
......
src/pages/mobileConfig/menuconfig/miniMenu.less
View file @ be5f3ba7
.box{
min-height: calc( 100vh - 232px)!important;
.box {
height: calc(100vh - 240px) !important;
display: flex;
}
.left{
.left {
min-width: 300px;
width: 350px;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
.ant-tree-node-content-wrapper{
.ant-tree-node-content-wrapper {
display: flex;
align-items: center;
.ant-tree-iconEle{
.ant-tree-iconEle {
display: flex;
align-items: center;
}
.ant-tree-title{
.ant-tree-title {
width: 100%;
}
}
.leftTop{
.leftTop {
display: flex;
align-items: center;
margin-bottom: 10px;
justify-content: space-between;
.tRight{
.tRight {
display: flex;
align-items: center;
.icon1{
.icon1 {
font-size: 20px;
margin-right: 10px;
}
.icon2{
.icon2 {
font-size: 18px;
margin-right: 5px;
}
.icon:hover{
.icon:hover {
cursor: pointer;
}
}
}
}
.middle{
.middle {
min-width: 500px;
width: 100%;
min-height: 100%;
overflow-y: scroll;
border: 1px solid #eee;
padding: 10px;
margin: 0 0 0 10px;
}
.title{
.title {
display: flex;
align-items: center;
width: 100%;
}
.tip{
.tip {
display: none;
}
.title:hover{
.tip{
.title:hover {
.tip {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
}
.fsize{
.fsize {
font-size: 18px;
margin-left: 10px;
}
.rightBox{
.rightBox {
min-width: 200px;
// width: 600px;
width: 100%;
......@@ -77,8 +78,7 @@
border: 1px solid #eee;
padding: 10px;
}
:global{
.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle .anticon-folder{
:global {
.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle .anticon-folder {
}
}
\ No newline at end of file
}
src/pages/platformCenter/bsmanager/workFlow/flow.jsx
View file @ be5f3ba7
......@@ -260,23 +260,27 @@ const Flow = () => {
<span className={styles.processTitle}>流程列表</span>
<hr className={styles.splitLine} />
{/* 流程列表 */}
{processData.length > 0 &&
processData.map((item, index) => (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: index === pickItemIndex,
})}
onClick={() => {
setPickItemIndex(index);
setTableData(item.root);
}}
key={item.goupName}
>
{item.goupName}（{item.count ? item.count : ''}）
{index === pickItemIndex ? <RightOutlined /> : ''}
</div>
))}
<div
style={{ overflowY: 'scroll', height: 'calc(100vh - 150px)' }}
>
{processData.length > 0 &&
processData.map((item, index) => (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: index === pickItemIndex,
})}
onClick={() => {
setPickItemIndex(index);
setTableData(item.root);
}}
key={item.goupName}
>
{item.goupName}（{item.count ? item.count : ''}）
{index === pickItemIndex ? <RightOutlined /> : ''}
</div>
))}
</div>
</div>
<div className={styles.switcher}>
{treeVisible && (
......
src/pages/platformCenter/bsmanager/workFlow/flow.less
View file @ be5f3ba7
......@@ -10,7 +10,6 @@
height: calc(100vh - 74px);
width: 250px;
margin-right: 10px;
overflow-x: hidden;
transition-property: width, left;
transition-duration: 0.5s;
white-space: nowrap;
......@@ -125,7 +124,6 @@
}
}
.buttonList {
display: flex;
justify-content: flex-end;
......@@ -168,4 +166,4 @@
.ant-table {
margin-left: -9px !important;
}
}
\ No newline at end of file
}
src/pages/platformCenter/bsmanager/workOrder/incident.jsx
View file @ be5f3ba7
......@@ -481,24 +481,31 @@ const incident = () => {
/>
</Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} />
{treeData.length > 0 &&
treeData.map((item, index) => (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item === pickItem,
})}
onClick={e => {
setPickItem(item);
setRember(index);
setRember1(item);
}}
key={index}
>
{item}（{tableData[item] ? tableData[item].length : ''}）{' '}
{item === pickItem ? <RightOutlined /> : ''}{' '}
</div>
))}
<div
style={{
height: 'calc(100vh - 150px)',
overflowY: 'scroll',
}}
>
{treeData.length > 0 &&
treeData.map((item, index) => (
<div
className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item === pickItem,
})}
onClick={e => {
setPickItem(item);
setRember(index);
setRember1(item);
}}
key={index}
>
{item}（{tableData[item] ? tableData[item].length : ''}）{' '}
{item === pickItem ? <RightOutlined /> : ''}{' '}
</div>
))}
</div>
</div>
<div className={styles.switcher}>
{treeVisible && (
......
src/pages/platformCenter/bsmanager/workOrder/incident.less
View file @ be5f3ba7
......@@ -56,7 +56,6 @@
width: 250px;
left: 0;
top: 0;
overflow-x: hidden;
margin-right: 10px;
position: relative;
transition-property: width, left;
......
src/pages/platformCenter/bsmanager/workflowEdit/workflow.less
View file @ be5f3ba7
......@@ -10,7 +10,7 @@
height: calc(100vh - 74px);
width: 250px;
margin-right: 10px;
overflow-x: hidden;
transition-property: width, left;
transition-duration: 0.5s;
white-space: nowrap;
......@@ -20,7 +20,10 @@
color: #333e51;
padding-left: 14px;
}
.treeContent {
height: calc(100vh - 150px);
overflow-y: scroll;
}
.treeHeadIcon {
color: #1890ff;
font-size: 25px;
......
src/pages/platformCenter/standingBook/standingBook.jsx
View file @ be5f3ba7
......@@ -69,7 +69,8 @@ const standingBook = props => {
dataIndex: 'tableName',
key: 'tableName',
align: 'center',
width: 300,
width: 200,
ellipsis: true,
},
{
title: '台账字段',
......@@ -107,6 +108,7 @@ const standingBook = props => {
dataIndex: 'mobileFields',
key: 'mobileFields',
align: 'center',
width: 100,
},
{
title: '操作',
......@@ -262,22 +264,29 @@ const standingBook = props => {
/>
</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
style={{
height: 'calc(100vh - 150px)',
overflowY: 'scroll',
}}
>
{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>
</>
) : (
......
src/pages/platformCenter/standingBook/standingBook.less
View file @ be5f3ba7
......@@ -101,12 +101,12 @@
width: 240px;
left: 0;
top: 0;
overflow-x: hidden;
margin-right: 10px;
position: relative;
transition-property: width, left;
transition-duration: 0.5s;
white-space: nowrap;
padding-right: 20px;
.ant-tree {
padding-top: 6px;
.ant-tree-switcher {
......
src/pages/userCenter/roleManage/RoleManage.jsx
View file @ be5f3ba7
......@@ -31,6 +31,7 @@ import {
setMenuToRole,
getRoleGroupList,
getMenuByRoleWithLevel,
DragGroup,
getWebConfigTypes,
} from '@/services/userCenter/roleManage/api';
import ListCard, {
......@@ -101,23 +102,39 @@ const SiteManage = () => {
setCurrentSelectId(saveCurId);
}
};
// useEffect(() => {
// setSpinLoading(true);
// getRoleGroupList({ userID: '1' }).then(res => {
// setSpinLoading(false);
// if (res.code === 0) {
// const { roleList } = res.data;
// let arr = transTree(roleList);
// console.log(roleList);
// console.log(arr);
// setTreeData(arr);
// }
// });
// return () => {
// setItemObj('');
// };
// }, [flag]);
useEffect(() => {
getRoleGroup();
}, []);
// 获取角色菜单树
const getRoleGroup = () => {
setSpinLoading(true);
getRoleGroupList({ userID: '1' }).then(res => {
setSpinLoading(false);
if (res.code === 0) {
const { roleList } = res.data;
let arr = transTree(roleList);
console.log(roleList)
console.log(arr)
console.log(roleList);
console.log(arr);
setTreeData(arr);
}
});
return () => {
setItemObj('');
};
}, [flag]);
};
const buildMap = list => {
const mapObj = {
type: 'widgetGroup',
......@@ -399,32 +416,32 @@ const SiteManage = () => {
return arr3;
};
//编辑角色
// 编辑角色
const editorUser = (e, record) => {
e.stopPropagation();
setItemObj(record);
setEditVisible(true);
};
//删除角色
// 删除角色
const deletesUser = (e, record) => {
e.stopPropagation();
setItemObj(record);
setDelVisible(true);
};
//关联用户
// 关联用户
const relevancyUser = (e, record) => {
e.stopPropagation();
setItemObj(record);
setUserVisible(true);
};
//编辑分组
// 编辑分组
const editorGroup = (e, record) => {
console.log(record, '1212');
e.stopPropagation();
setItemObj(record);
setGroupVisible(true);
};
//新增角色
// 新增角色
const addsUser = (e, record) => {
e.stopPropagation();
setItemObj(record);
......@@ -440,33 +457,38 @@ const SiteManage = () => {
setModalVisible(false);
// setRoleID(`${e}`);
// setCurrentSelectId([`${e}`]);
setFlag(flag + 1);
// setFlag(flag + 1);
getRoleGroup();
setItemObj('');
};
// 删除弹窗回调
const delModal = () => {
setDelVisible(false);
setFlag(flag + 1);
// setFlag(flag + 1);
getRoleGroup();
setRoleID('');
setItemObj('');
};
// 编辑弹窗回调
const editModal = () => {
setEditVisible(false);
setFlag(flag + 1);
// setFlag(flag + 1);
getRoleGroup();
handleTreeSelect(saveCurId);
// setItemObj('');
};
// 分组编辑回调
const groupModal = () => {
setGroupVisible(false);
setFlag(flag + 1);
// setFlag(flag + 1);
getRoleGroup();
setItemObj('');
handleTreeSelect(saveCurId);
};
const userModal = () => {
setUserVisible(false);
setFlag(flag + 1);
// setFlag(flag + 1);
getRoleGroup();
setItemObj('');
handleTreeSelect(saveCurId);
};
......@@ -506,6 +528,151 @@ const SiteManage = () => {
const handleUserAttach = () => {
setUserVisible(true);
};
// 返回拖拽完毕后的信息
const loop = (datas, key, parentID, callback) => {
for (let i = 0; i < datas.length; i++) {
if (datas[i].key === key) {
return callback(datas[i], i, datas, parentID);
}
if (datas[i].children) {
loop(datas[i].children, key, datas[i].key, callback);
}
}
};
// 树的拖拽
const handleDrop = infos => {
console.log(infos);
const dropKey = infos.node.key;
const dragKey = infos.dragNode.key;
const dropPos = infos.node.pos.split('-');
const dropPosition =
infos.dropPosition - Number(dropPos[dropPos.length - 1]);
const datas = JSON.parse(JSON.stringify(treeData));
console.log(dropKey, 'dropKey');
console.log(dragKey, 'dragKey');
// 找到拖拽的元素
let dragObj;
let dropObj;
let id;
let dragList;
let canDrop = false;
// 保存拖拽到的节点信息
loop(datas, dropKey, -1, (item, index, arr) => {
console.log(arr, index, 'arrarr');
// 拖拽节点的下一个节点是否是菜单组
if (arr[index + 1] && !arr[index + 1].groupflag) {
canDrop = true;
}
if (index + 1 === arr.length) {
canDrop = true;
}
dropObj = item;
});
// 保存节点信息并删除节点
loop(datas, dragKey, -1, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
console.log(dragObj, 'dragObj');
console.log(dropObj, 'dropObj');
// 最外层菜单组不允许拖拽
if (!dragObj.groupflag && !dragObj.subSystemValue) {
return;
}
// 不允许拖拽到子菜单下
if (dropObj.subSystemValue && !infos.dropToGap) {
console.log('不允许拖拽到子菜单下');
return;
}
// 子菜单不能跨站点拖拽
if (
dragObj.subSystemValue &&
dropObj.subSystemValue &&
dropObj.subSystemValue !== dragObj.subSystemValue
) {
console.log('子菜单不能跨站点拖拽');
return;
}
if (
dragObj.subSystemValue &&
dropObj.visibleValue &&
dropObj.visibleValue !== dragObj.subSystemValue
) {
console.log('子菜单不能跨站点拖拽');
return;
}
// 二级单组不能拖拽
if (dragObj.groupflag) {
console.log('二级单组不能拖拽');
return;
}
console.log('1111111111');
// 将节点插入到正确的位置
if (!infos.dropToGap) {
console.log('22222222222');
// 插入到第一个子节点
// 子菜单不能拖拽到二级菜单组上方
if (dropObj.roleList[0].groupflag) {
return;
}
console.log(dropObj, '33333333333');
dropObj.children = dropObj.children || [];
// 在哪里插入,示例添加到头部，可以是随意位置
dropObj.children.unshift(dragObj);
if (dropObj.groupflag) {
id = dropObj.visibleTitle;
} else {
id = '';
}
dragList = dropObj.children.map(val => {
if (!val.groupflag) {
return val.key;
}
});
} else {
console.log('444444444444');
if (!canDrop) {
return;
}
// 子菜单组不能拖拽到子菜单组下
if (dragObj.groupflag && dropObj.subSystemValue) {
return;
}
console.log('55555555555');
let ar;
let i;
loop(datas, dropKey, -1, (item, index, arr, parentID) => {
ar = arr;
i = index;
console.log(item, 'arararararar');
if (item.group) {
id = item.group;
} else {
id = '';
}
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
dragList = ar.filter(val => !val.groupflag).map(ele => ele.key);
}
DragGroup({
dragGroupType: 1,
groupId: dragKey,
groupList: dragList,
MiniAppGroupName: id,
}).then(res => {
if (res.code === 0) {
getRoleGroup();
}
});
console.log(dragList, 'dragList');
};
return (
<PageContainer>
<div
......@@ -528,17 +695,20 @@ const SiteManage = () => {
<span>选择角色：</span>
</div>
{treeData && treeData.length > 0 && (
<Tree
style={{ overflowY: 'scroll', height: '48rem' }}
// showLine={{ showLeafIcon: false }}
showIcon
onSelect={handleTreeSelect}
autoExpandParent
// expandedKeys={currentSelectId}
treeData={treeData}
selectedKeys={currentSelectId}
blockNode
/>
<div
style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}
>
<Tree
showIcon
onSelect={handleTreeSelect}
autoExpandParent
treeData={treeData}
selectedKeys={currentSelectId}
blockNode
draggable
onDrop={handleDrop}
/>
</div>
)}
</Spin>
<AddModal
......
src/pages/userCenter/siteManageV2/siteManage.jsx
View file @ be5f3ba7
......@@ -53,6 +53,7 @@ import {
addChildSiteNode,
getSiteTree,
getStationUsers,
DragGroup,
} from '@/services/userCenter/siteManage/api';
import AddModal from '../siteManage/AddModal';
import DelModal from '../siteManage/DelModal';
......@@ -165,20 +166,22 @@ const SiteManageV2 = () => {
} else {
setTreeLoading(false);
notification.error({
message: '获取失败',
description: res.message,
message: '提示',
duration: 15,
description: res.msg,
});
}
});
};
// 获取用户机构树
useEffect(() => {
updateTrees();
}, [flag]);
// useEffect(() => {
// updateTrees();
// }, [flag]);
useEffect(() => {
getValue();
updateTrees();
}, []);
// 切换站点，点击分页按钮，提交
......@@ -186,7 +189,7 @@ const SiteManageV2 = () => {
if (!currentStation) return;
getList();
setShowSearchStyle(false);
}, [updatePageUser, name]);
}, [updatePageUser]);
// 切换站点，提交时触发已勾选列表更新
useEffect(() => {
if (!currentStation) return;
......@@ -339,19 +342,23 @@ const SiteManageV2 = () => {
};
const confirmModal = e => {
handleShowModal('modalVisible', false);
setFlag(flag + 1);
updateTrees();
// setFlag(flag + 1);
};
const delModal = () => {
handleShowModal('delVisible', false);
setFlag(flag + 1);
updateTrees();
// setFlag(flag + 1);
};
const editModal = () => {
handleShowModal('editVisible', false);
setFlag(flag + 1);
updateTrees();
// setFlag(flag + 1);
};
const addChildModal = () => {
handleShowModal('addChildVisible', false);
setFlag(flag + 1);
updateTrees();
// setFlag(flag + 1);
};
const handleChangeCollpase = (groupId, isShow) => {
......@@ -478,7 +485,7 @@ const SiteManageV2 = () => {
notification.error({
message: '提示',
duration: 15,
description: res.message,
description: res.msg,
});
}
})
......@@ -514,7 +521,79 @@ const SiteManageV2 = () => {
console.log(n);
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
// 返回拖拽完毕后的信息
const loop = (datas, key, parentID, callback) => {
for (let i = 0; i < datas.length; i++) {
if (datas[i].id === key) {
return callback(datas[i], i, datas, parentID);
}
if (datas[i].children) {
loop(datas[i].children, key, datas[i].id, callback);
}
}
};
// 树的拖拽
const handleDrop = infos => {
console.log(infos);
const dropKey = infos.node.key;
const dragKey = infos.dragNode.key;
const dropPos = infos.node.pos.split('-');
const dropPosition =
infos.dropPosition - Number(dropPos[dropPos.length - 1]);
const datas = JSON.parse(JSON.stringify(treeData));
console.log(dropKey, 'dropKey');
console.log(dragKey, 'dragKey');
// 找到拖拽的元素
let dragObj;
let dropObj;
let parId;
let dragList;
// 保存拖拽到的节点信息
loop(datas, dropKey, -1, item => {
dropObj = item;
});
// 保存节点信息并删除节点
loop(datas, dragKey, -1, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
// 将节点插入到正确的位置
if (!infos.dropToGap) {
console.log('33333333333');
dropObj.children = dropObj.children || [];
// 在哪里插入,示例添加到头部，可以是随意位置
dropObj.children.unshift(dragObj);
parId = dropObj.id;
dragList = dropObj.children.map(val => val.id);
} else {
let ar;
let i;
loop(datas, dropKey, -1, (item, index, arr, parentID) => {
ar = arr;
i = index;
parId = parentID;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
dragList = ar.map(ele => ele.id);
}
DragGroup({
dragGroupType: 3,
groupId: dragKey.toString(),
groupList: dragList.map(item => item.toString()),
parentId: parId.toString(),
}).then(res => {
if (res.code === 0) {
updateTrees();
} else {
message.error(res.msg);
}
});
};
const Panels = React.memo(props => {
let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
return (
......@@ -575,20 +654,19 @@ const SiteManageV2 = () => {
/>
</Tooltip>
{treeData.length > 0 && (
<Tree
showIcon="true"
showLine={{ showLeafIcon: false }}
blockNode
autoExpandParent
selectedKeys={[currentStation]}
onSelect={onSelect}
height={
treeData.length && treeData.length > 30
? treeData.length * 14
: 780
}
treeData={treeData.map(t => mapTree(t))}
/>
<div style={{ height: 'calc(100vh - 120px)', overflowY: 'scroll' }}>
<Tree
showIcon="true"
showLine={{ showLeafIcon: false }}
blockNode
autoExpandParent
selectedKeys={[currentStation]}
onSelect={onSelect}
treeData={treeData.map(t => mapTree(t))}
draggable
onDrop={handleDrop}
/>
</div>
)}
<div className={styles.switcher}>
{treeVisible && (
......
src/pages/userCenter/siteManageV2/siteManage.less
View file @ be5f3ba7
......@@ -126,7 +126,8 @@
.orgContainer {
height: calc(100vh - 74px);
width: 380px;
width: 407px;
padding-right: 10px;
left: 0;
top: 0;
overflow: hidden;
......@@ -172,7 +173,7 @@
.userContainer {
height: calc(100vh - 74px) !important;
z-index: 999;
min-width: 800px;
// min-width: 800px;
background: white;
width: 100%;
position: relative;
......
src/pages/userCenter/userManage/UserManage.js
View file @ be5f3ba7
......@@ -62,6 +62,7 @@ import {
JumpToAnotherOUNew,
DeleteUserNew,
loadAllUserRole,
DragGroup,
} from '@/services/userCenter/userManage/api';
import { AddUserAuthSetting, GetUserAuthSet } from '@/services/database/api';
import Tree from '@/components/ExpendableTree';
......@@ -1269,7 +1270,79 @@ const UserManage = () => {
});
}
};
// 返回拖拽完毕后的信息
const loop = (datas, key, parentID, callback) => {
for (let i = 0; i < datas.length; i++) {
if (datas[i].id === key) {
return callback(datas[i], i, datas, parentID);
}
if (datas[i].children) {
loop(datas[i].children, key, datas[i].id, callback);
}
}
};
// 树的拖拽
const handleDrop = infos => {
console.log(infos);
const dropKey = infos.node.key;
const dragKey = infos.dragNode.key;
const dropPos = infos.node.pos.split('-');
const dropPosition =
infos.dropPosition - Number(dropPos[dropPos.length - 1]);
const datas = JSON.parse(JSON.stringify(treeData));
console.log(dropKey, 'dropKey');
console.log(dragKey, 'dragKey');
// 找到拖拽的元素
let dragObj;
let dropObj;
let parId;
let dragList;
// 保存拖拽到的节点信息
loop(datas, dropKey, -1, item => {
dropObj = item;
});
// 保存节点信息并删除节点
loop(datas, dragKey, -1, (item, index, arr) => {
arr.splice(index, 1);
dragObj = item;
});
// 将节点插入到正确的位置
if (!infos.dropToGap) {
console.log('33333333333');
dropObj.children = dropObj.children || [];
// 在哪里插入,示例添加到头部，可以是随意位置
dropObj.children.unshift(dragObj);
parId = dropObj.id;
dragList = dropObj.children.map(val => val.id);
} else {
let ar;
let i;
loop(datas, dropKey, -1, (item, index, arr, parentID) => {
ar = arr;
i = index;
parId = parentID;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
dragList = ar.map(ele => ele.id);
}
DragGroup({
dragGroupType: 2,
groupId: dragKey.toString(),
groupList: dragList.map(item => item.toString()),
parentId: parId.toString(),
}).then(res => {
if (res.code === 0) {
updateTrees();
} else {
message.error(res.msg);
}
});
};
const addChange = e => {
e.domEvent.stopPropagation();
};
......@@ -1357,22 +1430,20 @@ const UserManage = () => {
style={{ width: '95%', color: '#eeecec', marginLeft: '15px' }}
/>
{treeData.length > 0 && (
<Tree
showIcon="true"
// showLine={{ showLeafIcon: false }}
blockNode
autoExpandParent
// expandedKeys={[currentSelectOrg]}
// defaultExpandAll
selectedKeys={[currentSelectOrg]}
onSelect={onSelect}
height={
treeData.length && treeData.length > 30
? treeData.length * 18 + 50
: 1000
}
treeData={treeData.map(t => mapTree(t))}
/>
<div
style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}
>
<Tree
showIcon="true"
blockNode
autoExpandParent
selectedKeys={[currentSelectOrg]}
onSelect={onSelect}
treeData={treeData.map(t => mapTree(t))}
draggable
onDrop={handleDrop}
/>
</div>
)}
</div>
<div className={styles.switcher}>
......
src/pages/userCenter/userManage/UserManage.less
View file @ be5f3ba7
......@@ -143,7 +143,7 @@
}
.orgContainer {
height: calc(100vh - 74px);
width: 340px;
width: 320px;
left: 0;
top: 0;
overflow-x: hidden;
......
src/pages/webConfig/components/siteConfigDrawer.js
View file @ be5f3ba7
......@@ -12,6 +12,7 @@ export default props => {
isEdit,
onOk,
submitting,
productList,
} = props;
return (
......@@ -22,14 +23,17 @@ export default props => {
onClose={onClose}
visible={visible}
maskClosable
destroyOnClose
>
<WebConfigForm
hasIntegerate={hasIntegerate}
productList={productList}
isEdit={isEdit}
config={config}
onCancel={onClose}
submitting={submitting}
onOk={values => {
console.log(values, 'values');
if (!values.homePage && values.hideMap) {
notification.error({
message: '在按需加载地图的模式下，请配置主页路径',
......@@ -38,7 +42,7 @@ export default props => {
return;
}
console.log(values.alarmWays, typeof values.alarmWays);
if (values.alarmWays !== null) {
if (values.alarmWays) {
values.alarmWays =
typeof values.alarmWays === 'string'
? values.alarmWays
......
src/pages/webConfig/components/webConfigForm.js
View file @ be5f3ba7
......@@ -18,6 +18,7 @@ const WebConfigForm = props => {
onOk,
isEdit,
submitting,
productList,
} = props;
const [webThemes, setWebThemes] = useState([]);
const [mapConfigs, setMapConfigs] = useState([]);
......@@ -56,7 +57,7 @@ const WebConfigForm = props => {
if (products.length === 0) {
getProductList().then(res => {
if (res.code === 0) {
setProducts(res.data);
setProducts(res.data.UserProducts);
}
});
}
......@@ -75,6 +76,7 @@ const WebConfigForm = props => {
products,
onGetProduct,
isEdit,
productList,
});
const formConfig = {
......
src/pages/webConfig/index.js
View file @ be5f3ba7
......@@ -8,6 +8,7 @@ import {
postAddWebSite,
deleteWebsite,
getAllConfigName,
getProductList,
getWebSite,
addWebsite,
editWebsite,
......@@ -35,6 +36,7 @@ const WebConfigPage = props => {
const [isEdit, setIsEdit] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [configFiles, setConfigFiles] = useState([]);
const [productList, setProductList] = useState([]); // 产品列表
const hasIntegerate = () =>
webs.some(w => w.id.startsWith(webMode.integration));
......@@ -46,6 +48,7 @@ const WebConfigPage = props => {
getAllConfigName().then(res => {
if (!canceled.cancel) setConfigFiles(res.data);
});
getProduct();
return () => {
canceled.cancel = true;
};
......@@ -63,6 +66,20 @@ const WebConfigPage = props => {
canceled.cancel = true;
};
}, [curWeb]);
// 获取产品列表
const getProduct = () => {
getProductList().then(res => {
const { code } = res;
if (code === 0) {
const {
data: { UserProducts },
} = res;
if (UserProducts && UserProducts.length > 0) {
setProductList(UserProducts);
}
}
});
};
const updateModuleTree = (userModePrama, canceled = { cancel: false }) => {
setLoading(true);
......@@ -89,6 +106,7 @@ const WebConfigPage = props => {
].flat(2);
if (!canceled.cancel) {
setWebs(websArr);
console.log(websArr, 'websArr');
if (!curWeb) setCurWeb(websArr[0]);
setLoading(false);
}
......@@ -244,7 +262,11 @@ const WebConfigPage = props => {
setSubmitting(false);
if (res.code === 0 || res.success) {
setTimeout(() => {
setCurWeb({ ...curWeb, text: values.title });
if (isEdit) {
setCurWeb({ ...curWeb, text: values.title });
} else {
setCurWeb({ ...curWeb, text: values.title, id: res.data });
}
}, 200);
notification.success({
......@@ -305,6 +327,7 @@ const WebConfigPage = props => {
userMode={userMode}
webid={tabPaneItem?.id}
subSystemValue={tabPaneItem?.subSystemValue}
productList={productList}
/>
</ProCard>
</>
......@@ -315,7 +338,12 @@ const WebConfigPage = props => {
<PageContainer>
<div className={styles.webConfigContainer}>
<Spin spinning={loading || submitting}>
<Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange}>
<Tabs
type="editable-card"
onEdit={onEdit}
onChange={handleTabChange}
activeKey={curWeb.id}
>
{/* <TabPane key={99} tab="产品配置" closable={false}>
<ProductConfig />
</TabPane> */}
......@@ -323,6 +351,7 @@ const WebConfigPage = props => {
{webs.map(item => renderTabPane(item))}
</Tabs>
<SiteConfig
productList={productList}
isEdit={isEdit}
visible={configVisible}
onClose={onDrawerClose}
......
src/pages/webConfig/index.less
View file @ be5f3ba7
......@@ -23,7 +23,7 @@
}
.webConfigTabcontent{
background: #fff;
// height: calc(100vh - 128px) !important;
height: calc(100vh - 128px);
}
}
......
src/pages/webConfig/menuconfig/editForm.jsx
View file @ be5f3ba7
......@@ -13,7 +13,7 @@ const EditForm = props => {
nodeType,
info,
configFiles,
valueCallback = () => { },
valueCallback = () => {},
productList,
} = props;
const [form] = Form.useForm();
......@@ -47,17 +47,11 @@ const EditForm = props => {
const onFinish = val => {
submit();
};
const radioChange = e => { };
const radioChange = e => {};
return (
<div style={{ marginTop: '10px' }}>
{nodeType === 1 && (
<Form
form={form}
name="editGroup"
{...layout}
className={styles.formStyle}
onFinish={onFinish}
>
<Form form={form} name="editGroup" {...layout} onFinish={onFinish}>
<Item
label="菜单名称"
name="menuName"
......@@ -146,13 +140,7 @@ const EditForm = props => {
)}
{nodeType === 2 && (
<Form
form={otherForm}
name="editMenu"
{...layout}
onFinish={onFinish}
className={styles.formStyle}
>
<Form form={otherForm} name="editMenu" {...layout} onFinish={onFinish}>
<Item
label="菜单组名称"
name="menuName"
......
src/pages/webConfig/menuconfig/webMenu.jsx
View file @ be5f3ba7
......@@ -24,7 +24,6 @@ import {
editWebMenu, // 改
getWebMenuInfo, // 查
dragMenu, // 菜单拖拽
getProductList,
getWebModuleTree,
pEditWebMenu,
} from '@/services/webConfig/api';
......@@ -37,6 +36,7 @@ const MiniMenu = props => {
updateMenuTree,
userMode,
webid,
productList,
} = props;
const [flag, setFlag] = useState(1); // 刷新标志
const [loading, setLoading] = useState(false); // 加载
......@@ -54,7 +54,7 @@ const MiniMenu = props => {
const [modalLoading, setModalLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const [newTreeList, setNewTreeList] = useState([]);
const [productList, setProductList] = useState([]); // 选中的产品类型
const [menuList, setMenuList] = useState([]); // 菜单树
/* ***************************************************** */
......@@ -65,18 +65,6 @@ const MiniMenu = props => {
getInfo();
}, [menuID, webid]);
useEffect(() => {
getProductList().then(res => {
const { code } = res;
if (code === 0) {
const {
data: { UserProducts },
} = res;
if (UserProducts && UserProducts.length > 0) {
setProductList(UserProducts);
}
// setProductList(data);
}
});
getTree();
}, []);
useEffect(() => {
......@@ -550,17 +538,19 @@ const MiniMenu = props => {
</div>
</div>
{menuList.length > 0 && (
<Tree
showIcon
onSelect={handleSelect}
treeData={menuList.map(item => mapTree(item))}
blockNode
draggable
autoExpandParent
selectedKeys={[menuID]}
onDrop={handleDrop}
// expandedKeys={[menuID]}
/>
<div style={{ height: 'calc(100vh - 240px)', overflowY: 'scroll' }}>
<Tree
showIcon
onSelect={handleSelect}
treeData={menuList.map(item => mapTree(item))}
blockNode
draggable
autoExpandParent
selectedKeys={[menuID]}
onDrop={handleDrop}
// expandedKeys={[menuID]}
/>
</div>
)}
</div>
<Modal
......
src/pages/webConfig/menuconfig/webMenu.less
View file @ be5f3ba7
.box{
min-height: calc( 100vh - 198px);
.box {
min-height: calc(100vh - 198px);
display: flex;
overflow-x: hidden;
}
.left{
.left {
min-width: 300px;
width: 350px;
min-height: 100%;
......@@ -11,68 +11,69 @@
padding: 10px;
// height: calc( 100vh - 198px);
overflow-y: auto;
.ant-tree-node-content-wrapper{
.ant-tree-node-content-wrapper {
display: flex;
align-items: center;
.ant-tree-iconEle{
.ant-tree-iconEle {
display: flex;
align-items: center;
}
.ant-tree-title{
.ant-tree-title {
width: 100%;
}
}
.leftTop{
.leftTop {
display: flex;
align-items: center;
margin-bottom: 10px;
justify-content: space-between;
.tRight{
.tRight {
display: flex;
align-items: center;
.icon1{
.icon1 {
font-size: 20px;
margin-right: 10px;
}
.icon2{
.icon2 {
font-size: 18px;
margin-right: 5px;
}
.icon:hover{
.icon:hover {
cursor: pointer;
}
}
}
}
.middle{
.middle {
min-width: 500px;
width: 100%;
min-height: 100%;
border: 1px solid #eee;
padding: 10px;
margin: 0 0 0 10px;
height: calc(100vh - 180px);
overflow-y: scroll;
}
.title{
.title {
display: flex;
align-items: center;
width: 100%;
}
.tip{
.tip {
display: none;
}
.title:hover{
.tip{
.title:hover {
.tip {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
}
.fs{
.fs {
font-size: 18px;
margin-left: 10px;
}
.rightBox{
.rightBox {
min-width: 200px;
// width: 600px;
width: 100%;
......@@ -84,4 +85,4 @@
// .ant-modal-body{
// padding: 0 !important;
// }
// }
\ No newline at end of file
// }
src/pages/webConfig/utils.js
View file @ be5f3ba7
......@@ -35,6 +35,16 @@ export const menuStyle = {
// dock: '底部',
// 'banner-left-noShrink': '标题栏-左-不收',
};
// 消息标记
export const markingLabel = {
One: '单人',
All: '多人',
};
// 语音播报
export const voiceLabel = {
true: '开',
false: '关',
};
export const MDILabel = {
MDI: '多标签模式',
SDI: '单标签模式',
......@@ -69,7 +79,10 @@ export const defaultWebConfigObj = {
mapPlan: '',
qrcode: '',
loginTemplate: 'Default.html',
productType: '',
alarmWays: notificationTypes.MQTT,
messageMarking: 'One',
messageVoice: true,
};
export const getDefaultGetWebconfig = ({
......@@ -84,6 +97,7 @@ export const getDefaultGetWebconfig = ({
products,
onGetProduct,
isEdit,
productList,
}) => {
const config = {
title: {
......@@ -161,6 +175,26 @@ export const getDefaultGetWebconfig = ({
},
],
},
productType: {
label: '主页产品类型',
formType: ITEM_TYPE.SELECT,
placeholder: '请选择产品类型',
options: products.map(t => ({
value: t.ProductName,
children: t.ProductName,
key: t.ID,
})),
onDropdownVisibleChange: onGetProduct,
showSearch: false,
filterOption: (input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
rules: [
{
required: false,
message: '产品类型必填',
},
],
},
homePage: {
label: '主页',
formType: ITEM_TYPE.INPUT,
......@@ -186,26 +220,7 @@ export const getDefaultGetWebconfig = ({
},
],
},
// product: {
// label: '产品类型',
// formType: ITEM_TYPE.SELECT,
// placeholder: '请选择产品类型',
// options: products.map(t => ({
// value: t.ProductName,
// children: t.ProductAlias,
// key: t.Id,
// })),
// onDropdownVisibleChange: onGetProduct,
// showSearch: false,
// filterOption: (input, option) =>
// option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
// rules: [
// {
// required: false,
// message: '产品类型必填',
// },
// ],
// },
// theme: {
// label: '系统皮肤',
// formType: ITEM_TYPE.SELECT,
......@@ -258,15 +273,41 @@ export const getDefaultGetWebconfig = ({
formType: ITEM_TYPE.INPUT,
allowClear: true,
},
alarmWays: {
label: '通知方式',
formType: ITEM_TYPE.CHECK_BOX,
options: Object.keys(notificationTypes).map(k => ({
messageMarking: {
label: '消息标记',
formType: ITEM_TYPE.SINGLE_RADIO,
options: Object.keys(markingLabel).map(k => ({
value: k,
key: k,
children: notificationTypes[k],
children: markingLabel[k],
})),
},
messageVoice: {
label: '语音播报',
formType: ITEM_TYPE.SINGLE_RADIO,
optionType: 'button',
options: [
{
value: true,
key: '1',
children: '开',
},
{
value: false,
key: '2',
children: '关',
},
],
},
// alarmWays: {
// label: '通知方式',
// formType: ITEM_TYPE.CHECK_BOX,
// options: Object.keys(notificationTypes).map(k => ({
// value: k,
// key: k,
// children: notificationTypes[k],
// })),
// },
// mapPlan: {
// label: '地图方案',
// formType: ITEM_TYPE.SELECT,
......
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