Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5ee230d1 1 parent 9e96d497

调整loading加载控件，联调保存节点属性的更多属性字段

Inline Side-by-side
Showing 3 changed files with 138 additions and 133 deletions
......@@ -318,6 +318,13 @@
@close="onCloseUserView"
@confirm="onConfirmUserView"
/>
<div v-if="state.statusLoading" class="el-loading-mask is-fullscreen" style="background-color: rgba(f, f, f, 0.7); z-index: 2006;">
<div class="el-loading-spinner">
<svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
<p class="el-loading-text">加载中</p>
</div>
</div>
</template>
<script lang="ts">
......@@ -334,6 +341,7 @@ import { extend } from '@vue/shared'
import { v4 as uuidv4 } from 'uuid';
import type { FormInstance, FormRules } from 'element-plus'
import qs from 'qs'
// import { VueSpinner } from 'vue3-spinners';
const G6 = (window as any).G6.default as any
......@@ -372,6 +380,7 @@ export default {
Calendar,
Search,
SelectUserView,
// VueSpinner,
},
setup(props, context) {
......@@ -388,6 +397,7 @@ export default {
data: AppData, // 渲染的数据，数据格式参考G6文档
detailModel: null,
editorLoading: false, // 开始编辑器的loading状态
statusLoading: false, // loading状态
// menuData: [
// {
// label: '流程节点',
......@@ -454,7 +464,7 @@ export default {
},
search_auth_value: '',
dialogUserFormVisible: false,
dialogUserTags: [],
dialogUserTags: [], // 同步到用户列表的数据
activeName: 'node',
attr_radio: '基础属性',
main_attr_set: true,
......@@ -727,7 +737,6 @@ export default {
}
const onConfirmUserView = (data: any) => {
state.userTags = data;
console.log(data)
}
/******************* END *******************/
......@@ -765,7 +774,6 @@ export default {
// state.detailModel = model
// editor.openModel()
// }
}
/**
......@@ -783,7 +791,7 @@ export default {
state.detailModel = model
// 判断是否是流程节点
let model_id = model.id
let model_id = model.id;
if (model_id !== 'end-node') {
// 判断是否是开始节点, 不设置负责人
if (model_id ==='start-node') {
......@@ -797,22 +805,19 @@ export default {
} else {
state.select_attr_set = true;
}
// TODO: 接口查询节点的属性
const loading = ElLoading.service({
target: document.getElementById('app'),
lock: true,
text: '加载中',
// background: 'rgba(f, f, f, 0.7)',
});
state.statusLoading = true;
//
axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id)
.then((res: any) => {
if (res.data.code) {
state.node_name = res.data.data.name ? res.data.data.name : model.text;
state.userTags = res.data.data.user;
state.dialogUserTags = state.userTags;
// TODO: 需要处理更多属性数据，节点类型是抄送时不显示节点操作
state.field_extend = res.data.data.field;
state.field_auths = [];
state.statusLoading = false;
//
state.node_name = res.data.data.name ? res.data.data.name : model.text; // 节点名称
state.userTags = res.data.data.user; // 节点负责人
state.dialogUserTags = state.userTags; // 同步给弹框数据
state.field_extend = res.data.data.field; // 字段权限临时储存，实际传给后端数据结构
state.field_auths = []; // 清空字段权限列表，本地使用数据结构
// 转换数据结构使用
state.field_extend.forEach(ele => {
if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
state.field_auths.push({
......@@ -830,137 +835,94 @@ export default {
})
}
});
// state.field_auths = [ // 字段权限
// {
// name: '字段1',
// visible: {
// checked: false,
// disabled: true,
// },
// editable: {
// checked: false,
// disabled: true,
// },
// show: true,
// },
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
//
state.more_attr = res.data.data.property; // 更多属性
// state.more_attr = [ // 更多属性
// {
// name: '字段2',
// visible: {
// checked: true,
// disabled: false,
// },
// editable: {
// checked: false,
// disabled: false,
// },
// show: true,
// id: 'no-1',
// label: '审批意见',
// desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
// data: [
// {
// id: 'text-1',
// label: '文本意见',
// show: true,
// desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
// btnText: '',
// },
// {
// id: 'signature-1',
// label: '手写签名',
// show: false,
// desc: '用户在处理流程时，需要签名确认。',
// btnText: ''
// },
// ]
// },
// {
// name: '字段3',
// visible: {
// checked: true,
// disabled: false,
// },
// editable: {
// checked: false,
// disabled: false,
// },
// show: true,
// },
// ]
console.log(res.data.data.field);
state.more_attr = [ // 更多属性
{
id: 'no-1',
label: '审批意见',
desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
data: [
{
id: 'text-1',
label: '文本意见',
show: true,
desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
btnText: '',
},
{
id: 'signature-1',
label: '手写签名',
show: false,
desc: '用户在处理流程时，需要签名确认。',
btnText: ''
},
]
},
{
id: 'no-2',
label: '节点操作',
desc: '定义流程负责人在处理流程时可以进行的操作',
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: '回退'
},
],
}
];
console.warn('基础属性', state.field_auths);
console.warn('更多属性', state.more_attr);
// id: 'no-2',
// label: '节点操作',
// desc: '定义流程负责人在处理流程时可以进行的操作',
// 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: '回退'
// },
// ],
// }
// ];
// 开始节点不显示审批意见
if (model_id ==='start-node') {
// TODO：等待后台结构
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '审批意见'
});
}
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
// 抄送节点不显示节点操作
// 抄送节点不显示
if (state.detailModel.control === 'cc') {
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '节点操作'
});
state.more_attr = [];
}
// 打开属性表单
state.attr_radio = '基础属性'; // 还原tab默认值
editor.openModel();
loading.close();
} else {
loading.close();
ElMessage({
type: 'error',
message: res.data.msg,
});
state.statusLoading = false;
}
})
.catch((err: any) => {
loading.close();
console.log(err);
state.statusLoading = false;
});
} else {
editor.closeModel()
......@@ -1064,21 +1026,14 @@ export default {
axios.post('/admin/?a=save_node_property', qs.stringify({
flow_id: +flow_id,
node_code: state.detailModel.id,
// data: JSON.stringify({ name: state.node_name, user: state.userTags, field_auths: state.field_auths, more_attr: state.more_attr })
data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend })
data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr })
}))
.then(res => {
if (res.data.code) {
// console.log(state.detailModel.id)
state.detailModel.text = state.node_name;
// // state.detailModel.label = state.node_name
// 更新流程图信息
editor.updateModel(state.detailModel);
editor.closeModel();
// console.log('节点名称', state.node_name);
// console.log('节点负责人', state.userTags);
// console.log('字段权限', state.field_auths);
// console.log('更多属性', state.more_attr);
ElMessage({
type:'success',
message: '保存成功',
......@@ -1590,4 +1545,11 @@ body {
background-color: white !important;
outline: 0;
}
.el-loading-spinner .path {
stroke: #009688!important;
}
.el-loading-spinner .el-loading-text {
color: #009688 !important;
}
</style>
......
......@@ -37,6 +37,7 @@
"vue-loader-v16": "^16.0.0-beta.5.4",
"vue-router": "^4.0.0-0",
"vue-template-compiler": "^2.6.14",
"vue3-spinners": "^1.2.2",
"vuex": "^4.0.0-0"
},
"devDependencies": {
......
......@@ -2949,6 +2949,11 @@ colorette@^1.2.1, colorette@^1.2.2:
resolved "https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz"
integrity sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8=
colornames@^1.1.1:
version "1.1.1"
resolved "https://mirrors.cloud.tencent.com/npm/colornames/-/colornames-1.1.1.tgz#f8889030685c7c4ff9e2a559f5077eb76a816f96"
integrity sha1-+IiQMGhcfE/54qVZ9Qd+t2qBb5Y=
combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
version "1.0.8"
resolved "https://registry.nlark.com/combined-stream/download/combined-stream-1.0.8.tgz"
......@@ -5537,6 +5542,16 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
just-range@^4.0.1:
version "4.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/just-range/-/just-range-4.2.0.tgz#34d901f76b2d0ce3a0d2c98cb691b06303945122"
integrity sha512-z2Ip8H2j7a9Vr8rKFi0IZf4IXn2Yuq2lGZFS41GjfPwksoHWTaTx1xIjU6C0HyQ1jBXEoz/FzjS5eyVXeW19tg==
just-zip-it@^3.0.2:
version "3.2.0"
resolved "https://mirrors.cloud.tencent.com/npm/just-zip-it/-/just-zip-it-3.2.0.tgz#76185e513aeab5519fb06d68460a54cefcb37b6a"
integrity sha512-ZJxc8mLz8XkaoOegJ237Xuo3ZQB5zUN/8BTXqalBJbh/uj+ahfJbOJKadJPmXDBbxHzh+MQYH43VxV5TlQvlfw==
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.nlark.com/killable/download/killable-1.0.1.tgz"
......@@ -6394,6 +6409,11 @@ os-browserify@^0.3.0:
resolved "https://registry.npm.taobao.org/os-browserify/download/os-browserify-0.3.0.tgz"
integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
outdent@^0.8.0:
version "0.8.0"
resolved "https://mirrors.cloud.tencent.com/npm/outdent/-/outdent-0.8.0.tgz#2ebc3e77bf49912543f1008100ff8e7f44428eb0"
integrity sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==
p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/p-finally/download/p-finally-1.0.0.tgz"
......@@ -6506,6 +6526,11 @@ parse-json@^5.0.0:
json-parse-even-better-errors "^2.3.0"
lines-and-columns "^1.1.6"
parse-unit@^1.0.1:
version "1.0.1"
resolved "https://mirrors.cloud.tencent.com/npm/parse-unit/-/parse-unit-1.0.1.tgz#7e1bb6d5bef3874c28e392526a2541170291eecf"
integrity sha1-fhu21b7zh0wo45JSaiVBFwKR7s8=
parse5-htmlparser2-tree-adapter@^6.0.0:
version "6.0.1"
resolved "https://registry.nlark.com/parse5-htmlparser2-tree-adapter/download/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
......@@ -8144,6 +8169,11 @@ strip-indent@^2.0.0:
resolved "https://registry.nlark.com/strip-indent/download/strip-indent-2.0.0.tgz"
integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
style-inject@^0.3.0:
version "0.3.0"
resolved "https://mirrors.cloud.tencent.com/npm/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
stylehacks@^4.0.0:
version "4.0.3"
resolved "https://registry.nlark.com/stylehacks/download/stylehacks-4.0.3.tgz"
......@@ -8789,6 +8819,18 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.nlark.com/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz"
integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
vue3-spinners@^1.2.2:
version "1.2.2"
resolved "https://mirrors.cloud.tencent.com/npm/vue3-spinners/-/vue3-spinners-1.2.2.tgz#30026c44e82f56544e9766f99f3360fbc662e715"
integrity sha512-rWYvbwgLKQOWk92pzadYCSssYeMJdyCfdT3ZAPHwT9lOU2+jPtGvp1tr2wQHQejlLTjaF4sHIBWVq4QGuCWGDg==
dependencies:
colornames "^1.1.1"
just-range "^4.0.1"
just-zip-it "^3.0.2"
outdent "^0.8.0"
parse-unit "^1.0.1"
style-inject "^0.3.0"
vue@^3.0.0:
version "3.2.2"
resolved "https://registry.nlark.com/vue/download/vue-3.2.2.tgz"
......