Skip to content

C
CivManage
Commit 572dc451 authored by 涂伟's avatar 涂伟
Browse files
Options

fix: '运维工作流流程中心人员设置选择面板重写'

parent 9b604371
Show whitespace changes
Inline Side-by-side
Showing with 332 additions and 29 deletions
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.jsx
View file @ 572dc451
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { GetRoleUser } from '@/services/workflow/workflow'; import { GetRoleUser, GetRoleUserNew } from '@/services/workflow/workflow';
import { Modal, Input, Checkbox, Pagination, Spin, notification, Empty, Tabs, Tag } from 'antd'; import { Modal, Input, Checkbox, Pagination, Spin, notification, Empty, Tabs, Tag } from 'antd';
import {
CaretDownOutlined,
DesktopOutlined,
MobileOutlined,
WindowsOutlined,
} from '@ant-design/icons';
import styles from './RoalChoose.less'; import styles from './RoalChoose.less';
const { Search } = Input; const { Search } = Input;
const { TabPane } = Tabs; const { TabPane } = Tabs;
const RoalChoose = props => { const RoalChoose = props => {
const { onSubumit, handleCancel, visible, roleList } = props; const { onSubumit, handleCancel, visible, roleList } = props;
const [plainOptions, setPlainOptions] = useState([]); // 角色机构选择列表 const [plainOptions, setPlainOptions] = useState([]); // 角色机构选择列表
const [roleArr, setRoleArr] = useState([]); // 新角色机构选择列表
const [total, setTotal] = useState(); // 角色人员条数 const [total, setTotal] = useState(); // 角色人员条数
const [loading, setLoading] = useState(false); // 加载时的loading const [loading, setLoading] = useState(false); // 加载时的loading
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
...@@ -15,11 +22,26 @@ const RoalChoose = props => { ...@@ -15,11 +22,26 @@ const RoalChoose = props => {
const [selected, setSelected] = useState(new Map()); // 已勾选角色列表 const [selected, setSelected] = useState(new Map()); // 已勾选角色列表
const [searchName, setSearchName] = useState(); // 搜索名称 const [searchName, setSearchName] = useState(); // 搜索名称
const [delArr, setDelArr] = useState(new Map()); // 删除了的元素 const [delArr, setDelArr] = useState(new Map()); // 删除了的元素
const [shrink, setShrink] = useState([]);
const showTypeIcon = item => {
if (item.type === 'mobile') {
return <MobileOutlined />;
}
if (item.visibleValue == 'CS') {
return <WindowsOutlined />;
}
if (item.visibleTitle.indexOf('手持') !== -1) {
return <MobileOutlined />;
}
return <DesktopOutlined />;
};
// 初始化 // 初始化
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
setCurrentPage(1); setCurrentPage(1);
getData('', 1, pageSize, 0, 2); // getData('', 1, pageSize, 0, 2);
getRoleData();
setRoleType('2'); setRoleType('2');
// 对已选的角色进行回显 // 对已选的角色进行回显
if (roleList.length > 0) { if (roleList.length > 0) {
...@@ -71,11 +93,63 @@ const RoalChoose = props => { ...@@ -71,11 +93,63 @@ const RoalChoose = props => {
} }
}); });
}; };
// 获取角色选择数据
const getRoleData = (roleName, pageIndex, pageSizes, roleId, Type) => {
roleName = roleName || '';
setLoading(true);
GetRoleUserNew({
roleName,
}).then(res => {
setLoading(false);
if (res.code === 0 && res.data.length) {
let list = JSON.parse(JSON.stringify(res.data));
list.forEach(item => {
if (item.child.length) {
item.child[0].roleList.forEach(v => {
v.roleID = Number(v.roleID);
if (selected.has(v.roleID)) {
v.isChecked = true;
} else {
v.isChecked = false;
}
});
}
item.roleList.forEach(v => {
v.roleID = Number(v.roleID);
if (selected.has(v.roleID)) {
v.isChecked = true;
} else {
v.isChecked = false;
}
});
});
setRoleArr(list);
// setRoleArr(res.data);
// 处理勾选角色或部门回显
// res.data.data.forEach(item => {
// if (selected.has(item.id)) {
// item.isChecked = true;
// }
// });
// setPlainOptions(res.data.data);
// setTotal(res.data.count);
} else {
setRoleArr([]);
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
// 查询角色 // 查询角色
const onSearch = value => { const onSearch = value => {
setCurrentPage(1); setCurrentPage(1);
setSearchName(value); setSearchName(value);
getData(value, 1, pageSize, 0, roleType); // getData(value, 1, pageSize, 0, roleType);
getRoleData(value);
}; };
// 监听分页 // 监听分页
const paginationChange = (page, pageSizes) => { const paginationChange = (page, pageSizes) => {
...@@ -85,35 +159,49 @@ const RoalChoose = props => { ...@@ -85,35 +159,49 @@ const RoalChoose = props => {
}; };
// 复选框监听事件 // 复选框监听事件
const selectChange = (e, index, value) => { const selectChange = (e, index, value) => {
console.log(plainOptions); console.log(e, index, value, '666');
let list = JSON.parse(JSON.stringify(plainOptions)); let list = JSON.parse(JSON.stringify(roleArr));
list[index].isChecked = e.target.checked; list.forEach(item => {
if (item.child.length) {
item.child[0].roleList.forEach(v => {
if (v.roleID === value.roleID) {
v.isChecked = e.target.checked;
}
});
}
item.roleList.forEach(v => {
if (v.roleID === value.roleID) {
v.isChecked = e.target.checked;
}
});
});
// list[index].isChecked = e.target.checked;
console.log(list); console.log(list);
// 存储勾选角色或站点信息 // 存储勾选角色或站点信息
if (e.target.checked) { if (e.target.checked) {
// 存储已选角色或站点的默认承办人 // 存储已选角色或站点的默认承办人
if (delArr.has(value.id)) { if (delArr.has(value.roleID)) {
selected.set(value.id, delArr.get(value.id)); selected.set(value.roleID, delArr.get(value.roleID));
delArr.delete(value.id); delArr.delete(value.roleID);
} else { } else {
selected.set(value.id, { selected.set(value.roleID, {
roleName: value.name, roleName: value.roleName,
type: value.type, type: 2,
roleId: value.id, roleId: value.roleID,
defauletUserName: '', defauletUserName: '',
defaultUserId: [], defaultUserId: [],
}); });
} }
} else { } else {
delArr.set(value.id, selected.get(value.id)); delArr.set(value.roleID, selected.get(value.roleID));
selected.delete(value.id); selected.delete(value.roleID);
} }
console.log(list); console.log(list);
console.log(selected); console.log(selected);
console.log(list); console.log(list);
setDelArr(delArr); setDelArr(delArr);
setSelected(selected); setSelected(selected);
setPlainOptions(list); setRoleArr(list);
}; };
// tab栏切换回调 // tab栏切换回调
const tabCallback = val => { const tabCallback = val => {
...@@ -138,18 +226,43 @@ const RoalChoose = props => { ...@@ -138,18 +226,43 @@ const RoalChoose = props => {
selected.delete(value); selected.delete(value);
setDelArr(delArr); setDelArr(delArr);
setSelected(selected); setSelected(selected);
let arr = JSON.parse(JSON.stringify(plainOptions)); // let arr = JSON.parse(JSON.stringify(plainOptions));
arr.forEach(item => { // arr.forEach(item => {
if (item.id === value) { // if (item.id === value) {
item.isChecked = false; // item.isChecked = false;
// }
// });
// setPlainOptions(arr);
let list = JSON.parse(JSON.stringify(roleArr));
list.forEach(item => {
if (item.child.length) {
item.child[0].roleList.forEach(v => {
if (v.roleID === value) {
v.isChecked = false;
} }
}); });
setPlainOptions(arr); }
item.roleList.forEach(v => {
if (v.roleID === value) {
v.isChecked = false;
}
});
});
setRoleArr(list);
};
const shirnk = name => {
if (shrink.includes(name)) {
let type = shrink.filter(s => s !== name);
setShrink(type);
} else {
setShrink([...shrink, name]);
}
}; };
// 角色列表样式 // 角色列表样式
const roleDom = () => ( const roleDom = () => (
<> <>
<div className={styles.checkContainer}> {/* <div className={styles.checkContainer}>
<Spin spinning={loading}> <Spin spinning={loading}>
{plainOptions.length > 0 ? ( {plainOptions.length > 0 ? (
<div className={styles.checkContent}> <div className={styles.checkContent}>
...@@ -173,6 +286,82 @@ const RoalChoose = props => { ...@@ -173,6 +286,82 @@ const RoalChoose = props => {
/> />
)} )}
</Spin> </Spin>
</div> */}
<div className={styles.checkContainer}>
<Spin spinning={loading}>
{roleArr.length ? (
<div className={styles.checkContents}>
{roleArr.map((v, i) => (
<div className={styles.list} key={v.visibleTitle}>
<div className={styles.parent}>
<span
className={styles.imgDown}
onClick={() => shirnk(v.visibleTitle)}
style={{ transform: shrink.includes(v.visibleTitle) ? 'rotate(270deg)' : '' }}
>
<CaretDownOutlined />
</span>
<span style={{ color: '#1890ff', marginRight: '10px' }}>{showTypeIcon(v)}</span>
<span>{v.visibleTitle}</span>
</div>
<div
className={styles.childs}
style={{ display: shrink.includes(v.visibleTitle) ? 'none' : 'block' }}
>
{v.child.length
? v.child.map(item => (
<div className={styles.checkGroupContent}>
<div className={styles.topCheckbox}>
<span>{item.visibleTitle}</span>
</div>
<div className={styles.bottomCheckbox}>
{item.roleList.length
? item.roleList.map((items, index) => (
<div
key={items.roleID}
className={styles.check}
title={items.name}
>
<Checkbox
checked={items.isChecked}
onChange={e => {
selectChange(e, index, items);
}}
>
{items.roleName}
</Checkbox>
</div>
))
: null}
</div>
</div>
))
: null}
<div className={styles.checkContent}>
{v.roleList.length
? v.roleList.map((item, index) => (
<div key={item.roleID} className={styles.check} title={item.name}>
<Checkbox
checked={item.isChecked}
onChange={e => {
selectChange(e, index, item);
}}
>
{item.roleName}
</Checkbox>
</div>
))
: null}
</div>
</div>
</div>
))}
</div>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未有查找到角色" />
)}
</Spin>
</div> </div>
</> </>
); );
...@@ -207,14 +396,14 @@ const RoalChoose = props => { ...@@ -207,14 +396,14 @@ const RoalChoose = props => {
<TabPane tab="角色" key="2"> <TabPane tab="角色" key="2">
{roleDom()} {roleDom()}
</TabPane> </TabPane>
<TabPane tab="机构" key="1"> {/* <TabPane tab="机构" key="1">
{roleDom()} {roleDom()}
</TabPane> </TabPane> */}
</Tabs> </Tabs>
</div> </div>
{/* 分页 */} {/* 分页 */}
<div className={styles.footer}> <div className={styles.footer}>
<Pagination {/* <Pagination
size="small" size="small"
total={total} total={total}
showSizeChanger showSizeChanger
...@@ -223,7 +412,7 @@ const RoalChoose = props => { ...@@ -223,7 +412,7 @@ const RoalChoose = props => {
onChange={paginationChange} onChange={paginationChange}
defaultPageSize={33} defaultPageSize={33}
pageSizeOptions={[33, 45, 60, 90]} pageSizeOptions={[33, 45, 60, 90]}
/> /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -249,7 +438,8 @@ const RoalChoose = props => { ...@@ -249,7 +438,8 @@ const RoalChoose = props => {
<div className={styles.selectValue} key={item[0]}> <div className={styles.selectValue} key={item[0]}>
<Tag <Tag
closable closable
color={item[1].type === 2 ? 'cyan' : 'orange'} // color={item[1].type === 2 ? 'cyan' : 'orange'}
color="cyan"
onClose={() => delSelected(item[0])} onClose={() => delSelected(item[0])}
> >
{item[1].roleName} {item[1].roleName}
......
src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/RoalChoose.less
View file @ 572dc451
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.optionalList { .optionalList {
position: relative; position: relative;
width: 60%; width: 70%;
border-right: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7;
.title { .title {
...@@ -63,11 +63,53 @@ ...@@ -63,11 +63,53 @@
height: 360px; height: 360px;
overflow-y: scroll; overflow-y: scroll;
.checkContents {
padding-left: 15px;
.list {
.parent {
height: 38px;
line-height: 38px;
padding-left: 15px;
// border-bottom: 1px solid #f2f2f2;
transition: all 0.3s;
overflow: hidden;
.imgDown {
display: inline-block;
position: relative;
top: -2px;
margin-right: 5px;
&:hover {
cursor: pointer;
}
}
}
.childs {
overflow: hidden;
transition: all 0.3s;
.child {
overflow: hidden;
height: 38px;
line-height: 38px;
padding-left: 30px;
border-bottom: 1px solid #f2f2f2;
&:hover {
color: #0087F7;
cursor: pointer;
}
&[active="true"] {
color: #0087F7;
}
}
}
}
.checkContent { .checkContent {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 32px; margin-left: 32px;
// min-height: 50px;
.check { .check {
width: 150px; width: 150px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -81,6 +123,74 @@ ...@@ -81,6 +123,74 @@
} }
} }
} }
.checkGroupContent {
display: flex;
// width: 100%;
flex-direction: column;
border: 1px solid #c2cdfd;
border-radius: 5px;
margin: 10px 15px;
margin-right: 70px;
min-height: 50px;
padding: 0 10px 10px 16px;
.ant-checkbox-wrapper {
background-color: #fff;
}
.topCheckbox {
height: 20px;
margin: -10px 0 0 0px;
line-height: 20px;
>span {
background-color: white;
}
}
.topCheckbox>label :hover {
font-weight: 600;
}
.bottomCheckbox {
// margin-top: 10px;
display: flex;
flex-wrap: wrap;
.ant-checkbox-wrapper {
display: flex;
margin-left: 0;
width: 150px;
margin-right: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top:10px;
.ant-checkbox + span {
display: flex;
}
}
.fontlabel {
display: inline-block;
width:130px;
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
}
// .ant-checkbox-group-item {
// min-width: 150px !important;
// }
// .ant-checkbox-wrapper {
// min-width: 150px !important;
// }
}
.checkdiv {
display: flex;
flex-wrap: wrap;
}
}
}
} }
...@@ -114,7 +224,7 @@ ...@@ -114,7 +224,7 @@
.selectedList { .selectedList {
position: relative; position: relative;
width: 40%; width: 30%;
.header { .header {
height: 40px; height: 40px;
......
src/services/workflow/workflow.js
View file @ 572dc451
...@@ -9,6 +9,9 @@ export const CreateFlow = param => post(`${PUBLISH_SERVICE}/WorkFlow/CreateFlow` ...@@ -9,6 +9,9 @@ export const CreateFlow = param => post(`${PUBLISH_SERVICE}/WorkFlow/CreateFlow`
export const UpdateFlowGroup = param => post(`${PUBLISH_SERVICE}/WorkFlow/UpdateFlowGroup`, param); export const UpdateFlowGroup = param => post(`${PUBLISH_SERVICE}/WorkFlow/UpdateFlowGroup`, param);
// 查询全部角色对应的人员 // 查询全部角色对应的人员
export const GetRoleUser = param => post(`${PUBLISH_SERVICE}/WorkFlow/GetRoleUser`, param); export const GetRoleUser = param => post(`${PUBLISH_SERVICE}/WorkFlow/GetRoleUser`, param);
// 查询全部角色对应的人员(新增分组)
export const GetRoleUserNew = param =>
get(`${PUBLISH_SERVICE}/UserCenter/GetFlowConfigAllRole`, param);
// 获取节点信息 // 获取节点信息
export const GetNodeInfo = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetNodeInfo`, param); export const GetNodeInfo = param => get(`${PUBLISH_SERVICE}/WorkFlow/GetNodeInfo`, param);
// 创建或修改流程节点 // 创建或修改流程节点
......
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