Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
41c77f63 1 parent bd2047f1

成员列表选择控件细节调整

Inline Side-by-side
Showing 4 changed files with 120 additions and 374 deletions
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
136 <el-col :span="6">可见</el-col> 136 <el-col :span="6">可见</el-col>
137 <el-col :span="6">可编辑</el-col> 137 <el-col :span="6">可编辑</el-col>
138 </el-row> 138 </el-row>
139 - <el-row style="width: 100%; padding-left: 10px;"> 139 + <el-row v-if="!state.search_auth_value" style="width: 100%; padding-left: 10px;">
140 <el-col :span="12" style="color: #409eff;">全选</el-col> 140 <el-col :span="12" style="color: #409eff;">全选</el-col>
141 <el-col :span="6" style="padding-left: 5px;" 141 <el-col :span="6" style="padding-left: 5px;"
142 ><el-checkbox 142 ><el-checkbox
......
1 <!-- 1 <!--
2 * @Date: 2023-11-01 10:18:53 2 * @Date: 2023-11-01 10:18:53
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-11-22 11:39:41 4 + * @LastEditTime: 2023-11-22 13:43:23
5 * @FilePath: /vue-flow-editor/doc/selectUserView.vue 5 * @FilePath: /vue-flow-editor/doc/selectUserView.vue
6 * @Description: 成员列表选择控件 6 * @Description: 成员列表选择控件
7 --> 7 -->
...@@ -55,9 +55,10 @@ ...@@ -55,9 +55,10 @@
55 </div> 55 </div>
56 </div> 56 </div>
57 </div> 57 </div>
58 - <div class="flow-tab-search" @click="activeSearchBtn"> 58 + <!-- TAG: 暂时不做搜索功能 -->
59 + <!-- <div class="flow-tab-search" @click="activeSearchBtn">
59 <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框 60 <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
60 - </div> 61 + </div> -->
61 </div> 62 </div>
62 <div v-else> 63 <div v-else>
63 <el-input 64 <el-input
...@@ -79,20 +80,22 @@ ...@@ -79,20 +80,22 @@
79 </div> 80 </div>
80 </div> 81 </div>
81 <!-- 未激活搜索框 --> 82 <!-- 未激活搜索框 -->
82 - <div v-if="!is_active_search" style="max-height: 300px; overflow: scroll;"> 83 + <div v-if="!is_active_search" style="height: 300px;">
83 <div v-for="(item, index) in userTabs" :key="index"> 84 <div v-for="(item, index) in userTabs" :key="index">
84 <!-- 组织结构树 --> 85 <!-- 组织结构树 -->
85 <div v-if="item.id === activeTabId && item.type === 'corp-tree'"> 86 <div v-if="item.id === activeTabId && item.type === 'corp-tree'">
86 <el-row> 87 <el-row>
87 - <el-col :span="24"> 88 + <el-col :span="24" style="max-height: 300px; overflow: scroll;">
88 <el-tree 89 <el-tree
89 ref="corpTreeRef" 90 ref="corpTreeRef"
90 :data="item.data" 91 :data="item.data"
91 :props="defaultProps" 92 :props="defaultProps"
92 show-checkbox 93 show-checkbox
93 node-key="id" 94 node-key="id"
94 - :default-expanded-keys="currentNodeKey" 95 + :default-expanded-keys="defaultExpandedKeys"
95 :default-checked-keys="currentCheckedNodeKey" 96 :default-checked-keys="currentCheckedNodeKey"
97 + :expand-on-click-node="false"
98 + :check-on-click-node="true"
96 :check-strictly="true" 99 :check-strictly="true"
97 empty-text="暂无数据" 100 empty-text="暂无数据"
98 @check="checkNode" 101 @check="checkNode"
...@@ -104,20 +107,21 @@ ...@@ -104,20 +107,21 @@
104 <!-- 成员选择树 --> 107 <!-- 成员选择树 -->
105 <div v-if="item.id === activeTabId && item.type === 'user-tree'"> 108 <div v-if="item.id === activeTabId && item.type === 'user-tree'">
106 <el-row> 109 <el-row>
107 - <el-col :span="8"> 110 + <el-col :span="8" style="max-height: 300px; overflow: scroll;">
108 <el-tree 111 <el-tree
109 ref="userTreeRef" 112 ref="userTreeRef"
110 :data="item.data" 113 :data="item.data"
111 :props="defaultProps" 114 :props="defaultProps"
112 node-key="id" 115 node-key="id"
113 - :default-expanded-keys="currentNodeKey" 116 + :default-expanded-keys="defaultExpandedKeys"
117 + :current-node-key="currentNodeKey"
114 :highlight-current="true" 118 :highlight-current="true"
115 empty-text="暂无数据" 119 empty-text="暂无数据"
116 @node-click="handleNodeClick" 120 @node-click="handleNodeClick"
117 style="margin-top: 10px;" 121 style="margin-top: 10px;"
118 /> 122 />
119 </el-col> 123 </el-col>
120 - <el-col :span="16"> 124 + <el-col :span="16" style="max-height: 300px; overflow: scroll;">
121 <div class="flow-checkbox-box"> 125 <div class="flow-checkbox-box">
122 <el-checkbox-group 126 <el-checkbox-group
123 class="flow-checkbox-group" 127 class="flow-checkbox-group"
...@@ -138,7 +142,7 @@ ...@@ -138,7 +142,7 @@
138 </div> 142 </div>
139 <div v-if="item.id === activeTabId && item.type === 'role-list'"> 143 <div v-if="item.id === activeTabId && item.type === 'role-list'">
140 <el-row> 144 <el-row>
141 - <el-col :span="24"> 145 + <el-col :span="24" style="max-height: 300px; overflow: scroll;">
142 <el-checkbox-group 146 <el-checkbox-group
143 class="flow-checkbox-group" 147 class="flow-checkbox-group"
144 v-model="checkedUserList" 148 v-model="checkedUserList"
...@@ -155,7 +159,7 @@ ...@@ -155,7 +159,7 @@
155 </el-col> 159 </el-col>
156 </el-row> 160 </el-row>
157 </div> 161 </div>
158 - <!-- 左右选择结构 --> 162 + <!-- TAG: 暂时不使用左右选择结构 -->
159 <!-- <div v-if="item.id === activeTabId && item.type === ''"> 163 <!-- <div v-if="item.id === activeTabId && item.type === ''">
160 <el-tabs 164 <el-tabs
161 tab-position="left" 165 tab-position="left"
...@@ -188,7 +192,6 @@ ...@@ -188,7 +192,6 @@
188 </div> --> 192 </div> -->
189 </div> 193 </div>
190 </div> 194 </div>
191 - <!-- 激活搜索框 -->
192 <div v-else> 195 <div v-else>
193 <el-checkbox-group 196 <el-checkbox-group
194 class="flow-checkbox-group" 197 class="flow-checkbox-group"
...@@ -232,7 +235,8 @@ const userTreeRef = ref(null); // 成员选择树的ref ...@@ -232,7 +235,8 @@ const userTreeRef = ref(null); // 成员选择树的ref
232 235
233 const dialogUserFormVisible = ref(false); 236 const dialogUserFormVisible = ref(false);
234 const userTags = ref([]); // 现在只维护选中的用户列表，以它为基准维护其他列表选中情况 237 const userTags = ref([]); // 现在只维护选中的用户列表，以它为基准维护其他列表选中情况
235 -const currentNodeKey = ref([]); // 当前展开的节点 238 +const defaultExpandedKeys = ref([]); // 当前展开的节点
239 +const currentNodeKey = ref([]); // 当前选中的节点
236 const currentCheckedNodeKey = ref([]); // 当前选中的节点 240 const currentCheckedNodeKey = ref([]); // 当前选中的节点
237 const activeTabId = ref("tab-corp"); // TODO: 需要获取默认第一个ID 241 const activeTabId = ref("tab-corp"); // TODO: 需要获取默认第一个ID
238 const activeTabIdx = ref(0); // 默认激活tab的index 242 const activeTabIdx = ref(0); // 默认激活tab的index
...@@ -306,249 +310,14 @@ onMounted(async () => { ...@@ -306,249 +310,14 @@ onMounted(async () => {
306 item.data = roleList.value; 310 item.data = roleList.value;
307 } 311 }
308 }); 312 });
309 - // 根据数据获取选中的tag标签 313 + // TODO: 查询到的用户选中列表数据，等待接口数据
310 - // setTagsList(userTabs);
311 - // TODO: 查询到的用户选中列表数据
312 userTags.value = [{ id: 35697, name: "西园寺" },{ id: 492081, name: "营员" }]; 314 userTags.value = [{ id: 35697, name: "西园寺" },{ id: 492081, name: "营员" }];
313 - // // 315 + // 第一项目是组织结构树，默认展开第一个节点
314 - // const role_raw_data = [
315 - // {
316 - // "id": 624337,
317 - // "name": "八关斋戒"
318 - // },
319 - // {
320 - // "id": 82983,
321 - // "name": "场地管理"
322 - // },
323 - // {
324 - // "id": 83245,
325 - // "name": "场地使用"
326 - // },
327 - // ];
328 - // let role_list = ref([]);
329 - // role_raw_data.forEach(item => {
330 - // role_list.value.push({
331 - // id: item.id,
332 - // label: item.name,
333 - // checked: false,
334 - // disabled: false
335 - // })
336 - // })
337 - // const role_data = ref({
338 - // id: "tab-2",
339 - // label: "角色",
340 - // type: "select",
341 - // data: [
342 - // {
343 - // id: "",
344 - // label: "",
345 - // children: [],
346 - // list: role_list.value
347 - // },
348 - // ]
349 - // })
350 - // TODO: 查询到的用户列表数据
351 - // userTabs.value = [
352 - // {
353 - // id: "tab-0",
354 - // label: "组织架构",
355 - // type: "corp-tree",
356 - // data: [
357 - // {
358 - // id: "corp-1",
359 - // label: "组织结构 1",
360 - // children: [
361 - // {
362 - // id: "dept-1-1",
363 - // label: "组织结构 1-1",
364 - // children: [],
365 - // list: [
366 - // {
367 - // id: "user-1-1",
368 - // label: "组织1-1",
369 - // checked: false,
370 - // disabled: false
371 - // },
372 - // {
373 - // id: "user-1-2",
374 - // label: "组织1-2",
375 - // checked: false,
376 - // disabled: false
377 - // },
378 - // {
379 - // id: "user-1-3",
380 - // label: "组织1-3",
381 - // checked: false,
382 - // disabled: true
383 - // }
384 - // ]
385 - // }
386 - // ]
387 - // },
388 - // {
389 - // id: "dept-2",
390 - // label: "上级部门 2",
391 - // children: [
392 - // {
393 - // id: "dept-2-1",
394 - // label: "部门名称 2-1",
395 - // children: [],
396 - // list: [
397 - // {
398 - // id: "user-2-1",
399 - // label: "用户2-1",
400 - // checked: false,
401 - // disabled: false
402 - // },
403 - // {
404 - // id: "user-2-2",
405 - // label: "用户2-2",
406 - // checked: false,
407 - // disabled: false
408 - // },
409 - // {
410 - // id: "user-2-3",
411 - // label: "用户2-3",
412 - // checked: false,
413 - // disabled: true
414 - // }
415 - // ]
416 - // }
417 - // ]
418 - // }
419 - // ]
420 - // },
421 - // {
422 - // id: "tab-1",
423 - // label: "成员",
424 - // type: "user-tree",
425 - // data: [
426 - // {
427 - // id: "dept-1",
428 - // label: "上级部门 1",
429 - // children: [
430 - // {
431 - // id: "dept-1-1",
432 - // label: "部门名称 1-1",
433 - // children: [],
434 - // list: [
435 - // {
436 - // id: "user-1-1",
437 - // label: "用户1-1",
438 - // checked: false,
439 - // disabled: false
440 - // },
441 - // {
442 - // id: "user-1-2",
443 - // label: "用户1-2",
444 - // checked: false,
445 - // disabled: false
446 - // },
447 - // {
448 - // id: "user-1-3",
449 - // label: "用户1-3",
450 - // checked: false,
451 - // disabled: true
452 - // }
453 - // ]
454 - // }
455 - // ]
456 - // },
457 - // {
458 - // id: "dept-2",
459 - // label: "上级部门 2",
460 - // children: [
461 - // {
462 - // id: "dept-2-1",
463 - // label: "部门名称 2-1",
464 - // children: [],
465 - // list: [
466 - // {
467 - // id: "user-2-1",
468 - // label: "用户2-1",
469 - // checked: false,
470 - // disabled: false
471 - // },
472 - // {
473 - // id: "user-2-2",
474 - // label: "用户2-2",
475 - // checked: false,
476 - // disabled: false
477 - // },
478 - // {
479 - // id: "user-2-3",
480 - // label: "用户2-3",
481 - // checked: false,
482 - // disabled: true
483 - // }
484 - // ]
485 - // }
486 - // ]
487 - // }
488 - // ]
489 - // },
490 - // {
491 - // id: "tab-2",
492 - // label: "角色",
493 - // type: "role-list",
494 - // data: [
495 - // {
496 - // id: "role-1-1",
497 - // label: "流程发起人",
498 - // children: [],
499 - // list: [
500 - // {
501 - // id: "user-1-1",
502 - // label: "用户1-1",
503 - // checked: true,
504 - // disabled: false
505 - // },
506 - // {
507 - // id: "user-2-2",
508 - // label: "用户2-2",
509 - // checked: false,
510 - // disabled: false
511 - // },
512 - // {
513 - // id: "role-1-4",
514 - // label: "选项 C",
515 - // checked: false,
516 - // disabled: true
517 - // }
518 - // ]
519 - // },
520 - // {
521 - // id: "role-1-2",
522 - // label: "成员字段",
523 - // children: [],
524 - // list: []
525 - // },
526 - // {
527 - // id: "role-1-3",
528 - // label: "部门字段",
529 - // children: [],
530 - // list: []
531 - // },
532 - // {
533 - // id: "role-1-4",
534 - // label: "主管",
535 - // children: [],
536 - // list: []
537 - // }
538 - // ]
539 - // }
540 - // ];
541 - // userTabs.value = userTabs.value.concat(role_data.value);
542 - // 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
543 - // userTags.value.forEach(ele => {
544 - // modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
545 - // });
546 - // TODO: 组织结构处理可能需要优化
547 - // 因为第一个是组织结构树，默认展开第一个节点
548 if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') { 316 if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
549 if (userTabs.value[activeTabIdx.value]['data'].length) { 317 if (userTabs.value[activeTabIdx.value]['data'].length) {
550 - currentNodeKey.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']]; 318 + // 默认展开第一个节点
551 - // 把选中的节点注入树结构显示选中状态 319 + defaultExpandedKeys.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
320 + // 把用户选中的节点注入树结构显示选中状态
552 nextTick(() => { 321 nextTick(() => {
553 currentCheckedNodeKey.value = userTags.value.map(ele => ele.id); 322 currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
554 }); 323 });
...@@ -565,6 +334,18 @@ watch(() => { ...@@ -565,6 +334,18 @@ watch(() => {
565 } 334 }
566 }); 335 });
567 336
337 +watch(
338 + // TAG: watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
339 + () => dialogUserFormVisible.value,
340 + val => {
341 + if (val) {
342 + nextTick(() => {
343 + tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
344 + });
345 + }
346 + }
347 +);
348 +
568 /** 349 /**
569 * 点击Tab切换回调 350 * 点击Tab切换回调
570 * 351 *
...@@ -573,10 +354,11 @@ watch(() => { ...@@ -573,10 +354,11 @@ watch(() => {
573 * @param {number} idx - The index of the clicked tab. 354 * @param {number} idx - The index of the clicked tab.
574 */ 355 */
575 const handleTabClick = (tab, event, idx) => { 356 const handleTabClick = (tab, event, idx) => {
576 - // tabSelectData.value = tab.data; // tab选中数据提供给list类型使用 357 + tabSelectData.value = tab.data; // tab选中数据提供给左右选择结构使用
577 userList.value = []; // 清空用户列表 358 userList.value = []; // 清空用户列表
578 checkedUserList.value = []; // 清空选中用户列表 359 checkedUserList.value = []; // 清空选中用户列表
579 activeTabContent.value = ""; // 清空侧边栏显示 360 activeTabContent.value = ""; // 清空侧边栏显示
361 + defaultExpandedKeys.value = []; // 清空树形的默认展开
580 currentNodeKey.value = []; // 清空树形的默认展开 362 currentNodeKey.value = []; // 清空树形的默认展开
581 // 设置当前激活的tab 363 // 设置当前激活的tab
582 userTabType.value = tab.type; 364 userTabType.value = tab.type;
...@@ -590,26 +372,32 @@ const handleTabClick = (tab, event, idx) => { ...@@ -590,26 +372,32 @@ const handleTabClick = (tab, event, idx) => {
590 } 372 }
591 // 文字宽度 373 // 文字宽度
592 tabTextWidth.value = $("#" + tab.id).width() + "px"; 374 tabTextWidth.value = $("#" + tab.id).width() + "px";
593 - // 375 + // 组织结构树
594 - console.warn(tab);
595 - // 组织结构树，默认展开第一个节点, 把选中用户ID显示到数
596 if (tab.type === 'corp-tree') { 376 if (tab.type === 'corp-tree') {
597 if (tab.data.length) { 377 if (tab.data.length) {
598 - currentNodeKey.value = [tab.data[0]['id']]; 378 + // 默认展开第一个节点
379 + defaultExpandedKeys.value = [tab.data[0]['id']];
599 nextTick(() => { 380 nextTick(() => {
600 - // 把选中的节点注入树结构显示选中状态 381 + // 把用户选中的节点注入树结构显示选中状态
601 corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false) 382 corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
602 - }) 383 + });
603 } 384 }
604 } 385 }
605 // 成员选择树 386 // 成员选择树
606 if (tab.type === 'user-tree') { 387 if (tab.type === 'user-tree') {
607 if (tab.data.length) { 388 if (tab.data.length) {
608 - currentNodeKey.value = [tab.data[0]['id']]; 389 + // 默认展开第一个节点
390 + defaultExpandedKeys.value = [tab.data[0]['id']];
391 + // 当前选中的节点
392 + currentNodeKey.value = tab.data[0]['id'];
393 + // 多选列表数据展示
394 + userList.value = tab.data[0]['user'];
395 + checkedUserList.value = userTags.value.map(ele => ele.id);
609 } 396 }
610 } 397 }
611 // 角色选择列表 398 // 角色选择列表
612 if (tab.type === 'role-list') { 399 if (tab.type === 'role-list') {
400 + // 多选列表数据展示
613 userList.value = tab.data; 401 userList.value = tab.data;
614 checkedUserList.value = userTags.value.map(ele => ele.id); 402 checkedUserList.value = userTags.value.map(ele => ele.id);
615 } 403 }
...@@ -621,22 +409,21 @@ const handleTabClick = (tab, event, idx) => { ...@@ -621,22 +409,21 @@ const handleTabClick = (tab, event, idx) => {
621 * @param {type} tab - description of parameter 409 * @param {type} tab - description of parameter
622 * @param {type} event - description of parameter 410 * @param {type} event - description of parameter
623 */ 411 */
624 -const handleTabContentClick = (tab, event) => { 412 +// const handleTabContentClick = (tab, event) => {
625 - tabSelectData.value.forEach(ele => { 413 +// tabSelectData.value.forEach(ele => {
626 - if (ele.name === tab.props.name) { 414 +// if (ele.name === tab.props.name) {
627 - console.warn(ele); 415 +// // 设置右侧显示数据
628 - // 设置右侧显示数据 416 +// userList.value = ele.list;
629 - userList.value = ele.list; 417 +// checkedUserList.value = ele.list
630 - checkedUserList.value = ele.list 418 +// .filter(ele => {
631 - .filter(ele => { 419 +// return ele.checked;
632 - return ele.checked; 420 +// })
633 - }) 421 +// .map(ele => {
634 - .map(ele => { 422 +// return ele.id;
635 - return ele.id; 423 +// });
636 - }); 424 +// }
637 - } 425 +// });
638 - }); 426 +// };
639 -};
640 427
641 /** 428 /**
642 * 成员选择树 点击回调 429 * 成员选择树 点击回调
...@@ -653,20 +440,18 @@ const handleNodeClick = data => { ...@@ -653,20 +440,18 @@ const handleNodeClick = data => {
653 return ele.id; 440 return ele.id;
654 }); 441 });
655 // 默认展开相应ID节点 442 // 默认展开相应ID节点
656 - currentNodeKey.value = [data.id]; 443 + defaultExpandedKeys.value = [data.id];
657 } 444 }
658 }; 445 };
659 446
660 /** 447 /**
661 - * 组织结构树形结构 选中回调 448 + * 组织结构树 选中回调
662 * 449 *
663 * @param {*} obj 传递给 data 属性的数组中该节点所对应的对象 450 * @param {*} obj 传递给 data 属性的数组中该节点所对应的对象
664 * @param {*} status 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 451 * @param {*} status 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
665 * @return {void} 452 * @return {void}
666 */ 453 */
667 const checkNode = (obj, status) => { 454 const checkNode = (obj, status) => {
668 - // console.log(obj);
669 - // console.log(status);
670 // 判断当前节点是选中还是取消选中 455 // 判断当前节点是选中还是取消选中
671 if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中 456 if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中
672 // 新增勾选的用户 457 // 新增勾选的用户
...@@ -693,22 +478,22 @@ const checkNode = (obj, status) => { ...@@ -693,22 +478,22 @@ const checkNode = (obj, status) => {
693 * @param {any} targetName - 目标字段 478 * @param {any} targetName - 目标字段
694 * @param {any} newValue - 修改新值 479 * @param {any} newValue - 修改新值
695 */ 480 */
696 -function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) { 481 +// function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) {
697 - // 检查当前层级的字段值是否匹配目标值 482 +// // 检查当前层级的字段值是否匹配目标值
698 - if (obj[fieldName] === fieldValue) { 483 +// if (obj[fieldName] === fieldValue) {
699 - obj[targetName] = newValue; 484 +// obj[targetName] = newValue;
700 - } 485 +// }
701 - 486 +
702 - // 遍历当前层级的子项（如果有） 487 +// // 遍历当前层级的子项（如果有）
703 - for (var key in obj) { 488 +// for (var key in obj) {
704 - if (typeof obj[key] === "object" && obj[key] !== null) { 489 +// if (typeof obj[key] === "object" && obj[key] !== null) {
705 - modifyFieldValue(obj[key], fieldName, fieldValue, targetName, newValue); 490 +// modifyFieldValue(obj[key], fieldName, fieldValue, targetName, newValue);
706 - } 491 +// }
707 - } 492 +// }
708 -} 493 +// }
709 494
710 /** 495 /**
711 - * 操作勾选框回调 496 + * 勾选框 操作回调
712 * 497 *
713 * @param {type} user - description of parameter 498 * @param {type} user - description of parameter
714 * @param {type} checked - description of parameter 499 * @param {type} checked - description of parameter
...@@ -733,67 +518,35 @@ const handleCheckedUserListChange = (user, checked) => { ...@@ -733,67 +518,35 @@ const handleCheckedUserListChange = (user, checked) => {
733 * @param {Array} arr - The array to traverse. 518 * @param {Array} arr - The array to traverse.
734 * @return {Array} - The list items found. 519 * @return {Array} - The list items found.
735 */ 520 */
736 -function getAllListItems(arr) { 521 +// function getAllListItems(arr) {
737 - var result = []; 522 +// var result = [];
738 - 523 +
739 - function recursiveGetListItems(subArr) { 524 +// function recursiveGetListItems(subArr) {
740 - for (var i = 0; i < subArr.length; i++) { 525 +// for (var i = 0; i < subArr.length; i++) {
741 - var item = subArr[i]; 526 +// var item = subArr[i];
742 - if (item.list && Array.isArray(item.list)) { 527 +// if (item.list && Array.isArray(item.list)) {
743 - result = result.concat(item.list); 528 +// result = result.concat(item.list);
744 - } 529 +// }
745 - if (item.children && Array.isArray(item.children)) { 530 +// if (item.children && Array.isArray(item.children)) {
746 - recursiveGetListItems(item.children); 531 +// recursiveGetListItems(item.children);
747 - } 532 +// }
748 - } 533 +// }
749 - } 534 +// }
750 - 535 +
751 - recursiveGetListItems(arr); 536 +// recursiveGetListItems(arr);
752 - return result; 537 +// return result;
753 -} 538 +// }
754 - 539 +
755 -/** 540 +
756 - * 根据 userTabs 的选中状态，更新 tag 选中列表显示 541 +// watch(
757 - * 获取生成 list 集合的 checked 状态，生成 tags 的勾选显示 542 +// // TAG: watch userTabs.value 监听数据结构选中值变化
758 - * 543 +// () => userTabs.value,
759 - * @param {Array} val - userTabs 544 +// val => {
760 - */ 545 +// if (val) {
761 -const setTagsList = val => { 546 +// }
762 - let userList = []; // 存储所有的list数据 547 +// },
763 - val.forEach(ele => { 548 +// { deep: true }
764 - let data = getAllListItems(ele.data); 549 +// );
765 - userList.push(data);
766 - });
767 - // 合并成一维数组列表
768 - userList = [...userList.flat()];
769 - // 如果ID相同，需要数据去重
770 - let uniqueArray = userList.filter(
771 - (value, index, self) => index === self.findIndex(obj => obj.id === value.id)
772 - );
773 - // 勾选变化后同步到选中列表
774 - userTags.value = uniqueArray
775 - .filter(ele => {
776 - return ele.checked;
777 - })
778 - .map(ele => {
779 - return {
780 - id: ele.id,
781 - name: ele.name
782 - };
783 - });
784 -};
785 -
786 -watch(
787 - // TAG: watch userTabs.value 监听数据结构选中值变化
788 - () => userTabs.value,
789 - val => {
790 - if (val) {
791 - // 更新 tags 选中列表显示
792 - // setTagsList(val);
793 - }
794 - },
795 - { deep: true }
796 -);
797 550
798 /** 551 /**
799 * 移除 tags 成员标签回调 552 * 移除 tags 成员标签回调
...@@ -810,14 +563,18 @@ const handleTagClose = tag => { ...@@ -810,14 +563,18 @@ const handleTagClose = tag => {
810 corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false) 563 corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
811 break; 564 break;
812 case 'tab-uer': // 成员 565 case 'tab-uer': // 成员
813 - 566 + checkedUserList.value = userTags.value
567 + .map(ele => {
568 + return ele.id;
569 + });
814 break; 570 break;
815 case 'tab-role': // 角色 571 case 'tab-role': // 角色
816 - 572 + checkedUserList.value = userTags.value
573 + .map(ele => {
574 + return ele.id;
575 + });
817 break; 576 break;
818 } 577 }
819 - // // 移除数据结构中的选中值
820 - // modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
821 // // ID集合 578 // // ID集合
822 // let tagsId = userTags.value.map(ele => { 579 // let tagsId = userTags.value.map(ele => {
823 // return ele.id; 580 // return ele.id;
...@@ -951,18 +708,6 @@ const onSearch = () => { ...@@ -951,18 +708,6 @@ const onSearch = () => {
951 // 如果 tags 里存在的值，需要在搜索列表中勾选 708 // 如果 tags 里存在的值，需要在搜索列表中勾选
952 checkSearchStatus(); 709 checkSearchStatus();
953 }; 710 };
954 -
955 -watch(
956 - // TAG: watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
957 - () => dialogUserFormVisible.value,
958 - val => {
959 - if (val) {
960 - nextTick(() => {
961 - tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
962 - });
963 - }
964 - }
965 -);
966 </script> 711 </script>
967 712
968 <style lang="scss"> 713 <style lang="scss">
...@@ -1069,7 +814,7 @@ watch( ...@@ -1069,7 +814,7 @@ watch(
1069 814
1070 .flow-checkbox-box { 815 .flow-checkbox-box {
1071 border-left: 2px solid #e4e7ed; 816 border-left: 2px solid #e4e7ed;
1072 - width: 2px; 817 + /* width: 2px; */
1073 height: 100%; 818 height: 100%;
1074 padding-left: 10px; 819 padding-left: 10px;
1075 } 820 }
......
File mode changed
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 "noImplicitAny": false, 11 "noImplicitAny": false,
12 "strictNullChecks": false, 12 "strictNullChecks": false,
13 "allowSyntheticDefaultImports": true, 13 "allowSyntheticDefaultImports": true,
14 + "allowJs": true,
14 "sourceMap": true, 15 "sourceMap": true,
15 "baseUrl": ".", 16 "baseUrl": ".",
16 "types": [ 17 "types": [
......