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 1/2] =?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

From 5305dcafb54e4087760aa4b04bf479a157d21b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Mon, 12 Aug 2024 18:05:59 +0800
Subject: [PATCH 2/2] =?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

---
 .../modules/product/popup/add-attribute.vue   | 202 +++++++++++++
 .../modules/product/popup/add-or-update.vue   | 156 +++++++++-
 .../product/popup/add-specifications.vue      | 277 ++++++++++++++++--
 3 files changed, 592 insertions(+), 43 deletions(-)
 create mode 100644 src/views/modules/product/popup/add-attribute.vue

diff --git a/src/views/modules/product/popup/add-attribute.vue b/src/views/modules/product/popup/add-attribute.vue
new file mode 100644
index 0000000..837752a
--- /dev/null
+++ b/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>
\ 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 620d62b..236b45d 100644
--- a/src/views/modules/product/popup/add-or-update.vue
+++ b/src/views/modules/product/popup/add-or-update.vue
@@ -17,14 +17,24 @@
         </el-tabs>
       </template>
     </obj-modal>
-    <addSpecifications ref="addSpecifications"></addSpecifications>
+    <!-- 添加规格 -->
+    <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 },
+  components: { addSpecifications, addAttribute },
   data() {
     return {
       currentPanel: "基础信息",
@@ -84,7 +94,7 @@ export default {
         minSalePrice: 10,
         salePrice: 20,
         sort: 999,
-        status: "DOWN",
+        status: "DOWN", //up 上架 //DOWN 放入仓库
         stockNum: 200,
         specType: 1,
         productAttributeList: [
@@ -136,6 +146,7 @@ export default {
         fullscreen: true,
       },
       fileList: [], //回显图片
+      place: "", //场地
     };
   },
   mounted() {},
@@ -153,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) => {
@@ -166,6 +207,34 @@ export default {
       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() {
@@ -184,18 +253,42 @@ export default {
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
-                  //   console.log(fileList);
+                  // console.log(fileList);
                 };
-                const handleAvatarSuccess = (res, file) => {
-                  console.log(res);
-                  this.modalData.productPhotoList.push(res);
+                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,
+                        };
+                      }
+                    }
+                  );
                   console.log(this.modalData.productPhotoList);
                 };
                 const handleRemove = (file, fileList) => {
                   console.log(file, fileList);
-                  this.modalData.productPhotoList = fileList.map((item) => {
-                    return item.response;
-                  });
+                  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 (
@@ -338,6 +431,9 @@ export default {
               render: () => {
                 return (
                   <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
+                    }
                     placeholder="请输入价格"
                     v-model={this.modalData.singlePrice}
                   ></el-input>
@@ -351,6 +447,9 @@ export default {
               render: () => {
                 return (
                   <el-input
+                    readonly={
+                      this.modalData.productSpecificationList.length > 0
+                    }
                     placeholder="请输入库存"
                     v-model={this.modalData.singleStock}
                   ></el-input>
@@ -362,7 +461,11 @@ export default {
               prop: "productAttributeList",
               type: "jsx",
               render: () => {
-                return <el-button>添加其他属性</el-button>;
+                return (
+                  <el-button onClick={this.addAttribute}>
+                    添加其他属性
+                  </el-button>
+                );
               },
             },
           ];
@@ -378,10 +481,12 @@ export default {
               render: () => {
                 const change = (e) => {
                   console.log(e);
+                  this.modalData.productPlace = e.join("-");
+                  console.log(aa);
                 };
                 return (
                   <el-cascader
-                    v-model={this.modalData.productPlace}
+                    v-model={this.place}
                     onChange={change}
                     options={this.$api.mer_admin.getCityOptions()}
                     {...{
@@ -426,16 +531,27 @@ export default {
               type: "jsx",
               render: () => {
                 const handleChange = (file, fileList) => {
-                  console.log(fileList);
+                  // console.log(fileList);
+                };
+                const handleAvatarSuccess = (res) => {
+                  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={{
@@ -468,14 +584,23 @@ export default {
                 const handleChange = (file, fileList) => {
                   console.log(fileList);
                 };
+                const handleAvatarSuccess = (res) => {
+                  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={{
@@ -514,7 +639,10 @@ export default {
             } else if (this.currentPanel == "销售信息") {
               this.currentPanel = "其他信息";
             } else {
-              console.log("请求接口");
+              console.log("请求接口", this.modalData);
+              this.$api.mer_admin.saveProduct(this.modalData).then((res) => {
+                console.log(res);
+              });
             }
           }, 300),
         },
diff --git a/src/views/modules/product/popup/add-specifications.vue b/src/views/modules/product/popup/add-specifications.vue
index 84ba9d6..b2f451a 100644
--- a/src/views/modules/product/popup/add-specifications.vue
+++ b/src/views/modules/product/popup/add-specifications.vue
@@ -8,50 +8,75 @@
       :modalHandles="modalHandles"
     >
       <div slot="dialog__content">
-        <div>
+        <div v-for="(item, index) in AttributeData" :key="index">
           <el-row>
             <el-input
               style="width: 80%; margin: 0 20px 0 0"
-              placeholder="请输入内容"
-              v-model="input"
+              placeholder="请输入属性"
+              v-model="item.attributeName"
               clearable
             >
             </el-input>
-            <el-button type="danger" icon="el-icon-delete" circle></el-button>
+            <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 dynamicTags"
+              v-for="tag in item.attributeValue"
               closable
               :disable-transitions="false"
-              @close="handleClose(tag)"
+              @close="handleClose(index, tag)"
             >
               {{ tag }}
             </el-tag>
             <el-input
               class="input-new-tag"
-              v-if="inputVisible"
+              v-if="item.inputVisible"
               v-model="inputValue"
-              ref="saveTagInput"
+              :ref="`saveTagInput${index}`"
               size="small"
-              @keyup.enter.native="handleInputConfirm"
-              @blur="handleInputConfirm"
+              @keyup.enter.native="handleInputConfirm(index)"
+              @blur="handleInputConfirm(index)"
             >
             </el-input>
             <el-button
               v-else
               class="button-new-tag"
               size="small"
-              @click="showInput"
+              @click="showInput(index)"
               >+新增规格</el-button
             ></el-row
           >
         </div>
         <el-row type="flex" justify="center">
-          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row
+          <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>
@@ -66,20 +91,33 @@ export default {
       //监控对象数据
       tableData: [],
       //表格属性
-      tableProp: {},
+      //表格属性
+      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:[]
-      }], //
+      AttributeData: [
+        {
+          attributeName: "",
+          attributeValue: [],
+          inputVisible: false,
+        },
+      ], //
       input: "",
       dynamicTags: [],
-      inputVisible: false,
       inputValue: "",
     };
   },
@@ -111,29 +149,164 @@ export default {
     init(row) {
       this.modalData = row;
     },
-    handleClose(tag) {
-      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+    handleClose(index, tag) {
+      this.AttributeData[index].attributeValue.splice(
+        this.AttributeData[index].attributeValue.indexOf(tag),
+        1
+      );
     },
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput.$refs.input.focus();
+    //聚焦
+    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() {
+    handleInputConfirm(index) {
       let inputValue = this.inputValue;
       if (inputValue) {
-        this.dynamicTags.push(inputValue);
+        this.AttributeData[index].attributeValue.push(inputValue);
       }
-      this.inputVisible = false;
+      this.AttributeData[index].inputVisible = false;
       this.inputValue = "";
+      this.calculation();
     },
     //添加属性
     addAttribute() {
-      console.log("添加属性");
+      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 [
         {
@@ -147,7 +320,53 @@ export default {
           type: "primary",
           loading: this.isLoading,
           // submit: true,
-          handle: () => {},
+          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();
+          },
         },
       ];
     },