Commit cd11ca18 authored by 邓超's avatar 邓超

fix: 优化工作流编辑器交互,添加时限配置

parent 3bae5d7f
Pipeline #64517 passed with stages
......@@ -274,14 +274,14 @@ const Workflow = () => {
{obj.FlowName}
</span>
<div className={styles.nodeTip}>
<Tooltip title="时限配置">
{/* <Tooltip title="时限配置">
<ControlOutlined
onClick={e => {
timeConfig(obj, e);
}}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
</Tooltip> */}
<Tooltip title="编辑流程" className={styles.fs}>
<FormOutlined onClick={e => editFlow(obj, e)} />
</Tooltip>
......@@ -328,8 +328,8 @@ const Workflow = () => {
>
<div style={{ display: `${treeVisible ? 'block' : 'none'}`, height: '100%' }}>
<span className={styles.processTitle}>流程树</span>
<Tooltip title="添加流程">
<PlusSquareFilled onClick={e => addFlowGroup(e)} className={styles.treeHeadIcon} />
<Tooltip title="添加流程">
<PlusSquareFilled onClick={e => addFlow({}, e)} className={styles.treeHeadIcon} />
</Tooltip>
<hr className={styles.splitLine} />
<div className={styles.treeContent}>
......@@ -396,11 +396,11 @@ const Workflow = () => {
onSubumit={val => groupCallBack(val)}
/>
{/* 流程时限配置 */}
<Timelimit
{/* <Timelimit
visible={visible.auxiliaryView}
msg={editMsg}
handleCancel={() => showModal('auxiliaryView', false)}
/>
/> */}
</PageContainer>
);
};
......
......@@ -51,7 +51,9 @@ const FlowChart = props => {
}); // 组件内得流程图数据
const [showLeaveTip, setShowLeaveTip] = useState(false); // 离开路由是否又提醒
const [buttonLoading, setButtonLoading] = useState(); // 发布按钮保存loading
const [flag, setFlag] = useState(0);
const currentNode = useRef();
const afterNodes = useRef(new Map([]));
const objGo = go.GraphObject.make;
useEffect(() => {
if (treeVisible) {
......@@ -126,6 +128,7 @@ const FlowChart = props => {
e.subject.data.lineDetail = JSON.stringify(e.subject.data);
console.log(e, e.subject.data, 'fasdfasdgds');
diagram.model.updateTargetBindings(e.subject.data);
leaveCallBack(true);
});
// 监听节点拖拽到画布事件
diagram.addDiagramListener('externalobjectsdropped', e => {
......@@ -322,13 +325,14 @@ const FlowChart = props => {
roleList: [],
CarbonCopyPeopleList: [],
ExtendPageList: [],
FlowTimerList: [],
TurnOnCc: 0,
NodeAliasName: '',
Handover: '移交选择人',
TableName: '',
Fields: '',
WebPage: '',
FeedbackName: '',
SubFlowInfo: {},
Transferable: 0,
EventsInformation: 1,
IsSendMessage: 1,
......@@ -884,16 +888,29 @@ const FlowChart = props => {
return null;
}
};
const findAfterNode = startNode => {
// let nodeList = new Map([]);
startNode.findNodesOutOf().each(node => {
if (!afterNodes.current.has(node.data.NodeName)) {
if (['1', '0', '2'].includes(node.data.NodeType)) {
afterNodes.current.set(node.data.NodeName, node.data.TableName);
}
findAfterNode(node);
}
});
};
// 双击节点
const handlerDC = (e, node) => {
console.log(node.data, 'nondojfadsoijgsd');
setNodeKey(node.part.data.key);
setEditMsg(node.part.data);
// diagram.model.setDataProperty(node.data, 'NodeName', 'fdasjkljfkldsajf');
currentNode.current = node.data;
// 找到节点后得除去网关跟子流程的所有节点
afterNodes.current = new Map([]);
findAfterNode(node);
console.log(Object.fromEntries(afterNodes.current));
setModalType('edit');
setVisible(true);
setNodeKey(node.part.data.key);
setEditMsg(node.part.data);
};
// 双击线
const addLineMsg = (e, node) => {
......@@ -976,6 +993,7 @@ const FlowChart = props => {
),
}).then(res => {
if (res.code === 0) {
diagram.model.setDataProperty(currentNode.current, 'FlowTimerList', res.data.FlowTimerList);
diagram.model.setDataProperty(currentNode.current, 'ActivityId', res.data.ActivityId);
diagram.model.setDataProperty(
currentNode.current,
......@@ -1052,8 +1070,11 @@ const FlowChart = props => {
if (key === 'roleList') {
diagram.model.setDataProperty(currentNode.current, 'nodeDetail', nodeDetail);
}
if (key === 'TableName') {
setFlag(flag + 1);
}
diagram.rebuildParts();
leaveCallBack(true);
};
// 保存流程
const saveFlow = () => {
......@@ -1188,6 +1209,7 @@ const FlowChart = props => {
modalType={modalType}
nodeChage={nodeChage}
currentNode={currentNode.current}
afterNodes={Object.fromEntries(afterNodes.current)}
handleCancel={() => setVisible(false)}
onSubumit={obj => nodeCallBack(obj)}
flowData={diagram ? JSON.parse(diagram.model.toJson()) : {}}
......
......@@ -107,7 +107,16 @@ const FlowModal = props => {
<Input placeholder="请输入流程名称" />
</Form.Item>
<Form.Item label="分组信息" name="Type">
<Select>
<Select
showSearch
filterOption={false}
allowClear
onSearch={value => {
if (value) {
form.setFieldsValue({ Type: value });
}
}}
>
{treeData.map(item => (
<Option value={item.name} key={item.name}>
{item.name}
......@@ -151,14 +160,14 @@ const FlowModal = props => {
{/* <Option value="分派节点显示">分派节点显示</Option> */}
</Select>
</Form.Item>
<Form.Item label="编码样式" name="UseFixedCodingRule">
<Form.Item label="编码样式" name="UseFixedCodingRule" initialValue>
<Radio.Group>
<Radio value={false}>
{form.getFieldValue('Prefix')}
{'000000000001'.slice(form.getFieldValue('Prefix')?.length)}(始终12位)
{form.getFieldValue('Prefix')}-{new Date().getFullYear()}-0000001 (前缀长度 + 13 位)
</Radio>
<Radio value>
{form.getFieldValue('Prefix')}-{new Date().getFullYear()}-0000001 (前缀长度 + 13 位)
{form.getFieldValue('Prefix')}
{'000000000001'.slice(form.getFieldValue('Prefix')?.length)}(始终12位)
</Radio>
</Radio.Group>
</Form.Item>
......
import React, { useEffect, useState, useRef } from 'react';
import { Button, Divider, Tooltip, message } from 'antd';
import lodash from 'lodash';
import { PlusOutlined } from '@ant-design/icons';
import { FlowNodeSave } from '@/services/workflow/workflow';
import classNames from 'classnames';
import ConfigSubprocess from './nodeModalComponents/ConfigSubprocess';
import ConfgGateway from './nodeModalComponents/ConfgGateway';
......@@ -11,22 +9,14 @@ import ConfgUndertake from './nodeModalComponents/ConfgUndertake';
import ConfigCopyPerson from './nodeModalComponents/ConfigCopyPerson';
import ConfigOperate from './nodeModalComponents/ConfigOperate';
import ConfigView from './nodeModalComponents/ConfigView';
import ConfigTimeLimit from './nodeModalComponents/ConfigTimeLimit';
import CongfigHeightMsg from './nodeModalComponents/CongfigHeightMsg';
import styles from './NodeModal.less';
const tabList = ['常用配置', '高级配置', '移交配置'];
const NodeModal = props => {
const {
flowData,
onSubumit,
handleCancel,
visible,
editMsg,
flowID,
nodeChage,
currentNode,
} = props;
const { flowData, onSubumit, editMsg, flowID, nodeChage, currentNode, afterNodes } = props;
const [activeConfig, setActiveConfig] = useState('常用配置');
const RuleList = useRef([]); // 规则配置列表
const refConfigSubprocess = useRef();
const refConfgGateway = useRef();
......@@ -35,9 +25,11 @@ const NodeModal = props => {
const refConfigCopyPerson = useRef();
const refConfigOperate = useRef();
const refConfigView = useRef();
const refConfigTimeLimit = useRef();
const refCongfigHeightMsg = useRef();
useEffect(() => {
console.log(editMsg, 'editMsgeditMsgeditMsg');
console.log(editMsg, afterNodes, 'editMsgeditMsgeditMsg');
setActiveConfig('常用配置');
}, [editMsg]);
......@@ -52,6 +44,7 @@ const NodeModal = props => {
...refConfigOperate.current?.getParmar(),
...refConfigSubprocess.current?.getParmar(),
...refConfigView.current?.getParmar(),
...refConfigTimeLimit.current?.getParmar(),
};
console.log(obj);
......@@ -158,12 +151,27 @@ const NodeModal = props => {
: 'block',
}}
>
{/* 时限配置 */}
<ConfigTimeLimit
ref={refConfigTimeLimit}
nodeChage={nodeChage}
editMsg={currentNode}
afterNodes={afterNodes}
flowID={flowID}
/>
{/* 辅助视图 */}
<ConfigView
ref={refConfigView}
nodeChage={nodeChage}
editMsg={editMsg}
flowID={flowID}
/>
<CongfigHeightMsg
ref={refCongfigHeightMsg}
nodeChage={nodeChage}
editMsg={editMsg}
flowID={flowID}
/>
</div>
<div
......
import React, { useEffect, useState } from 'react';
import { reloadTimeLimitadFlowNodes } from '@/services/flow/flow';
import { Form, Modal, Input, notification, Select, message } from 'antd';
const { Option } = Select;
const AddModal = props => {
const {
onSubumit,
handleCancel,
visible,
msg,
modalType,
title,
afterNodes,
nodeMsg,
configList,
} = props;
const [timeLimitFlowNodes, setTimeLimitFlowNodes] = useState([]);
const [timeLimitFlowNodesEnd, setTimeLimitFlowNodesEnd] = useState([]);
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
if (visible) {
console.log(configList, 'nodeMsg.EndNode');
if (nodeMsg.TableName) {
getLimitadFlowNodes(nodeMsg.TableName);
} else {
message.error('请配置该节点工单主表');
}
if (modalType === 'edit') {
if (msg.EndNode) {
getLimitadFlowNodesEnd(afterNodes[msg.EndNode]);
}
getFormData();
} else {
form.setFieldsValue({
TimeLimit: 0,
TimeUnit: '小时',
TimeLimitField: '(未配置)',
TimeoutField: '(未配置)',
});
}
} else {
setTimeLimitFlowNodes([]);
setTimeLimitFlowNodesEnd([]);
}
}, [visible]);
// 根据下拉框选择的流程节点关联的表名加载指派字段
const getLimitadFlowNodes = e => {
reloadTimeLimitadFlowNodes({ flowNodeTableName: e }).then(res => {
if (res.code === 0) {
setTimeLimitFlowNodes(res.data);
}
});
};
const getLimitadFlowNodesEnd = e => {
reloadTimeLimitadFlowNodes({ flowNodeTableName: e }).then(res => {
if (res.code === 0) {
setTimeLimitFlowNodesEnd(res.data);
}
});
};
// 获取表单回显
const getFormData = () => {
form.setFieldsValue({
...msg,
TimeLimitField: msg.TimeLimitField || '(未配置)',
TimeoutField: msg.TimeoutField || '(未配置)',
FlowName: title,
});
};
// 表单监听
const onValuesChange = val => {
if (Object.keys(val)[0] === 'EndNode') {
console.log(afterNodes[val.EndNode]);
if (!afterNodes[val.EndNode]) {
message.error('请检查该节点是否选择工单主表');
return;
}
getLimitadFlowNodesEnd(afterNodes[val.EndNode]);
}
};
// 提交表单
const onFinish = () => {
form.validateFields().then(validate => {
if (validate) {
validate.TimeLimitField =
validate.TimeLimitField === '(未配置)' ? '' : validate.TimeLimitField;
validate.TimeoutField = validate.TimeoutField === '(未配置)' ? '' : validate.TimeoutField;
let obj = {};
if (modalType === 'add') {
obj = { ...validate, ID: 0 };
} else {
obj = { ...validate, key: msg.ID };
}
onSubumit(obj, modalType);
}
});
};
return (
<Modal
title="流程时限规则配置"
visible={visible}
onOk={onFinish}
onCancel={handleCancel}
maskClosable={false}
destroyOnClose
width={550}
>
<Form
form={form}
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onValuesChange={onValuesChange}
>
{/* <Form.Item label="流程名称" name="FlowName">
<Input disabled />
</Form.Item> */}
<Form.Item label="规则名称" name="Name" rules={[{ required: true }]}>
<Input placeholder="请输入规则名称" />
</Form.Item>
<Form.Item label="起止节点" style={{ marginBottom: 0, message: '请选择节点' }} required>
<div style={{ display: 'flex' }}>
<Form.Item
name="StartNode"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择节点' }]}
initialValue={nodeMsg?.NodeName}
>
<Select disabled>
{[nodeMsg?.NodeName].map((item, index) => (
<Option value={item} key={index}>
{item}
</Option>
))}
</Select>
</Form.Item>
<span style={{ width: '40px', textAlign: 'center' }}>--</span>
<Form.Item
name="EndNode"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择节点' }]}
>
<Select>
{Object.keys(afterNodes).map((item, index) => (
<Option
value={item}
key={index}
disabled={configList?.some(ele => ele.EndNode === item)}
>
{item}
</Option>
))}
</Select>
</Form.Item>
</div>
</Form.Item>
<Form.Item label="默认时限" style={{ marginBottom: 0 }} required>
<div style={{ display: 'flex' }}>
<Form.Item
name="TimeLimit"
style={{ marginRight: '18px', width: '100%' }}
rules={[
{ required: true, message: '请选填写时限' },
{
validator: (_, value) =>
value < 0 ? Promise.reject(new Error('默认时限需要大于零')) : Promise.resolve(),
},
]}
>
<Input placeholder="请输入默认时限" />
</Form.Item>
<Form.Item
name="TimeUnit"
style={{ width: '100%' }}
rules={[{ required: true, message: '请选择时限单位' }]}
>
<Select>
<Option value="小时">小时</Option>
<Option value="自然日">自然日</Option>
<Option value="工作日">工作日</Option>
</Select>
</Form.Item>
</div>
</Form.Item>
<Form.Item label="时限指派字段" required>
<Form.Item
name="TimeLimitField"
rules={[{ required: true, message: '请选择时限指派字段' }]}
>
<Select>
{timeLimitFlowNodes.map(item => (
<Option value={item.Name} key={item.ID}>
<span>{item.Name}</span>
</Option>
))}
</Select>
</Form.Item>
<div style={{ marginTop: '-15px' }}>
● 来自起始节点工单表,可以为选择器,配置读取字典表;可以为日期/时间控件,用户自行选择。
</div>
</Form.Item>
<Form.Item label="超时记录字段" required>
<Form.Item
name="TimeoutField"
rules={[{ required: true, message: '请选择超时记录字段' }]}
>
<Select>
{timeLimitFlowNodesEnd.map(item => (
<Option value={item.Name} key={item.ID}>
<span>{item.Name}</span>
</Option>
))}
</Select>
</Form.Item>
<div style={{ marginTop: '-15px' }}>
● 来自终止节点工单表,由系统自动填写该工单是否超时。
</div>
</Form.Item>
</Form>
</Modal>
);
};
export default AddModal;
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Divider, Tooltip } from 'antd';
import { Divider, Tooltip, Switch } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import PeopleSelector from '@/components/PeopleSelector';
import styles from '../NodeModal.less';
......@@ -8,6 +8,7 @@ const ConfigCopyPerson = (props, ref) => {
const { nodeChage, editMsg } = props;
const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
const CarbonCopyPeopleList = useRef([]); // 抄送人列表
const TurnOnCc = useRef(0);
const [flag, setFlag] = useState(0); // 用于刷新界面
useImperativeHandle(ref, () => ({
getParmar,
......@@ -18,7 +19,9 @@ const ConfigCopyPerson = (props, ref) => {
return;
}
CarbonCopyPeopleList.current = [];
TurnOnCc.current = 0;
CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
TurnOnCc.current = editMsg.TurnOnCc;
setFlag(flag + 1);
}, [editMsg]);
const getParmar = () => ({ CarbonCopyPeopleList: CarbonCopyPeopleList.current });
......@@ -34,6 +37,19 @@ const ConfigCopyPerson = (props, ref) => {
const editCC = () => {
setShowPersonSelect(true);
};
const onChange = e => {
console.log(e, 'e');
if (e) {
TurnOnCc.current = 1;
} else {
TurnOnCc.current = 0;
// CarbonCopyPeopleList.current = [];
// nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
}
console.log(TurnOnCc.current);
nodeChage('TurnOnCc', TurnOnCc.current);
setFlag(flag + 1);
};
return (
<div>
<Divider
......@@ -46,7 +62,19 @@ const ConfigCopyPerson = (props, ref) => {
>
节点抄送人
</Divider>
<div className={styles.buttonBox} onClick={() => editCC()}>
<div style={{ display: 'flex', justifyContent: 'right', marginBottom: '12px' }}>
开启抄送
<Switch
style={{ marginLeft: '5px' }}
checked={TurnOnCc.current !== 0}
onChange={onChange}
/>
</div>
<div
className={styles.buttonBox}
style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
onClick={() => editCC()}
>
<div
className={styles.setButton}
style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
......
......@@ -35,7 +35,7 @@ const ConfigNodeMsg = (props, ref) => {
form.resetFields();
getTableName();
// 获取反馈类型
getFeedbackName();
// getFeedbackName();
getFormData();
}, [editMsg]);
const getParmar = () => form.getFieldsValue();
......@@ -341,7 +341,7 @@ const ConfigNodeMsg = (props, ref) => {
/>
</div>
</Form.Item>
<Form.Item label="前端视图" name="WebPage">
{/* <Form.Item label="前端视图" name="WebPage">
<Input placeholder="请配置前端视图" />
</Form.Item>
<Form.Item label="反馈类型" name="FeedbackName">
......@@ -352,7 +352,7 @@ const ConfigNodeMsg = (props, ref) => {
</Option>
))}
</Select>
</Form.Item>
</Form.Item> */}
</div>
<div
style={{
......
......@@ -99,39 +99,23 @@ const ConfigOperate = (props, ref) => {
labelCol={{ span: 20 }}
wrapperCol={{ span: 4 }}
onFieldsChange={changeValue}
colon={false}
labelAlign="left"
>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
<div style={{ flex: `0 0 ${(20 / 24) * 100}%`, display: 'flex', alignItems: 'center' }}>
回退至
<Form.Item
name="RollbackNode"
wrapperCol={{ span: 24 }}
style={{ marginLeft: '5px', width: '100px', marginBottom: 0 }}
>
<Select placeholder="请选择回退节点">
{backNodes.map(item => (
<Option value={item.Name} key={item.ID}>
{item.Name}
</Option>
))}
</Select>
</Form.Item>
</div>
<Form.Item
valuePropName="checked"
name="Rollbackable"
style={{ flex: `0 0 ${(4 / 24) * 100}%`, marginBottom: 0 }}
>
<Switch checkedChildren="是" unCheckedChildren="否" />
</Form.Item>
<div
style={{
height: '40px',
lineHeight: '40px',
paddingLeft: '5px',
background: '#EFEFEF',
fontWeight: 700,
}}
>
功能按钮配置
</div>
<Form.Item
valuePropName="checked"
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
label={
<div style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="开始节点不允许转单">
......@@ -142,18 +126,18 @@ const ConfigOperate = (props, ref) => {
}
name="Transferable"
>
<Switch checkedChildren="是" unCheckedChildren="否" />
<Switch disabled={editMsg.NodeType === '1'} checkedChildren="是" unCheckedChildren="否" />
</Form.Item>
<Form.Item
valuePropName="checked"
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
label="暂存"
name="IsSave"
>
<Switch checkedChildren="是" unCheckedChildren="否" />
</Form.Item>
<Form.Item
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
valuePropName="checked"
label={
<div style={{ display: 'flex', alignItems: 'center' }}>
......@@ -165,10 +149,14 @@ const ConfigOperate = (props, ref) => {
}
name="HalfwayClose"
>
<Switch checkedChildren="是" unCheckedChildren="否" />
<Switch
disabled={editMsg.NodeType === '1' || editMsg.NodeType === '2'}
checkedChildren="是"
unCheckedChildren="否"
/>
</Form.Item>
<Form.Item
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
valuePropName="checked"
label={
<div style={{ display: 'flex', alignItems: 'center' }}>
......@@ -180,11 +168,49 @@ const ConfigOperate = (props, ref) => {
}
name="AutoClose"
>
<Switch checkedChildren="是" unCheckedChildren="否" />
<Switch disabled={editMsg.NodeType === '1'} checkedChildren="是" unCheckedChildren="否" />
</Form.Item>
<div
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '0',
padding: '2px',
borderBottom: '1px solid #ccc',
}}
>
<div style={{ flex: `0 0 ${(20 / 24) * 100}%`, display: 'flex', alignItems: 'center' }}>
回退至
<Form.Item
name="RollbackNode"
wrapperCol={{ span: 24 }}
style={{ marginLeft: '5px', width: '140px', marginBottom: 0 }}
>
<Select placeholder="请选择回退节点">
{backNodes.map(item => (
<Option value={item.Name} key={item.ID}>
{item.Name}
</Option>
))}
</Select>
</Form.Item>
</div>
<Form.Item
valuePropName="checked"
name="Rollbackable"
style={{ flex: `0 0 ${(4 / 24) * 100}%`, marginBottom: 0 }}
>
<Switch
checkedChildren="是"
unCheckedChildren="否"
disabled={editMsg.NodeType === '1'}
/>
</Form.Item>
</div>
<Form.Item
valuePropName="checked"
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
label="显示事件信息"
name="EventsInformation"
>
......@@ -192,7 +218,7 @@ const ConfigOperate = (props, ref) => {
</Form.Item>
<Form.Item
valuePropName="checked"
style={{ marginBottom: '12px' }}
style={{ marginBottom: '0', padding: '2px', borderBottom: '1px solid #ccc' }}
label="是否发送短信"
name="IsSendMessage"
>
......
......@@ -30,7 +30,7 @@ const ConfigSubprocess = (props, ref) => {
// });
setFlowList(
res.data.map(item => ({
label: `${item.EventName}/${item.FlowName}`,
label: `${item.FlowName}(${item.EventName})`,
key: `${item.SubFlowEventConfigID}-${item.SubFlowId}`,
})),
);
......@@ -68,9 +68,11 @@ const ConfigSubprocess = (props, ref) => {
? `${editMsg.SubFlowInfo?.SubFlowEventConfigID}-${editMsg.SubFlowInfo?.SubFlowID}`
: null,
MapFields: editMsg.SubFlowInfo?.MapFields?.map(item => ({
nodeField: `${item.ParentFlowMapTableName}-${item.ParentFlowMapFieldName}-${
item.ParentFlowMapTableType
}`,
nodeField: item.ParentFlowMapTableName
? `${item.ParentFlowMapTableName}-${item.ParentFlowMapFieldName}-${
item.ParentFlowMapTableType
}`
: '',
subNodeField: `${item.SubFlowMapTableName}-${item.SubFlowMapFieldName}`,
})),
});
......@@ -168,7 +170,7 @@ const ConfigSubprocess = (props, ref) => {
))}
</Select>
</Form.Item>
<Form.Item label="映射字段" rules={[{ required: true, message: '请输入排序' }]}>
<Form.Item wrapperCol={{ span: 24 }}>
<Form.List name="MapFields">
{(fields, { add, remove }) => (
<>
......@@ -197,7 +199,7 @@ const ConfigSubprocess = (props, ref) => {
<OptGroup key={index} label={item.TableName}>
{item.TableFieldNames.map(ele => (
<Option value={ele.value} key={ele.value}>
{ele.label}
{ele?.label}
</Option>
))}
</OptGroup>
......@@ -234,7 +236,7 @@ const ConfigSubprocess = (props, ref) => {
))}
<Form.Item>
<Button type="dashed" onClick={() => addMap(add)} block icon={<PlusOutlined />}>
添加映射
添加映射字段
</Button>
</Form.Item>
</>
......
import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
import AddLimit from './AddLimit';
const ConfigTimeLimit = (props, ref) => {
const { editMsg, nodeChage, afterNodes } = props;
const [viewModal, setViewModal] = useState(false); // 编辑模态框
const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
const [title, setTitle] = useState('');
const [finishNodes, setFinishNodes] = useState([]);
const [flowId, setFlowId] = useState('');
const [flag, setFlag] = useState(0);
const tableData = useRef([]); // 辅助视图对应的回显的表格
useImperativeHandle(ref, () => ({ getParmar }));
useEffect(() => {
tableData.current = [];
console.log(editMsg, 'editMsg');
tableData.current = editMsg?.FlowTimerList?.map(item => ({ ...item, key: item.ID }));
setFlag(flag + 1);
}, [editMsg]);
const getParmar = () => {};
const toEdit = val => {
setViewModal(true);
setModalType('edit');
setviewMsg(val);
};
const delRow = record => {
let list = JSON.parse(JSON.stringify(tableData.current));
list = list.filter(item => item.key !== record.key);
tableData.current = list;
nodeChage('FlowTimerList', tableData.current);
setFlag(flag + 1);
};
// 辅助视图确定回调
const saveView = (val, type) => {
let list = JSON.parse(JSON.stringify(tableData.current));
// eslint-disable-next-line prefer-spread
let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;
if (type === 'add') {
list.push({ ...val, key: newKey });
} else {
let edtiIndex = list.findIndex(item => item.key === val.key);
list[edtiIndex] = val;
}
tableData.current = list;
nodeChage('FlowTimerList', tableData.current);
setViewModal(false);
};
// 定义表格
const columns = [
{
title: '规则名称',
dataIndex: 'Name',
align: 'center',
},
{
title: '操作',
align: 'center',
ellipsis: true,
render: record => (
<>
<Space>
<Tooltip title="修改流程时限配置">
<EditTwoTone
onClick={() => toEdit(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="删除流程时限配置">
<DeleteOutlined
onClick={() => delRow(record)}
style={{ fontSize: '16px', color: '#e86060' }}
/>
</Tooltip>
</Space>
</>
),
},
];
return (
<div>
<Divider
orientation="left"
style={{
borderTopColor: '#99bbe8',
color: '#15428b',
fontWeight: 700,
}}
>
时限配置
</Divider>
<div
style={{
widnt: '100%',
marginBottom: '10px',
display: 'flex',
justifyContent: 'right',
}}
>
<Button
type="primary"
onClick={() => {
setViewModal(true);
setModalType('add');
}}
icon={<PlusOutlined />}
>
新增时限配置
</Button>
</div>
<Table
dataSource={tableData.current}
columns={columns}
rowKey={record => record.ID}
bordered
size="small"
onRow={record => ({
onDoubleClick: () => {
toEdit(record);
},
})}
pagination={false}
/>
<AddLimit
visible={viewModal}
msg={viewMsg}
title={title}
flowId={flowId}
nodeMsg={editMsg}
modalType={modalType}
handleCancel={() => setViewModal(false)}
afterNodes={afterNodes}
configList={tableData.current}
onSubumit={saveView}
/>
</div>
);
};
export default forwardRef(ConfigTimeLimit);
import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input, Select, Divider, Tooltip, message, Form, Button, Radio } from 'antd';
import { loadFeedbackType } from '@/services/flow/flow';
import styles from '../NodeModal.less';
const { Option } = Select;
const CongfigHeightMsg = (props, ref) => {
const { nodeChage, editMsg, flowID } = props;
const [form] = Form.useForm();
const [backType, setBackType] = useState([]); // 反馈类型
useImperativeHandle(ref, () => ({
getParmar,
}));
useEffect(() => {
form.resetFields();
// 获取反馈类型
getFeedbackName();
getFormData();
}, [editMsg]);
const getParmar = () => form.getFieldsValue();
// 获取表单回显
const getFormData = () => {
const { aheadHandle, NodeHandling } = editMsg;
form.setFieldsValue({
...editMsg,
});
};
// 获取反馈类型
const getFeedbackName = () => {
loadFeedbackType().then(res => {
if (res.code === 0) {
setBackType(res.data);
}
});
};
// 节点配置表单监听
const changeValue = (changedFields, allFields) => {
nodeChage(changedFields[0].name[0], changedFields[0].value);
};
return (
<div>
<Divider
orientation="left"
style={{
borderTopColor: '#99bbe8',
color: '#15428b',
fontWeight: 700,
}}
>
前端视图、反馈类型配置
</Divider>
<Form
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
onFieldsChange={changeValue}
labelAlign="left"
>
<div
style={{
display:
editMsg.NodeType === '20' ||
editMsg.NodeType === '21' ||
editMsg.NodeType === '22' ||
editMsg.NodeType === '30'
? 'none'
: 'block',
}}
>
<Form.Item label="前端视图" name="WebPage">
<Input placeholder="请配置前端视图" />
</Form.Item>
<Form.Item label="反馈类型" name="FeedbackName">
<Select placeholder="请选择反馈类型" allowClear>
{backType.map(item => (
<Option value={item.value} key={item.value}>
{item.value}
</Option>
))}
</Select>
</Form.Item>
</div>
</Form>
</div>
);
};
export default forwardRef(CongfigHeightMsg);
......@@ -571,18 +571,14 @@ export default props => {
<Form.Item label="二维码地址" name="qrcode">
<Input placeholder="请输入二维码地址" autoComplete="off" />
</Form.Item>
<Form.Item label="Web4地图" name="hideMap">
{/* <Radio.Group>
<Radio value={false}>开启</Radio>
<Radio value>关闭</Radio>
</Radio.Group> */}
{/* <Form.Item label="Web4地图" name="hideMap">
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
checked={visibleChecked2}
onChange={change2}
/>
</Form.Item>
</Form.Item> */}
<Form.Item label="地图遮罩" name="useCoverMap">
<Switch
checkedChildren="开启"
......@@ -634,18 +630,14 @@ export default props => {
onChange={change4}
/>
</Form.Item>
<Form.Item label="菜单样式" name="menuState">
{/* <Radio.Group>
<Radio value="open">展开</Radio>
<Radio value="close">折叠</Radio>
</Radio.Group> */}
{/* <Form.Item label="菜单样式" name="menuState">
<Switch
checkedChildren="展开"
unCheckedChildren="折叠"
checked={visibleChecked5}
onChange={change5}
/>
</Form.Item>
</Form.Item> */}
</div>
</Form>
<ColorLinear
......
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