From 2cde04720d802f873630d7df2443c5a3d1124bb8 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Tue, 6 May 2025 16:10:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E9=80=89=E6=8B=A9=E5=95=86=E5=93=81=E6=9C=AA?=
 =?UTF-8?q?=E5=9B=9E=E6=98=BE=E5=B7=B2=E9=80=89=E4=B8=AD=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BB=A5=E5=8F=8A=E9=87=8D=E7=BD=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageContent.vue      |  83 +++++++-
 src/components/mycomponents/myDialog.vue |  35 ++--
 src/views/online-shop/goods-group.vue    | 238 ++++++++++++++---------
 3 files changed, 242 insertions(+), 114 deletions(-)

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 2a81b02..01a9cc0 100644
--- a/src/components/CURD/PageContent.vue
+++ b/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>
diff --git a/src/components/mycomponents/myDialog.vue b/src/components/mycomponents/myDialog.vue
index 5cb675e..f417157 100644
--- a/src/components/mycomponents/myDialog.vue
+++ b/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 {
diff --git a/src/views/online-shop/goods-group.vue b/src/views/online-shop/goods-group.vue
index cc1666d..1f79172 100644
--- a/src/views/online-shop/goods-group.vue
+++ b/src/views/online-shop/goods-group.vue
@@ -4,11 +4,18 @@
     <template v-if="isA">
       <!-- 搜索 -->
 
-
       <!-- 列表 -->
-      <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
-        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
-        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig"
+        @add-click="handleAddClick"
+        @edit-click="handleEditClick"
+        @export-click="handleExportClick"
+        @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick"
+        @operat-click="handleOperatClick"
+        @filter-change="handleFilterChange"
+      >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -22,7 +29,11 @@
         </template>
         <template #mobile="scope">
           <el-text>{{ scope.row[scope.prop] }}</el-text>
-          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+          <copy-button
+            v-if="scope.row[scope.prop]"
+            :text="scope.row[scope.prop]"
+            style="margin-left: 2px"
+          />
         </template>
       </page-content>
 
@@ -51,7 +62,11 @@
       </page-modal> -->
 
       <!-- 编辑 -->
-      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+      <page-modal
+        ref="editModalRef"
+        :modal-config="editModalConfig"
+        @submit-click="handleSubmitClick"
+      >
         <template #gender="scope">
           <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
         </template>
@@ -60,23 +75,37 @@
             <el-button type="primary" @click="addgoods">
               <el-icon>
                 <Plus />
-              </el-icon>添加商品
+              </el-icon>
+              添加商品
             </el-button>
             <!-- 选责商品列表 -->
-            <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
+            <selectGoodslist
+              @deleteItememit="deleteItem($event)"
+              :list="selectData"
+            ></selectGoodslist>
           </div>
         </template>
         <template #addmanagementtime="scope">
           <template v-if="scope.formData.useTime == 1">
             {{ scope.formData }}
-            <el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
-              start-placeholder="开始时间" end-placeholder="结束时间" />
+            <el-time-picker
+              value-format="HH:mm:ss"
+              v-model="scope.formData.saleTime"
+              is-range
+              range-separator="到"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            />
           </template>
         </template>
       </page-modal>
     </template>
     <template v-else>
-      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig2"
+        @operat-click="handleOperatClick"
+      >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -85,12 +114,31 @@
       </page-content>
     </template>
     <!-- 新增添加商品 -->
-    <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
-      <page-search ref="searchRefs" :search-config="searchConfig2" @query-click="searchs"
-        @reset-click="handleResetClick" />
-      <page-content ref="contentRefs" v-if="switchref" :content-config="contentConfig2" @add-click="handleAddClick"
-        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
-        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+    <myDialog
+      title="选择商品"
+      width="50%"
+      ref="myDialogRef"
+      @Confirm="subitgood"
+      @close="resetSelectData"
+    >
+      <page-search
+        ref="searchRefs"
+        :search-config="searchConfig2"
+        @query-click="searchs"
+        @reset-click="handleResetClick"
+      />
+      <page-content
+        ref="contentRefs"
+        v-if="switchref"
+        :content-config="contentConfig2"
+        @add-click="handleAddClick"
+        @edit-click="handleEditClick"
+        @export-click="handleExportClick"
+        @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick"
+        @operat-click="handleOperatClick"
+        @filter-change="handleFilterChange"
+      >
         <template #status="scope">
           <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
@@ -104,13 +152,14 @@
         </template>
         <template #mobile="scope">
           <el-text>{{ scope.row[scope.prop] }}</el-text>
-          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+          <copy-button
+            v-if="scope.row[scope.prop]"
+            :text="scope.row[scope.prop]"
+            style="margin-left: 2px"
+          />
         </template>
       </page-content>
 
-
-
-
       <!-- <el-table :data="selectData" border style="width: 100%">
         <el-table-column prop="date" align="center" label="Date" />
         <el-table-column prop="address" align="center" label="Address" />
@@ -127,7 +176,10 @@
         </el-form-item>
         <el-form-item label="" v-if="selectData.length">
           <!-- 选责商品列表 -->
-          <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
+          <selectGoodslist
+            @deleteItememit="deleteItem($event)"
+            :list="selectData"
+          ></selectGoodslist>
         </el-form-item>
         <el-form-item label="分组状态">
           <el-radio-group v-model="forms.status">
@@ -142,8 +194,14 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="时间选择" v-if="forms.useTime == 1">
-          <el-time-picker value-format="HH:mm:ss" v-model="forms.time" is-range range-separator="到"
-            start-placeholder="开始时间" end-placeholder="结束时间" />
+          <el-time-picker
+            value-format="HH:mm:ss"
+            v-model="forms.time"
+            is-range
+            range-separator="到"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
         </el-form-item>
         <el-form-item label="排列方式">
           <el-radio-group v-model="forms.sortMode">
@@ -174,8 +232,8 @@ import contentConfig2 from "./goodsGroupconfig/content2";
 import editModalConfig from "./goodsGroupconfig/edit";
 import searchConfig from "./goodsGroupconfig/search";
 import searchConfig2 from "./goodsGroupconfig/search2";
-import myDialog from '@/components/mycomponents/myDialog.vue'
-import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue"
+import myDialog from "@/components/mycomponents/myDialog.vue";
+import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue";
 const {
   searchRef,
   searchRefs,
@@ -194,46 +252,45 @@ const {
   handleFilterChange,
 } = usePage();
 
-let switchref = ref(false)
+let switchref = ref(false);
 
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
-  selectData.value = []
-  // 加载上级规格下拉数据源 
+  selectData.value = [];
+  // 加载上级规格下拉数据源
   // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
   // 加载角色下拉数据源
   // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
-const myDialogRef = ref(null)
-const myDialogRefAdd = ref(null)
-const elFormref = ref(null)
-let title = ref("新增分组")
+const myDialogRef = ref(null);
+const myDialogRefAdd = ref(null);
+const elFormref = ref(null);
+let title = ref("新增分组");
 // 选中的商品数据
-let selectData = ref([])
+let selectData = ref([]);
 let forms = reactive({
   name: "",
   status: 1,
   useTime: 0,
-  sortMode: '0',
+  sortMode: "0",
   sort: 1,
-  time: ""
-})
+  time: "",
+});
 
 // 添加商品
