添加商品

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,7 +51,7 @@
 </template>
 
 <script>
-import AddOrUpdate from "./popup/add-or-update.vue"
+import AddOrUpdate from "./popup/add-or-update.vue";
 export default {
   components: { AddOrUpdate },
   data() {
@@ -47,63 +59,66 @@ export default {
       activeName: "出售中",
       dataList: [],
       formInline: {
-                user: '',
+        user: "",
-                region: ''
+        region: "",
-            }
+      },
-        }
+    };
   },
   methods: {
     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-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,46 @@
         </el-tabs>
       </template>
     </obj-modal>
+    <addSpecifications ref="addSpecifications"></addSpecifications>
+  </div>
 </template>
 <script>
+import addSpecifications from "./add-specifications.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
+  components: { addSpecifications },
   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 +69,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",
-                "stockNum": 200,
+        stockNum: 200,
-                "specType": 1,
+        specType: 1,
-                "productAttributeList": [
+        productAttributeList: [
           // {
           //     "id": "1821213026050191360",
           //     "attributeName": "重量",
           //     "attributeValue": "1斤,2斤"
           // }
         ],
-                "productSpecificationList": [
+        productSpecificationList: [
           // {
           //     "attributeValue": "重量1斤",
           //     "costPrice": 10,
@@ -115,7 +127,7 @@ export default {
           //     "_id": "重量2斤",
           //     "value": "售价￥17.5 成本￥15 库存100"
           // }
-                ]
+        ],
       },
       modalConfig: {
         title: "编辑商品",
@@ -123,6 +135,7 @@ export default {
         width: "1300px",
         fullscreen: true,
       },
+      fileList: [], //回显图片
     };
   },
   mounted() {},
@@ -149,6 +162,10 @@ export default {
       };
     },
     init(row) {},
+    addSpecs() {
+      console.log("123");
+      this.$refs.addSpecifications.toggle().add();
+    },
   },
   computed: {
     modalCols() {
@@ -159,66 +176,118 @@ 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) => {
-                                return <el-upload
+                  console.log(res);
+                  this.modalData.productPhotoList.push(res);
+                  console.log(this.modalData.productPhotoList);
+                };
+                const handleRemove = (file, fileList) => {
+                  console.log(file, fileList);
+                  this.modalData.productPhotoList = fileList.map((item) => {
+                    return item.response;
+                  });
+                  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 +295,77 @@ 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
+                    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
+                    placeholder="请输入库存"
+                    v-model={this.modalData.singleStock}
+                  ></el-input>
+                );
+              },
             },
             {
               label: "其他属性",
               prop: "productAttributeList",
               type: "jsx",
               render: () => {
-                                return <el-button>添加其他属性</el-button>
+                return <el-button>添加其他属性</el-button>;
-                            }
               },
-                    ]
+            },
+          ];
           break;
         case "其他信息":
           return [
@@ -278,52 +373,63 @@ 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);
-                                }
+                };
-                                return <el-cascader
+                return (
+                  <el-cascader
                     v-model={this.modalData.productPlace}
                     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);
-
+                };
-                                }
+                return (
-                                return <el-upload
+                  <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
@@ -333,27 +439,37 @@ export default {
                       },
                     }}
                     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);
-
+                };
-                                }
+                return (
-                                return <el-upload
+                  <el-upload
                     class="upload-demo"
                     drag
                     action={this.$api.mer_admin.uploadFile()}
@@ -363,31 +479,43 @@ export default {
                       },
                     }}
                     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("请求接口");
+            }
           }, 300),
         },
       ];
@@ -397,14 +525,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,177 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <div slot="dialog__content">
+        <div>
+          <el-row>
+            <el-input
+              style="width: 80%; margin: 0 20px 0 0"
+              placeholder="请输入内容"
+              v-model="input"
+              clearable
+            >
+            </el-input>
+            <el-button type="danger" icon="el-icon-delete" circle></el-button>
+          </el-row>
+
+          <el-row>
+            <el-tag
+              :key="tag"
+              v-for="tag in dynamicTags"
+              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-row
+          >
+        </div>
+        <el-row type="flex" justify="center">
+          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row
+        >
+      </div>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //监控对象数据
+      tableData: [],
+      //表格属性
+      tableProp: {},
+      modalConfig: {
+        title: "属性",
+        show: false,
+        width: "80%",
+      },
+      modalData: {},
+      AttributeData:[{
+        attributeName:"",
+        attributeValue:[]
+      }], //
+      input: "",
+      dynamicTags: [],
+      inputVisible: false,
+      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(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    },
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick((_) => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    },
+    //添加属性
+    addAttribute() {
+      console.log("添加属性");
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          loading: this.isLoading,
+          // submit: true,
+          handle: () => {},
+        },
+      ];
+    },
+  },
+  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>