预售

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>

src/views/modules/presale/products/popup/add-or-update.vue

@@ -68,15 +68,19 @@
           已选择商品
         </div>
         <div style="padding: 20px">
-          <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
+            <div
+              v-for="item in ruleForm.productList"
+              :key="item.id"
+              style="border-top: 1px solid #ccc; padding: 10px 0 0 0"
+            >
               <div style="font-size: 16px; margin-bottom: 20px">
-              <span>商品ID:</span>
+                <span>商品ID:{{item.id}}</span>
-              <span style="margin-left: 20px">商品名称:</span>
+                <span style="margin-left: 20px">商品名称:{{item.name}}</span>
               </div>
               <el-table
                 border
                 ref="multipleTable"
-              :data="tableData"
+                :data="item.productSpecificationList"
                 tooltip-effect="dark"
                 style="width: 100%"
                 @selection-change="handleSelectionChange"
@@ -86,8 +90,12 @@
                     <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="SKU-ID" prop="id" />
-              <el-table-column align="center" label="规格" prop="name" />
+                <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"
@@ -140,15 +148,29 @@
                 </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() {

src/views/modules/presale/products/popup/commodity.vue

@@ -17,31 +17,13 @@
         :tableEvent="tableEvent"
         :enableAutoQuery="false"
       >
-        <!-- <template slot="tableTop">
+        <template slot="tableTop">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item v-if="marketList.length > 0" label="菜市场">
+            <el-form-item label="商品搜索">
-            <el-select
+              <el-input
-              @change="getData"
+                v-model="formList.name"
-              v-model="formInline.marketId"
+                placeholder="商品搜索"
-              placeholder="请选择菜市场"
+              ></el-input>
-            >
-              <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()"
@@ -49,7 +31,7 @@
               >
             </el-form-item>
           </el-form>
-      </template> -->
+        </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: {},
+      selectList: [],
-      tableEvent: {
-        "current-change": async (e) => {
-          console.log(e.row);
-          this.selectList = e.row;
-        },
-      },
       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>