From 7225340c620fe3fadbd584d1edb4115de5c84886 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Sun, 1 Dec 2024 17:26:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E5=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/presale/products/index.vue  |   2 +
 .../presale/products/popup/add-or-update.vue  | 181 +++++++++++-------
 .../presale/products/popup/commodity.vue      |  75 ++++----
 3 files changed, 143 insertions(+), 115 deletions(-)

diff --git a/src/views/modules/presale/products/index.vue b/src/views/modules/presale/products/index.vue
index c15ac25..2f6a350 100644
--- a/src/views/modules/presale/products/index.vue
+++ b/src/views/modules/presale/products/index.vue
@@ -99,6 +99,8 @@
       </obj-table-plus>
       <!-- 添加或编辑 -->
       <add-or-update
+        :marketId="formInline.marketId"
+        :shopId="formInline.shopId"
         @queryList="$refs.oTable.reload()"
         ref="addOrUpdate"
       ></add-or-update>
diff --git a/src/views/modules/presale/products/popup/add-or-update.vue b/src/views/modules/presale/products/popup/add-or-update.vue
index e758af8..580e99b 100644
--- a/src/views/modules/presale/products/popup/add-or-update.vue
+++ b/src/views/modules/presale/products/popup/add-or-update.vue
@@ -68,87 +68,109 @@
           已选择商品
         </div>
         <div style="padding: 20px">
-          <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
-            <div style="font-size: 16px; margin-bottom: 20px">
-              <span>商品ID:</span>
-              <span style="margin-left: 20px">商品名称:</span>
-            </div>
-            <el-table
-              border
-              ref="multipleTable"
-              :data="tableData"
-              tooltip-effect="dark"
-              style="width: 100%"
-              @selection-change="handleSelectionChange"
+            <div
+              v-for="item in ruleForm.productList"
+              :key="item.id"
+              style="border-top: 1px solid #ccc; padding: 10px 0 0 0"
             >
-              <el-table-column align="center" label="是否预售" width="80">
-                <template slot-scope="scope">
-                  <el-checkbox v-model="scope.row.isShow"></el-checkbox>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="SKU-ID" prop="date" />
-              <el-table-column align="center" label="规格" prop="name" />
-              <el-table-column align="center" label="属性" prop="address" />
-              <el-table-column
-                align="center"
-                label="销售价"
-                prop="address"
-                width="120"
-              />
-              <el-table-column align="center" label="*是否预售" width="200">
-                <template slot="header">
-                  <span style="color: red">*是否预售</span>
-                </template>
-                <template slot-scope="scope">
-                  <el-input
-                    v-if="scope.row.isShow"
-                    v-model="scope.row.presalePrice"
-                    placeholder="请输入销售价"
-                  ></el-input>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="*定金" width="200">
-                <template slot="header">
-                  <span style="color: red">*定金</span>
-                </template>
-                <template slot-scope="scope">
-                  <el-input
-                    v-if="scope.row.isShow"
-                    v-model="scope.row.presalePrice"
-                    placeholder="请输入订金"
-                  ></el-input>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="尾款" width="200">
-                <template slot-scope="scope">
-                  <span v-if="scope.row.isShow">{{
-                    scope.row.presalePrice
-                  }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column align="center" label="*预售库存" width="200">
-                <template slot="header">
-                  <span style="color: red">*预售库存</span>
-                </template>
-                <template slot-scope="scope">
-                  <el-input
-                    v-if="scope.row.isShow"
-                    v-model="scope.row.presalePrice"
-                    placeholder="请输入预售库存"
-                  ></el-input>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
+              <div style="font-size: 16px; margin-bottom: 20px">
+                <span>商品ID:{{item.id}}</span>
+                <span style="margin-left: 20px">商品名称:{{item.name}}</span>
+              </div>
+              <el-table
+                border
+                ref="multipleTable"
+                :data="item.productSpecificationList"
+                tooltip-effect="dark"
+                style="width: 100%"
+                @selection-change="handleSelectionChange"
+              >
+                <el-table-column align="center" label="是否预售" width="80">
+                  <template slot-scope="scope">
+                    <el-checkbox v-model="scope.row.isShow"></el-checkbox>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="SKU-ID" prop="id" />
+                <el-table-column align="center" label="规格" prop="attributeList">
+                  <template slot-scope="scope">
+                    <span>{{scope.row.attributeList}}:{{scope.row.attributeValue}}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="属性" prop="address" />
+                <el-table-column
+                  align="center"
+                  label="销售价"
+                  prop="address"
+                  width="120"
+                />
+                <el-table-column align="center" label="*是否预售" width="200">
+                  <template slot="header">
+                    <span style="color: red">*是否预售</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.isShow"
+                      v-model="scope.row.presalePrice"
+                      placeholder="请输入销售价"
+                    ></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="*定金" width="200">
+                  <template slot="header">
+                    <span style="color: red">*定金</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.isShow"
+                      v-model="scope.row.presalePrice"
+                      placeholder="请输入订金"
+                    ></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="尾款" width="200">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.isShow">{{
+                      scope.row.presalePrice
+                    }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="*预售库存" width="200">
+                  <template slot="header">
+                    <span style="color: red">*预售库存</span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-input
+                      v-if="scope.row.isShow"
+                      v-model="scope.row.presalePrice"
+                      placeholder="请输入预售库存"
+                    ></el-input>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          <el-empty v-show="ruleForm.productList.length == 0" description="请选择商品"></el-empty>
         </div>
       </div>
