Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6ea39e00 1 parent 7baf1257

fix 组织结构组件-单选的操作逻辑优化

Inline Side-by-side
Showing 1 changed file with 166 additions and 128 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-06 11:43:57 4 + * @LastEditTime: 2024-08-06 16:03:02
5 * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue 5 * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
6 * @Description: 树形组件 6 * @Description: 树形组件
7 --> 7 -->
...@@ -106,6 +106,7 @@ ...@@ -106,6 +106,7 @@
106 > 106 >
107 <van-checkbox 107 <van-checkbox
108 v-for="(role, index) in roleList" 108 v-for="(role, index) in roleList"
109 + :ref="el => roleCheckboxRefs[index] = el"
109 :id="role.id" 110 :id="role.id"
110 :key="index" 111 :key="index"
111 :name="role.id" 112 :name="role.id"
...@@ -114,7 +115,7 @@ ...@@ -114,7 +115,7 @@
114 :checked-color="styleColor.baseColor" 115 :checked-color="styleColor.baseColor"
115 :disabled="role.disabled" 116 :disabled="role.disabled"
116 style="margin-bottom: 0.5rem;" 117 style="margin-bottom: 0.5rem;"
117 - @click="onRoleClick(role, $event)" 118 + @click="onRoleClick(role, $event, index)"
118 >{{ role.name }}</van-checkbox> 119 >{{ role.name }}</van-checkbox>
119 </van-checkbox-group> 120 </van-checkbox-group>
120 <div style="height: 10vh;"></div> 121 <div style="height: 10vh;"></div>
...@@ -145,8 +146,9 @@ ...@@ -145,8 +146,9 @@
145 @change="onUserChange" 146 @change="onUserChange"
146 > 147 >
147 <van-checkbox 148 <van-checkbox
148 - @click="onCheckUserChange(user, $event)" 149 + @click="onCheckUserChange(user, $event, index)"
149 v-for="(user, index) in userList" 150 v-for="(user, index) in userList"
151 + :ref="el => userCheckboxRefs[index] = el"
150 :id="user.id" 152 :id="user.id"
151 :type="user.type" 153 :type="user.type"
152 :text="user.name" 154 :text="user.name"
...@@ -297,6 +299,7 @@ let dept_list = []; ...@@ -297,6 +299,7 @@ let dept_list = [];
297 let check_type = ref(''); // 单选/多选模式 299 let check_type = ref(''); // 单选/多选模式
298 300
299 // 处理Tab显示问题 301 // 处理Tab显示问题
302 +// TODO：等待后台数据
300 const tree_tabs = ['dept', 'role', 'user']; 303 const tree_tabs = ['dept', 'role', 'user'];
301 const tabList = computed(() => { 304 const tabList = computed(() => {
302 let arr = []; 305 let arr = [];
...@@ -346,8 +349,8 @@ onMounted(async () => { ...@@ -346,8 +349,8 @@ onMounted(async () => {
346 if (flowRoleList.code) { 349 if (flowRoleList.code) {
347 dept_list = flowRoleList.data; 350 dept_list = flowRoleList.data;
348 } 351 }
349 - // TEST 352 + // TODO：等待后台数据
350 - check_type.value = ''; // 默认单选 353 + check_type.value = '';
351 // 获取已选中数据 354 // 获取已选中数据
352 // 如果有默认值处理 355 // 如果有默认值处理
353 props.value = props.component_props.default; 356 props.value = props.component_props.default;
...@@ -553,26 +556,26 @@ const checkedGroup = ref({ ...@@ -553,26 +556,26 @@ const checkedGroup = ref({
553 /** 556 /**
554 * 重置角色Tab列表的disable状态 557 * 重置角色Tab列表的disable状态
555 */ 558 */
556 -const resetRoleDisable = () => { 559 +// const resetRoleDisable = () => {
557 - // 如果角色没有选中，解除禁用 560 +// // 如果角色没有选中，解除禁用
558 - if (!role_checked.value.length) { 561 +// if (!role_checked.value.length) {
559 - roleList.value.forEach(item => { 562 +// roleList.value.forEach(item => {
560 - item.disabled = false; 563 +// item.disabled = false;
561 - }); 564 +// });
562 - } 565 +// }
563 -} 566 +// }
564 567
565 /** 568 /**
566 * 重置成员Tab列表的disable状态 569 * 重置成员Tab列表的disable状态
567 */ 570 */
568 -const resetUserDisable = () => { 571 +// const resetUserDisable = () => {
569 - // 如果成员没有选中，解除禁用 572 +// // 如果成员没有选中，解除禁用
570 - if (!user_checked.value.length) { 573 +// if (!user_checked.value.length) {
571 - userList.value.forEach(item => { 574 +// userList.value.forEach(item => {
572 - item.disabled = false; 575 +// item.disabled = false;
573 - }); 576 +// });
574 - } 577 +// }
575 -} 578 +// }
576 579
577 /** 580 /**
578 * 重置搜索结果列表的disable状态 581 * 重置搜索结果列表的disable状态
...@@ -589,11 +592,11 @@ const resetSearchDisable = () => { ...@@ -589,11 +592,11 @@ const resetSearchDisable = () => {
589 /** 592 /**
590 * 重置所有列表的disable状态 593 * 重置所有列表的disable状态
591 */ 594 */
592 -const resetAllDisable = () => { 595 +// const resetAllDisable = () => {
593 - resetRoleDisable(); // 重置角色禁用状态 596 +// resetRoleDisable(); // 重置角色禁用状态
594 - resetUserDisable(); // 重置成员禁用状态 597 +// resetUserDisable(); // 重置成员禁用状态
595 - resetSearchDisable(); // 重置搜索结果禁用状态 598 +// resetSearchDisable(); // 重置搜索结果禁用状态
596 -} 599 +// }
597 600
598 const onRemoveDeptTag = (dept) => { // 移除部门标签 601 const onRemoveDeptTag = (dept) => { // 移除部门标签
599 // 移除选中框显示 602 // 移除选中框显示
...@@ -606,7 +609,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签 ...@@ -606,7 +609,7 @@ const onRemoveDeptTag = (dept) => { // 移除部门标签
606 search_result_checked.value.splice(idx, 1); 609 search_result_checked.value.splice(idx, 1);
607 // 单选模式 610 // 单选模式
608 if (check_type.value === 'single') { 611 if (check_type.value === 'single') {
609 - resetAllDisable(); 612 + resetSearchDisable();
610 } 613 }
611 } 614 }
612 615
...@@ -621,7 +624,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签 ...@@ -621,7 +624,7 @@ const onRemoveRoleTag = (role) => { // 移除角色标签
621 search_result_checked.value.splice(i, 1); 624 search_result_checked.value.splice(i, 1);
622 // 单选模式 625 // 单选模式
623 if (check_type.value === 'single') { 626 if (check_type.value === 'single') {
624 - resetAllDisable(); 627 + resetSearchDisable();
625 } 628 }
626 } 629 }
627 630
...@@ -636,7 +639,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签 ...@@ -636,7 +639,7 @@ const onRemoveUserTag = (user) => { // 移除成员标签
636 search_result_checked.value.splice(i, 1); 639 search_result_checked.value.splice(i, 1);
637 // 单选模式 640 // 单选模式
638 if (check_type.value === 'single') { 641 if (check_type.value === 'single') {
639 - resetAllDisable(); 642 + resetSearchDisable();
640 } 643 }
641 } 644 }
642 645
...@@ -670,48 +673,48 @@ const deptListReset = () => { // 组织重置列表 ...@@ -670,48 +673,48 @@ const deptListReset = () => { // 组织重置列表
670 673
671 const roleListReset = () => { // 角色重置列表 674 const roleListReset = () => { // 角色重置列表
672 roleList.value = dept_list; 675 roleList.value = dept_list;
673 - // 单选模式下，勾选项目操作一个时，角色选项不可勾选 676 + // // 单选模式下，勾选项目操作一个时，角色选项不可勾选
674 - if (check_type.value === 'single') { 677 + // if (check_type.value === 'single') {
675 - if (treeCheckedCount.value) { 678 + // if (treeCheckedCount.value) {
676 - roleList.value.forEach(item => { 679 + // roleList.value.forEach(item => {
677 - item.disabled = true; 680 + // item.disabled = true;
678 - checkedGroup.value.role.forEach(role => { 681 + // checkedGroup.value.role.forEach(role => {
679 - if (role.id === item.id) { 682 + // if (role.id === item.id) {
680 - item.disabled = false; 683 + // item.disabled = false;
681 - } 684 + // }
682 - }) 685 + // })
683 - }); 686 + // });
684 - } else { 687 + // } else {
685 - roleList.value.forEach(item => { 688 + // roleList.value.forEach(item => {
686 - item.disabled = false; 689 + // item.disabled = false;
687 - }) 690 + // })
688 - } 691 + // }
689 - } 692 + // }
690 } 693 }
691 694
692 const userListReset = () => { // 成员重置列表 695 const userListReset = () => { // 成员重置列表
693 userTreeRef.value.setData(role_list); 696 userTreeRef.value.setData(role_list);
694 userTreeRef.value.setExpand(35697, true); 697 userTreeRef.value.setExpand(35697, true);
695 - // 单选模式 698 + // // 单选模式
696 - if (check_type.value === 'single') { 699 + // if (check_type.value === 'single') {
697 - if (treeCheckedCount.value) { // 已勾选值一个 700 + // if (treeCheckedCount.value) { // 已勾选值一个
698 - if (checkedGroup.value.user.length) { 701 + // if (checkedGroup.value.user.length) {
699 - checkedGroup.value.user.forEach(user => { 702 + // checkedGroup.value.user.forEach(user => {
700 - userList.value.forEach(item => { 703 + // userList.value.forEach(item => {
701 - if (user.id === item.id) { 704 + // if (user.id === item.id) {
702 - item.disabled = false; 705 + // item.disabled = false;
703 - } else { 706 + // } else {
704 - item.disabled = true; 707 + // item.disabled = true;
705 - } 708 + // }
706 - }); 709 + // });
707 - }) 710 + // })
708 - } else { 711 + // } else {
709 - userList.value.forEach(item => { 712 + // userList.value.forEach(item => {
710 - item.disabled = true; 713 + // item.disabled = true;
711 - }) 714 + // })
712 - } 715 + // }
713 - } 716 + // }
714 - } 717 + // }
715 } 718 }
716 /**************** END *****************/ 719 /**************** END *****************/
717 720
...@@ -785,6 +788,9 @@ const role_checked = ref([]); ...@@ -785,6 +788,9 @@ const role_checked = ref([]);
785 */ 788 */
786 const roleList = ref([]); 789 const roleList = ref([]);
787 790
791 +const roleCheckboxRefs = ref([]);
792 +const userCheckboxRefs = ref([]);
793 +
788 /** 794 /**
789 * 角色多选值变化回调 795 * 角色多选值变化回调
790 * @param {*} val 796 * @param {*} val
...@@ -807,28 +813,43 @@ const roleChangeMethod = (val) => { ...@@ -807,28 +813,43 @@ const roleChangeMethod = (val) => {
807 * @param {*} role 813 * @param {*} role
808 * @param {*} evt 814 * @param {*} evt
809 */ 815 */
810 -const onRoleClick = (role, evt) => { 816 +const onRoleClick = (role, evt, index) => {
811 - if (role.disabled) { // 节点禁用时不能操作 817 + // if (role.disabled) { // 节点禁用时不能操作
818 + // showToast('单选模式下，只能勾选一个')
819 + // return;
820 + // }
821 + // // 单选模式
822 + // if (check_type.value === 'single') {
823 + // // 移除选中框显示
824 + // const index = checkedGroup.value['role'].findIndex(item => item === role.id);
825 + // checkedGroup.value['role'].splice(index, 1);
826 + // // 超出选中1个，禁用其他选中
827 + // if (!treeCheckedCount.value) {
828 + // roleList.value.forEach(item => {
829 + // if (item.id === role.id) {
830 + // item.disabled = false;
831 + // } else {
832 + // item.disabled = true;
833 + // }
834 + // });
835 + // }
836 + // // 如果没有选中，解除禁用
837 + // resetRoleDisable();
838 + // }
839 +
840 + if (check_type.value === 'single') {
841 + const idx = checkedGroup.value['role'].findIndex(item => item.id === role.id);
842 + if (treeCheckedCount.value) {
843 + if (idx === -1) {
812 showToast('单选模式下，只能勾选一个') 844 showToast('单选模式下，只能勾选一个')
845 + setTimeout(() => {
846 + roleCheckboxRefs.value[index].toggle();
847 + }, 10);
813 return; 848 return;
814 - }
815 - // 单选模式
816 - if (check_type.value === 'single') {
817 - // 移除选中框显示
818 - const index = checkedGroup.value['role'].findIndex(item => item === role.id);
819 - checkedGroup.value['role'].splice(index, 1);
820 - // 超出选中1个，禁用其他选中
821 - if (!treeCheckedCount.value) {
822 - roleList.value.forEach(item => {
823 - if (item.id === role.id) {
824 - item.disabled = false;
825 } else { 849 } else {
826 - item.disabled = true; 850 + checkedGroup.value['role'].splice(idx, 1);
827 } 851 }
828 - });
829 } 852 }
830 - // 如果没有选中，解除禁用
831 - resetRoleDisable();
832 } 853 }
833 } 854 }
834 /**************** END *****************/ 855 /**************** END *****************/
...@@ -849,34 +870,50 @@ const userList = ref([]); ...@@ -849,34 +870,50 @@ const userList = ref([]);
849 const onUserTreeClick = (node) => { // 点击成员树形回调 870 const onUserTreeClick = (node) => { // 点击成员树形回调
850 userList.value = node.user; 871 userList.value = node.user;
851 user_checked.value = checkedGroup.value.user.map(item => item.id); 872 user_checked.value = checkedGroup.value.user.map(item => item.id);
852 - // 单选模式 873 + // // 单选模式
853 - if (check_type.value === 'single') { 874 + // if (check_type.value === 'single') {
854 - if (treeCheckedCount.value) { // 已勾选值一个 875 + // if (treeCheckedCount.value) { // 已勾选值一个
855 - if (checkedGroup.value.user.length) { // 成员列表有勾选值 876 + // if (checkedGroup.value.user.length) { // 成员列表有勾选值
856 - checkedGroup.value.user.forEach(user => { 877 + // checkedGroup.value.user.forEach(user => {
857 - node.user.forEach(item => { 878 + // node.user.forEach(item => {
858 - if (user.id === item.id) { 879 + // if (user.id === item.id) {
859 - item.disabled = false; 880 + // item.disabled = false;
860 - } else { 881 + // } else {
861 - item.disabled = true; 882 + // item.disabled = true;
862 - } 883 + // }
863 - }); 884 + // });
864 - }) 885 + // })
865 - } else { // 成员列表没有勾选值 886 + // } else { // 成员列表没有勾选值
866 - showToast('单选模式下，只能勾选一个') 887 + // showToast('单选模式下，只能勾选一个')
867 - userList.value = [] 888 + // userList.value = []
868 - } 889 + // }
869 - } else { 890 + // } else {
870 - resetUserDisable(); 891 + // resetUserDisable();
871 - } 892 + // }
872 - } 893 + // }
873 } 894 }
874 895
875 const onUserChange = (val) => { // 成员多选组点击回调 896 const onUserChange = (val) => { // 成员多选组点击回调
876 } 897 }
877 898
878 -const onCheckUserChange = (val, evt) => { 899 +const onCheckUserChange = (val, evt, index) => {
879 nextTick(() => { 900 nextTick(() => {
901 +
902 + if (check_type.value === 'single') {
903 + const idx = checkedGroup.value['user'].findIndex(item => item.id === val.id);
904 + if (treeCheckedCount.value) {
905 + if (idx === -1) {
906 + showToast('单选模式下，只能勾选一个')
907 + setTimeout(() => {
908 + userCheckboxRefs.value[index].toggle();
909 + }, 10);
910 + return;
911 + } else {
912 + checkedGroup.value['user'].splice(idx, 1);
913 + }
914 + }
915 + }
916 +
880 let checked = false; 917 let checked = false;
881 let id = ''; 918 let id = '';
882 let name = ''; 919 let name = '';
...@@ -908,29 +945,30 @@ const onCheckUserChange = (val, evt) => { ...@@ -908,29 +945,30 @@ const onCheckUserChange = (val, evt) => {
908 } 945 }
909 } 946 }
910 }); 947 });
911 - // 节点禁用时不能操作 948 + // // 节点禁用时不能操作
912 - if (val.disabled) { 949 + // if (val.disabled) {
913 - showToast('单选模式下，只能勾选一个') 950 + // showToast('单选模式下，只能勾选一个')
914 - return; 951 + // return;
915 - } 952 + // }
916 - // 单选模式 953 + // // 单选模式
917 - if (check_type.value === 'single') { 954 + // if (check_type.value === 'single') {
918 - // 移除选中框显示 955 + // // 移除选中框显示
919 - const index = checkedGroup.value['user'].findIndex(item => item === val.id); 956 + // const index = checkedGroup.value['user'].findIndex(item => item === val.id);
920 - checkedGroup.value['user'].splice(index, 1); 957 + // checkedGroup.value['user'].splice(index, 1);
921 - // 超出选中1个，禁用其他选中 958 + // // 超出选中1个，禁用其他选中
922 - if (!treeCheckedCount.value) { 959 + // if (!treeCheckedCount.value) {
923 - userList.value.forEach(item => { 960 + // userList.value.forEach(item => {
924 - if (item.id === val.id) { 961 + // if (item.id === val.id) {
925 - item.disabled = false; 962 + // item.disabled = false;
926 - } else { 963 + // } else {
927 - item.disabled = true; 964 + // item.disabled = true;
928 - } 965 + // }
929 - }); 966 + // });
930 - } 967 + // }
931 - // 如果没有选中，解除禁用 968 + // // 如果没有选中，解除禁用
932 - resetUserDisable(); 969 + // resetUserDisable();
933 - } 970 + // }
971 +
934 } 972 }
935 /**************** END *****************/ 973 /**************** END *****************/
936 974
......