Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3b257a35 1 parent d6736f79

节点属性里面更多属性功能显示新增

Inline Side-by-side
Showing 1 changed file with 259 additions and 88 deletions
......@@ -84,96 +84,129 @@
stretch
>
<el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
<el-form-item prop="label">
<div slot="label">
节点名称 <span style="color: red;">*</span>
<div v-if="state.main_attr_set" class="main-attr-set">
<el-form-item prop="label">
<div slot="label">
节点名称 <span style="color: red;">*</span>
</div>
<el-input v-model="state.node_name" />
</el-form-item>
<div class="node-user">
<div style="font-size: 14px; margin-bottom: 10px;">
节点负责人 <span style="color: red;">*</span>
</div>
<div class="flow-tag__wrapper" @click="openUserForm">
<el-tag
v-if="state.userTags.length"
v-for="tag in state.userTags"
:key="tag.name"
style="margin-left: 0.25rem; margin-right: 0.25rem;"
>
{{ tag.name }}
</el-tag>
<div v-else class="text-empty">请选择成员</div>
</div>
</div>
<el-input v-model="state.node_name" />
</el-form-item>
<div class="node-user">
<div style="font-size: 14px; margin-bottom: 10px;">
节点负责人 <span style="color: red;">*</span>
</div>
<div class="flow-tag__wrapper" @click="openUserForm">
<el-tag
v-if="state.userTags.length"
v-for="tag in state.userTags"
:key="tag.name"
style="margin-left: 0.25rem; margin-right: 0.25rem;"
<el-form-item prop="attr">
<el-radio-group
v-model="state.attr_radio"
size="large"
class="attr-radio-group"
>
<el-radio-button label="基础属性" />
<el-radio-button label="更多属性" />
</el-radio-group>
</el-form-item>
<el-form-item v-if="state.attr_radio === '基础属性'" prop="">
<div slot="label">
字段权限 <span style="color: red;">*</span>
</div>
<el-row
style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
>
{{ tag.name }}
</el-tag>
<div v-else class="text-empty">请选择成员</div>
<el-col :span="12">字段</el-col>
<el-col :span="6">可见</el-col>
<el-col :span="6">可编辑</el-col>
</el-row>
<el-row style="width: 100%; padding-left: 10px;">
<el-col :span="12" style="color: #409eff;">全选</el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
@change="onAuthAllChange"
v-model="state.auth_all_checked"
label=""
size="large"
/></el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
@change="onAuthAllEditChange"
v-model="state.auth_all_edit"
label=""
size="large"
/></el-col>
</el-row>
<el-row
v-for="(field, index) in state.field_auths"
:key="index"
style="width: 100%; padding-left: 10px;"
>
<el-col :span="12" style="">{{ field.name }}</el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
v-model="field.visible.checked"
:disabled="field.visible.disabled"
label=""
size="large"
@change="onAuthVisibleChange(field, index)"
/></el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
v-model="field.editable.checked"
:disabled="field.editable.disabled"
label=""
size="large"
@change="onAuthEditableChange(field, index)"
/></el-col>
</el-row>
</el-form-item>
<div v-if="state.attr_radio === '更多属性'">
<div class="more-attr">
<div v-for="(attr, index) in state.more_attr" :key="index" class="more-attr-item">
<p class="title">{{ attr.label }}</p>
<div v-for="(item, idx) in attr.data" :key="idx" class="content">
<div v-if="item.btnText" class="left">
<span v-if="item.label === item.btnText">{{ item.label }}</span>
<span v-else>
{{ item.btnText }} <span style="color: #838892;">| 原名：{{ item.label }}</span>
</span>
</div>
<div v-else class="left">
<span>
{{ item.label }}
</span>
</div>
<div :class="['right', item.show ? 'active' : '']">{{ item.show? '已开启' : '未开启' }}</div>
<div class="btn-action" @click="setMoreAttr(attr, idx)">
<el-icon :size="14"><Edit /></el-icon>&nbsp;<span>编辑</span>
</div>
</div>
</div>
<!-- <div class="more-attr-item">
<p class="title">节点操作</p>
</div> -->
</div>
</div>
</div>
<el-form-item prop="attr">
<el-radio-group
v-model="state.attr_radio"
size="large"
class="attr-radio-group"
>
<el-radio-button label="基础属性" />
<el-radio-button label="更多属性" />
</el-radio-group>
</el-form-item>
<el-form-item v-if="state.attr_radio === '基础属性'" prop="">
<div slot="label">
字段权限 <span style="color: red;">*</span>
</div>
<el-row
style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
>
<el-col :span="12">字段</el-col>
<el-col :span="6">可见</el-col>
<el-col :span="6">可编辑</el-col>
</el-row>
<el-row style="width: 100%; padding-left: 10px;">
<el-col :span="12" style="color: #409eff;">全选</el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
@change="onAuthAllChange"
v-model="state.auth_all_checked"
label=""
size="large"
/></el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
@change="onAuthAllEditChange"
v-model="state.auth_all_edit"
label=""
size="large"
/></el-col>
</el-row>
<el-row
v-for="(field, index) in state.field_auths"
:key="index"
style="width: 100%; padding-left: 10px;"
>
<el-col :span="12" style="">{{ field.name }}</el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
v-model="field.visible.checked"
:disabled="field.visible.disabled"
label=""
size="large"
@change="onAuthVisibleChange(field, index)"
/></el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
v-model="field.editable.checked"
:disabled="field.editable.disabled"
label=""
size="large"
@change="onAuthEditableChange(field, index)"
/></el-col>
</el-row>
</el-form-item>
<div v-if="state.attr_radio === '更多属性'">
<div>
<p style="font-size: 14px;">审批意见</p>
<div v-else class="more-attr-set">
<el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" 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>
</div>
<div>
<p style="font-size: 14px;">节点操作</p>
<p class="more-attr-tip">{{ state.more_attr_data.desc }}</p>
<div v-if="state.more_attr_data.btnText">
<p style="font-size: 14px; font-weight: bold;">按钮文字</p>
<el-input v-model="state.more_attr_data.btnText" />
</div>
</div>
</el-tab-pane>
......@@ -236,8 +269,10 @@
</template>
<!-- 表单底部按钮 -->
<template v-slot:foot>
<el-button type="primary" @click="saveForm">保存</el-button>
<el-button @click="cancel">取消</el-button>
<div v-if="state.main_attr_set">
<el-button type="primary" @click="saveForm">保存</el-button>
<el-button @click="cancel">取消</el-button>
</div>
</template>
</vue-flow-editor>
</div>
......@@ -388,6 +423,70 @@ export default {
dialogUserFormVisible: false,
activeName: 'node',
attr_radio: '基础属性',
main_attr_set: true,
more_attr_switch: false,
more_attr: [ // 更多属性
{
id: 'no-1',
label: '审批意见',
data: [
{
id: 'text-1',
label: '文本意见',
show: true,
desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
btnText: '',
},
{
id: 'signature-1',
label: '手写签名',
show: false,
desc: '用户在处理流程时，需要签名确认。',
btnText: ''
},
]
},
{
id: 'no-2',
label: '节点操作',
data: [
{
id: 'node-1',
label: '提交',
show: true,
desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
btnText: '提交'
},
{
id: 'node-2',
label: '暂存',
show: false,
desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
btnText: '暂存'
},
{
id: 'node-3',
label: '撤回',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '撤回'
},
{
id: 'node-4',
label: '回退',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '回退'
},
],
}
],
more_attr_data: {
label: '',
show: false,
desc: '',
btnText: '',
},
node_name: '', // 节点名称
userTags: [ // 节点负责人
{ id: "user-1-1", name: "用户1-1" }
......@@ -666,6 +765,14 @@ export default {
editor.closeModel()
}
const setMoreAttr = (attr: any, index: any) => { // 打开更多属性细节回调
state.main_attr_set = false;
state.more_attr_data = attr['data'][index]; // 同步数据
}
const onConfirmMoreAttr = (item: any) => { // 保存更多属性细节回调
state.main_attr_set = true;
}
/**
* 保存表单信息
*
......@@ -678,7 +785,6 @@ export default {
// }
// })
state.detailModel.text = state.node_name
// state.detailModel.label = state.node_name
// 更新流程图信息
editor.updateModel(state.detailModel)
......@@ -686,6 +792,7 @@ export default {
console.log('节点名称', state.node_name)
console.log('节点负责人', state.userTags)
console.log('字段权限', state.field_auths)
console.log('更多属性', state.more_attr)
}
/**
......@@ -916,6 +1023,8 @@ export default {
onDragEndNode,
onDblClickEdge,
cancel,
setMoreAttr,
onConfirmMoreAttr,
saveForm,
handleBeforeDelete,
handleAfterDelete,
......@@ -986,4 +1095,66 @@ body {
color: #dcdfe6;
}
}
.more-attr {
.more-attr-item {
.title {
font-size: 14px;
color: #000;
margin-bottom: 8px;
}
.content {
font-size: 14px;
background: #f0f1f4;
border: 1px solid #e6e8ed;
border-radius: 2px;
padding: 10px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.left {
}
.right {
}
.active {
color: #409eff;
}
}
.content:hover .btn-action {
display: flex;
}
.btn-action {
background: hsla(0, 0%, 94%, 0.8);
display: none;
font-size: 14px;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
cursor: pointer;
align-items: center;
justify-content: center;
}
}
}
.more-attr-set {
.more-attr-switch {
display: flex;
justify-content: space-between;
margin-top: 10px;
align-items: center;
.more-attr-title {
font-size: 14px;
font-weight: bold;
}
}
.more-attr-tip {
color: #525967;
margin-top: 10px;
font-size: 14px;
}
}
</style>
......