Merge branch 'master' of https://gitee.com/objstudio/merchant-backend

src/views/modules/product/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-        <obj-table-plus ref="oTable" :tableCols="tableCols" @query="queryList" v-model="dataList">
+    <obj-table-plus
+      ref="oTable"
+      :tableCols="tableCols"
+      @query="queryList"
+      v-model="dataList"
+    >
       <template slot="tableTop">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="平台分类">
@@ -16,11 +21,16 @@
             </el-select>
           </el-form-item>
           <el-form-item label="商品搜索">
-                        <el-input v-model="formInline.user" placeholder="商品搜索"></el-input>
+            <el-input
+              v-model="formInline.user"
+              placeholder="商品搜索"
+            ></el-input>
           </el-form-item>
 
           <el-form-item>
-                        <el-button type="primary" @click="$refs.oTable.reload()">查询</el-button>
+            <el-button type="primary" @click="$refs.oTable.reload()"
+              >查询</el-button
+            >
           </el-form-item>
         </el-form>
         <el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()">
@@ -30,7 +40,9 @@
           <el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
         </el-tabs>
         <div class="mb-2">
-                    <el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
+          <el-button type="primary" size="small" @click="addProduct"
+            >添加商品</el-button
+          >
         </div>
       </template>
     </obj-table-plus>
@@ -39,71 +51,74 @@
 </template>
 
 <script>
