feat: 人员选择器增加组织机构全选

src/components/Form/src/components/SelectUserV2.vue

@@ -29,6 +29,12 @@
                             </div>
                         </div>
                         <div class="user-select-box">
+                            <div class="select-depart-all" @click="selectAll">
+                                <span>全选</span>
+                                <div class="select-circle" :class="departAllSelected ? 'selected' : ''" v-if="!viewList">
+                                    <check-outlined v-if="departAllSelected" />
+                                </div>
+                            </div>
                             <SelectUserListV2 :multiple="multiple" :data="searchDepartMemberList" emptyDescription="暂无人员" @selectId="changeDepMemberSelect"></SelectUserListV2>
                             <div v-if="false" class="user-select-pagination">
                                 <a-pagination v-model:current="searchDepartMemberParams.limit" :pageSize="searchDepartMemberParams.size" :total="searchDepartMemberTotal" />
@@ -75,6 +81,7 @@
     import { camelCaseString } from '/@/utils/stringUtil';
     import { useUserStore } from '/@/store/modules/user';
     import { Icon } from '/@/components/Icon';
+    import { CheckOutlined } from '@ant-design/icons-vue';
 
     const emits = defineEmits(['update:value', 'selectedId', 'change']);
     const { t } = useI18n();
@@ -128,6 +135,7 @@
     let resetMemberList = [];
     const searchPlaceholder = '请输入姓名或工号搜索';
     const defaultDepts = ref('')
+    const departAllSelected = ref(false)
     if(props.onlyUserCompany) {
         const userStore = useUserStore();
         const userInfo = userStore.getUserInfo;
@@ -223,7 +231,22 @@
     });
     const searchAllMemberTotal = ref(0);
     const searchAllMemberList = ref([]);
-
+    
+    watch(searchDepartMemberList, (val) => {
+        let allSelected = true
+        searchDepartMemberList.value.forEach(item => {
+            if(!item.selected) {
+                allSelected = false
+            }
+        })
+        if(!searchDepartMemberList.value.length) {
+            allSelected = false
+        }
+        departAllSelected.value = allSelected
+    },
+    {
+        deep: true
+    })
     async function departChange(e) {
         searchDepartMemberParams.value.departmentId = e.id;
         let res = await getUserList(searchDepartMemberParams.value);
@@ -260,6 +283,25 @@
         return await getUserPageListNew(params);
     }
 
+    function selectAll() {
+        departAllSelected.value = !departAllSelected.value
+        if(departAllSelected.value) {
+            searchDepartMemberList.value.forEach(item => {
+                if(!item.selected) {
+                    selectedMemberList.value.push(item)
+                }
+                item.selected = true
+            })
+        } else {
+            searchDepartMemberList.value.forEach(item => {
+                if(item.selected) {
+                    selectedMemberList.value = selectedMemberList.value.filter(m => m.id !== item.id)
+                }
+                item.selected = false
+            })
+        }
+    }
+
     function departCompleted() {
         treeLoading.value = false;
     }
@@ -441,6 +483,34 @@
                     height: 100%;
                     display: flex;
                     flex-direction: column;
+                    .select-depart-all {
+                        height: 30px;
+                        padding-left: 14px;
+                        padding-right: 21px;
+                        padding-bottom: 5px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        border-radius: 2px;
+                        margin-top: 5px;
+                        border-bottom: 1px solid #eaeaea;
+                        color: #111111;
+                        .select-circle {
+                            width: 16px;
+                            height: 16px;
+                            border: 1px solid rgba(144, 147, 153, 0.7);
+                            border-radius: 50%;
+                        }
+                        .selected {
+                            border: none;
+                            background-color: #5d9cec;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            color: white;
+                            font-size: 10px
+                        }
+                    }
 
                     .user-select-title {
                     }