From 22516acb2b261e37ce80f260a38a813089a88a2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Fri, 9 Aug 2024 18:04:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/product/index.vue           | 209 ++--
 .../modules/product/popup/add-or-update.vue   | 923 ++++++++++--------
 .../product/popup/add-specifications.vue      | 177 ++++
 3 files changed, 815 insertions(+), 494 deletions(-)
 create mode 100644 src/views/modules/product/popup/add-specifications.vue

diff --git a/src/views/modules/product/index.vue b/src/views/modules/product/index.vue
index 80f94a6..53b799c 100644
--- a/src/views/modules/product/index.vue
+++ b/src/views/modules/product/index.vue
@@ -1,109 +1,124 @@
 <template>
-    <div>
-        <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="平台分类">
-                        <el-select v-model="formInline.region" placeholder="活动区域">
-                            <el-option label="区域一" value="shanghai"></el-option>
-                            <el-option label="区域二" value="beijing"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="商户分类">
-                        <el-select v-model="formInline.region" placeholder="活动区域">
-                            <el-option label="区域一" value="shanghai"></el-option>
-                            <el-option label="区域二" value="beijing"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="商品搜索">
-                        <el-input v-model="formInline.user" placeholder="商品搜索"></el-input>
-                    </el-form-item>
+  <div>
+    <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="平台分类">
+            <el-select v-model="formInline.region" placeholder="活动区域">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商户分类">
+            <el-select v-model="formInline.region" placeholder="活动区域">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="商品搜索">
+            <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-form-item>
-                </el-form>
-                <el-tabs v-model="activeName" @tab-click="$refs.oTable.reload()">
-                    <el-tab-pane label="出售中" name="出售中"></el-tab-pane>
-                    <el-tab-pane label="仓库中" name="仓库中"></el-tab-pane>
-                    <el-tab-pane label="已售罄" name="已售罄"></el-tab-pane>
-                    <el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
-                </el-tabs>
-                <div class="mb-2">
-                    <el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
-                </div>
-            </template>
-        </obj-table-plus>
-        <add-or-update ref="addOrUpdate"></add-or-update>
-    </div>
+          <el-form-item>
+            <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()">
+          <el-tab-pane label="出售中" name="出售中"></el-tab-pane>
+          <el-tab-pane label="仓库中" name="仓库中"></el-tab-pane>
+          <el-tab-pane label="已售罄" name="已售罄"></el-tab-pane>
+          <el-tab-pane label="警戒库存" name="警戒库存"></el-tab-pane>
+        </el-tabs>
+        <div class="mb-2">
+          <el-button type="primary" size="small" @click="addProduct"
+            >添加商品</el-button
+          >
+        </div>
+      </template>
+    </obj-table-plus>
+    <add-or-update ref="addOrUpdate"></add-or-update>
+  </div>
 </template>
 
 <script>