-import AddOrUpdate from "./popup/add-or-update.vue"
+import AddOrUpdate from "./popup/add-or-update.vue";
 export default {
-    components:{AddOrUpdate},
+  components: { AddOrUpdate },
   data() {
     return {
       activeName: "出售中",
       dataList: [],
       formInline: {
-                user: '',
+        user: "",
-                region: ''
+        region: "",
-            }
+      },
-        }
+    };
   },
   methods: {
-        addProduct(){
+    addProduct() {
-            this.$refs.addOrUpdate.toggle().add()
+      this.$refs.addOrUpdate.toggle().add();
     },
     queryList(pageNo, pageSize) {
-            this.$api.mer_admin.getProductPage({
+      this.$api.mer_admin
+        .getProductPage({
           p: {
             pageNumber: pageNo,
-                    pageSize: pageSize
+            pageSize: pageSize,
-                }
+          },
         })
-                .then(res => {
+        .then((res) => {
           console.log(res);
-                    this.$refs.oTable.complete(res.data.data.data, Number(res.data.data.total));
+          this.$refs.oTable.complete(
-
+            res.data.data.data,
+            Number(res.data.data.total)
+          );
         })
-                .catch(err => {
+        .catch((err) => {
           this.$refs.oTable.complete(false);
-                })
+        });
-        }
+    },
   },
   computed: {
     tableCols() {
       return [
         {
-                    title: "ID"
+          title: "ID",
         },
         {
           title: "商品图",
         },
         {
-                    title: "商品名称"
+          title: "商品名称",
         },
         {
-                    title: "商品售价"
+          title: "商品售价",
         },
         {
-                    title: "销量"
+          title: "销量",
         },
         {
-                    title: "库存"
+          title: "库存",
         },
         {
-                    title: "状态"
+          title: "状态",
         },
         {
-                    title: "操作"
+          title: "操作",
-                }
-            ]
-        }
         },
-}
+      ];
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/modules/product/popup/add-attribute.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <el-alert class="Example" title="需要注意的事项" type="info">
+          <template slot="title">
+            <el-form label-width="80px">
+              <el-form-item label="示例：">
+                <div class="iconSize">属性名称：温度</div>
+                <div class="iconSize">属性内容：常温；冷饮</div>
+                <div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-alert>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="属性名称：" prop="name">
+            <el-input
+              style="width: 80%"
+              placeholder="请输入属性名称"
+              v-model="ruleForm.name"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="属性内容：" prop="value">
+            <el-tag
+              :key="tag"
+              v-for="tag in ruleForm.value"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="inputVisible"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+              @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-button
+              v-else
+              class="button-new-tag"
+              size="small"
+              @click="showInput"
+              >+添加内容</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "属性",
+        show: false,
+        width: "80%",
+      },
+      modalData: {},
+      inputValue: "",
+      inputVisible: false,
+      ruleForm: {
+        name: "",
+        value: [],
+      },
+      rules: {
+        name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
+        value: [
+          {
+            required: true,
+            message: "请输入属性内容",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "添加属性";
+          this.$nextTick(() => {
+            this.modalData = {};
+            this.$refs.ruleForm.resetFields();
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+    },
+    handleClose(tag) {
+      this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
+    },
+    //聚焦
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.ruleForm.value.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          loading: this.isLoading,
+          // submit: true,
+          handle: () => {
+            this.$refs.ruleForm.validate((valid) => {
+              if (valid) {
+                this.$emit("getAttribute", this.ruleForm);
+                this.toggle();
+              }
+            });
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.Example {
+  margin: 0 0 20px 20px;
+  width: 80%;
+}
+.iconSize {
+  font-size: 15px;
+  //   padding: 3px;
+}
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>

src/views/modules/product/popup/add-or-update.vue

@@ -1,6 +1,14 @@
 <template>
-    <obj-modal class="obj-modal" ref="modal" labelWidth="100px" :modalCols="modalCols" :modalConfig="modalConfig"
+  <div>
-        :modalData="modalData" :modalHandles="modalHandles">
+    <obj-modal
+      class="obj-modal"
+      ref="modal"
+      labelWidth="100px"
+      :modalCols="modalCols"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
       <template slot="dialog__before">
         <el-tabs v-model="currentPanel">
           <el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
@@ -9,42 +17,56 @@
         </el-tabs>
       </template>
     </obj-modal>
+    <!-- 添加规格 -->
+    <addSpecifications
+      @getSpecs="getSpecs"
+      ref="addSpecifications"
+    ></addSpecifications>
+    <!-- 属性 -->
+    <addAttribute
+      @getAttribute="getAttribute"
+      ref="addAttribute"
+    ></addAttribute>
+  </div>
 </template>
 <script>
+import addAttribute from "./add-attribute.vue";
+import addSpecifications from "./add-specifications.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
+  components: { addSpecifications, addAttribute },
   data() {
     return {
-            currentPanel: '基础信息',
+      currentPanel: "基础信息",
       modalData: {
-                "merchantId": null,
+        merchantId: null,
-                "shopId": null,
+        shopId: null,
-                "id": null,
+        id: null,
-                "name": "",
+        name: "",
-                "productCategoryId": "",
+        productCategoryId: "",
-                "productPhotoList": [
+        productPhotoList: [
           // {
           //     "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
           //     "isMain": 1
           // }
         ],
-                "description": "",
+        description: "",
-                "productUnit": "",
+        productUnit: "",
-                "productPlace": "",
+        productPlace: "",
         //保质期
-                "shelfLife": "",
+        shelfLife: "",
         //产品介绍图
-                "productIntroducePhoto": "",
+        productIntroducePhoto: "",
         //产品介绍视频
-                "productVideo": "",
+        productVideo: "",
         //单价
-                "singlePrice": "",
+        singlePrice: "",
         //单库存
-                "singleStock": "",
+        singleStock: "",
         //其他属性
-                "otherAttribute": "[{\"name\":\"颜色\",\"value\":\"黄色；屎黄色\"}]",
+        otherAttribute: '[{"name":"颜色","value":"黄色；屎黄色"}]',
         //折扣情况
-                "discountActivity": {
+        discountActivity: {
           // "endTime": "2024-08-31 00:00:00",
           // "id": "1821213180710957056",
           // "merchantId": "1818337963053297664",
@@ -57,32 +79,32 @@ export default {
           // "type": 0
         },
         //是否折扣
-                "isDiscount": 1,
+        isDiscount: 1,
-                "marketId": null,
+        marketId: null,
         //最大消费
-                "maxCostPrice": 15,
+        maxCostPrice: 15,
         //市场最大消费
-                "maxMarketPrice": 35,
+        maxMarketPrice: 35,
         //最大售价
-                "maxSalePrice": 17.5,
+        maxSalePrice: 17.5,
         //最低售价
-                "minCostPrice": 10,
+        minCostPrice: 10,
         //市场最低售价
-                "minMarketPrice": 20,
+        minMarketPrice: 20,
-                "minSalePrice": 10,
+        minSalePrice: 10,
-                "salePrice": 20,
+        salePrice: 20,
-                "sort": 999,
+        sort: 999,
-                "status": "DOWN",
+        status: "DOWN", //up 上架 //DOWN 放入仓库
-                "stockNum": 200,
+        stockNum: 200,
-                "specType": 1,
+        specType: 1,
-                "productAttributeList": [
+        productAttributeList: [
           // {
           //     "id": "1821213026050191360",
           //     "attributeName": "重量",
           //     "attributeValue": "1斤,2斤"
           // }
         ],
-                "productSpecificationList": [
+        productSpecificationList: [
           // {
           //     "attributeValue": "重量1斤",
           //     "costPrice": 10,
@@ -115,7 +137,7 @@ export default {
           //     "_id": "重量2斤",
           //     "value": "售价￥17.5 成本￥15 库存100"
           // }
-                ]
+        ],
       },
       modalConfig: {
         title: "编辑商品",
@@ -123,9 +145,11 @@ export default {
         width: "1300px",
         fullscreen: true,
       },
+      fileList: [], //回显图片
+      place: "", //场地
     };
   },
-    mounted() { },
+  mounted() {},
   methods: {
     toggle(e) {
       if (this.modalConfig.show == false) {
@@ -140,6 +164,36 @@ export default {
       return {
         add: (item) => {
           console.log(item);
+          this.$nextTick(() => {
+            this.modalData = {
+              description: "",
+              merchantId: "",
+              name: "",
+              otherAttribute: "",
+              productAttributeList: [],
+              productCategoryId: "",
+              productIntroducePhoto: "",
+              productPhotoList: [],
+              productPlace: "",
+              productSpecificationList: [],
+              productUnit: "",
+              productVideo: "",
+              shelfLife: "",
+              shopId: "",
+              singlePrice: "",
+              singleStock: "",
+              specType: "",
+              status: "UP",
+            };
+            this.modalData.merchantId = JSON.parse(
+              sessionStorage.getItem("userInfo")
+            ).merchantId;
+            this.modalData.shopId = JSON.parse(
+              sessionStorage.getItem("userInfo")
+            ).shopId;
+          });
+          console.log(this.modalData);
+
           this.isAdd = true;
         },
         update: (row) => {
@@ -148,7 +202,39 @@ export default {
         },
       };
     },
-        init(row) { },
+    init(row) {},
+    addSpecs() {
+      console.log("123");
+      this.$refs.addSpecifications.toggle().add();
+    },
+    //获取属性
+    getSpecs(tableData, AttributeData, salePrice, stockNum) {
+      let AttributeList = AttributeData.map((item) => {
+        return {
+          attributeName: item.attributeName,
+          attributeValue: item.attributeValue.join(","),
+        };
+      });
+      console.log(AttributeList);
+
+      this.$set(this.modalData, "productSpecificationList", tableData);
+      this.$set(this.modalData, "productAttributeList", AttributeList);
+      this.$set(this.modalData, "singlePrice", salePrice);
+      this.$set(this.modalData, "singleStock", stockNum);
+    },
+    addAttribute() {
+      this.$refs.addAttribute.toggle().add();
+    },
+    getAttribute(data) {
+      console.log(data);
+      this.modalData.otherAttribute = [
+        {
+          name: data.name,
+          value: data.value.join(","),
+        },
+      ];
+      console.log(this.modalData);
+    },
   },
   computed: {
     modalCols() {
@@ -159,66 +245,142 @@ export default {
               label: "商品图片",
               prop: "productPhotoList",
               required: true,
-                            rules: { required: true, message: '请上传商品图片', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请上传商品图片",
+                trigger: "blur",
+              },
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
-                                    console.log(fileList);
+                  // console.log(fileList);
-
+                };
+                const handleAvatarSuccess = (res, file, fileList) => {
+                  console.log(res, fileList);
+                  this.modalData.productPhotoList = fileList.map(
+                    (item, index) => {
+                      if (index == 0) {
+                        return {
+                          isMain: 1,
+                          url: item.response.data,
+                        };
+                      } else {
+                        return {
+                          url: item.response.data,
+                        };
                       }
-                                return <el-upload
+                    }
+                  );
+                  console.log(this.modalData.productPhotoList);
+                };
+                const handleRemove = (file, fileList) => {
+                  console.log(file, fileList);
+                  this.modalData.productPhotoList = fileList.map(
+                    (item, index) => {
+                      if (index == 0) {
+                        return {
+                          isMain: 1,
+                          url: item.response.data,
+                        };
+                      } else {
+                        return {
+                          url: item.response.data,
+                        };
+                      }
+                    }
+                  );
+                  console.log(this.modalData.productPhotoList);
+                };
+                return (
+                  <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
                     {...{
                       props: {
                         "on-change": handleChange,
+                        "on-success": handleAvatarSuccess,
+                        "on-remove": handleRemove,
                       },
                     }}
                     headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
+                      token: "Bearer " + this.$cookie.get("token"),
                     }}
                     multiple={true}
+                    file-list={this.fileList}
                   >
                     <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__text">
-                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                      将文件拖到此处，或<em>点击上传</em>
+                    </div>
+                    <div class="el-upload__tip" slot="tip">
+                      只能上传jpg/png文件，且不超过500kb
+                    </div>
                   </el-upload>
-                            }
+                );
+              },
             },
             {
               label: "商品类目",
               prop: "productCategoryId",
               type: "jsx",
               required: true,
-                            rules: { required: true, message: '请选择商品类目', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请选择商品类目",
+                trigger: "blur",
+              },
               render: () => {
-                                return <el-select placeholder="请选择商品类目" v-model={this.modalData.productCategoryId}>
+                return (
-                                    {this.getProductCategory.map(item => {
+                  <el-select
-                                        return <el-option label={item.name} value={item.id}></el-option>
+                    placeholder="请选择商品类目"
+                    v-model={this.modalData.productCategoryId}
+                  >
+                    {this.getProductCategory.map((item) => {
+                      return (
+                        <el-option
+                          label={item.name}
+                          value={item.id}
+                        ></el-option>
+                      );
                     })}
                   </el-select>
-                            }
+                );
+              },
             },
             {
               label: "商品名称",
               prop: "name",
               type: "Input",
               required: true,
-                            rules: { required: true, message: '请输入商品名称', trigger: 'blur' },
+              rules: {
-                            placeholder: "请输入商品名称"
+                required: true,
+                message: "请输入商品名称",
+                trigger: "blur",
+              },
+              placeholder: "请输入商品名称",
             },
             {
               label: "商品描述",
               prop: "description",
               required: true,
-                            rules: { required: true, message: '请填写商品描述', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请填写商品描述",
+                trigger: "blur",
+              },
               type: "jsx",
               render: () => {
-                                return <el-input type="textarea" v-model={this.modalData.description} placeholder="请简单描述，如别称、口感、用途等" />
+                return (
-                            }
+                  <el-input
+                    type="textarea"
+                    v-model={this.modalData.description}
+                    placeholder="请简单描述，如别称、口感、用途等"
+                  />
+                );
               },
-                    ]
+            },
+          ];
           break;
         case "销售信息":
           return [
@@ -226,51 +388,87 @@ export default {
               label: "销售单位",
               prop: "productUnit",
               required: true,
-                            rules: { required: true, message: '请选择销售单位', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请选择销售单位",
+                trigger: "blur",
+              },
               type: "jsx",
               render: () => {
-                                return <el-select v-model={this.modalData.productUnit} placeholder="请选择销售单位">
+                return (
-                                    {
+                  <el-select
-                                        this.getSaleUnit.map(item => {
+                    v-model={this.modalData.productUnit}
-                                            return <el-option label={item.name} value={item.id}></el-option>
+                    placeholder="请选择销售单位"
-                                        })
+                  >
-                                    }
+                    {this.getSaleUnit.map((item) => {
+                      return (
+                        <el-option
+                          label={item.name}
+                          value={item.id}
+                        ></el-option>
+                      );
+                    })}
                   </el-select>
-                            }
+                );
+              },
             },
             {
               label: "规格",
               prop: "productSpecificationList",
               type: "jsx",
               render: () => {
-
+                return (
-                            }
+                  <el-button onClick={this.addSpecs}>
+                    若有多规格请在此配置
+                  </el-button>
+                );
+              },
             },
             {
               label: "价格",
               prop: "singlePrice",
               type: "jsx",
               render: () => {
-                                return <el-input placeholder="请输入价格" v-model={this.modalData.singlePrice}></el-input>
+                return (
+                  <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
                     }
+                    placeholder="请输入价格"
+                    v-model={this.modalData.singlePrice}
+                  ></el-input>
+                );
+              },
             },
             {
               label: "库存",
               prop: "singleStock",
               type: "jsx",
               render: () => {
-                                return <el-input placeholder="请输入库存" v-model={this.modalData.singleStock}></el-input>
+                return (
+                  <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
                     }
+                    placeholder="请输入库存"
+                    v-model={this.modalData.singleStock}
+                  ></el-input>
+                );
+              },
             },
             {
               label: "其他属性",
               prop: "productAttributeList",
               type: "jsx",
               render: () => {
-                                return <el-button>添加其他属性</el-button>
+                return (
-                            }
+                  <el-button onClick={this.addAttribute}>
+                    添加其他属性
+                  </el-button>
+                );
               },
-                    ]
+            },
+          ];
           break;
         case "其他信息":
           return [
@@ -278,116 +476,174 @@ export default {
               label: "产地",
               prop: "productPlace",
               required: true,
-                            rules: { required: true, message: '请选择产地', trigger: 'blur' },
+              rules: { required: true, message: "请选择产地", trigger: "blur" },
               type: "jsx",
               render: () => {
                 const change = (e) => {
-                                    console.log(e)
+                  console.log(e);
-                                }
+                  this.modalData.productPlace = e.join("-");
-                                return <el-cascader
+                  console.log(aa);
-                                    v-model={this.modalData.productPlace}
+                };
+                return (
+                  <el-cascader
+                    v-model={this.place}
                     onChange={change}
                     options={this.$api.mer_admin.getCityOptions()}
-                                    {
+                    {...{
-                                    ...{
                       props: {
-                                            checkStrictly: true
+                        checkStrictly: true,
-                                        }
+                      },
-                                    }
+                    }}
-                                    }
+                    clearable
-                                    clearable></el-cascader>
+                  ></el-cascader>
-                            }
+                );
+              },
             },
             {
               label: "保质期",
               prop: "shelfLife",
               type: "jsx",
               // required: true,
-                            rules: { required: true, message: '请填写保质期', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请填写保质期",
+                trigger: "blur",
+              },
               render: () => {
-                                return <el-input style="width:150px;" placeholder="请填写保质期" v-model={this.modalData.shelfLife}>
+                return (
+                  <el-input
+                    style="width:150px;"
+                    placeholder="请填写保质期"
+                    v-model={this.modalData.shelfLife}
+                  >
                     <div slot="suffix">天</div>
                   </el-input>
-                            }
+                );
+              },
             },
             {
               label: "商品介绍图",
               prop: "productIntroducePhoto",
               type: "Input",
               required: true,
-                            rules: { required: true, message: '商品介绍图', trigger: 'blur' },
+              rules: { required: true, message: "商品介绍图", trigger: "blur" },
               placeholder: "商品介绍图",
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
-                                    console.log(fileList);
+                  // console.log(fileList);
-
+                };
-                                }
+                const handleAvatarSuccess = (res) => {
-                                return <el-upload
+                  this.modalData.productIntroducePhoto = res.data;
+                  console.log(this.modalData.productIntroducePhoto);
+                };
+                const handleRemove = () => {
+                  this.modalData.productIntroducePhoto = "";
+                  console.log(this.modalData.productIntroducePhoto);
+                };
+                return (
+                  <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
+                    limit={1}
                     {...{
                       props: {
                         "on-change": handleChange,
+                        "on-success": handleAvatarSuccess,
+                        "on-remove": handleRemove,
                       },
                     }}
                     headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
+                      token: "Bearer " + this.$cookie.get("token"),
                     }}
