Merge branch 'cc-dev' into 'dev'

修改多选的样式 增加全选

See merge request product-group-fe/sfy-safety-group/sfy-safety!119

src/views/disaster/components/GroupSelect.vue

@@ -3,11 +3,19 @@
     <el-select
       v-model="selectedGroups"
       multiple
+      collapse-tags
+      collapse-tags-tooltip
+      :max-collapse-tags="2"
       placeholder="请选择分组"
       filterable
       @change="handleChange"
       :disabled="disabled"
     >
+      <template #header>
+        <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
+          全部分组
+        </el-checkbox>
+      </template>
       <el-option v-for="item in groupOptions" :key="item.id" :value="item.id" :label="item.name" />
     </el-select>
     <span @click="showGroupInfo" v-if="selectedGroups.length > 0" class="group-info-span"> 人员详情 </span>
@@ -67,6 +75,25 @@
     }));
   };
 
+  const checkAll = ref(false);
+  const indeterminate = ref(false);
+
+  const handleCheckAllChange = () => {
+    if (checkAll.value) {
+      selectedGroups.value = props.groupOptions.map((item) => item.id);
+    } else {
+      selectedGroups.value = [];
+    }
+    handleChange(selectedGroups.value);
+  };
+  watch(
+    () => [props.groupOptions, selectedGroups.value],
+    ([newGroupOptions, newSelectedGroups]) => {
+      if (newGroupOptions.length === 0) return;
+      checkAll.value = newSelectedGroups.length === newGroupOptions.length;
+      indeterminate.value = newSelectedGroups.length > 0 && newSelectedGroups.length < newGroupOptions.length;
+    },
+  );
   // 监听 props 中的 modelValue 变化，更新内部的 selectedGroups
   watch(
     () => props.modelValue,

src/views/disaster/disaster-control/PageDisposalManagement.vue

@@ -24,10 +24,13 @@
               <el-select
                 v-model="searchData.reportDeptIds"
                 multiple
+                collapse-tags
+                collapse-tags-tooltip
+                :max-collapse-tags="1"
                 placeholder="请选择上报单位"
                 filterable
-                class="custom-select"
                 @change="handleChangeReportDeptIds"
+                class="custom-select"
               >
                 <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
               </el-select>
@@ -171,7 +174,7 @@
               </CollapseItem>
             </template>
           </div>
-          <div class="pagination-container" v-if="total > 0">       
+          <div class="pagination-container" v-if="total > 0">
             <el-pagination
               :current-page="currentPage"
               :page-size="pageSize"

src/views/disaster/disaster-control/src/components/CreateDisposalManagementItem.vue

@@ -5,10 +5,18 @@
         <el-select
           v-model="ruleFormData.deptIds"
           multiple
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="2"
           placeholder="请选择上报部门"
           filterable
           class="custom-select"
         >
+          <template #header>
+            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
+              全部部门
+            </el-checkbox>
+          </template>
           <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
         </el-select>
       </template>
@@ -27,7 +35,7 @@
 
 <script setup lang="ts">
   import { useRoute } from 'vue-router';
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import BasicForm from '@/components/BasicForm.vue';
   import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
@@ -62,6 +70,15 @@
     cloneRuleFormData();
     return ruleFormData;
   };
+  const checkAll = ref(false);
+  const indeterminate = ref(false);
+  const handleCheckAllChange = () => {
+    if (checkAll.value) {
+      ruleFormData.deptIds = firstLevelDepts.value.filter((item) => item.id !== null).map((item) => item.id as number);
+    } else {
+      ruleFormData.deptIds = [];
+    }
+  };
   defineExpose({
     handleValidate,
     getFormData,
@@ -74,6 +91,13 @@
     cloneRuleFormData();
     beforeRouteLeave();
   });
+  watch(
+    () => ruleFormData.deptIds,
+    (newVal) => {
+      checkAll.value = newVal.length === firstLevelDepts.value.length;
+      indeterminate.value = newVal.length > 0 && newVal.length < firstLevelDepts.value.length;
+    },
+  );
 </script>
 
 <style scoped lang="scss">