-import AddOrUpdate from "./popup/add-or-update.vue"
+import AddOrUpdate from "./popup/add-or-update.vue";
 export default {
-    components:{AddOrUpdate},
-    data() {
-        return {
-            activeName: "出售中",
-            dataList: [],
-            formInline: {
-                user: '',
-                region: ''
-            }
-        }
+  components: { AddOrUpdate },
+  data() {
+    return {
+      activeName: "出售中",
+      dataList: [],
+      formInline: {
+        user: "",
+        region: "",
+      },
+    };
+  },
+  methods: {
+    addProduct() {
+      this.$refs.addOrUpdate.toggle().add();
     },
-    methods: {
-        addProduct(){
-            this.$refs.addOrUpdate.toggle().add()
+    queryList(pageNo, pageSize) {
+      this.$api.mer_admin
+        .getProductPage({
+          p: {
+            pageNumber: pageNo,
+            pageSize: pageSize,
+          },
+        })
+        .then((res) => {
+          console.log(res);
+          this.$refs.oTable.complete(
+            res.data.data.data,
+            Number(res.data.data.total)
+          );
+        })
+        .catch((err) => {
+          this.$refs.oTable.complete(false);
+        });
+    },
+  },
+  computed: {
+    tableCols() {
+      return [
+        {
+          title: "ID",
         },
-        queryList(pageNo, pageSize) {
-            this.$api.mer_admin.getProductPage({
-                p: {
-                    pageNumber: pageNo,
-                    pageSize: pageSize
-                }
-            })
-                .then(res => {
-                    console.log(res);
-                    this.$refs.oTable.complete(res.data.data.data, Number(res.data.data.total));
-
-                })
-                .catch(err => {
-                    this.$refs.oTable.complete(false);
-                })
-        }
+        {
+          title: "商品图",
+        },
+        {
+          title: "商品名称",
+        },
+        {
+          title: "商品售价",
+        },
+        {
+          title: "销量",
+        },
+        {
+          title: "库存",
+        },
+        {
+          title: "状态",
+        },
+        {
+          title: "操作",
+        },
+      ];
     },
-    computed: {
-        tableCols() {
-            return [
-                {
-                    title: "ID"
-                },
-                {
-                    title: "商品图",
-                },
-                {
-                    title: "商品名称"
-                },
-                {
-                    title: "商品售价"
-                },
-                {
-                    title: "销量"
-                },
-                {
-                    title: "库存"
-                },
-                {
-                    title: "状态"
-                },
-                {
-                    title: "操作"
-                }
-            ]
-        }
-    },
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/modules/product/popup/add-or-update.vue b/src/views/modules/product/popup/add-or-update.vue
index f4a6a12..620d62b 100644
--- a/src/views/modules/product/popup/add-or-update.vue
+++ b/src/views/modules/product/popup/add-or-update.vue
@@ -1,417 +1,546 @@
 <template>
-    <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>
-                <el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
-                <el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
-            </el-tabs>
-        </template>
+  <div>
+    <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>
+          <el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
+          <el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
+        </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 {
-    data() {
-        return {
-            currentPanel: '基础信息',
-            modalData: {
-                "merchantId": null,
-                "shopId": null,
-                "id": null,
-                "name": "",
-                "productCategoryId": "",
-                "productPhotoList": [
-                    // {
-                    //     "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
-                    //     "isMain": 1
-                    // }
-                ],
-                "description": "",
-                "productUnit": "",
-                "productPlace": "",
-                //保质期
-                "shelfLife": "",
-                //产品介绍图
-                "productIntroducePhoto": "",
-                //产品介绍视频
-                "productVideo": "",
-                //单价
-                "singlePrice": "",
-                //单库存
-                "singleStock": "",
-                //其他属性
-                "otherAttribute": "[{\"name\":\"颜色\",\"value\":\"黄色；屎黄色\"}]",
-                //折扣情况
-                "discountActivity": {
-                    // "endTime": "2024-08-31 00:00:00",
-                    // "id": "1821213180710957056",
-                    // "merchantId": "1818337963053297664",
-                    // "ruleObject": {
-                    //     "discount": 5,
-                    //     "limitCount": 99
-                    // },
-                    // "shopId": "1818337963523059712",
-                    // "startTime": "2024-08-01 00:00:00",
-                    // "type": 0
-                },
-                //是否折扣
-                "isDiscount": 1,
-                "marketId": null,
-                //最大消费
-                "maxCostPrice": 15,
-                //市场最大消费
-                "maxMarketPrice": 35,
-                //最大售价
-                "maxSalePrice": 17.5,
-                //最低售价
-                "minCostPrice": 10,
-                //市场最低售价
-                "minMarketPrice": 20,
-                "minSalePrice": 10,
-                "salePrice": 20,
-                "sort": 999,
-                "status": "DOWN",
-                "stockNum": 200,
-                "specType": 1,
-                "productAttributeList": [
-                    // {
-                    //     "id": "1821213026050191360",
-                    //     "attributeName": "重量",
-                    //     "attributeValue": "1斤,2斤"
-                    // }
-                ],
-                "productSpecificationList": [
-                    // {
-                    //     "attributeValue": "重量1斤",
-                    //     "costPrice": 10,
-                    //     "id": "1821213026083745792",
-                    //     "isDiscount": 1,
-                    //     "limitCount": 99,
-                    //     "marketPrice": 20,
-                    //     "productId": "1821207097380515840",
-                    //     "saleNum": 0,
-                    //     "salePrice": 10,
-                    //     "stockNum": 100,
-                    //     "virtualSaleNum": 0,
-                    //     "warnStockNum": 0,
-                    //     "_id": "重量1斤",
-                    //     "value": "售价￥10 成本￥10 库存100"
-                    // },
-                    // {
-                    //     "attributeValue": "重量2斤",
-                    //     "costPrice": 15,
-                    //     "id": "1821213026083745793",
-                    //     "isDiscount": 1,
-                    //     "limitCount": 99,
-                    //     "marketPrice": 35,
-                    //     "productId": "1821207097380515840",
-                    //     "saleNum": 0,
-                    //     "salePrice": 17.5,
-                    //     "stockNum": 100,
-                    //     "virtualSaleNum": 0,
-                    //     "warnStockNum": 0,
-                    //     "_id": "重量2斤",
-                    //     "value": "售价￥17.5 成本￥15 库存100"
-                    // }
-                ]
-            },
-            modalConfig: {
-                title: "编辑商品",
-                show: false,
-                width: "1300px",
-                fullscreen: true,
-            },
-        };
+  components: { addSpecifications },
+  data() {
+    return {
+      currentPanel: "基础信息",
+      modalData: {
+        merchantId: null,
+        shopId: null,
+        id: null,
+        name: "",
+        productCategoryId: "",
+        productPhotoList: [
+          // {
+          //     "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
+          //     "isMain": 1
+          // }
+        ],
+        description: "",
+        productUnit: "",
+        productPlace: "",
+        //保质期
+        shelfLife: "",
+        //产品介绍图
+        productIntroducePhoto: "",
+        //产品介绍视频
+        productVideo: "",
+        //单价
+        singlePrice: "",
+        //单库存
+        singleStock: "",
+        //其他属性
+        otherAttribute: '[{"name":"颜色","value":"黄色；屎黄色"}]',
+        //折扣情况
+        discountActivity: {
+          // "endTime": "2024-08-31 00:00:00",
+          // "id": "1821213180710957056",
+          // "merchantId": "1818337963053297664",
+          // "ruleObject": {
+          //     "discount": 5,
+          //     "limitCount": 99
+          // },
+          // "shopId": "1818337963523059712",
+          // "startTime": "2024-08-01 00:00:00",
+          // "type": 0
+        },
+        //是否折扣
+        isDiscount: 1,
+        marketId: null,
+        //最大消费
+        maxCostPrice: 15,
+        //市场最大消费
+        maxMarketPrice: 35,
+        //最大售价
+        maxSalePrice: 17.5,
+        //最低售价
+        minCostPrice: 10,
+        //市场最低售价
+        minMarketPrice: 20,
+        minSalePrice: 10,
+        salePrice: 20,
+        sort: 999,
+        status: "DOWN",
+        stockNum: 200,
+        specType: 1,
+        productAttributeList: [
+          // {
+          //     "id": "1821213026050191360",
+          //     "attributeName": "重量",
+          //     "attributeValue": "1斤,2斤"
+          // }
+        ],
+        productSpecificationList: [
+          // {
+          //     "attributeValue": "重量1斤",
+          //     "costPrice": 10,
+          //     "id": "1821213026083745792",
+          //     "isDiscount": 1,
+          //     "limitCount": 99,
+          //     "marketPrice": 20,
+          //     "productId": "1821207097380515840",
+          //     "saleNum": 0,
+          //     "salePrice": 10,
+          //     "stockNum": 100,
+          //     "virtualSaleNum": 0,
+          //     "warnStockNum": 0,
+          //     "_id": "重量1斤",
+          //     "value": "售价￥10 成本￥10 库存100"
+          // },
+          // {
+          //     "attributeValue": "重量2斤",
+          //     "costPrice": 15,
+          //     "id": "1821213026083745793",
+          //     "isDiscount": 1,
+          //     "limitCount": 99,
+          //     "marketPrice": 35,
+          //     "productId": "1821207097380515840",
+          //     "saleNum": 0,
+          //     "salePrice": 17.5,
+          //     "stockNum": 100,
+          //     "virtualSaleNum": 0,
+          //     "warnStockNum": 0,
+          //     "_id": "重量2斤",
+          //     "value": "售价￥17.5 成本￥15 库存100"
+          // }
+        ],
+      },
+      modalConfig: {
+        title: "编辑商品",
+        show: false,
+        width: "1300px",
+        fullscreen: true,
+      },
+      fileList: [], //回显图片
+    };
+  },
+  mounted() {},
+  methods: {
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        console.log(e);
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: (item) => {
+          console.log(item);
+          this.isAdd = true;
+        },
+        update: (row) => {
+          this.modalData = row;
+          this.isAdd = false;
+        },
+      };
     },
-    mounted() { },
-    methods: {
-        toggle(e) {
-            if (this.modalConfig.show == false) {
-                this.modalConfig.show = true;
+    init(row) {},
+    addSpecs() {
+      console.log("123");
+      this.$refs.addSpecifications.toggle().add();
+    },
+  },
+  computed: {
+    modalCols() {
+      switch (this.currentPanel) {
+        case "基础信息":
+          return [
+            {
+              label: "商品图片",
+              prop: "productPhotoList",
+              required: true,
+              rules: {
+                required: true,
+                message: "请上传商品图片",
+                trigger: "blur",
+              },
+              type: "jsx",
+              render: () => {
+                const handleChange = (file, fileList) => {
+                  //   console.log(fileList);
+                };
+                const handleAvatarSuccess = (res, file) => {
+                  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"),
+                    }}
+                    multiple={true}
+                    file-list={this.fileList}
+                  >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      将文件拖到此处，或<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",
+              },
+              render: () => {
+                return (
+                  <el-select
+                    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",
+              },
+              placeholder: "请输入商品名称",
+            },
+            {
+              label: "商品描述",
+              prop: "description",
+              required: true,
+              rules: {
+                required: true,
+                message: "请填写商品描述",
+                trigger: "blur",
+              },
+              type: "jsx",
+              render: () => {
+                return (
+                  <el-input
+                    type="textarea"
+                    v-model={this.modalData.description}
+                    placeholder="请简单描述，如别称、口感、用途等"
+                  />
+                );
+              },
+            },
+          ];
+          break;
+        case "销售信息":
+          return [
+            {
+              label: "销售单位",
+              prop: "productUnit",
+              required: true,
+              rules: {
+                required: true,
+                message: "请选择销售单位",
+                trigger: "blur",
+              },
+              type: "jsx",
+              render: () => {
+                return (
+                  <el-select
+                    v-model={this.modalData.productUnit}
+                    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>
+                );
+              },
+            },
+            {
+              label: "库存",
+              prop: "singleStock",
+              type: "jsx",
+              render: () => {
+                return (
+                  <el-input
+                    placeholder="请输入库存"
+                    v-model={this.modalData.singleStock}
+                  ></el-input>
+                );
+              },
+            },
+            {
+              label: "其他属性",
+              prop: "productAttributeList",
+              type: "jsx",
+              render: () => {
+                return <el-button>添加其他属性</el-button>;
+              },
+            },
+          ];
+          break;
+        case "其他信息":
+          return [
+            {
+              label: "产地",
+              prop: "productPlace",
+              required: true,
+              rules: { required: true, message: "请选择产地", trigger: "blur" },
+              type: "jsx",
+              render: () => {
+                const change = (e) => {
+                  console.log(e);
+                };
+                return (
+                  <el-cascader
+                    v-model={this.modalData.productPlace}
+                    onChange={change}
+                    options={this.$api.mer_admin.getCityOptions()}
+                    {...{
+                      props: {
+                        checkStrictly: true,
+                      },
+                    }}
+                    clearable
+                  ></el-cascader>
+                );
+              },
+            },
+            {
+              label: "保质期",
+              prop: "shelfLife",
+              type: "jsx",
+              // required: true,
+              rules: {
+                required: true,
+                message: "请填写保质期",
+                trigger: "blur",
+              },
+              render: () => {
+                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" },
+              placeholder: "商品介绍图",
+              type: "jsx",
+              render: () => {
+                const handleChange = (file, fileList) => {
+                  console.log(fileList);
+                };
+                return (
+                  <el-upload
+                    class="upload-demo"
+                    drag
+                    action={this.$api.mer_admin.uploadFile()}
+                    {...{
+                      props: {
+                        "on-change": handleChange,
+                      },
+                    }}
+                    headers={{
+                      token: "Bearer " + this.$cookie.get("token"),
+                    }}
+                    multiple
+                  >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      将文件拖到此处，或<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",
+              },
+              type: "jsx",
+              render: () => {
+                const handleChange = (file, fileList) => {
+                  console.log(fileList);
+                };
+                return (
+                  <el-upload
+                    class="upload-demo"
+                    drag
+                    action={this.$api.mer_admin.uploadFile()}
+                    {...{
+                      props: {
+                        "on-change": handleChange,
+                      },
+                    }}
+                    headers={{
+                      token: "Bearer " + this.$cookie.get("token"),
+                    }}
+                    multiple
+                  >
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      将文件拖到此处，或<em>点击上传</em>
+                    </div>
+                    <div class="el-upload__tip" slot="tip">
+                      只能上传jpg/png文件，且不超过500kb
+                    </div>
+                  </el-upload>
+                );
+              },
+            },
+          ];
+          break;
+
+        default:
+          break;
+      }
+    },
+    modalHandles() {
+      return [
+        {
+          label: this.currentPanel === "其他信息" ? "确定" : "下一步",
+          type: "primary",
+          loading: this.isLoading,
+          submit: true,
+          handle: debounce(() => {
+            if (this.currentPanel === "基础信息") {
+              this.currentPanel = "销售信息";
+            } else if (this.currentPanel == "销售信息") {
+              this.currentPanel = "其他信息";
             } else {
-                this.modalConfig.show = false;
+              console.log("请求接口");
             }
-            if (e) {
-                console.log(e);
-                this.init(cloneDeep(e.row));
-            }
-            return {
-                add: (item) => {
-                    console.log(item);
-                    this.isAdd = true;
-                },
-                update: (row) => {
-                    this.modalData = row;
-                    this.isAdd = false;
-                },
-            };
+          }, 300),
         },
-        init(row) { },
+      ];
     },
-    computed: {
-        modalCols() {
-            switch (this.currentPanel) {
-                case "基础信息":
-                    return [
-                        {
-                            label: "商品图片",
-                            prop: "productPhotoList",
-                            required: true,
-                            rules: { required: true, message: '请上传商品图片', trigger: 'blur' },
-                            type: "jsx",
-                            render: () => {
-                                const handleChange = (file, fileList) => {
-                                    console.log(fileList);
-
-                                }
-                                return <el-upload
-                                    class="upload-demo"
-                                    drag
-                                    action={this.$api.mer_admin.uploadFile()}
-                                    {...{
-                                        props: {
-                                            "on-change": handleChange,
-                                        },
-                                    }}
-                                    headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
-                                    }}
-                                    multiple={true}
-                                >
-                                    <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<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' },
-                            render: () => {
-                                return <el-select 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' },
-                            placeholder: "请输入商品名称"
-                        },
-                        {
-                            label: "商品描述",
-                            prop: "description",
-                            required: true,
-                            rules: { required: true, message: '请填写商品描述', trigger: 'blur' },
-                            type: "jsx",
-                            render: () => {
-                                return <el-input type="textarea" v-model={this.modalData.description} placeholder="请简单描述，如别称、口感、用途等" />
-                            }
-                        },
-                    ]
-                    break;
-                case "销售信息":
-                    return [
-                        {
-                            label: "销售单位",
-                            prop: "productUnit",
-                            required: true,
-                            rules: { required: true, message: '请选择销售单位', trigger: 'blur' },
-                            type: "jsx",
-                            render: () => {
-                                return <el-select v-model={this.modalData.productUnit} placeholder="请选择销售单位">
-                                    {
-                                        this.getSaleUnit.map(item => {
-                                            return <el-option label={item.name} value={item.id}></el-option>
-                                        })
-                                    }
-                                </el-select>
-                            }
-                        },
-                        {
-                            label: "规格",
-                            prop: "productSpecificationList",
-                            type: "jsx",
-                            render: () => {
-
-                            }
-                        },
-                        {
-                            label: "价格",
-                            prop: "singlePrice",
-                            type: "jsx",
-                            render: () => {
-                                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>
-                            }
-                        },
-                        {
-                            label: "其他属性",
-                            prop: "productAttributeList",
-                            type: "jsx",
-                            render: () => {
-                                return <el-button>添加其他属性</el-button>
-                            }
-                        },
-                    ]
-                    break;
-                case "其他信息":
-                    return [
-                        {
-                            label: "产地",
-                            prop: "productPlace",
-                            required: true,
-                            rules: { required: true, message: '请选择产地', trigger: 'blur' },
-                            type: "jsx",
-                            render: () => {
-                                const change = (e) => {
-                                    console.log(e)
-                                }
-                                return <el-cascader
-                                    v-model={this.modalData.productPlace}
-                                    onChange={change}
-                                    options={this.$api.mer_admin.getCityOptions()}
-                                    {
-                                    ...{
-                                        props: {
-                                            checkStrictly: true
-                                        }
-                                    }
-                                    }
-                                    clearable></el-cascader>
-                            }
-                        },
-                        {
-                            label: "保质期",
-                            prop: "shelfLife",
-                            type: "jsx",
-                            // required: true,
-                            rules: { required: true, message: '请填写保质期', trigger: 'blur' },
-                            render: () => {
-                                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' },
-                            placeholder: "商品介绍图",
-                            type: "jsx",
-                            render: () => {
-                                const handleChange = (file, fileList) => {
-                                    console.log(fileList);
-
-                                }
-                                return <el-upload
-                                    class="upload-demo"
-                                    drag
-                                    action={this.$api.mer_admin.uploadFile()}
-                                    {...{
-                                        props: {
-                                            "on-change": handleChange,
-                                        },
-                                    }}
-                                    headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
-                                    }}
-                                    multiple>
-                                    <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<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' },
-                            type: "jsx",
-                            render: () => {
-                                const handleChange = (file, fileList) => {
-                                    console.log(fileList);
-
-                                }
-                                return <el-upload
-                                    class="upload-demo"
-                                    drag
-                                    action={this.$api.mer_admin.uploadFile()}
-                                    {...{
-                                        props: {
-                                            "on-change": handleChange,
-                                        },
-                                    }}
-                                    headers={{
-                                        'token': 'Bearer ' + this.$cookie.get("token")
-                                    }}
-                                    multiple>
-                                    <i class="el-icon-upload"></i>
-                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
-                                </el-upload>
-                            }
-                        },
-                    ]
-                    break;
-
-                default:
-                    break;
-            }
-
-        },
-        modalHandles() {
-            return [
-                {
-                    label: "确定",
-                    type: "primary",
-                    loading: this.isLoading,
-                    // submit: true,
-                    handle: debounce(() => {
-                    }, 300),
-                },
-            ];
-        },
+  },
+  asyncComputed: {
+    async getProductCategory() {
+      let res = await this.$api.mer_admin.getProductCategory();
+      return res.data.data;
     },
-    asyncComputed: {
-        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,
+      });
+      console.log(res);
 
-        },
-        async getSaleUnit() {
-            let res = await this.$api.mer_admin.getSaleUnit({ shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId });
-            console.log(res);
-
-            return res.data.data;
-        }
+      return res.data.data;
     },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .obj-modal ::v-deep {
-    .el-dialog__body {
-        padding: 0 30px;
-    }
+  .el-dialog__body {
+    padding: 0 30px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/modules/product/popup/add-specifications.vue b/src/views/modules/product/popup/add-specifications.vue
new file mode 100644
index 0000000..84ba9d6
--- /dev/null
+++ b/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>
\ No newline at end of file