Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ab88b6c8 1 parent 71fef078

节点属性新功能点初稿-新增选择下一步执行人和节点操作里添加消息配置

Inline Side-by-side
Showing 1 changed file with 131 additions and 2 deletions
......@@ -112,6 +112,32 @@
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
<div>
<el-checkbox v-model="state.has_next_step_user">选择下一步的执行人</el-checkbox>
<!-- TODO: 需要给每个子分支选择下一步执行人，删除分支的时候需要删除保存的值 -->
<el-select v-model="state.next_step_node" placeholder="请选择节点" style="margin-bottom: 0.5rem;">
<el-option
v-for="node in state.next_step_node_opt"
:key="node.value"
:label="node.label"
:value="node.value">
</el-option>
</el-select>
<div class="flow-tag__wrapper" @click="openNextStepUserForm">
<el-tag
v-if="state.nextStepUserTags.length"
v-for="tag in state.nextStepUserTags"
:key="tag.name"
style="margin: 0 0.25rem 0.5rem 0.25rem;"
>
<el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
<el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
<el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
<span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
</div>
</div>
<!-- <el-form-item v-if="state.select_attr_set" prop="attr" style="width: 100%;"> -->
<!-- <el-radio-group
......@@ -229,7 +255,7 @@
</div>
</div>
<div v-else class="more-attr-set">
<el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" color="#009688" style="width: 100%;">完成</el-button>
<el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" color="#009688" style="width: 100%;">返回</el-button>
<div class="more-attr-switch">
<div class="more-attr-title">{{ state.more_attr_data.label }}</div>
<div><el-switch v-model="state.more_attr_data.show" /></div>
......@@ -239,6 +265,38 @@
<p style="font-size: 14px; font-weight: bold;">按钮文字</p>
<el-input v-model="state.more_attr_data.btnText" />
</div>
<div v-if="state.more_attr_data.is_node">
{{ state.more_attr_data }}
<p style="font-size: 14px; font-weight: bold;">消息配置</p>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 0.9rem;">开关</div>
<div><el-switch v-model="state.more_attr_data.msg_opt.is_open" /></div>
</div>
<div>
<div style="font-size: 0.9rem; margin: 0.5rem 0;">接收对象（整个组织用户范围）</div>
<div class="flow-tag__wrapper" @click="openNextStepUserForm">
<el-tag
v-if="state.nextStepUserTags.length"
v-for="tag in state.nextStepUserTags"
:key="tag.name"
style="margin: 0 0.25rem 0.5rem 0.25rem;"
>
<el-icon v-if="tag.type === 'dept'" style="height: 13px; display: inline-block; vertical-align: middle; line-height: 10px;"><House /></el-icon>
<el-icon v-if="tag.type === 'user'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><Female /></el-icon>
<el-icon v-if="tag.type === 'role'" style="height: 12px; display: inline-block; vertical-align: middle; line-height: 10px;"><User /></el-icon>
<span style="margin-left: 2px; height: 10px; display: inline-block; vertical-align: middle; line-height: 10px;">{{ tag.name }}</span>
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
</div>
<div>
<div style="font-size: 0.9rem; margin: 0.5rem 0;">消息类型（站内信、微信）</div>
<el-checkbox-group v-model="state.more_attr_data.msg_opt.msg_type">
<el-checkbox label="站内信"></el-checkbox>
<el-checkbox label="微信"></el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
......@@ -684,10 +742,17 @@ export default {
showBtn: true,
desc: '',
btnText: '',
is_node: false,
msg_opt: {
is_open: false, // 开关
user: [], // 接收对象
msg_type: [] // 消息类型
}
},
node_name: '', // 节点名称
node_idx: null, // 节点index
userTags: [], // 节点负责人,
nextStepUserTags: [], // 下一步节点负责人,
auth_all_checked: false,
auth_all_edit: false,
field_auths: [],
......@@ -710,6 +775,17 @@ export default {
window_height: '500px',
preview_form_url: '',
drawer: false,
has_next_step_user: true,
is_user_tags_visible: false,
is_next_step_user_visible: false,
next_step_node: '',
next_step_node_opt: [{
value: '1',
label: '节点1'
}, {
value: '2',
label: '节点2'
},]
});
const setNodeTree = (id: string, data: object) => {
......@@ -1028,6 +1104,7 @@ export default {
},
// { immediate: true }
);
// TODO：需要监听state.nextStepUserTags的变化赋值
watch(
() => state.field_auths,
(newValue, oldValue) => {
......@@ -1393,15 +1470,41 @@ export default {
*/
const openUserForm = () => {
state.dialogUserFormVisible = true;
state.is_user_tags_visible = true;
state.dialogUserTags = state.node_tree[state.detailModel.id].user;
}
const openNextStepUserForm = () => { // 打开下一步用户弹框
state.dialogUserFormVisible = true;
state.is_next_step_user_visible = true;
// TODO: 重新打开的时候需要把选中的数据还原显示
// TODO： 监听变化会把下面的值改变之后更新到显示上面
state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
state.dialogUserTags = [
{
"id": 137919,
"type": "user",
"name": "11组寝室长"
},
{
"id": 137923,
"type": "user",
"name": "13组寝室长"
}
];
}
const onCloseUserView = (status: boolean) => {
state.dialogUserFormVisible = status
}
const onConfirmUserView = async (data: any) => { // 负责人弹框确认回调
if (state.is_user_tags_visible) { // 赋值给负责人框
state.userTags = data;
}
if (state.is_next_step_user_visible) { // 赋值给下一步负责人框
state.nextStepUserTags = data;
}
// // 自动保存流程
// let { nodes, edges } = editor.editorState.graph.save();
// // 检查路径有效性
......@@ -1534,6 +1637,8 @@ export default {
state.statusLoading = false;
state.node_name = state.node_tree[state.detailModel.id].name;
state.userTags = state.node_tree[state.detailModel.id].user;
// TODO：获取下一步操作人列表
state.nextStepUserTags = state.node_tree[state.detailModel.id].user;
state.dialogUserTags = state.node_tree[state.detailModel.id].user;
state.field_auths = state.node_tree[state.detailModel.id].field_auths;
state.more_attr = state.node_tree[state.detailModel.id].property;
......@@ -1564,6 +1669,8 @@ export default {
state.statusLoading = false;
state.node_name = data.name ? data.name : model.text; // 节点名称
state.userTags = data.user; // 节点负责人
// TODO：获取下一步操作人列表
state.nextStepUserTags = data.user;
state.dialogUserTags = state.userTags; // 同步给弹框数据
state.field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
state.field_auths = []; // 清空字段权限列表，本地使用数据结构
......@@ -1602,6 +1709,21 @@ export default {
return ele.id !== 'reject'
});
}
// TODO：模拟节点操作-消息配置数据结构
let msg_opt = {
is_open: false, // 开关
user: [], // 接收对象
msg_type: [] // 消息类型
}
state.more_attr.forEach(attr => {
if (attr.id === 'no-2') {
attr.data.forEach(ele => {
console.warn(ele);
ele.msg_opt = msg_opt;
})
}
});
// 抄送节点不显示
if (state.detailModel.control === 'cc') {
......@@ -1698,8 +1820,10 @@ export default {
state.more_attr_data = attr['data'][index]; // 同步数据
if (attr.id === 'no-1') { // 如果是审批意见，按钮文字不可以修改
state.more_attr_data.showBtn = false;
} else {
state.more_attr_data.is_node = false; // 节点属性标识
} else { // 节点操作
state.more_attr_data.showBtn = true;
state.more_attr_data.is_node = true; // 节点属性标识
}
}
......@@ -2413,6 +2537,7 @@ export default {
handleNodeNameChange,
openUserForm,
openNextStepUserForm,
onCloseUserView,
onConfirmUserView,
......@@ -2701,6 +2826,10 @@ body {
color: #009688 !important;
}
.el-switch__label.is-active {
color: #009688 !important;
}
.sort-item {
padding: 1rem; border: 1px solid #ebeef5; cursor: move;
background-color: #fff;
......