From 8dbaa7aa36d24dc161ec7ef281ddc302375184a9 Mon Sep 17 00:00:00 2001
From: lzhizhao <790086754@qq.com>
Date: Wed, 1 Oct 2025 14:27:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E4=BC=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../operation-management/commodity/index.vue  |  12 +-
 .../commodity/popup/add-attribute.vue         | 242 +++-----
 .../commodity/popup/add-or-update.vue         | 257 ++++-----
 .../commodity/popup/add-specifications.vue    | 518 +++++++-----------
 4 files changed, 380 insertions(+), 649 deletions(-)

diff --git a/src/views/modules/operation-management/commodity/index.vue b/src/views/modules/operation-management/commodity/index.vue
index ce6f2ba..5225495 100644
--- a/src/views/modules/operation-management/commodity/index.vue
+++ b/src/views/modules/operation-management/commodity/index.vue
@@ -140,8 +140,18 @@
               </el-popconfirm>
             </template>
           </el-table-column>
-          <el-table-column label="操作 (提示：下架后可进行操作)" align="center" width="340" fixed="right">
+          <el-table-column label="操作" align="center" width="400" fixed="right">
             <template slot-scope="{ row }">
+              <el-popconfirm
+                style="margin-right: 10px;"
+                :title="row.status == 'DOWN' ? '当前为下架状态，是否更改为上架状态？' : '当前为上架状态，是否更改为下架状态？'"
+                :confirm-button-text="row.status == 'DOWN' ? '确认上架' : '确认下架'"
+                @confirm="toggleStatus(row)"
+              >
+                <el-button slot="reference" size="mini" :type="row.status === 'UP' ? 'danger' : 'success'">
+                  {{ row.status === 'UP' ? '下架' : '上架' }}
+                </el-button>
+              </el-popconfirm>
               <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="editProduct(row)">编辑</el-button>
               <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="priceAdjustment(row)">改价</el-button>
               <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="changeInventory(row)">改库存</el-button>
diff --git a/src/views/modules/operation-management/commodity/popup/add-attribute.vue b/src/views/modules/operation-management/commodity/popup/add-attribute.vue
index 712ed8a..c05da2e 100644
--- a/src/views/modules/operation-management/commodity/popup/add-attribute.vue
+++ b/src/views/modules/operation-management/commodity/popup/add-attribute.vue
@@ -1,221 +1,119 @@
 <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>
+  <el-dialog title="其他属性" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
+    <div class="attribute-container">
+      <el-alert title="示例：属性名称：温度，属性内容：常温,冷饮" type="info" show-icon :closable="false" style="margin-bottom: 16px"></el-alert>
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
+        <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>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="submitForm">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
+    </span>
+  </el-dialog>
 </template>
 <script>
-import { debounce, cloneDeep } from "lodash";
 export default {
-  components: {},
   data() {
     return {
       isAdd: true,
-      //表格属性
-      modalConfig: {
-        title: "属性",
-        show: false,
-        width: "80%",
-      },
-      modalData: {},
-      inputValue: "",
+      dialogVisible: false,
       inputVisible: false,
+      inputValue: "",
       ruleForm: {
         name: "",
         value: [],
       },
       rules: {
         name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
-        value: [
-          {
-            required: true,
-            message: "请输入属性内容",
-            trigger: "blur",
-          },
-        ],
+        value: [{ required: true, type: 'array', message: "请添加属性内容", trigger: "change" }],
       },
     };
   },
   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));
-      }
+    toggle() {
+      this.dialogVisible = !this.dialogVisible;
       return {
         add: (data) => {
-          this.modalConfig.title = "添加属性";
-          if (data.length == 0) {
-            this.ruleForm = {
-              name: "",
-              value: [],
-            };
-          } else {
-            this.ruleForm = {
-              name: data[0].name,
-              value: data[0].value.split(","),
-            };
-          }
           this.isAdd = true;
+          this.initData(data);
         },
         update: (data) => {
-          console.log(data);
-          if (data.length == 0) {
-            this.ruleForm = {
-              name: "",
-              value: [],
-            };
-          } else {
-            this.ruleForm = {
-              name: data[0].name,
-              value: data[0].value.split(","),
-            };
-          }
           this.isAdd = false;
+          this.initData(data);
         },
       };
     },
