fix: 修复商品分组选择商品未回显已选中商品问题以及重置问题

src/components/CURD/PageContent.vue

@@ -515,6 +515,7 @@ import {
 import ExcelJS from "exceljs";
 import { reactive, ref } from "vue";
 import type { IContentConfig, IObject, IOperatData } from "./types";
+import { el } from "element-plus/es/locale";
 
 // 定义接收的属性
 const props = defineProps<{
@@ -592,6 +593,45 @@ const selectionData = ref<IObject[]>([]);
 // 删除ID集合 用于批量删除
 const removeIds = ref<(number | string)[]>([]);
 function handleSelectionChange(selection: any[]) {
+  console.log("selectionData.value", selectionData.value);
+
+  // if(selection.length==0){
+  //   selectionData.value=selectionData.value.filter((item) => {
+  //     return pageData.value.find(v=>v[pk]===item[pk])!=undefined
+  //   });
+  // }else{
+  //   selectionData.value=selectionData.value.filter((item) => {
+  //     return pageData.value.find(v=>v[pk]===item[pk])==undefined
+  //   });
+  // }
+
+  //之前有选中，现在置空
+  if (selection.length == 0 && selectionData.value.length > 0) {
+    defaultSelData.value = defaultSelData.value.filter((item) => {
+      return pageData.value.find((v) => v[pk] === item[pk]) != undefined;
+    });
+  }
+  //之前没有选中，现在有
+  if (selection.length > 0 && selectionData.value.length == 0) {
+    defaultSelData.value = selection;
+  }
+  //之前有选中，现在有
+  if (selection.length > 0 && selectionData.value.length > 0) {
+    defaultSelData.value = defaultSelData.value.filter((item) => {
+      const isNowPageData = pageData.value.find((v) => v[pk] === item[pk]);
+      if (isNowPageData) {
+        return selection.find((v) => v[pk] === item[pk]) != undefined;
+      } else {
+        return true;
+      }
+    });
+    for (let i of selection) {
+      if (defaultSelData.value.find((v) => v[pk] === i[pk]) == undefined) {
+        defaultSelData.value.push(i);
+      }
+    }
+  }
+  console.log("defaultSelData.value", defaultSelData.value);
   selectionData.value = selection;
   removeIds.value = selection.map((item) => item[pk]);
 }
@@ -990,6 +1030,9 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
       } else {
         pageData.value = data;
       }
+      nextTick(() => {
+        setSelectTable(defaultSelData.value);
+      });
     })
     .finally(() => {
       loading.value = false;
@@ -1030,14 +1073,42 @@ function saveXlsx(fileData: BlobPart, fileName: string) {
   document.body.removeChild(downloadLink);
   window.URL.revokeObjectURL(downloadUrl);
 }
-function test(rows: any[]) {
-  console.log(tableRef, "tioshi222222222222222222222");
-  // rows.forEach((row) => {
-  //   tableRef.value!.toggleRowSelection(row, undefined)
-  // })
+function test(rows: any[]) {}
+
+const defaultSelData = ref<IObject[]>([]);
+// 设置默认选择
+function setSelectTable(rows: any[]) {
+  selectionData.value = rows;
+  defaultSelData.value = rows;
+  pageData.value.forEach((element: IObject) => {
+    rows.forEach((row) => {
+      if (element.id == row.id) {
+        console.log("selected", element);
+        tableRef.value!.toggleRowSelection(element, true);
+      }
+    });
+  });
 }
+//清除选中
+function clearSelectTable() {
+  selectionData.value = [];
+  defaultSelData.value = [];
+  pageData.value.forEach((element: IObject) => {
+    tableRef.value!.toggleRowSelection(element, false);
+  });
+}
+
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData, getFilterParams, getselectTable, pagination, test });
+defineExpose({
+  clearSelectTable,
+  fetchPageData,
+  exportPageData,
+  getFilterParams,
+  getselectTable,
+  pagination,
+  test,
+  setSelectTable,
+});
 </script>
 
 <style lang="scss" scoped>

src/components/mycomponents/myDialog.vue

@@ -1,45 +1,44 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width">
+  <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width" @close="close">
     <slot></slot>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="Confirm">
-          确定
-        </el-button>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="Confirm">确定</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { ref } from "vue";
+import { ElMessageBox } from "element-plus";
 
 let props = defineProps({
   title: {
     type: String,
-    default: 'Dialog'
+    default: "Dialog",
   },
   width: {
     type: String,
-    default: '30%'
-  }
-})
-const emit = defineEmits(['confirm'])
-const dialogVisible = ref(false)
-
+    default: "30%",
+  },
+});
+const emit = defineEmits(["confirm", "close"]);
+const dialogVisible = ref(false);
 
 function open() {
-  dialogVisible.value = true
+  dialogVisible.value = true;
 }
+
 function Confirm() {
-  emit('confirm')
+  emit("confirm");
 }
 function close() {
-  dialogVisible.value = false
+  dialogVisible.value = false;
+  emit("close");
 }
-defineExpose({ open, close })
+defineExpose({ open, close });
 </script>
 <style scoped>
 .dialog-footer button:first-child {