列设置修改

src/views/baggageManagement/components/ColumnSet/index.vue

@@ -17,7 +17,7 @@
         <div v-for="columnGroup in columnGroups" :key="columnGroup.title">
           <div class="group-title">{{ columnGroup.title }}</div>
           <el-checkbox-group
-            v-model="checkedGroups[columnGroup.title]"
+            v-model="tempGroups[columnGroup.title]"
             size="large"
           >
             <el-checkbox
@@ -30,7 +30,7 @@
         </div>
       </template>
       <template v-else>
-        <el-checkbox-group v-model="checkedKeys" size="large">
+        <el-checkbox-group v-model="tempKeys" size="large">
           <el-checkbox
             v-for="column in tableColumns"
             :key="column.dataKey"
@@ -68,19 +68,30 @@ const props = defineProps({
   }
 })
 
+const emits = defineEmits(['checkedSubmit'])
+
 const inGroup = computed(() => {
   return 'groupTitle' in props.tableColumns[0]
 })
 
-const emits = defineEmits(['checkedSubmit'])
+
+const simpleClone = (obj: any) => JSON.parse(JSON.stringify(obj))
 
 const dialogFlag = ref(false)
 const dialogShow = () => {
+  tempGroups.value = simpleClone(checkedGroups.value)
+  tempKeys.value = simpleClone(checkedKeys.value)
   dialogFlag.value = true
 }
 const dialogHide = () => {
   dialogFlag.value = false
 }
+const submitHandler = () => {
+  checkedGroups.value = simpleClone(tempGroups.value)
+  checkedKeys.value = simpleClone(tempKeys.value)
+  emits('checkedSubmit', checkedColumnKeys.value)
+  dialogHide()
+}
 
 const columnGroups = computed(() => {
   if (inGroup.value) {
@@ -101,9 +112,14 @@ const columnGroups = computed(() => {
   }
 })
 
+// 分组的选择框
 const checkedGroups = ref<any>({})
+const tempGroups = ref<any>({})
+//不分组的选择框
 const checkedKeys = ref<KeyType[]>([])
-  const checkedColumnKeys = computed<KeyType[]>(() => {
+const tempKeys = ref<KeyType[]>([])
+
+const checkedColumnKeys = computed<KeyType[]>(() => {
   if (inGroup.value) {
     return Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat()
   } else {
@@ -125,11 +141,6 @@ watch(() => props.tableColumns, columns => {
   }
   emits('checkedSubmit', checkedColumnKeys.value)
 })
-
-const submitHandler = () => {
-  emits('checkedSubmit', checkedColumnKeys.value)
-  dialogHide()
-}
 </script>
 
 <style scoped lang="scss">

src/views/baggageManagement/components/TableSwitch/index.vue

@@ -5,7 +5,7 @@
       size="default"
       style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
       @change="
-        val => {
+        (val: number) => {
           emit('update:flag', val)
         }
       "

src/views/baggageManagement/departure/station/index.vue

@@ -36,9 +36,9 @@
           >
             <template #cell="slot: CellSlotProps">
               <div :class="cellClass(slot)">
-                <span class="cell-text">{{
-                  slot.rowData[slot.column.dataKey]
-                }}</span>
+                <span class="cell-text">
+                  {{ slot.rowData[slot.column.dataKey] }}
+                </span>
                 <div class="cell-background" />
               </div>
             </template>