-                                    multiple>
+                    multiple
+                  >
                     <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__text">
-                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                      将文件拖到此处，或<em>点击上传</em>
+                    </div>
+                    <div class="el-upload__tip" slot="tip">
+                      只能上传jpg/png文件，且不超过500kb
+                    </div>
                   </el-upload>
-                            }
+                );
+              },
             },
             {
               label: "商品视频",
               prop: "productVideo",
               required: true,
-                            rules: { required: true, message: '请填写商品描述', trigger: 'blur' },
+              rules: {
+                required: true,
+                message: "请填写商品描述",
+                trigger: "blur",
+              },
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
                   console.log(fileList);
-
+                };
-                                }
+                const handleAvatarSuccess = (res) => {
-                                return <el-upload
+                  this.modalData.productVideo = res.data;
+                };
+                const handleRemove = () => {
+                  this.modalData.productVideo = "";
+                };
+                return (
+                  <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
+                    limit={1}
                     {...{
                       props: {
                         "on-change": handleChange,
+                        "on-success": handleAvatarSuccess,
+                        "on-remove": handleRemove,
                       },
                     }}
                     headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
+                      token: "Bearer " + this.$cookie.get("token"),
                     }}
-                                    multiple>
+                    multiple
+                  >
                     <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    <div class="el-upload__text">
