Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
da859a8c 1 parent 20e06e22

字段权限选中功能优化

Inline Side-by-side
Showing 1 changed file with 92 additions and 51 deletions
......@@ -412,7 +412,7 @@ export default {
{
name: '字段3',
visible: {
checked: false,
checked: true,
disabled: false,
},
editable: {
......@@ -452,22 +452,58 @@ export default {
}
/************** 字段权限操作 ***************/
const onAuthVisibleChange = (val: any, index: number) => {
// 可见按钮回调
console.log('onAuthVisibleChange', val, index);
let count = state.field_auths.filter((ele) => {
if (ele.visible.checked && !ele.visible.disabled) {
return ele;
const checkAuthAll = (type: string) => {
if (type === 'visible') {
let total_count = state.field_auths.filter((ele) => {
if (!ele.visible.disabled) {
return ele;
}
}).length;
let avail_count = state.field_auths.filter((ele) => {
if (ele.visible.checked && !ele.visible.disabled) {
return ele;
}
});
if (avail_count.length === total_count) {
state.auth_all_checked = true;
} else {
state.auth_all_checked = false;
}
}
if (type === 'editable') {
let total_count = state.field_auths.filter((ele) => {
if (!ele.editable.disabled) {
return ele;
}
}).length;
let avail_count = state.field_auths.filter((ele) => {
if (ele.editable.checked && !ele.editable.disabled) {
return ele;
}
});
if (avail_count.length === total_count) {
state.auth_all_edit = true;
} else {
state.auth_all_edit = false;
}
});
if (count.length === state.field_auths.length) {
state.auth_all_checked = true;
} else {
state.auth_all_checked = false;
}
}
const onAuthEditChange = (val: any, index: number) => {
console.log('onAuthEditChange', val, index)
/**
* 点击可见按钮回调
* @param val
* @param index
*/
const onAuthVisibleChange = (val: any, index: number) => {
checkAuthAll('visible')
}
/**
* 点击可编辑按钮回调
* @param val
* @param index
*/
const onAuthEditableChange = (val: any, index: number) => {
checkAuthAll('editable')
}
const onAuthAllChange = (val: any) => {
......@@ -475,18 +511,40 @@ export default {
if (val) {
// 全部选中
state.field_auths.forEach((ele) => {
if (ele.visible.disabled) {
return;
}
ele.visible.checked = true
})
} else {
// 全部取消选中
state.field_auths.forEach((ele) => {
if (ele.visible.disabled) {
return;
}
ele.visible.checked = false
})
}
}
const onAuthAllEditChange = (val: any) => {
// 全选可编辑按钮回调
console.warn(val)
if (val) {
// 全部选中
state.field_auths.forEach((ele) => {
if (ele.editable.disabled) {
return;
}
ele.editable.checked = true
})
} else {
// 全部取消选中
state.field_auths.forEach((ele) => {
if (ele.editable.disabled) {
return;
}
ele.editable.checked = false
})
}
}
/******************* END *******************/
......@@ -525,18 +583,18 @@ export default {
* @param {Object} e - The event object
*/
function onDblClickNode(e: myEvent) {
const model = G6.Util.clone(e.item.get('model'))
model.style = model.style || {}
model.labelCfg = model.labelCfg || { style: {} }
// const model = G6.Util.clone(e.item.get('model'))
// model.style = model.style || {}
// model.labelCfg = model.labelCfg || { style: {} }
model.data = model.data ? model.data : {}
// model.data = model.data ? model.data : {}
// 判断是否是流程节点
let model_id = model.id
if (model_id !== 'start-node' && model_id!== 'end-node') {
state.detailModel = model
editor.openModel()
}
// // 判断是否是流程节点
// let model_id = model.id
// if (model_id !== 'start-node' && model_id!== 'end-node') {
// state.detailModel = model
// editor.openModel()
// }
}
......@@ -555,32 +613,13 @@ export default {
// 判断是否是流程节点
let model_id = model.id
if (model_id !== 'start-node' && model_id!== 'end-node') {
if (model_id!== 'end-node') {
state.detailModel = model;
// 获取节点名称
state.node_name = state.detailModel.text;
// // 检查字段权限选中情况
// let checked_count = state.field_auths.filter((ele) => {
// if (ele.visible.checked && !ele.visible.disabled) {
// return ele;
// }
// });
// if (checked_count.length === state.field_auths.length) {
// state.auth_all_checked = true;
// } else {
// state.auth_all_checked = false;
// }
// let edit_count = state.field_auths.filter((ele) => {
// if (ele.editable.checked && !ele.editable.disabled) {
// return ele;
// }
// });
// if (edit_count.length === state.field_auths.length) {
// state.auth_all_edit = true;
// } else {
// state.auth_all_edit = false;
// }
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
// 打开属性表单
editor.openModel()
} else {
......@@ -704,10 +743,12 @@ export default {
* @param {string} type - The type of the model being deleted.
*/
function handleAfterDelete(model: myObj, type: string) {
if (type === 'node') {
// 关闭编辑器
editor.closeModel();
}
if (type === 'edge') {
console.log('delete edge')
} else {
console.log('after delete', model.label, { ...model })
}
}
......@@ -869,7 +910,7 @@ export default {
handleActiveChange,
onAuthVisibleChange,
onAuthEditChange,
onAuthEditableChange,
onAuthAllChange,
onAuthAllEditChange,
......