-function addgoods() {
+async function addgoods() {
   // console.log(selectData.value, '编辑时候有的数据')
-  switchref.value = true
-  myDialogRef.value.open()
-
+  switchref.value = true;
+  myDialogRef.value.open();
+  await nextTick();
+  contentRefs.value.setSelectTable(selectData.value);
 }
 const rules = reactive<FormRules<RuleForm>>({
-  name: [
-    { required: true, message: '请输入分组名称', trigger: 'blur' },
-  ],
-})
+  name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
 interface RuleForm {
-  name: string
+  name: string;
 }
 
 // 添加编辑商品分组
@@ -243,76 +300,71 @@ async function addConfirm() {
     if (valid) {
       let obj = {
         ...forms,
-        selectgoods: selectData.value
-      }
+        selectgoods: selectData.value,
+      };
       // 商品选择的合集
       if (selectData.value.length) {
-        let arr = []
+        let arr = [];
         selectData.value.forEach((item, index) => {
-          arr.push(item.id)
-        })
-        obj.productIds = arr
+          arr.push(item.id);
+        });
+        obj.productIds = arr;
       }
-      console.log(obj, '商品分组的参数')
+      console.log(obj, "商品分组的参数");
       if (obj.time && obj.time.length) {
-        obj.saleStartTime = obj.time[0]
-        obj.saleEndTime = obj.time[1]
+        obj.saleStartTime = obj.time[0];
+        obj.saleEndTime = obj.time[1];
       }
       if (title.value == "新增分组") {
-        let res = await UserAPI.addunit(obj)
+        let res = await UserAPI.addunit(obj);
         if (res.code == 200) {
           ElMessage.success("添加成功");
-          myDialogRefAdd.value.close()
+          myDialogRefAdd.value.close();
         }
       } else {
         if (obj.useTime == 0) {
-          obj.saleStartTime = null
-          obj.saleEndTime = null
+          obj.saleStartTime = null;
+          obj.saleEndTime = null;
         }
-        let res = await UserAPI.update(obj)
+        let res = await UserAPI.update(obj);
         if (res.code == 200) {
           ElMessage.success("编辑成功");
-          myDialogRefAdd.value.close()
+          myDialogRefAdd.value.close();
         }
       }
       // contentConfig.indexAction()