src/views/disaster/disaster-control/src/components/CreateDisposalManagementTaskItem.vue

@@ -5,10 +5,17 @@
         <el-select
           v-model="ruleFormData.deptIds"
           multiple
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="2"
           placeholder="请选择上报部门"
           filterable
-          class="custom-select"
         >
+          <template #header>
+            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
+              全部部门
+            </el-checkbox>
+          </template>
           <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
         </el-select>
       </template>
@@ -26,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import BasicForm from '@/components/BasicForm.vue';
   import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
@@ -60,6 +67,15 @@
     cloneRuleFormData();
     return ruleFormData;
   };
+  const checkAll = ref(false);
+  const indeterminate = ref(false);
+  const handleCheckAllChange = () => {
+    if (checkAll.value) {
+      ruleFormData.deptIds = firstLevelDepts.value.filter((item) => item.id !== null).map((item) => item.id as number);
+    } else {
+      ruleFormData.deptIds = [];
+    }
+  };
   defineExpose({
     handleValidate,
     getFormData,
@@ -71,6 +87,13 @@
     cloneRuleFormData();
     beforeRouteLeave();
   });
+  watch(
+    () => ruleFormData.deptIds,
+    (newVal) => {
+      checkAll.value = newVal.length === firstLevelDepts.value.length;
+      indeterminate.value = newVal.length > 0 && newVal.length < firstLevelDepts.value.length;
+    },
+  );
 </script>
 
 <style scoped lang="scss">

src/views/disaster/disaster-control/src/components/LossRecord.vue

@@ -10,6 +10,9 @@
           <el-select
             v-model="searchData.handleDeptIds"
             multiple
+            collapse-tags
+            collapse-tags-tooltip
+            :max-collapse-tags="1"
             placeholder="请选择整改部门"
             filterable
             class="custom-select"

src/views/disaster/disaster-control/src/style/common.scss

@@ -7,6 +7,7 @@
 
 .custom-select {
   width: 200px;
+  overflow: hidden;
   :deep(.el-select__selection) {
     min-height: 24px;
     max-height: 24px;

src/views/disaster/disaster-precaution/src/components/CreateTaskItem.vue

@@ -5,11 +5,18 @@
         <el-select
           v-model="ruleFormData.deptIdList"
           multiple
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="3"
           placeholder="请选择被检查（自查）单位"
           filterable
-          class="custom-select"
         >
-          <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
+          <template #header>
+            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange">
+              全部单位
+            </el-checkbox>
+          </template>
+          <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="String(item.id)" />
         </el-select>
       </template>
       <template #inspectType>
@@ -36,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import BasicForm from '@/components/BasicForm.vue';
   import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
@@ -73,6 +80,16 @@
     cloneRuleFormData();
     return ruleFormData;
   };
+  const checkAll = ref(false);
+  const indeterminate = ref(false);
+  const handleCheckAllChange = () => {
+    if (checkAll.value) {
+      ruleFormData.deptIdList = firstLevelDepts.value.map((item) => String(item.id));
+      console.log(ruleFormData.deptIdList);
+    } else {
+      ruleFormData.deptIdList = [];
+    }
+  };
   defineExpose({
     handleValidate,
     getFormData,
@@ -85,15 +102,15 @@
     cloneRuleFormData();
     beforeRouteLeave();
   });
+  watch(
+    () => ruleFormData.deptIdList,
+    (newVal) => {
+      checkAll.value = newVal.length === firstLevelDepts.value.length;
+      indeterminate.value = newVal.length > 0 && newVal.length < firstLevelDepts.value.length;
+    },
+  );
 </script>
 
 <style scoped lang="scss">
   @use '../style/task-item.scss' as *;
-  .custom-select {
-    :deep(.el-select__selection) {
-      min-height: 24px;
-      max-height: 64px;
-      overflow-y: auto;
-    }
-  }
 </style>