-    init(row) {
-      this.modalData = row;
+    initData(data) {
+      if (data && data.length > 0 && data[0].name) {
+        this.ruleForm = {
+          name: data[0].name,
+          value: data[0].value ? data[0].value.split(",") : [],
+        };
+      } else {
+        this.ruleForm = { name: "", value: [] };
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
     },
     handleClose(tag) {
       this.ruleForm.value.splice(this.ruleForm.value.indexOf(tag), 1);
     },
-    //聚焦
     showInput() {
       this.inputVisible = true;
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         this.$refs.saveTagInput.$refs.input.focus();
       });
     },
     handleInputConfirm() {
       let inputValue = this.inputValue;
-      if (inputValue) {
+      if (inputValue && !this.ruleForm.value.includes(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();
-              }
-            });
-          },
-        },
-      ];
+    submitForm() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.$emit("getAttribute", {
+            name: this.ruleForm.name,
+            value: this.ruleForm.value.join(","),
+          });
+          this.dialogVisible = false;
+        }
+      });
     },
   },
-  asyncComputed: {},
 };
 </script>
 <style lang="scss" scoped>
-.Example {
-  margin: 0 0 20px 20px;
-  width: 80%;
+.attribute-container {
+  .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;
+  }
 }
-.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
+</style>
diff --git a/src/views/modules/operation-management/commodity/popup/add-or-update.vue b/src/views/modules/operation-management/commodity/popup/add-or-update.vue
index f0dcd56..0766650 100644
--- a/src/views/modules/operation-management/commodity/popup/add-or-update.vue
+++ b/src/views/modules/operation-management/commodity/popup/add-or-update.vue
@@ -13,24 +13,20 @@
           <el-tab-pane label="基础信息" name="基础信息">
             <el-form-item label="商品图片" prop="productPhotoList">
               <el-upload
-                class="upload-demo"
-                drag
                 :action="$api.mer_admin.uploadFile()"
-                :on-change="handlePhotoChange"
                 :on-success="handlePhotoSuccess"
                 :on-remove="handlePhotoRemove"
                 :headers="{ token: 'Bearer ' + $cookie.get('token') }"
                 multiple
                 :file-list="fileList"
-                list-type="picture"
+                list-type="picture-card"
               >
-                <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>
+                <i class="el-icon-plus"></i>
+                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>
             </el-form-item>
             <el-form-item label="商品类目" prop="productCategoryId">
-              <el-select placeholder="请选择商品类目" v-model="modalData.productCategoryId">
+              <el-select style="width: 50%;" placeholder="请选择商品类目" v-model="modalData.productCategoryId">
                 <el-option
                   v-for="item in getProductCategory"
                   :key="item.id"
@@ -53,7 +49,7 @@
           </el-tab-pane>
           <el-tab-pane label="销售信息" name="销售信息">
             <el-form-item label="销售单位" prop="productUnit">
-              <el-select v-model="modalData.productUnit" placeholder="请选择销售单位">
+              <el-select style="width: 50%;" v-model="modalData.productUnit" placeholder="请选择销售单位">
                 <el-option
                   v-for="item in getSaleUnit"
                   :key="item.name"
@@ -62,59 +58,87 @@
                 ></el-option>
               </el-select>
             </el-form-item>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="成本" prop="costPrice">
+                  <el-input
+                    :readonly="modalData.specType !== 0"
+                    :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入价格'"
+                    v-model="modalData.costPrice"
+                  >
+                    <template slot="append">单位（元）</template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="市场价" prop="marketPrice">
+                  <el-input
+                    :readonly="modalData.specType !== 0"
+                    :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入市场价'"
+                    v-model="modalData.marketPrice"
+                  >
+                    <template slot="append">单位（元）</template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="库存" prop="stockNum">
+                  <el-input
+                    :readonly="modalData.specType !== 0"
+                    :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入库存'"
+                    v-model="modalData.stockNum"
+                  ></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="重量" prop="weight">
+                  <el-input
+                    :readonly="modalData.specType !== 0"
+                    :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入重量'"
+                    v-model="modalData.weight"
+                  >
+                    <template slot="append">KG</template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="体积" prop="volume">
+                  <el-input
+                    :readonly="modalData.specType !== 0"
+                    :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入体积'"
+                    v-model="modalData.volume"
+                  >
+                    <template slot="append">立方米</template>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
             <el-form-item label="规格" prop="productSpecificationList">