-      handleQueryClick()
+      handleQueryClick();
     } else {
-      console.log('error submit!', fields)
+      console.log("error submit!", fields);
     }
-  })
-
-
-
+  });
 }
 // 添加商品的回调
 function subitgood() {
-
   if (title.value == "编辑分组") {
-    let arr = selectData.value
+    let arr = selectData.value;
     contentRefs.value.getselectTable().forEach((item: any) => {
-      let selectdata = selectData.value.find(ele => ele.id == item.id)
+      let selectdata = selectData.value.find((ele) => ele.id == item.id);
       if (!selectdata) {
-        arr.push(item)
+        arr.push(item);
       }
-    })
-    selectData.value = arr
+    });
+    selectData.value = arr;
   } else {
-    selectData.value = contentRefs.value.getselectTable()
+    selectData.value = contentRefs.value.getselectTable();
   }
-  switchref.value = false
-  myDialogRef.value.close()
+  switchref.value = false;
+  myDialogRef.value.close();
 }
 // 删除商品
 function deleteItem(data: any) {
-  selectData.value = data
+  selectData.value = data;
 }
 
-
 // 编辑
 async function handleEditClick(row: IObject) {
   editModalRef.value?.handleDisabled(false);
-  title.value = "编辑分组"
+  title.value = "编辑分组";
   // 加载部门下拉数据源
   // editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
   // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
@@ -320,13 +372,13 @@ async function handleEditClick(row: IObject) {
   // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
   // 根据id获取数据进行填充
   const data = await UserAPI.getunitinfo(row.id);
-  let obj = { ...data }
-  selectData.value = data.productList
-  obj.time = [obj.saleStartTime, obj.saleEndTime]
+  let obj = { ...data };
+  selectData.value = data.productList;
+  obj.time = [obj.saleStartTime, obj.saleEndTime];
   for (let key in obj) {
-    forms[key] = obj[key]
+    forms[key] = obj[key];
   }
-  myDialogRefAdd.value.open()
+  myDialogRefAdd.value.open();
   // editModalRef.value?.setFormData(obj);
   // editModalRef.value?.setModalVisible();
 }
@@ -338,15 +390,15 @@ function handleToolbarClick(name: string) {
       name: "",
       status: 1,
       useTime: 0,
-      sortMode: '0',
+      sortMode: "0",
       sort: 1,
-      time: ""
-    })
-    selectData.value = []
-    title.value = "新增分组"
+      time: "",
+    });
+    selectData.value = [];
+    title.value = "新增分组";
 
     // 新增
-    myDialogRefAdd.value.open()
+    myDialogRefAdd.value.open();
   }
 }
 // 其他操作列
@@ -384,6 +436,12 @@ async function handleOperatClick(data: IOperatData) {
   }
 }
 
+//清除选择商品弹窗表单选中和
+function resetSelectData() {
+  contentRefs.value?.clearSelectTable();
+  switchref.value = false;
+}
+
 // 切换示例
 const isA = ref(true);
 </script>