Commit c7b316cc authored by 邓超's avatar 邓超

fix: 优化工作流编辑器选择角色机构默认承办人交互,优化台账、事件、流程左侧树交互

parent a22038d8
...@@ -10,6 +10,10 @@ const getChildKeys = tree => { ...@@ -10,6 +10,10 @@ const getChildKeys = tree => {
export default props => { export default props => {
const { expandedKeys, onExpand, onSelect, selectedKeys, ...rest } = props; const { expandedKeys, onExpand, onSelect, selectedKeys, ...rest } = props;
const [epKeys, setEpKeys] = useState([expandedKeys]); const [epKeys, setEpKeys] = useState([expandedKeys]);
useEffect(() => {
console.log(expandedKeys, 'expandedKeys');
setEpKeys([expandedKeys]);
}, [expandedKeys]);
const handleExpand = (keys, { expanded, node }) => { const handleExpand = (keys, { expanded, node }) => {
if (!expanded) { if (!expanded) {
...@@ -36,6 +40,7 @@ export default props => { ...@@ -36,6 +40,7 @@ export default props => {
} }
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
onSelect && onSelect(keys, e); onSelect && onSelect(keys, e);
console.log(result, 'result');
setEpKeys(result); setEpKeys(result);
}; };
......
...@@ -450,7 +450,6 @@ class PicturesWall extends React.Component<PicturesWallType> { ...@@ -450,7 +450,6 @@ class PicturesWall extends React.Component<PicturesWallType> {
{imgBed.map((item, i) => { {imgBed.map((item, i) => {
if (item.moduleName == picType || item.moduleName == 'CityTemp') { if (item.moduleName == picType || item.moduleName == 'CityTemp') {
const child = [...item.child] || []; const child = [...item.child] || [];
console.log(item,'item');
if (item.fileUrls.length > 0) { if (item.fileUrls.length > 0) {
child.push({ child.push({
moduleName: item.moduleName, moduleName: item.moduleName,
......
...@@ -42,6 +42,7 @@ const BasicLayout = props => { ...@@ -42,6 +42,7 @@ const BasicLayout = props => {
.filter(Boolean); .filter(Boolean);
const handleMenuCollapse = () => {}; // get children authority const handleMenuCollapse = () => {}; // get children authority
matchRoutes(props.route.routes, props.location.pathname); matchRoutes(props.route.routes, props.location.pathname);
return ( return (
<ProLayout <ProLayout
logo={() => <img src={logo} style={{ width: '32px', height: '32px' }} alt="" />} logo={() => <img src={logo} style={{ width: '32px', height: '32px' }} alt="" />}
......
...@@ -14,7 +14,7 @@ import PageContainer from '@/components/BasePageContainer'; ...@@ -14,7 +14,7 @@ import PageContainer from '@/components/BasePageContainer';
import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api'; import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
import AddModal from './BookConfig'; import AddModal from './BookConfig';
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);
...@@ -25,6 +25,7 @@ const standingBook = props => { ...@@ -25,6 +25,7 @@ const standingBook = props => {
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 [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
const { Item } = Form; const { Item } = Form;
const editor = record => { const editor = record => {
...@@ -281,12 +282,18 @@ const standingBook = props => { ...@@ -281,12 +282,18 @@ const standingBook = props => {
className={classnames({ className={classnames({
[styles.listItem]: true, [styles.listItem]: true,
[styles.pickItem]: item === pickItem, [styles.pickItem]: item === pickItem,
[styles.listHover]: item !== pickItem && item === hoverItemIndex,
})} })}
onClick={e => setPickItem(item)} onClick={e => setPickItem(item)}
onMouseEnter={() => {
setHoverItemIndex(item);
}}
onMouseLeave={() => {
setHoverItemIndex('');
}}
key={index} key={index}
> >
{item}{allData[item] ? allData[item].length : ''} {item}{allData[item] ? allData[item].length : ''}
{item === pickItem ? <RightOutlined /> : ''}
</div> </div>
); );
})} })}
...@@ -356,4 +363,4 @@ const standingBook = props => { ...@@ -356,4 +363,4 @@ const standingBook = props => {
</PageContainer> </PageContainer>
); );
}; };
export default standingBook; export default StandingBook;
...@@ -37,6 +37,9 @@ ...@@ -37,6 +37,9 @@
padding: 8px 14px; padding: 8px 14px;
} }
.pickItem { .pickItem {
background-color: #aed8fa;
}
.listHover {
background-color: #f5f6f9; background-color: #f5f6f9;
} }
.ant-form-item { .ant-form-item {
......
...@@ -69,6 +69,7 @@ const incident = () => { ...@@ -69,6 +69,7 @@ const incident = () => {
const [maxLength, setMaxLength] = useState(0); const [maxLength, setMaxLength] = useState(0);
const [pickItem, setPickItem] = useState(''); const [pickItem, setPickItem] = useState('');
const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
const columns = [ const columns = [
{ {
...@@ -480,16 +481,22 @@ const incident = () => { ...@@ -480,16 +481,22 @@ const incident = () => {
className={classnames({ className={classnames({
[styles.listItem]: true, [styles.listItem]: true,
[styles.pickItem]: item === pickItem, [styles.pickItem]: item === pickItem,
[styles.listHover]: item !== pickItem && item === hoverItemIndex,
})} })}
onClick={e => { onClick={e => {
setPickItem(item); setPickItem(item);
setRember(index); setRember(index);
setRember1(item); setRember1(item);
}} }}
onMouseEnter={() => {
setHoverItemIndex(item);
}}
onMouseLeave={() => {
setHoverItemIndex('');
}}
key={index} key={index}
> >
{item}{tableData[item] ? tableData[item].length : ''}{' '} {item}{tableData[item] ? tableData[item].length : ''}
{item === pickItem ? <RightOutlined /> : ''}{' '}
</div> </div>
))} ))}
</div> </div>
......
...@@ -35,6 +35,9 @@ ...@@ -35,6 +35,9 @@
margin-top: -5px; margin-top: -5px;
} }
.pickItem { .pickItem {
background-color: #aed8fa;
}
.listHover {
background-color: #f5f6f9; background-color: #f5f6f9;
} }
.contentContainers { .contentContainers {
...@@ -272,10 +275,7 @@ ...@@ -272,10 +275,7 @@
width: 100vm; width: 100vm;
height: calc(100vh - 90px); height: calc(100vh - 90px);
background: #ffffff; background: #ffffff;
.ant-table.ant-table-small .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table {
.ant-table-tbody
.ant-table-wrapper:only-child
.ant-table {
margin-left: 0; margin-left: 0;
} }
.ant-table.ant-table-bordered > .ant-table-container { .ant-table.ant-table-bordered > .ant-table-container {
......
...@@ -3,7 +3,6 @@ import { useHistory } from 'react-router-dom'; ...@@ -3,7 +3,6 @@ import { useHistory } from 'react-router-dom';
import { reloadFlows, removeFlowExtend } from '@/services/flow/flow'; import { reloadFlows, removeFlowExtend } from '@/services/flow/flow';
import { Card, Space, Table, Popconfirm, Spin, Tooltip, notification, message, Button } from 'antd'; import { Card, Space, Table, Popconfirm, Spin, Tooltip, notification, message, Button } from 'antd';
import { import {
RightOutlined,
DoubleLeftOutlined, DoubleLeftOutlined,
DoubleRightOutlined, DoubleRightOutlined,
EditTwoTone, EditTwoTone,
...@@ -28,6 +27,7 @@ const Flow = () => { ...@@ -28,6 +27,7 @@ const Flow = () => {
const [treeLoading, setTreeLoading] = useState(false); const [treeLoading, setTreeLoading] = useState(false);
const [treeVisible, setTreeVisible] = useState(true); const [treeVisible, setTreeVisible] = useState(true);
const [pickItemIndex, setPickItemIndex] = useState(0); // 选中流程索引 const [pickItemIndex, setPickItemIndex] = useState(0); // 选中流程索引
const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
const [visible, setVisible] = useState({ const [visible, setVisible] = useState({
processConfig: false, processConfig: false,
order: false, order: false,
...@@ -239,7 +239,14 @@ const Flow = () => { ...@@ -239,7 +239,14 @@ const Flow = () => {
className={classnames({ className={classnames({
[styles.listItem]: true, [styles.listItem]: true,
[styles.pickItem]: index === pickItemIndex, [styles.pickItem]: index === pickItemIndex,
[styles.listHover]: index !== pickItemIndex && index === hoverItemIndex,
})} })}
onMouseEnter={() => {
setHoverItemIndex(index);
}}
onMouseLeave={() => {
setHoverItemIndex('');
}}
onClick={() => { onClick={() => {
setPickItemIndex(index); setPickItemIndex(index);
setTableData(item.root); setTableData(item.root);
...@@ -247,7 +254,6 @@ const Flow = () => { ...@@ -247,7 +254,6 @@ const Flow = () => {
key={item.goupName} key={item.goupName}
> >
{item.goupName}{item.count ? item.count : ''} {item.goupName}{item.count ? item.count : ''}
{index === pickItemIndex ? <RightOutlined /> : ''}
</div> </div>
))} ))}
</div> </div>
...@@ -267,6 +273,7 @@ const Flow = () => { ...@@ -267,6 +273,7 @@ const Flow = () => {
</Card> </Card>
</Spin> </Spin>
{/* 右侧流程表 */} {/* 右侧流程表 */}
<div className={styles.processContainer}> <div className={styles.processContainer}>
<div className={styles.buttonList}> <div className={styles.buttonList}>
<Button <Button
......
.flowContainer { .flowContainer {
display: flex; display: flex;
width: 100%; width: 100%;
position: relative;
position: relative;
.orgContainer { .orgContainer {
position: relative; position: relative;
left: 0; left: 0;
...@@ -34,9 +34,13 @@ ...@@ -34,9 +34,13 @@
color: #414e65; color: #414e65;
cursor: pointer; cursor: pointer;
} }
.pickItem { .listHover {
background-color: #f5f6f9; background-color: #f5f6f9;
} }
.pickItem {
background-color: #aed8fa;
}
.switcher { .switcher {
display: block; display: block;
position: absolute; position: absolute;
......
...@@ -64,6 +64,7 @@ const NodeModal = props => { ...@@ -64,6 +64,7 @@ const NodeModal = props => {
}; };
// 添加角色或机构 // 添加角色或机构
const addUser = selectList => { const addUser = selectList => {
console.log(selectList, 'selectList');
setNodeMsg({ ...nodeMsg, roleList: selectList }); setNodeMsg({ ...nodeMsg, roleList: selectList });
setShowRoal(false); setShowRoal(false);
}; };
...@@ -86,9 +87,9 @@ const NodeModal = props => { ...@@ -86,9 +87,9 @@ const NodeModal = props => {
// 定义表格 // 定义表格
const columns = [ const columns = [
{ {
title: '机构(角色)名称', title: '名称',
dataIndex: 'roleName', dataIndex: 'roleName',
align: 'center', align: 'left',
ellipsis: { ellipsis: {
showTitle: false, showTitle: false,
}, },
...@@ -98,6 +99,25 @@ const NodeModal = props => { ...@@ -98,6 +99,25 @@ const NodeModal = props => {
</Tooltip> </Tooltip>
), ),
}, },
{
title: '类型',
dataIndex: 'type',
align: 'center',
width: 80,
filters: [
{
text: '角色',
value: 2,
},
{
text: '机构',
value: 1,
},
],
onFilter: (value, record) => record.type === value,
render: text => (text === 2 ? '角色' : '机构'),
},
{ {
title: '默认承办人', title: '默认承办人',
dataIndex: 'defauletUserName', dataIndex: 'defauletUserName',
...@@ -105,9 +125,10 @@ const NodeModal = props => { ...@@ -105,9 +125,10 @@ const NodeModal = props => {
ellipsis: { ellipsis: {
showTitle: false, showTitle: false,
}, },
width: 100,
render: text => ( render: text => (
<Tooltip placement="topLeft" title={text}> <Tooltip placement="topLeft" title={text}>
{text} {text || '(无)'}
</Tooltip> </Tooltip>
), ),
}, },
...@@ -115,6 +136,7 @@ const NodeModal = props => { ...@@ -115,6 +136,7 @@ const NodeModal = props => {
title: '操作', title: '操作',
align: 'center', align: 'center',
ellipsis: true, ellipsis: true,
width: 60,
render: (text, record, index) => ( render: (text, record, index) => (
<> <>
<Space> <Space>
...@@ -167,7 +189,7 @@ const NodeModal = props => { ...@@ -167,7 +189,7 @@ const NodeModal = props => {
marginBottom: '30px', marginBottom: '30px',
}} }}
> >
编辑节点 节点信息
</Divider> </Divider>
<Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}> <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
<Form.Item <Form.Item
...@@ -206,16 +228,16 @@ const NodeModal = props => { ...@@ -206,16 +228,16 @@ const NodeModal = props => {
margin: '30px 0 10px 0', margin: '30px 0 10px 0',
}} }}
> >
角色用户列表 承办管理
</Divider> </Divider>
<Button <Button
style={{ marginBottom: '10px' }} style={{ marginBottom: '10px', marginLeft: '335px' }}
onClick={() => { onClick={() => {
setShowRoal(true); setShowRoal(true);
}} }}
type="primary" type="primary"
> >
请选择角色或机构 设置
</Button> </Button>
<Table <Table
dataSource={nodeMsg.roleList} dataSource={nodeMsg.roleList}
...@@ -223,7 +245,7 @@ const NodeModal = props => { ...@@ -223,7 +245,7 @@ const NodeModal = props => {
rowKey={record => record.roleId} rowKey={record => record.roleId}
bordered bordered
size="small" size="small"
scroll={{ y: 'calc(100vh - 550px)' }} scroll={{ y: 'calc(100vh - 480px)' }}
onRow={(record, index) => ({ onRow={(record, index) => ({
onDoubleClick: () => { onDoubleClick: () => {
toEdit(record, index); toEdit(record, index);
......
...@@ -98,7 +98,7 @@ const RoalChoose = props => { ...@@ -98,7 +98,7 @@ const RoalChoose = props => {
roleName: value.name, roleName: value.name,
type: value.type, type: value.type,
roleId: value.id, roleId: value.id,
defauletUserName: [], defauletUserName: '',
defaultUserId: [], defaultUserId: [],
}); });
} }
...@@ -108,7 +108,6 @@ const RoalChoose = props => { ...@@ -108,7 +108,6 @@ const RoalChoose = props => {
} }
setDelArr(delArr); setDelArr(delArr);
setSelected(selected); setSelected(selected);
setPlainOptions(list); setPlainOptions(list);
}; };
// tab栏切换回调 // tab栏切换回调
...@@ -173,7 +172,7 @@ const RoalChoose = props => { ...@@ -173,7 +172,7 @@ const RoalChoose = props => {
return ( return (
<div className={styles.modalContainer}> <div className={styles.modalContainer}>
<Modal <Modal
title="角色机构列表" title="办理配置"
visible={visible} visible={visible}
onOk={onSave} onOk={onSave}
width="860px" width="860px"
...@@ -196,7 +195,6 @@ const RoalChoose = props => { ...@@ -196,7 +195,6 @@ const RoalChoose = props => {
setSearchName(e.target.value); setSearchName(e.target.value);
}} }}
/> />
<div className={styles.title}>可选列表</div>
<div className={styles.tabContent}> <div className={styles.tabContent}>
<Tabs type="card" activeKey={roleType} onChange={tabCallback}> <Tabs type="card" activeKey={roleType} onChange={tabCallback}>
<TabPane tab="角色" key="2"> <TabPane tab="角色" key="2">
...@@ -226,13 +224,27 @@ const RoalChoose = props => { ...@@ -226,13 +224,27 @@ const RoalChoose = props => {
<div className={styles.selectedList}> <div className={styles.selectedList}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.title}>已选列表</div> <div className={styles.title}>已选列表</div>
<div className={styles.tagHead}>
<div className={styles.tagContent}>
<div className={styles.tagRol} />
<div>角色</div>
</div>
<div className={styles.tagContent}>
<div className={styles.tagOrg} />
<div>机构</div>
</div>
</div>
</div> </div>
<div className={styles.selectBox}> <div className={styles.selectBox}>
{[...selected].length > 0 ? ( {[...selected].length > 0 ? (
<div className={styles.selectContent}> <div className={styles.selectContent}>
{[...selected].map(item => ( {[...selected].map(item => (
<div className={styles.selectValue} key={item[0]}> <div className={styles.selectValue} key={item[0]}>
<Tag closable onClose={() => delSelected(item[0])}> <Tag
closable
color={item[1].type === 2 ? 'cyan' : 'orange'}
onClose={() => delSelected(item[0])}
>
{item[1].roleName} {item[1].roleName}
</Tag> </Tag>
</div> </div>
......
...@@ -72,7 +72,6 @@ ...@@ -72,7 +72,6 @@
} }
} }
.ant-tabs-nav { .ant-tabs-nav {
padding-left: 90px;
background-color: #f2f1f1; background-color: #f2f1f1;
} }
.ant-tabs-tab { .ant-tabs-tab {
...@@ -105,6 +104,30 @@ ...@@ -105,6 +104,30 @@
z-index: 1; z-index: 1;
color: #00070d; color: #00070d;
} }
.tagHead {
display: flex;
position: absolute;
top: 10px;
left: 88px;
.tagContent {
display: flex;
align-items: center;
margin-right: 11px;
}
.tagRol,
.tagOrg {
width: 10px;
height: 3px;
margin-right: 5px;
}
.tagRol {
background-color: #87E8DE;
}
.tagOrg {
background-color: #FFD591;
}
}
} }
.selectBox { .selectBox {
height: 365px; height: 365px;
......
...@@ -37,10 +37,7 @@ const RoleModal = porps => { ...@@ -37,10 +37,7 @@ const RoleModal = porps => {
}); });
return val.roleName; return val.roleName;
}); });
if ( if (checkedList.length === options.length && checkedList.length > 0) {
checkedList.length === options.length &&
checkedList.length > 0
) {
checkAll = true; checkAll = true;
} }
if (checkedList.length < options.length && checkedList.length > 0) { if (checkedList.length < options.length && checkedList.length > 0) {
...@@ -64,9 +61,7 @@ const RoleModal = porps => { ...@@ -64,9 +61,7 @@ const RoleModal = porps => {
// 多选change事件 // 多选change事件
const onCheckAllChange = (e, index) => { const onCheckAllChange = (e, index) => {
let newCheckList = JSON.parse(JSON.stringify(roleList)); let newCheckList = JSON.parse(JSON.stringify(roleList));
newCheckList[index].checkedList = e.target.checked newCheckList[index].checkedList = e.target.checked ? newCheckList[index].options : [];
? newCheckList[index].options
: [];
newCheckList[index].indeterminate = false; newCheckList[index].indeterminate = false;
newCheckList[index].checkAll = e.target.checked; newCheckList[index].checkAll = e.target.checked;
setRoleList(newCheckList); setRoleList(newCheckList);
...@@ -77,8 +72,7 @@ const RoleModal = porps => { ...@@ -77,8 +72,7 @@ const RoleModal = porps => {
newCheckList[index].checkedList = list; newCheckList[index].checkedList = list;
newCheckList[index].indeterminate = newCheckList[index].indeterminate =
!!list.length && list.length < newCheckList[index].options.length; !!list.length && list.length < newCheckList[index].options.length;
newCheckList[index].checkAll = newCheckList[index].checkAll = list.length === newCheckList[index].options.length;
list.length === newCheckList[index].options.length;
setRoleList(newCheckList); setRoleList(newCheckList);
}; };
return ( return (
......
...@@ -97,7 +97,7 @@ const MobileConfigPage = props => { ...@@ -97,7 +97,7 @@ const MobileConfigPage = props => {
let obj = singleList.find(item => item.id === key); let obj = singleList.find(item => item.id === key);
console.log(obj); console.log(obj);
setParentKey(key); setParentKey(key);
setActiveKey('0'); setActiveKey('1');
setClientName(obj.subSystemValue); setClientName(obj.subSystemValue);
setMiniTitle(obj.text); setMiniTitle(obj.text);
}; };
......
...@@ -105,7 +105,7 @@ const WebConfigPage = props => { ...@@ -105,7 +105,7 @@ const WebConfigPage = props => {
].flat(2); ].flat(2);
if (!canceled.cancel) { if (!canceled.cancel) {
setWebs(websArr); setWebs(websArr);
console.log(websArr, 'websArr'); console.log(websArr[0], 'websArr[0]');
if (!curWeb) setCurWeb(websArr[0]); if (!curWeb) setCurWeb(websArr[0]);
setLoading(false); setLoading(false);
} }
......
...@@ -334,17 +334,20 @@ const SiteManageV2 = () => { ...@@ -334,17 +334,20 @@ const SiteManageV2 = () => {
// 选中某个站点 // 选中某个站点
const onSelect = (props, e) => { const onSelect = (props, e) => {
setCh(props[0]); setCh(props[0]);
console.log(props[0], 'props[0]');
if (!props[0]) { if (!props[0]) {
setCurrentStation(currentStation); setCurrentStation(currentStation);
} else { } else {
setCurrentStation(props[0]); setCurrentStation(props[0]);
} }
setPage({ pageNum: 1, pageSize: 10 }); setPage({ pageNum: 1, pageSize: 10 });
data.map((item, index) => { if (data) {
if (item.id == props[0]) { data.map((item, index) => {
setDes(item.describe); if (item.id == props[0]) {
} setDes(item.describe);
}); }
});
}
}; };
const getValue = () => { const getValue = () => {
...@@ -679,6 +682,7 @@ const SiteManageV2 = () => { ...@@ -679,6 +682,7 @@ const SiteManageV2 = () => {
selectedKeys={[currentStation]} selectedKeys={[currentStation]}
onSelect={onSelect} onSelect={onSelect}
treeData={treeData.map(t => mapTree(t))} treeData={treeData.map(t => mapTree(t))}
expandedKeys={treeData[0].id}
draggable draggable
onDrop={handleDrop} onDrop={handleDrop}
/> />
......
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