-              <el-button @click="addSpecs">若有多规格请在此配置</el-button>
-            </el-form-item>
-            <el-form-item label="成本" prop="costPrice">
-              <el-input
-                :readonly="modalData.specType !== 0"
-                :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入价格'"
-                v-model="modalData.costPrice"
+              <el-button @click="addSpecs">修改规格配置</el-button>
+              <el-table
+                v-if="modalData.specType === 1 && modalData.productSpecificationList.length > 0"
+                :data="modalData.productSpecificationList"
+                border
+                style="width: 100%; margin-top: 10px;"
               >
-                <template slot="append">单位（元）</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="市场价" prop="marketPrice">
-              <el-input
-                :readonly="modalData.specType !== 0"
-                :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入市场价'"
-                v-model="modalData.marketPrice"
-              >
-                <template slot="append">单位（元）</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="库存" prop="stockNum">
-              <el-input
-                :readonly="modalData.specType !== 0"
-                :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入库存'"
-                v-model="modalData.stockNum"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="重量" prop="weight">
-              <el-input
-                :readonly="modalData.specType !== 0"
-                :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入重量'"
-                v-model="modalData.weight"
-              >
-                <template slot="append">KG</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="体积" prop="volume">
-              <el-input
-                :readonly="modalData.specType !== 0"
-                :placeholder="modalData.specType !== 0 ? '多规格商品在规格中设置' : '请输入体积'"
-                v-model="modalData.volume"
-              >
-                <template slot="append">立方米</template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="其他属性" prop="otherAttribute">
-              <el-button @click="addAttribute">添加其他属性</el-button>
+                <el-table-column prop="attributeValue" label="属性" align="center"></el-table-column>
+                <el-table-column prop="costPrice" label="成本(元)" align="center"></el-table-column>
+                <el-table-column prop="marketPrice" label="市场价(元)" align="center"></el-table-column>
+                <el-table-column prop="stockNum" label="库存" align="center"></el-table-column>
+                <el-table-column prop="weight" label="重量(kg)" align="center"></el-table-column>
+                <el-table-column prop="volume" label="体积(m³)" align="center"></el-table-column>
+              </el-table>
             </el-form-item>
+
           </el-tab-pane>
           <el-tab-pane label="其他信息" name="其他信息">
             <el-form-item label="产地" prop="productPlace">
               <el-cascader
+                style="width: 50%;"
                 v-model="place"
                 @change="handlePlaceChange"
                 :options="$api.mer_admin.getCityOptions()"
@@ -123,41 +147,36 @@
               ></el-cascader>
             </el-form-item>
             <el-form-item label="保质期" prop="shelfLife">
-              <el-input style="width:150px;" placeholder="请填写保质期" v-model="modalData.shelfLife">
+              <el-input style="width:50%;" placeholder="请填写保质期" v-model="modalData.shelfLife">
                 <div slot="suffix">天</div>
               </el-input>
             </el-form-item>
             <el-form-item label="商品介绍图" prop="productIntroducePhoto">
               <el-upload
-                class="upload-demo"
-                drag
                 :action="$api.mer_admin.uploadFile()"
                 :file-list="fileListOne"
-                list-type="picture"
+                list-type="picture-card"
                 :on-success="handleIntroducePhotoSuccess"
                 :on-remove="handleIntroducePhotoRemove"
                 :headers="{ token: 'Bearer ' + $cookie.get('token') }"
                 multiple
               >
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <i class="el-icon-plus"></i>
                 <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
               </el-upload>
             </el-form-item>
             <el-form-item label="商品视频" prop="productVideo">
               <el-upload
-                class="upload-demo"
-                drag
                 :action="$api.mer_admin.uploadFile()"
                 :limit="1"
                 :file-list="fileListTwo"
+                list-type="text"
                 accept=".mp4,.avi,.mov,.wmv,.flv"
                 :on-success="handleVideoSuccess"
                 :on-remove="handleVideoRemove"
                 :headers="{ token: 'Bearer ' + $cookie.get('token') }"
               >
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">将视频文件拖到此处，或<em>点击上传</em></div>
+                <el-button size="small" type="primary">点击上传</el-button>
                 <div class="el-upload__tip" slot="tip">支持mp4、avi、mov等视频格式，建议不超过50MB</div>
               </el-upload>
             </el-form-item>
