Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
vue-flow-editor
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-11-22 12:28:45 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
bd2047f144e6af03383fad0a2d86d3261a7a61fa
bd2047f1
1 parent
a6e1388a
✨ feat(节点负责人控件): 根据API进行结构功能调整
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
483 additions
and
281 deletions
build/docs.js
doc/App.vue
doc/axios.js
doc/selectUserView.vue
package.json
build/docs.js
View file @
bd2047f
/*
* @Date: 2021-08-18 12:47:05
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-1
0-27 11:05:12
* @LastEditTime: 2023-1
1-21 15:29:14
* @FilePath: /vue-flow-editor/build/docs.js
* @Description: 文件描述
*/
...
...
@@ -40,9 +40,9 @@ module.exports = {
compress
:
true
,
// 设置代理
proxy
:
{
'/
srv
/'
:
{
'/
admin
/'
:
{
// filter: ['/op/', '/fi/', '/de/', '/st/', '/fr/', '/pr/', '/pu/', '/dl/', '/b/', '/t/', '/rpt/', '/mm/', '/mp/'],
target
:
'https://oa.onwall.cn'
,
target
:
'https://oa
-dev
.onwall.cn'
,
changeOrigin
:
true
,
// pathRewrite: {
// '^/api': ''
...
...
doc/App.vue
View file @
bd2047f
...
...
@@ -101,7 +101,7 @@
v-if="state.userTags.length"
v-for="tag in state.userTags"
:key="tag.name"
style="margin
-left: 0.25rem; margin-right:
0.25rem;"
style="margin
: 0 0.25rem 0.5rem
0.25rem;"
>
{{ tag.name }}
</el-tag>
...
...
@@ -521,20 +521,20 @@ export default {
onMounted(() => {
document.title = '可视化流程设计器'
// 显示提示框的标志位
var showConfirmation = true;
// 监听 beforeunload 事件
window.addEventListener('beforeunload', function (event) {
if (showConfirmation) {
// 取消事件的默认行为(弹出确认对话框)
event.preventDefault();
}
});
// 监听 unload 事件
window.addEventListener('unload', function () {
// 设置标志位为 false,避免在刷新页面时再次显示提示框
showConfirmation = false;
});
//
//
显示提示框的标志位
//
var showConfirmation = true;
//
//
监听 beforeunload 事件
//
window.addEventListener('beforeunload', function (event) {
//
if (showConfirmation) {
//
// 取消事件的默认行为(弹出确认对话框)
//
event.preventDefault();
//
}
//
});
//
//
监听 unload 事件
//
window.addEventListener('unload', function () {
//
// 设置标志位为 false,避免在刷新页面时再次显示提示框
//
showConfirmation = false;
//
});
// 监听 resize 事件
window.addEventListener('resize', function () {
state.detailModel = null;
...
...
doc/axios.js
View file @
bd2047f
/*
* @Date: 2023-10-27 11:12:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-1
0-27 11:13:00
* @LastEditTime: 2023-1
1-21 15:23:46
* @FilePath: /vue-flow-editor/doc/axios.js
* @Description: 文件描述
*/
import
axios
from
'axios'
;
axios
.
defaults
.
params
=
{
f
:
'custom_form'
,
m
:
'mod'
,
p
:
'authority_my'
,
};
/**
...
...
doc/selectUserView.vue
View file @
bd2047f
<!--
* @Date: 2023-11-01 10:18:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-
16 17:46:07
* @LastEditTime: 2023-11-
22 11:39:41
* @FilePath: /vue-flow-editor/doc/selectUserView.vue
* @Description: 成员列表选择控件
-->
...
...
@@ -16,7 +16,7 @@
v-if="userTags.length"
v-for="tag in userTags"
:key="tag.name"
style="margin-left: 0.25rem; margin-right: 0.25rem;"
style="margin-left: 0.25rem; margin-right: 0.25rem;
margin-bottom: 0.5rem;
"
closable
@close="handleTagClose(tag)"
>
...
...
@@ -50,7 +50,7 @@
:id="item.id"
@click="handleTabClick(item, $event, index)"
>
{{ item.
label
}}
{{ item.
name
}}
</div>
</div>
</div>
...
...
@@ -79,35 +79,39 @@
</div>
</div>
<!-- 未激活搜索框 -->
<div v-if="!is_active_search">
<div v-if="!is_active_search"
style="max-height: 300px; overflow: scroll;"
>
<div v-for="(item, index) in userTabs" :key="index">
<div v-if="item.id === activeTabId && item.type === 'select'">
<!-- 组织结构树 -->
<div v-if="item.id === activeTabId && item.type === 'corp-tree'">
<el-row>
<el-col :span="24">
<el-
checkbox-group
class="flow-checkbox-group
"
v-model="checkedUserList
"
>
<el
-checkbox
v-for="(user, idx) in userList
"
:key="idx
"
:label="user.id
"
:disabled="user.disabled
"
@change="handleCheckedUserListChange(user, $event)
"
>{{ user.label }}</el-checkbox
>
</el-checkbox-group
>
<el-
tree
ref="corpTreeRef
"
:data="item.data
"
:props="defaultProps"
show
-checkbox
node-key="id
"
:default-expanded-keys="currentNodeKey
"
:default-checked-keys="currentCheckedNodeKey
"
:check-strictly="true
"
empty-text="暂无数据
"
@check="checkNode"
style="margin-top: 10px;"
/
>
</el-col>
</el-row>
</div>
<div v-if="item.id === activeTabId && item.type === 'tree'">
<!-- 成员选择树 -->
<div v-if="item.id === activeTabId && item.type === 'user-tree'">
<el-row>
<el-col :span="8">
<el-tree
ref="userTreeRef"
:data="item.data"
:props="defaultProps"
node-key="id"
:default-expanded-keys="currentNodeKey"
:highlight-current="true"
empty-text="暂无数据"
@node-click="handleNodeClick"
style="margin-top: 10px;"
...
...
@@ -125,14 +129,34 @@
:label="user.id"
:disabled="user.disabled"
@change="handleCheckedUserListChange(user, $event)"
>{{ user.
label
}}</el-checkbox
>{{ user.
name
}}</el-checkbox
>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</div>
<div v-if="item.id === activeTabId && item.type === 'list'">
<div v-if="item.id === activeTabId && item.type === 'role-list'">
<el-row>
<el-col :span="24">
<el-checkbox-group
class="flow-checkbox-group"
v-model="checkedUserList"
>
<el-checkbox
v-for="(user, idx) in userList"
:key="idx"
:label="user.id"
:disabled="user.disabled"
@change="handleCheckedUserListChange(user, $event)"
>{{ user.name }}</el-checkbox
>
</el-checkbox-group>
</el-col>
</el-row>
</div>
<!-- 左右选择结构 -->
<!-- <div v-if="item.id === activeTabId && item.type === ''">
<el-tabs
tab-position="left"
style=""
...
...
@@ -143,8 +167,8 @@
<el-tab-pane
v-for="(role, idx) in item.data"
:key="idx"
:name="role.
label
"
:label="role.
label
"
:name="role.
name
"
:label="role.
name
"
>
<el-checkbox-group
class="flow-checkbox-group"
...
...
@@ -161,7 +185,7 @@
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</div>
</div>
-->
</div>
</div>
<!-- 激活搜索框 -->
...
...
@@ -177,7 +201,7 @@
:label="user.id"
:disabled="user.disabled"
@change="handleCheckedUserListChange(user, $event)"
>{{ user.
label
}}</el-checkbox
>{{ user.
name
}}</el-checkbox
>
</el-checkbox-group>
</div>
...
...
@@ -196,20 +220,45 @@ import { ref, onMounted, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "./axios";
import $ from "jquery";
import _ from "lodash";
const props = defineProps({
visible: Boolean
});
const emit = defineEmits(["close", "confirm"]);
const corpTreeRef = ref(null); // 组织结构树的ref
const userTreeRef = ref(null); // 成员选择树的ref
const dialogUserFormVisible = ref(false);
const userTags = ref([]);
const userTags = ref([]);
// 现在只维护选中的用户列表,以它为基准维护其他列表选中情况
const currentNodeKey = ref([]); // 当前展开的节点
const activeTabId = ref("tab-0"); // TODO: 需要获取默认第一个ID
const currentCheckedNodeKey = ref([]); // 当前选中的节点
const activeTabId = ref("tab-corp"); // TODO: 需要获取默认第一个ID
const activeTabIdx = ref(0); // 默认激活tab的index
const activeTabContent = ref("");
const userTabs = ref([]);
const userTabs = ref([
{
id: "tab-corp",
name: "组织结构",
type: "corp-tree",
data: []
},
{
id: "tab-uer",
name: "成员",
type: "user-tree",
data: []
},
{
id: "tab-role",
name: "角色",
type: "role-list",
data: []
}
]);
const tabSelectData = ref([]);
const userTabType = ref("tree");
const userTabType = ref("
user-
tree");
const tabOffset = ref("0px");
const tabTextWidth = ref("76px"); // 文字宽度需要打开弹框时重新计算
const is_active_search = ref(false);
...
...
@@ -220,187 +269,297 @@ const searchUserList = ref([]); // 搜索框 选中 用户ID
const checkedSearchUserList = ref([]);
const defaultProps = ref({
children: "children",
label: "
label
"
label: "
name
"
});
onMounted(() => {
// axios.get('/srv/?a=query_form_all_field')
// .then(res => {
// console.warn(res.data);
// });
// 根据数据获取选中的tag标签
// setTagsList(userTabs);
// TODO: 查询到的用户选中列表数据
userTags.value = [{ id: "user-1-1", name: "用户1-1" }];
// TODO: 查询到的用户列表数据
userTabs.value = [
{
id: "tab-0",
label: "组织结构",
type: "select",
data: [
{
id: "corp-1",
label: "",
children: [],
list: [
{
id: "corp-1-1",
label: "组织结构1-1",
checked: false,
disabled: false
}
]
},
]
},
{
id: "tab-1",
label: "成员",
type: "tree",
data: [
{
id: "dept-1",
label: "上级部门 1",
children: [
{
id: "dept-1-1",
label: "部门名称 1-1",
children: [],
list: [
{
id: "user-1-1",
label: "用户1-1",
checked: false,
disabled: false
},
{
id: "user-1-2",
label: "用户1-2",
checked: false,
disabled: false
},
{
id: "user-1-3",
label: "用户1-3",
checked: false,
disabled: true
// TAG: 接口获取数据
const getDeptList = () => {
return axios.get('/admin/?a=flow_dept_list')
}
const getRoleList = () => {
return axios.get('/admin/?a=flow_role_list')
}
const deptList = ref([]); // 部门列表
const deptUserList = ref([]); // 部门用户列表
const roleList = ref([]); // 角色列表
onMounted(async () => {
// TAG:接口获取组织结构数据
const dept_list = await getDeptList();
const role_list = await getRoleList();
if (dept_list.data.code) {
deptList.value = dept_list.data.data;
deptUserList.value = _.cloneDeep(dept_list.data.data);
}
]
if (role_list.data.code) {
roleList.value = role_list.data.data;
}
]
},
{
id: "dept-2",
label: "上级部门 2",
children: [
{
id: "dept-2-1",
label: "部门名称 2-1",
children: [],
list: [
{
id: "user-2-1",
label: "用户2-1",
checked: false,
disabled: false
},
{
id: "user-2-2",
label: "用户2-2",
checked: false,
disabled: false
},
{
id: "user-2-3",
label: "用户2-3",
checked: false,
disabled: true
userTabs.value.forEach(item => {
if (item.type === 'corp-tree') {
item.data = deptList.value;
}
]
if (item.type === 'user-tree') {
item.data = deptUserList.value;
}
]
if (item.type === 'role-list') {
item.data = roleList.value;
}
]
},
{
id: "tab-2",
label: "角色",
type: "list",
data: [
{
id: "role-1-1",
label: "流程发起人",
children: [],
list: [
{
id: "user-1-1",
label: "用户1-1",
checked: true,
disabled: false
},
{
id: "user-2-2",
label: "用户2-2",
checked: false,
disabled: false
},
{
id: "role-1-4",
label: "选项 C",
checked: false,
disabled: true
}
]
},
{
id: "role-1-2",
label: "成员字段",
children: [],
list: []
},
{
id: "role-1-3",
label: "部门字段",
children: [],
list: []
},
{
id: "role-1-4",
label: "主管",
children: [],
list: []
}
]
}
];
});
// 根据数据获取选中的tag标签
// setTagsList(userTabs);
// TODO: 查询到的用户选中列表数据
userTags.value = [{ id: 35697, name: "西园寺" },{ id: 492081, name: "营员" }];
// //
// const role_raw_data = [
// {
// "id": 624337,
// "name": "八关斋戒"
// },
// {
// "id": 82983,
// "name": "场地管理"
// },
// {
// "id": 83245,
// "name": "场地使用"
// },
// ];
// let role_list = ref([]);
// role_raw_data.forEach(item => {
// role_list.value.push({
// id: item.id,
// label: item.name,
// checked: false,
// disabled: false
// })
// })
// const role_data = ref({
// id: "tab-2",
// label: "角色",
// type: "select",
// data: [
// {
// id: "",
// label: "",
// children: [],
// list: role_list.value
// },
// ]
// })
// TODO: 查询到的用户列表数据
// userTabs.value = [
// {
// id: "tab-0",
// label: "组织架构",
// type: "corp-tree",
// data: [
// {
// id: "corp-1",
// label: "组织结构 1",
// children: [
// {
// id: "dept-1-1",
// label: "组织结构 1-1",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "组织1-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-2",
// label: "组织1-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-3",
// label: "组织1-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// },
// {
// id: "dept-2",
// label: "上级部门 2",
// children: [
// {
// id: "dept-2-1",
// label: "部门名称 2-1",
// children: [],
// list: [
// {
// id: "user-2-1",
// label: "用户2-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-3",
// label: "用户2-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// }
// ]
// },
// {
// id: "tab-1",
// label: "成员",
// type: "user-tree",
// data: [
// {
// id: "dept-1",
// label: "上级部门 1",
// children: [
// {
// id: "dept-1-1",
// label: "部门名称 1-1",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "用户1-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-2",
// label: "用户1-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-1-3",
// label: "用户1-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// },
// {
// id: "dept-2",
// label: "上级部门 2",
// children: [
// {
// id: "dept-2-1",
// label: "部门名称 2-1",
// children: [],
// list: [
// {
// id: "user-2-1",
// label: "用户2-1",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "user-2-3",
// label: "用户2-3",
// checked: false,
// disabled: true
// }
// ]
// }
// ]
// }
// ]
// },
// {
// id: "tab-2",
// label: "角色",
// type: "role-list",
// data: [
// {
// id: "role-1-1",
// label: "流程发起人",
// children: [],
// list: [
// {
// id: "user-1-1",
// label: "用户1-1",
// checked: true,
// disabled: false
// },
// {
// id: "user-2-2",
// label: "用户2-2",
// checked: false,
// disabled: false
// },
// {
// id: "role-1-4",
// label: "选项 C",
// checked: false,
// disabled: true
// }
// ]
// },
// {
// id: "role-1-2",
// label: "成员字段",
// children: [],
// list: []
// },
// {
// id: "role-1-3",
// label: "部门字段",
// children: [],
// list: []
// },
// {
// id: "role-1-4",
// label: "主管",
// children: [],
// list: []
// }
// ]
// }
// ];
// userTabs.value = userTabs.value.concat(role_data.value);
// 对比选中的用户的 ID,选中的 ID 同步状态到 userTabs 的数据结构上
userTags.value.forEach(ele => {
modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
// userTags.value.forEach(ele => {
// modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
// });
// TODO: 组织结构处理可能需要优化
// 因为第一个是组织结构树,默认展开第一个节点
if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
if (userTabs.value[activeTabIdx.value]['data'].length) {
currentNodeKey.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
// 把选中的节点注入树结构显示选中状态
nextTick(() => {
currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
});
}
}
});
watch(() => {
// 监听弹框状态
//
TAG:
监听弹框状态
if (props.visible) {
dialogUserFormVisible.value = true;
// 第一个类型为多选,获取类型为多选的数据结构
if (userTabs.value[0]['type'] === 'select') {
userTabs.value.forEach(ele => {
if (ele.type === "select") {
ele.data.forEach(ele => {
userList.value = ele.list;
checkedUserList.value = ele.list
.filter(ele => {
return ele.checked;
})
.map(ele => {
return ele.id;
});
});
}
});
}
} else {
dialogUserFormVisible.value = false;
}
...
...
@@ -414,7 +573,7 @@ watch(() => {
* @param {number} idx - The index of the clicked tab.
*/
const handleTabClick = (tab, event, idx) => {
tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
//
tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
userList.value = []; // 清空用户列表
checkedUserList.value = []; // 清空选中用户列表
activeTabContent.value = ""; // 清空侧边栏显示
...
...
@@ -422,6 +581,7 @@ const handleTabClick = (tab, event, idx) => {
// 设置当前激活的tab
userTabType.value = tab.type;
activeTabId.value = tab.id;
activeTabIdx.value = idx;
// 子容器相对于父容器的相对x轴位移, 第一项为0
if (idx) {
tabOffset.value = $("#" + tab.id).position().left + 20 + "px";
...
...
@@ -430,35 +590,29 @@ const handleTabClick = (tab, event, idx) => {
}
// 文字宽度
tabTextWidth.value = $("#" + tab.id).width() + "px";
//
获取类型为多选的数据结构
if (tab.type === 'select') {
userTabs.value.forEach(ele => {
if (ele.type === "select"
) {
ele.data.forEach(ele =>
{
userList.value = ele.list
;
checkedUserList.value = ele.list
.filter(ele => {
return ele.checked;
//
console.warn(tab);
// 组织结构树,默认展开第一个节点, 把选中用户ID显示到数
if (tab.type === 'corp-tree'
) {
if (tab.data.length)
{
currentNodeKey.value = [tab.data[0]['id']]
;
nextTick(() => {
// 把选中的节点注入树结构显示选中状态
corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
})
.map(ele => {
return ele.id;
});
});
}
});
}
// 检查列表第一项是否有值
// if (tab?.data[0]?.list) {
// let list = tab.data[0].list;
// userList.value = list;
// checkedUserList.value = list
// .filter(ele => {
// return ele.checked;
// })
// .map(ele => {
// return ele.id;
// });
// }
// 成员选择树
if (tab.type === 'user-tree') {
if (tab.data.length) {
currentNodeKey.value = [tab.data[0]['id']];
}
}
// 角色选择列表
if (tab.type === 'role-list') {
userList.value = tab.data;
checkedUserList.value = userTags.value.map(ele => ele.id);
}
};
/**
...
...
@@ -469,7 +623,8 @@ const handleTabClick = (tab, event, idx) => {
*/
const handleTabContentClick = (tab, event) => {
tabSelectData.value.forEach(ele => {
if (ele.label === tab.props.label) {
if (ele.name === tab.props.name) {
console.warn(ele);
// 设置右侧显示数据
userList.value = ele.list;
checkedUserList.value = ele.list
...
...
@@ -484,19 +639,16 @@ const handleTabContentClick = (tab, event) => {
};
/**
*
树形结构
点击回调
*
成员选择树
点击回调
*
* @param {object} data - The data associated with the clicked node.
* @return {void}
*/
const handleNodeClick = data => {
if (data.list) {
// 如果节点下存在 list 字段,设置为右侧显示数据列表
userList.value = data.list;
checkedUserList.value = data.list
.filter(ele => {
return ele.checked;
})
if (data.user) {
// 如果节点下存在 user 字段,设置为右侧显示数据列表
userList.value = data.user;
checkedUserList.value = userTags.value
.map(ele => {
return ele.id;
});
...
...
@@ -506,6 +658,33 @@ const handleNodeClick = data => {
};
/**
* 组织结构树形结构 选中回调
*
* @param {*} obj 传递给 data 属性的数组中该节点所对应的对象
* @param {*} status 树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
* @return {void}
*/
const checkNode = (obj, status) => {
// console.log(obj);
// console.log(status);
// 判断当前节点是选中还是取消选中
if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中
// 新增勾选的用户
let check_nodes = status.checkedNodes.map(ele => {
return { id: ele.id, name: ele.name };
});
userTags.value = userTags.value.concat(check_nodes);
// 如果ID相同,需要数据去重
userTags.value = _.uniqBy(userTags.value, 'id');
} else {
// 移除勾选的用户
userTags.value = userTags.value.filter(ele => {
return ele.id!== obj.id;
});
}
}
/**
* 递归查找匹配字段,并修改字段的值为新值
*
* @param {object} obj - 修改对象
...
...
@@ -536,8 +715,16 @@ function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) {
* @return {type} description of return value
*/
const handleCheckedUserListChange = (user, checked) => {
// 修改选中值状态
modifyFieldValue(userTabs.value, "id", user.id, "checked", checked);
if (checked) { // 新增勾选的用户
userTags.value = userTags.value.concat({ id: user.id, name: user.name });
// 如果ID相同,需要数据去重
userTags.value = _.uniqBy(userTags.value, 'id');
} else {
// 移除勾选的用户
userTags.value = userTags.value.filter(ele => {
return ele.id!== user.id;
});
}
};
/**
...
...
@@ -591,7 +778,7 @@ const setTagsList = val => {
.map(ele => {
return {
id: ele.id,
name: ele.
label
name: ele.
name
};
});
};
...
...
@@ -602,7 +789,7 @@ watch(
val => {
if (val) {
// 更新 tags 选中列表显示
setTagsList(val);
//
setTagsList(val);
}
},
{ deep: true }
...
...
@@ -616,29 +803,42 @@ watch(
*/
const handleTagClose = tag => {
userTags.value.splice(userTags.value.indexOf(tag), 1); // 删除标签列表中的项
// 移除数据结构中的选中值
modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
// ID集合
let tagsId = userTags.value.map(ele => {
return ele.id;
});
// 处理tags列表和下面选中列表同步问题
let checkDataList = [];
if (is_active_search.value) {
// 激活搜索状态
checkDataList = checkedSearchUserList.value;
} else {
// 激活非搜索状态
checkDataList = checkedUserList.value;
}
// 获取 tags 中已删除的, 勾选列表中还勾选的值
let result = checkDataList.filter(value => !tagsId.includes(value));
// 如果存在不同步的值,需要在列表中删除勾选列表中的项
if (result.length) {
result.forEach(ele => {
checkDataList.splice(checkDataList.indexOf(ele), 1);
});
// 处理不同分支选中显示问题
switch (activeTabId.value) {
case 'tab-corp': // 组织结构
// 把选中的节点注入树结构显示选中状态
corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
break;
case 'tab-uer': // 成员
break;
case 'tab-role': // 角色
break;
}
// // 移除数据结构中的选中值
// modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
// // ID集合
// let tagsId = userTags.value.map(ele => {
// return ele.id;
// });
// // 处理tags列表和下面选中列表同步问题
// let checkDataList = [];
// if (is_active_search.value) {
// // 激活搜索状态
// checkDataList = checkedSearchUserList.value;
// } else {
// // 激活非搜索状态
// checkDataList = checkedUserList.value;
// }
// // 获取 tags 中已删除的, 勾选列表中还勾选的值
// let result = checkDataList.filter(value => !tagsId.includes(value));
// // 如果存在不同步的值,需要在列表中删除勾选列表中的项
// if (result.length) {
// result.forEach(ele => {
// checkDataList.splice(checkDataList.indexOf(ele), 1);
// });
// }
};
/**
...
...
@@ -731,19 +931,19 @@ const onSearch = () => {
searchUserList.value = [
{
id: "user-1-1",
label
: "用户1-1",
name
: "用户1-1",
checked: false,
disabled: false
},
{
id: "user-1-2",
label
: "用户1-2",
name
: "用户1-2",
checked: false,
disabled: false
},
{
id: "user-1-3",
label
: "用户1-3",
name
: "用户1-3",
checked: false,
disabled: true
}
...
...
package.json
View file @
bd2047f
...
...
@@ -28,6 +28,7 @@
"echarts"
:
"^5.1.2"
,
"element-plus"
:
"^2.4.1"
,
"jquery"
:
"^3.7.1"
,
"lodash"
:
"^4.17.21"
,
"sass"
:
"^1.69.4"
,
"sass-loader"
:
"10.1.1"
,
"vue"
:
"^3.0.0"
,
...
...
Please
register
or
login
to post a comment