-                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+                      将文件拖到此处，或<em>点击上传</em>
+                    </div>
+                    <div class="el-upload__tip" slot="tip">
+                      只能上传jpg/png文件，且不超过500kb
+                    </div>
                   </el-upload>
-                            }
+                );
               },
-                    ]
+            },
+          ];
           break;
 
         default:
           break;
       }
-
     },
     modalHandles() {
       return [
         {
-                    label: "确定",
+          label: this.currentPanel === "其他信息" ? "确定" : "下一步",
           type: "primary",
           loading: this.isLoading,
-                    // submit: true,
+          submit: true,
           handle: debounce(() => {
+            if (this.currentPanel === "基础信息") {
+              this.currentPanel = "销售信息";
+            } else if (this.currentPanel == "销售信息") {
+              this.currentPanel = "其他信息";
+            } else {
+              console.log("请求接口", this.modalData);
+              this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
+                console.log(res);
+              });
+            }
           }, 300),
         },
       ];
@@ -397,14 +653,15 @@ export default {
     async getProductCategory() {
       let res = await this.$api.mer_admin.getProductCategory();
       return res.data.data;
-
     },
     async getSaleUnit() {
-            let res = await this.$api.mer_admin.getSaleUnit({ shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId });
+      let res = await this.$api.mer_admin.getSaleUnit({
+        shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
+      });
       console.log(res);
 
       return res.data.data;
-        }
+    },
   },
 };
 </script>