@@ -171,16 +190,13 @@
     </el-dialog>
     <!-- 添加规格 -->
     <addSpecifications @getSpecs="getSpecs" ref="addSpecifications"></addSpecifications>
-    <!-- 属性 -->
-    <addAttribute @getAttribute="getAttribute" ref="addAttribute"></addAttribute>
   </div>
 </template>
 <script>
-import addAttribute from "./add-attribute.vue";
 import addSpecifications from "./add-specifications.vue";
 import { debounce, cloneDeep } from "lodash";
 export default {
-  components: { addSpecifications, addAttribute },
+  components: { addSpecifications },
   data() {
     return {
       currentPanel: "基础信息",
@@ -209,8 +225,6 @@ export default {
         singlePrice: "",
         //单库存
         singleStock: "",
-        //其他属性
-        otherAttribute: [], //[{"name":"颜色","value":"黄色；屎黄色"}]
         //折扣情况
         discountActivity: {
           // "endTime": "2024-08-31 00:00:00",
@@ -334,54 +348,19 @@ export default {
     handleClose() {
       this.modalConfig.show = false;
     },
-    handlePhotoChange(file, fileList) {
-      // console.log(fileList);
-    },
     handlePhotoSuccess(res, file, fileList) {
-      console.log(res, fileList);
-      this.modalData.productPhotoList = fileList.map((item, index) => {
-        if (index == 0) {
-          return {
-            isMain: 1,
-            url: item.response ? item.response.data : item.url
-          };
-        } else {
-          return {
-            isMain: 0,
-            url: item.response ? item.response.data : item.url
-          };
-        }
-      });
-      console.log(this.modalData.productPhotoList);
-      this.fileList = fileList.map(item => {
-        return {
-          name: item.name,
-          url: item.response ? item.response.data : item.url
-        };
-      });
+      this.fileList = fileList;
+      this.updateProductPhotoList();
     },
     handlePhotoRemove(file, fileList) {
-      console.log(file, fileList);
-      this.modalData.productPhotoList = fileList.map((item, index) => {
-        if (index == 0) {
-          return {
-            isMain: 1,
-            url: item.url
-          };
-        } else {
-          return {
-            isMain: 0,
-            url: item.url
-          };
-        }
-      });
-      console.log(this.modalData.productPhotoList);
-      this.fileList = fileList.map(item => {
-        return {
-          name: item.name,
-          url: item.url
-        };
-      });
+      this.fileList = fileList;
+      this.updateProductPhotoList();
+    },
+    updateProductPhotoList() {
+      this.modalData.productPhotoList = this.fileList.map((item, index) => ({
+        isMain: index === 0 ? 1 : 0,
+        url: item.response ? item.response.data : item.url,
+      }));
     },
     handlePlaceChange(e) {
       console.log(e);
@@ -461,28 +440,29 @@ export default {
       });
     }, 300),
     saveProduct(status) {
-      console.log("请求接口", this.modalData);
-      if (this.modalData.specType == 0) {
-        this.modalData.productAttributeList = [
+      const payload = { ...this.modalData };
+      console.log("请求接口", payload);
+      if (payload.specType == 0) {
+        payload.productAttributeList = [
           {
             id: "1821213026050191360",
             attributeName: "重量",
             attributeValue: "1斤"
           }
         ];
-        this.modalData.productSpecificationList = [
+        payload.productSpecificationList = [
           {
             attributeValue: "默认",
-            costPrice: this.modalData.costPrice,
-            marketPrice: this.modalData.marketPrice,
-            stockNum: this.modalData.stockNum,
-            weight: this.modalData.weight,
-            volume: this.modalData.volume
+            costPrice: payload.costPrice,
+            marketPrice: payload.marketPrice,
+            stockNum: payload.stockNum,
+            weight: payload.weight,
+            volume: payload.volume
           }
         ];
       }
-      this.modalData.status = status;
-      this.$api.mer_admin.saveProduct(this.modalData).then(res => {
+      payload.status = status;
+      this.$api.mer_admin.saveProduct(payload).then(res => {
         console.log(res);
         this.$emit("queryList");
         this.toggle();
@@ -509,7 +489,6 @@ export default {
               description: "",
               merchantId: "",
               name: "",
-              otherAttribute: [],
               productAttributeList: [],
               productCategoryId: "",
               productIntroducePhoto: "",
@@ -596,11 +575,6 @@ export default {
       if (!row.productAttributeList) {
         this.$set(this.modalData, "productAttributeList", []);
       }
-      if (row.otherAttribute) {
-        this.modalData.otherAttribute = JSON.parse(row.otherAttribute);
-      } else {
-        this.modalData.otherAttribute = [];
-      }
       console.log(this.modalData);
     },
     addSpecs() {
@@ -639,23 +613,6 @@ export default {
       this.$set(this.modalData, "productSpecificationList", tableData);
       this.$set(this.modalData, "productAttributeList", AttributeList);
     },
-    addAttribute() {
-      if (this.isAdd) {
-        this.$refs.addAttribute.toggle().add(this.modalData.otherAttribute);
-      } else {
-        this.$refs.addAttribute.toggle().update(this.modalData.otherAttribute);
-      }
-    },
-    getAttribute(data) {
-      console.log(data);
-      this.modalData.otherAttribute = [
-        {
-          name: data.name,
-          value: data.value.join(",")
-        }
-      ];
-      console.log(this.modalData);
-    },
     beforeTabLeave(activeName, oldActiveName) {
       if (this.passCheck.includes(activeName)) {
         return true;
diff --git a/src/views/modules/operation-management/commodity/popup/add-specifications.vue b/src/views/modules/operation-management/commodity/popup/add-specifications.vue
index a7ea44d..71225ab 100644
--- a/src/views/modules/operation-management/commodity/popup/add-specifications.vue
+++ b/src/views/modules/operation-management/commodity/popup/add-specifications.vue
@@ -1,142 +1,150 @@
 <template>
-  <div>
-    <obj-modal ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
-      :modalHandles="modalHandles">
-      <div slot="dialog__content">
-        <div v-for="(item, index) in AttributeData" :key="index">
-          <el-row>
-            <el-input style="width: 80%; margin: 0 20px 0 0" placeholder="请输入属性" v-model="item.attributeName" clearable>
-            </el-input>
-            <el-button @click="deleteAttribute(index)" type="danger" icon="el-icon-delete" circle></el-button>
-          </el-row>
-
-          <el-row>
-            <el-tag :key="tag" v-for="tag in item.attributeValue" closable :disable-transitions="false"
-              @close="handleClose(index, tag)">
-              {{ tag }}
-            </el-tag>
-            <el-input class="input-new-tag" v-if="item.inputVisible" v-model="inputValue" :ref="`saveTagInput${index}`"
-              size="small" @keyup.enter.native="handleInputConfirm(index)" @blur="handleInputConfirm(index)">
-            </el-input>
-            <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+新增规格</el-button></el-row>
+  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
+    <div class="spec-container">
+      <div class="spec-table-container">
+        <el-table :data="AttributeData" border style="width: 100%">
+          <el-table-column label="属性名" align="center">
+            <template slot-scope="{ row }">
+              <el-input v-model="row.attributeName" placeholder="请输入属性名" @change="calculation"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="属性值" align="center">
+            <template slot-scope="{ row, $index }">
+              <div class="spec-values-wrapper">
+                <el-tag
+                  :key="tag"
+                  v-for="tag in row.attributeValue"
+                  closable
+                  :disable-transitions="false"
+                  @close="handleClose($index, tag)"
+                >
+                  {{ tag }}
+                </el-tag>
+                <el-input
+                  class="input-new-tag"
+                  v-if="row.inputVisible"
+                  v-model="inputValue"
+                  :ref="`saveTagInput${$index}`"
+                  size="small"
+                  @keyup.enter.native="handleInputConfirm($index)"
+                  @blur="handleInputConfirm($index)"
+                >
+                </el-input>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput($index)">+ 增加属性值</el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100" align="center">
+            <template slot-scope="{ $index }">
+              <el-button @click="deleteAttribute($index)" type="danger" icon="el-icon-delete" circle></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="add-attribute-btn">
+          <el-button @click="addAttribute" type="primary" plain icon="el-icon-plus">添加属性</el-button>
         </div>
-        <el-row type="flex" justify="center">
-          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row>
-        <obj-table-plus slot="dialog__after" style="height: 50vh" ref="oTable" @query="queryTableData"
-          v-model="tableData" :tableCols="tableCols" :tableProp="tableProp" :toolbarProp="toolbarProp"
-          :tableEvent="tableEvent" :enableAutoQuery="false">
-          <!-- <div slot="tableTop" class="mb-2">
-            <el-button type="primary" size="mini" @click="calculation"
-              >计算属性</el-button
-            >
-          </div> -->
-        </obj-table-plus>
       </div>
-    </obj-modal>
-  </div>
+
+      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" max-height="50vh">
+        <el-table-column type="index" label="序号" width="60" align="center" fixed="left"></el-table-column>
+        <el-table-column prop="attributeValue" label="属性" align="center" min-width="160"></el-table-column>
+        <el-table-column label="成本（元）" align="center" min-width="160">
+          <template slot-scope="{ row }">
+            <el-input-number size="small" v-model="row.costPrice" :min="0" placeholder="请输入成本"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场价（元）" align="center" min-width="160">
+          <template slot-scope="{ row }">
+            <el-input-number size="small" v-model="row.marketPrice" :min="0" placeholder="请输入市场价"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存" align="center" min-width="160">
+          <template slot-scope="{ row }">
+            <el-input-number size="small" v-model="row.stockNum" :min="0" placeholder="请输入库存"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="重量（千克）" align="center" min-width="160">
+          <template slot-scope="{ row }">
+            <el-input-number size="small" v-model="row.weight" :min="0" placeholder="请输入重量"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="体积（立方米）" align="center" min-width="160">
+          <template slot-scope="{ row }">
+            <el-input-number size="small" v-model="row.volume" :min="0" placeholder="请输入体积"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="100" align="center">
+          <template slot-scope="{ $index }">
+            <el-popconfirm title="确认删除？" @confirm="deleteTableRow($index)" class="ml-1">
+              <el-button type="danger" size="mini" slot="reference">
+                删除
+              </el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="submitForm" :loading="isLoading">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
+    </span>
+  </el-dialog>
 </template>
 <script>
-import { debounce, cloneDeep } from "lodash";
+import { cloneDeep } from "lodash";
 export default {
   components: {},
   data() {
     return {
       isAdd: true,
-      //监控对象数据
+      isLoading: false,
+      dialogVisible: false,
+      dialogTitle: "属性",
       tableData: [],
-      //表格属性
-      tableProp: {
-        height: "auto",
-        border: true,
-        "auto-resize": false,
-        "print-config": {},
-        "row-config": { isCurrent: true, isHover: true },
-        "highlight-hover-row": true,
-        "highlight-current-row": true,
-      },
-      toolbarProp: {},
-      tableEvent: {},
-      modalConfig: {
-        title: "属性",
-        show: false,
-        width: "80%",
-      },
-      modalData: {},
       AttributeData: [
         {
           attributeName: "",
           attributeValue: [],
           inputVisible: false,
         },
-      ], //
-      input: "",
-      dynamicTags: [],
+      ],
       inputValue: "",
     };
   },
   methods: {
-    queryTableData(pageNo, pageSize) {},
-    toggle(e) {
-      if (this.modalConfig.show == false) {
-        this.modalConfig.show = true;
-      } else {
-        this.modalConfig.show = false;
-      }
-      if (e) {
-        this.init(cloneDeep(e.row));
-      }
+    toggle() {
+      this.dialogVisible = !this.dialogVisible;
       return {
         add: (productAttributeList, productSpecificationList) => {
-          this.modalConfig.title = "添加属性";
-          if (productAttributeList.length == 0) {
-            this.AttributeData = [
-              {
-                attributeName: "",
-                attributeValue: [],
-                inputVisible: false,
-              },
-            ];
-          } else {
-            this.AttributeData = productAttributeList.map((item) => {
-              return {
-                attributeName: item.attributeName,
-                attributeValue: item.attributeValue.split(","),
-                id: item.id,
-                inputVisible: false,
-              };
-            });
-          }
-          this.tableData = productSpecificationList;
+          this.dialogTitle = "添加属性";
           this.isAdd = true;
+          this.initData(productAttributeList, productSpecificationList);
         },
         update: (productAttributeList, productSpecificationList) => {
-          this.modalConfig.title = "编辑属性";
-          console.log(productAttributeList, productSpecificationList);
-          if (productAttributeList.length == 0) {
-            this.AttributeData = [
-              {
-                attributeName: "",
-                attributeValue: [],
-                inputVisible: false,
-              },
-            ];
-          } else {
-            this.AttributeData = productAttributeList.map((item) => {
-              return {
-                attributeName: item.attributeName,
-                attributeValue: item.attributeValue.split(","),
-                id: item.id,
-                inputVisible: false,
-              };
-            });
-          }
-          this.tableData = productSpecificationList;
+          this.dialogTitle = "编辑属性";
           this.isAdd = false;
+          this.initData(productAttributeList, productSpecificationList);
         },
       };
     },
-    init(row) {
-      this.modalData = row;
+    initData(productAttributeList, productSpecificationList) {
+      if (!productAttributeList || productAttributeList.length === 0) {
+        this.AttributeData = [
+          {
+            attributeName: "",
+            attributeValue: [],
+            inputVisible: false,
+          },
+        ];
+      } else {
+        this.AttributeData = productAttributeList.map((item) => ({
+          attributeName: item.attributeName,
+          attributeValue: item.attributeValue ? item.attributeValue.split(",").filter(Boolean) : [],
+          id: item.id,
+          inputVisible: false,
+        }));
+      }
+      this.tableData = productSpecificationList || [];
     },
     handleClose(index, tag) {
       this.AttributeData[index].attributeValue.splice(
@@ -145,267 +153,125 @@ export default {
       );
       this.calculation();
     },
-    //聚焦
     showInput(index) {
-      console.log(index);
-
+      this.AttributeData.forEach((item, i) => {
+        if (i !== index) item.inputVisible = false;
+      });
       this.AttributeData[index].inputVisible = true;
       this.$nextTick(() => {
-        console.log(this.$refs[`saveTagInput${index}`]);
         this.$refs[`saveTagInput${index}`][0].focus();
       });
     },
     handleInputConfirm(index) {
       let inputValue = this.inputValue;
-      if (inputValue) {
+      if (inputValue && !this.AttributeData[index].attributeValue.includes(inputValue)) {
         this.AttributeData[index].attributeValue.push(inputValue);
+        this.calculation();
       }
       this.AttributeData[index].inputVisible = false;
       this.inputValue = "";
-      this.calculation();
     },
-    //添加属性
     addAttribute() {
       this.AttributeData.push({
         attributeName: "",
         attributeValue: [],
         inputVisible: false,
       });
-      console.log(this.AttributeData);
     },
-    //删除属性
     deleteAttribute(index) {
       this.AttributeData.splice(index, 1);
       this.calculation();
     },
-    //计算属性
+    deleteTableRow(index) {
+      this.tableData.splice(index, 1);
+    },
     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 {
-              attributeList: [
-                {
-                  attributeName: this.AttributeData[i].attributeName,
-                  attributeValue: item,
-                },
-              ],
-              name: item,
-            };
-          });
-        } else {
-          data.forEach((it) => {
-            this.AttributeData[i].attributeValue.forEach((e) => {
-              console.log(it.attributeList);
-              let attributeList = JSON.parse(JSON.stringify(it.attributeList));
-              attributeList.push({
-                attributeName: this.AttributeData[i].attributeName,
-                attributeValue: e,
-              });
-              list.push({
-                attributeList,
-                name: it.name + e,
-              });
-              console.log(list);
-              // list.push(it + e);
-            });
-          });
-          data = list;
-          list = [];
-        }
+      const validAttributes = this.AttributeData.filter(
+        (attr) => attr.attributeName && attr.attributeValue.length > 0
+      );
+
+      if (validAttributes.length === 0) {
+        this.tableData = [];
+        return;
       }
-      this.tableData = data.map((item) => {
+
+      let result = validAttributes[0].attributeValue.map((value) => [
+        {
+          attributeName: validAttributes[0].attributeName,
+          attributeValue: value,
+        },
+      ]);
+
+      for (let i = 1; i < validAttributes.length; i++) {
+        let nextResult = [];
+        const { attributeName, attributeValue } = validAttributes[i];
+        for (const existing of result) {
+          for (const val of attributeValue) {
+            nextResult.push([
+              ...existing,
+              {
+                attributeName,
+                attributeValue: val,
+              },
+            ]);
+          }
+        }
+        result = nextResult;
+      }
+
+      this.tableData = result.map((attributeList) => {
+        const attributeValue = attributeList.map((attr) => attr.attributeValue).join("/");
+        // 保留旧数据
+        const oldData = this.tableData.find(item => item.attributeValue === attributeValue);
         return {
-          attributeList: item.attributeList,
-          attributeValue: item.name,
-          salePrice: 0,
-          costPrice: 0,
-          marketPrice: 0,
-          stockNum: 0,
-          weight: 0,
-          volume: 0,
+          attributeList,
+          attributeValue,
+          salePrice: oldData?.salePrice || 0,
+          costPrice: oldData?.costPrice || 0,
+          marketPrice: oldData?.marketPrice || 0,
+          stockNum: oldData?.stockNum || 0,
+          weight: oldData?.weight || 0,
+          volume: oldData?.volume || 0,
         };
       });
-      console.log(data);
+    },
+    submitForm() {
+      this.$emit(
+        "getSpecs",
+        this.tableData,
+        this.AttributeData,
+      );
+      this.dialogVisible = false;
     },
   },
-  computed: {
-    tableCols() {
-      return [
-        { title: "序号", type: "seq", width: "60px", fixed: "left" },
-        {
-          title: "属性",
-          field: "attributeValue",
-          align: "center",
-          "min-width": "160px",
-        },
-        {
-          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: "marketPrice",
-          align: "center",
-          "min-width": "160px",
-          type: "jsx",
-          render: ({ row }) => {
-            return (
-              <div>
-                <el-input-number
-                  min={0}
-                  size="small"
-                  v-model={row.marketPrice}
-                  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: "重量（千克）",
-          field: "weight",
-          align: "center",
-          "min-width": "160px",
-          type: "jsx",
-          render: ({ row }) => {
-            return (
-              <div>
-                <el-input-number
-                  min={0}
-                  size="small"
-                  v-model={row.weight}
-                  placeholder="请输入重量"
-                ></el-input-number>
-              </div>
-            );
-          },
-        },
-        {
-          title: "体积（立方米）",
-          field: "volume",
-          align: "center",
-          "min-width": "160px",
-          type: "jsx",
-          render: ({ row }) => {
-            return (
-              <div>
-                <el-input-number
-                  min={0}
-                  size="small"
-                  v-model={row.volume}
-                  placeholder="请输入体积"
-                ></el-input-number>
-              </div>
-            );
-          },
-        },
-        {
-          title: "操作",
-          fixed: "right",
-          width: "150px",
-          type: "jsx",
-          align: "center",
-          render: (row) => {
-            let remove = () => {
-              this.tableData.splice(row.$rowIndex, 1);
-            };
-            return (
-              <el-popconfirm onConfirm={remove} title="确认删除？" class="ml-1">
-                <el-button type="danger" size="mini" slot="reference">
-                  删除
-                </el-button>
-              </el-popconfirm>
-            );
-          },
-        },
-      ];
-    },
-    modalHandles() {
-      return [
-        {
-          label: "取消",
-          handle: () => {
-            this.toggle();
-          },
-        },
-        {
-          label: this.isAdd ? "确认添加" : "确认修改",
-          type: "primary",
-          loading: this.isLoading,
-          // disabled: () => this.tableData.length <= 0,
-          // submit: true,
-          handle: () => {
-            this.$emit(
-              "getSpecs",
-              this.tableData,
-              this.AttributeData,
-            );
-            this.toggle();
-          },
-        },
-      ];
-    },
-  },
-  asyncComputed: {},
 };
 </script>
 <style lang="scss" scoped>
-.el-row {
-  margin-bottom: 10px;
+.spec-container {
+  max-height: 60vh;
+  overflow-y: auto;
+  .add-attribute-btn {
+    text-align: center;
+    margin-top: 10px;
+  }
 }
-
-.el-tag+.el-tag {
+.spec-values-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 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
+</style>