+      <!-- 选择商品 -->
     </obj-modal>
+    <commodity @getProduct="getProduct" ref="commodity"></commodity>
   </div>
 </template>
 <script>
+import commodity from "./commodity.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
-  components: {},
+  components: { commodity },
+  props: {
+    marketId: {
+      type: String,
+      default: "",
+    },
+    shopId: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       isAdd: true,
@@ -164,6 +186,7 @@ export default {
         name: "",
         value: "1",
         radio: "1",
+        productList: [],
       },
       orderTime: [], //订单支付时间
       arrears: [], //尾款时间
@@ -239,11 +262,23 @@ export default {
       }
     },
     selectProduct() {
-      console.log("选择商品");
+      console.log("选择商品", this.marketId, this.shopId);
+      this.$nextTick(() => {
+        this.$refs.commodity.toggle().add({
+          marketId: this.marketId,
+          shopId: this.shopId,
+        });
+      });
     },
     handleSelectionChange(e) {
       console.log(e);
     },
+    getProduct(row) {
+      this.ruleForm.productList = row;
+      console.log(this.ruleForm.productList, this.ruleForm.productList.length);
+
+      console.log("获取商品");
+    },
   },
   computed: {
     modalHandles() {
diff --git a/src/views/modules/presale/products/popup/commodity.vue b/src/views/modules/presale/products/popup/commodity.vue
index 8a9d37b..616787f 100644
--- a/src/views/modules/presale/products/popup/commodity.vue
+++ b/src/views/modules/presale/products/popup/commodity.vue
@@ -17,39 +17,21 @@
         :tableEvent="tableEvent"
         :enableAutoQuery="false"
       >
-        <!-- <template slot="tableTop">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item v-if="marketList.length > 0" label="菜市场">
-            <el-select
-              @change="getData"
-              v-model="formInline.marketId"
-              placeholder="请选择菜市场"
-            >
-              <el-option
-                v-for="item in marketList"
-                :key="item.marketId"
-                :label="item.marketName"
-                :value="item.marketId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="marketList.length > 0" label="店铺">
-            <el-select v-model="formInline.shopId" placeholder="请选择店铺">
-              <el-option
-                v-for="item in storeList"
-                :key="item.shopId"
-                :label="item.shopName"
-                :value="item.shopId"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="$refs.oTable.reload()"
-              >查询</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </template> -->
+        <template slot="tableTop">
+          <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="商品搜索">
+              <el-input
+                v-model="formList.name"
+                placeholder="商品搜索"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="$refs.oTable.reload()"
+                >查询</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </template>
       </obj-table-plus>
     </template>
   </obj-modal>
@@ -63,7 +45,7 @@ export default {
       isAdd: true,
       //表格属性
       modalConfig: {
-        title: "请点击选择商品",
+        title: "请点击选择商品 (提示：最多选择5个商品)",
         show: false,
         width: "1000px",
       },
@@ -76,14 +58,11 @@ export default {
         "row-id": "id",
         "show-overflow": false,
       },
-      selectList: {},
-      tableEvent: {
-        "current-change": async (e) => {
-          console.log(e.row);
-          this.selectList = e.row;
-        },
-      },
+      selectList: [],
       formInline: {},
+      formList: {
+        name: "",
+      },
     };
   },
   methods: {
@@ -121,6 +100,7 @@ export default {
       }
       return {
         add: (row) => {
+          console.log(row);
           this.formInline = row;
           this.isAdd = true;
           this.$nextTick(() => {
@@ -137,7 +117,7 @@ export default {
   computed: {
     tableCols() {
       return [
-        { type: "seq", width: "60px", align: "center", title: "序号" },
+        { type: "checkbox", width: "60px", fixed: "left" },
         {
           title: "商品图",
           field: "productPhotoList",
@@ -222,6 +202,17 @@ export default {
         },
       ];
     },
+    tableEvent() {
+      return {
+        "checkbox-all": ({ records, reserves }) => {
+          this.selectList = [...records, ...reserves];
+        },
+        "checkbox-change": ({ records, reserves }) => {
+          console.log(this.selectList, "2");
+          this.selectList = [...records, ...reserves];
+        },
+      };
+    },
   },
 };
 </script>