更新商品多选

src/views/task_template/dialog_commodity.vue

@@ -26,7 +26,12 @@
     </el-card>
     <el-card class="!border-none" v-loading="pager.loading" shadow="never">
       <div class="mt-4">
-        <el-table :data="pager.lists" @cell-click="handleCurrentChange">
+        <el-table
+          ref="tableRef"
+          :data="pager.lists"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
           <el-table-column label="ID" property="product_id" />
           <el-table-column label="图片" property="image">
             <template #default="{ row }">
@@ -44,6 +49,12 @@
       <div class="flex mt-4 justify-end">
         <pagination v-model="pager" @change="getLists" :pageSizes="[10]" />
       </div>
+      <div class="flex justify-end mt-2">
+        <el-button type="primary" @click="handleCurrentChange(changeList)"
+          >确认</el-button
+        >
+        <el-button @click="commodityClose">取消</el-button>
+      </div>
     </el-card>
   </div>
 </template>
@@ -52,22 +63,21 @@
 import { usePaging } from "@/hooks/usePaging";
 import { useDictData } from "@/hooks/useDictOptions";
 import { apiGetProductList } from "@/api/task_template";
-import { defineEmits } from "vue";
+import { defineEmits, computed, watch } from "vue";
+
+const tableRef = ref(null);
 
 // 当前类型
 const props = defineProps({
-  type: {
+  ids: {
-    type: Number,
+    type: String,
-    default: 0,
+    default: "",
-  },
-  companyTypeList: {
-    type: Array,
-    default: () => {
-      return [];
-    },
   },
 });
 
+let goods_id = props.ids?.split(",") || [];
+// console.log(goods_id);
+
 // 查询条件
 const queryParams = reactive({
   keyword: "",
@@ -75,11 +85,36 @@ const queryParams = reactive({
 });
 
 // 选中数据
-const emits = defineEmits(["customEvent"]);
+const emits = defineEmits(["customEvent", "close"]);
 
 // 选中数据子父传递
 const handleCurrentChange = (value: any) => {
-  emits("customEvent", value);
+  let arr: any = [];
+  value.forEach((item: any) => {
+    arr = [...arr, ...item];
+  });
+  // return console.log(value, arr);
+  emits("customEvent", arr);
+};
+
+const changeList = ref([[]]);
+let count = 0;
+const handleSelectionChange = (value: any[]) => {
+  // 在翻页时,上一页的数据会被清空, 不得已使用二维数组存取数据
+  let index = pager.page ? pager.page - 1 : 0;
+  if (!changeList.value[index]) changeList.value.push([]);
+  // 同一页选择多个商品时, 每选择一次, 此方法都会被调用, 所以选择多个时此方法会被调用多次, 在翻页时会出现漏选, 使用此方法避免
+  if (index != count && value.length < changeList.value[index].length) {
+    console.log("加载中");
+  } else {
+    count = index;
+    changeList.value[index] = JSON.parse(JSON.stringify(value));
+    console.log("加载完成");
+  }
+}; // 多选
+
+const commodityClose = () => {
+  emits("close", null);
 };
 
 // 分页相关
@@ -90,4 +125,43 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
 });
 
 getLists();
+
+// 监听数据变化进行勾选
+watch(
+  () => pager.lists,
+  (n, o) => {
+    // 进行勾选
+    nextTick(() => {
+      n.forEach((item: any) => {
+        item.product_id += "";
+        // console.log("过滤前", goods_id);
+        let f_ids = new Set(); // 删除选中的id
+        // 对选择过的列表进行回显
+        if (goods_id.includes(item.product_id)) {
+          let index = pager.page ? pager.page - 1 : 0;
+          if (
+            !changeList.value[index]?.find(
+              (e: any) => e.product_id == item.product_id
+            )
+          ) {
+            f_ids.add(item.product_id);
+            changeList.value[index]?.push(item);
+          }
+        }
+        goods_id = goods_id.filter((item: string) => !f_ids.has(item)); // 已选择过的进行删除
+        // console.log("长度", goods_id);
+        // console.log("已选", changeList.value);
+        // 把changeList列表中的所有值进行勾选
+        changeList.value.forEach((c: any) => {
+          c.forEach((e: any) => {
+            if (e.product_id == item.product_id) {
+              tableRef.value.toggleRowSelection(item, true);
+            }
+          });
+        });
+      });
+    });
+  },
+  { deep: true, immediate: true }
+);
 </script>

src/views/task_template/edit_admin.vue

@@ -76,19 +76,20 @@
             </div>
           </div>
         </el-form-item>
-        <el-form-item
+        <el-form-item v-if="showCommodity" label="商品" prop="extend.goods_id">
-          v-if="showCommodity"
+          <!-- <el-input
-          label="商品"
-          prop="extend.product_id"
-        >
-          <el-input
             readonly
             :value="formData.extend.store_name"
             clearable
-            placeholder="请选择商品"
+            placeholder="请选择"
-            @click="openCommodity"
+            type="textarea"
+            autosize
+          >
+          </el-input> -->
+          <div style="width: 100%">{{ formData.extend.store_name }}</div>
+          <el-button class="mt-2" type="primary" @click="openCommodity"
+            >选择商品</el-button
           >
-          </el-input>
         </el-form-item>
         <el-form-item v-if="showTarget" label="目标数" prop="extend.target">
           <el-input
@@ -210,8 +211,9 @@
       </el-dialog>
       <el-dialog v-model="showDialogCommodity">
         <dialogCommodity
-          :type="30"
+          :ids="formData.extend.goods_id"
           @customEvent="customEventCommodity"
+          @close="commodityClose"
         ></dialogCommodity>
       </el-dialog>
     </popup>
@@ -294,7 +296,7 @@ const formData = reactive({
   extend: {
     task_role: "", // 任务角色
     target: "", //目标数量
-    product_id: "", //商品id
+    goods_id: "", //商品id
     store_name: "", // 商品名字
   },
 });
@@ -373,9 +375,19 @@ const openCommodity = () => {
 };
 
 const customEventCommodity = (e: any) => {
-  formData.extend.product_id = e.product_id;
+  let id: string[] | number[] = [];
-  formData.extend.store_name = e.store_name;
+  let name: string[] = [];
-  formRef.value?.clearValidate("extend.product_id");
+  e.forEach((item: any) => {
+    id.push(item.product_id);
+    name.push(item.store_name);
+  });
+  formData.extend.goods_id = id.join(",");
+  formData.extend.store_name = name.join(";");
+  formRef.value?.clearValidate("extend.goods_id");
+  showDialogCommodity.value = false;
+};
+
+const commodityClose = () => {
   showDialogCommodity.value = false;
 };
 
@@ -452,7 +464,7 @@ const formRules = reactive<any>({
       trigger: ["blur"],
     },
   ],
-  "extend.product_id": [
+  "extend.goods_id": [
     {
       required: true,
       message: "请选择商品",