src/views/modules/product/popup/add-specifications.vue

@@ -0,0 +1,396 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <div v-for="(item, index) in AttributeData" :key="index">
+          <el-row>
+            <el-input
+              style="width: 80%; margin: 0 20px 0 0"
+              placeholder="请输入属性"
+              v-model="item.attributeName"
+              clearable
+            >
+            </el-input>
+            <el-button
+              @click="deleteAttribute(index)"
+              type="danger"
+              icon="el-icon-delete"
+              circle
+            ></el-button>
+          </el-row>
+
+          <el-row>
+            <el-tag
+              :key="tag"
+              v-for="tag in item.attributeValue"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(index, tag)"
+            >
+              {{ tag }}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="item.inputVisible"
+              v-model="inputValue"
+              :ref="`saveTagInput${index}`"
+              size="small"
+              @keyup.enter.native="handleInputConfirm(index)"
+              @blur="handleInputConfirm(index)"
+            >
+            </el-input>
+            <el-button
+              v-else
+              class="button-new-tag"
+              size="small"
+              @click="showInput(index)"
+              >+新增规格</el-button
+            ></el-row
+          >
+        </div>
+        <el-row type="flex" justify="center">
+          <el-button @click="addAttribute" type="text"
+            >+添加其他属性</el-button
+          ></el-row
+        >
+        <obj-table-plus
+          slot="dialog__after"
+          style="height: 50vh"
+          ref="oTable"
+          @query="queryTableData"
+          v-model="tableData"
+          :tableCols="tableCols"
+          :tableProp="tableProp"
+          :toolbarProp="toolbarProp"
+          :tableEvent="tableEvent"
+          :enableAutoQuery="false"
+        >
+          <!-- <div slot="tableTop" class="mb-2">
+            <el-button type="primary" size="mini" @click="calculation"
+              >计算属性</el-button
+            >
+          </div> -->
+        </obj-table-plus>
+      </div>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //监控对象数据
+      tableData: [],
+      //表格属性
+      //表格属性
+      tableProp: {
+        height: "auto",
+        border: true,
+        "auto-resize": false,
+        "print-config": {},
+        "row-config": { isCurrent: true, isHover: true },
+        "highlight-hover-row": true,
+        "highlight-current-row": true,
+      },
+      toolbarProp: {},
+      tableEvent: {},
+      modalConfig: {
+        title: "属性",
+        show: false,
+        width: "80%",
+      },
+      modalData: {},
+      AttributeData: [
+        {
+          attributeName: "",
+          attributeValue: [],
+          inputVisible: false,
+        },
+      ], //
+      input: "",
+      dynamicTags: [],
+      inputValue: "",
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "属性";
+          this.$nextTick(() => {
+            this.modalData = {};
+            this.$refs.modal.resetFields();
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      this.modalData = row;
+    },
+    handleClose(index, tag) {
+      this.AttributeData[index].attributeValue.splice(
+        this.AttributeData[index].attributeValue.indexOf(tag),
+        1
+      );
+    },
+    //聚焦
+    showInput(index) {
+      console.log(index);
+
+      this.AttributeData[index].inputVisible = true;
+      this.$nextTick(() => {
+        console.log(this.$refs[`saveTagInput${index}`]);
+        this.$refs[`saveTagInput${index}`][0].focus();
+      });
+    },
+    handleInputConfirm(index) {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.AttributeData[index].attributeValue.push(inputValue);
+      }
+      this.AttributeData[index].inputVisible = false;
+      this.inputValue = "";
+      this.calculation();
+    },
+    //添加属性
+    addAttribute() {
+      this.AttributeData.push({
+        attributeName: "",
+        attributeValue: [],
+        inputVisible: false,
+      });
+      console.log(this.AttributeData);
+    },
+    //删除属性
+    deleteAttribute(index) {
+      this.AttributeData.splice(index, 1);
+      this.calculation();
+    },
+    //计算属性
+    calculation() {
+      let data = [];
+      let list = [];
+      for (let i = 0; i < this.AttributeData.length; i++) {
+        if (i == 0) {
+          data = this.AttributeData[i].attributeValue.map((item) => {
+            return this.AttributeData[i].attributeName + item;
+          });
+        } else {
+          data.forEach((it) => {
+            this.AttributeData[i].attributeValue.forEach((e) => {
+              let name = this.AttributeData[i].attributeName;
+              list.push(it + "/" + name + e);
+            });
+          });
+          data = list;
+          list = [];
+        }
+      }
+      this.tableData = data.map((item) => {
+        return {
+          attributeValue: item,
+          salePrice: "",
+          costPrice: "",
+          stockNum: "",
+        };
+      });
+      console.log(data);
+    },
+  },
+  computed: {
+    tableCols() {
+      return [
+        { title: "序号", type: "seq", width: "60px", fixed: "left" },
+        {
+          title: "属性",
+          field: "attributeValue",
+          align: "center",
+          "min-width": "160px",
+        },
+        {
+          title: "价格",
+          field: "salePrice",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.salePrice}
+                  placeholder="请输入价格"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "成本",
+          field: "costPrice",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.costPrice}
+                  placeholder="请输入成本"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "库存",
+          field: "stockNum",
+          align: "center",
+          "min-width": "160px",
+          type: "jsx",
+          render: ({ row }) => {
+            return (
+              <div>
+                <el-input-number
+                  min={0}
+                  size="small"
+                  v-model={row.stockNum}
+                  placeholder="请输入库存"
+                ></el-input-number>
+              </div>
+            );
+          },
+        },
+        {
+          title: "操作",
+          fixed: "right",
+          width: "150px",
+          type: "jsx",
+          align: "center",
+          render: (row) => {
+            let remove = () => {
+              this.tableData.splice(row.$rowIndex, 1);
+            };
+            return (
+              <el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
+                <el-button type="danger" size="mini" slot="reference">
+                  删除
+                </el-button>
+              </el-popconfirm>
+            );
+          },
+        },
+      ];
+    },
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          loading: this.isLoading,
+          // submit: true,
+          handle: () => {
+            let salePrice = ""; //价格范围
+            let stockNum = ""; //库存范围
+            let minSalePrice = Math.min.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.salePrice;
+              })
+            );
+            let maxSalePrice = Math.max.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.salePrice;
+              })
+            );
+            let minStockNum = Math.min.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.stockNum;
+              })
+            );
+            let maxStockNum = Math.max.apply(
+              Math,
+              this.tableData.map((item) => {
+                return item.stockNum;
+              })
+            );
+            if (minSalePrice == maxSalePrice) {
+              salePrice = maxSalePrice;
+            } else {
+              salePrice = minSalePrice + "~" + maxSalePrice;
+            }
+            if (minStockNum == maxStockNum) {
+              stockNum = maxStockNum;
+            } else {
+              stockNum = minStockNum + "~" + maxStockNum;
+            }
+
+            this.$emit(
+              "getSpecs",
+              this.tableData,
+              this.AttributeData,
+              salePrice,
+              stockNum
+            );
+            this.toggle();
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 10px;
+}
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>