feat: 商品管理样式调优

src/api/modules/mer_admin.js

@@ -51,6 +51,13 @@ export const mer_admin = {
       data
     );
   },
+  //商品分页 V2
+  productV2Page: data => {
+    return $http.post(
+      `/merchant-api/product/v2/page?pageNumber=${data.p.pageNumber}&pageSize=${data.p.pageSize}`,
+      data
+    );
+  },
   //商品规格分页
   getProductSpecificationPage: (data, params) => {
     return $http.request({
@@ -64,6 +71,18 @@ export const mer_admin = {
   getProductOverview: data => {
     return $http.post(`/merchant-api/product/overview`, data);
   },
+  //商品概况 V2
+  productV2Overview: data => {
+    return $http.post(`/merchant-api/product/v2/overview`, data);
+  },
+  //商品详情
+  productDetail: data => {
+    return $http.request({
+      method: 'get',
+      url: '/merchant-api/product/detail',
+      params: data
+    })
+  },
   //商户商品分类
   getProductCategory: data => {
     return $http.request({

src/views/modules/operation-management/commodity/index.vue

@@ -1,155 +1,184 @@
 <template>
-  <div>
+  <div class="page-container">
-    <div v-if="isMerchant" style="height: calc(100vh - 200px)">
+    <div v-if="isMerchant">
-      <obj-table-plus
+      <el-card class="search-card" shadow="never">
-        ref="oTable"
+        <el-form :model="formInline" ref="searchForm" label-position="top" class="search-form" size="small">
-        style="height: 100%"
+          <el-row :gutter="15">
-        :tableCols="tableCols"
+            <el-col :span="6">
-        :tableProp="tableProp"
+              <el-form-item label="商品名称" prop="name">
-        @query="queryList"
+                <el-input v-model="formInline.name" placeholder="请输入商品名称" clearable></el-input>
-        v-model="dataList"
-        :tableEvent="tableEvent"
-        :enableAutoQuery="false"
-      >
-        <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.name"
-                placeholder="商品搜索"
-              ></el-input>
               </el-form-item>
-            <el-form-item v-if="marketList.length > 0" label="菜市场">
+            </el-col>
-              <el-select
+            <el-col :span="6" v-if="marketList.length > 0">
-                @change="getData"
+              <el-form-item label="店铺" prop="shopId">
-                v-model="formInline.marketId"
+                <el-select v-model="formInline.shopId" placeholder="请选择店铺" style="width: 100%;">
-                placeholder="请选择菜市场"
+                  <el-option v-for="item in storeList" :key="item.shopId" :label="item.shopName" :value="item.shopId"></el-option>
-              >
-                <el-option
-                  v-for="item in marketList"
-                  :key="item.marketId"
-                  :label="item.marketName"
-                  :value="item.marketId"
-                ></el-option>
                 </el-select>
               </el-form-item>
-            <el-form-item v-if="marketList.length > 0" label="店铺">
+            </el-col>
-              <el-select v-model="formInline.shopId" placeholder="请选择店铺">
+            <el-col :span="6">
-                <el-option
+              <el-form-item label="状态" prop="status">
-                  v-for="item in storeList"
+                <el-select v-model="formInline.status" placeholder="请选择状态" style="width: 100%;" clearable>
-                  :key="item.shopId"
+                  <el-option label="上架" value="UP"></el-option>
-                  :label="item.shopName"
+                  <el-option label="下架" value="DOWN"></el-option>
-                  :value="item.shopId"
-                ></el-option>
                 </el-select>
               </el-form-item>
-            <el-form-item label="是否预售商品">
+            </el-col>
-              <el-select
+            <el-col :span="6">
-                v-model="formInline.isAdvanceSell"
+              <el-form-item label="是否折扣" prop="isDiscount">
-                placeholder="请选择是否预售"
+                <el-select v-model="formInline.isDiscount" placeholder="请选择是否折扣" style="width: 100%;" clearable>
-              >
                   <el-option label="是" :value="1"></el-option>
                   <el-option label="否" :value="0"></el-option>
                 </el-select>
               </el-form-item>
-            <el-form-item>
+            </el-col>
-              <el-button type="primary" @click="$refs.oTable.reload()"
+          </el-row>
-                >查询</el-button
+          <el-row>
-              >
+            <el-col :span="24" class="search-buttons">
-              <el-button type="primary" @click="Reset">重置</el-button>
+              <el-button type="primary" @click="handleSearch" icon="el-icon-search" size="small">查询</el-button>
-            </el-form-item>
+              <el-button @click="handleReset" icon="el-icon-refresh" size="small">重置</el-button>
+            </el-col>
+          </el-row>
         </el-form>
-          <div class="stat-list">
+      </el-card>
+
+      <el-card class="stats-card" shadow="never">
+        <el-row :gutter="20">
+          <el-col :span="6">
             <div class="stat-item">
-              <i style="font-size: 22px" class="el-icon-s-goods"></i>
+              <div class="stat-label">总商品数量(个)</div>
-              <div class="stat-right">
+              <div class="stat-value">{{ overview.productCount || 0 }}</div>
-                <div class="stat-title">总商品数量（个）</div>
-                <div class="stat-value">
-                  <span style="font-size: 20px">{{
-                    overview.productCount
-                  }}</span>
-                </div>
-              </div>
             </div>
+          </el-col>
+          <el-col :span="6">
             <div class="stat-item">
-              <i style="font-size: 22px" class="el-icon-s-shop"></i>
+              <div class="stat-label">上架中商品数量(个)</div>
-              <div class="stat-right">
+              <div class="stat-value">{{ overview.productOnSaleCount || 0 }}</div>
-                <div class="stat-title">上架中商品数量（个）</div>
-                <div class="stat-value">
-                  <span style="font-size: 20px">{{
-                    overview.productOnSaleCount
-                  }}</span>
-                </div>
-              </div>
             </div>
+          </el-col>
+          <el-col :span="6">
             <div class="stat-item">
-              <i style="font-size: 22px" class="el-icon-s-marketing"></i>
+              <div class="stat-label">折扣商品数量(个)</div>
-              <div class="stat-right">
+              <div class="stat-value">{{ overview.productDiscountCount || 0 }}</div>
-                <div class="stat-title">折扣商品数量（个）</div>
-                <div class="stat-value">
-                  <span style="font-size: 20px">{{
-                    overview.productDiscountCount
-                  }}</span>
-                </div>
-              </div>
             </div>
+          </el-col>
+          <el-col :span="6">
             <div class="stat-item">
-              <i style="font-size: 22px" class="el-icon-s-promotion"></i>
+              <div class="stat-label">仓库中商品数量(个)</div>
-              <div class="stat-right">
+              <div class="stat-value">{{ overview.productWarehouseCount || 0 }}</div>
-                <div class="stat-title">仓库中商品数量（个）</div>
-                <div class="stat-value">
-                  <span style="font-size: 20px">{{
-                    overview.productWarehouseCount
-                  }}</span>
             </div>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="table-card" shadow="never">
+        <div style="margin-bottom: 15px;">
+          <el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
+          <el-button :disabled="selectList.length <= 0" type="danger" size="small" @click="deleteProduct">批量删除</el-button>
         </div>
-            </div>
+        <el-table
-          </div>
+          :data="dataList"
-          <el-tabs v-model="activeName" @tab-click="handleClick">
+          v-loading="loading"
-            <el-tab-pane label="在售" name="在售"></el-tab-pane>
+          style="width: 100%"
-            <el-tab-pane label="仓库中" name="仓库中"></el-tab-pane>
+          @selection-change="handleSelectionChange"
-            <el-tab-pane label="折扣" name="折扣"></el-tab-pane>
-          </el-tabs>
-          <div class="mb-2">
-            <el-button type="primary" size="small" @click="addProduct"
-              >添加商品</el-button
-            >
-            <el-button
-              :disabled="selectList.length <= 0"
-              type="danger"
           size="small"
-              @click="deleteProduct"
-              >批量删除</el-button
         >
-          </div>
+          <el-table-column type="selection" width="55" fixed="left"></el-table-column>
+          <el-table-column label="商品图" align="center" width="80">
+            <template slot-scope="{ row }">
+              <el-image
+                v-if="row.productMainImg"
+                :src="row.productMainImg"
+                :preview-src-list="[row.productMainImg]"
+                style="width: 40px; height: 40px;"
+                fit="cover"
+              ></el-image>
+              <span v-else>暂无商品图</span>
             </template>
-      </obj-table-plus>
+          </el-table-column>
+          <el-table-column prop="name" label="商品名称" align="center">
+            <template slot-scope="{ row }">{{ row.name || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="shopName" label="店铺名称" align="center">
+            <template slot-scope="{ row }">{{ row.shopName || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="商品售价" align="center">
+            <template slot-scope="{ row }">
+              <span style="color: red;">
+                <span v-if="row.minSalePrice == row.maxSalePrice">￥{{ row.minSalePrice || 0 }}</span>
+                <span v-else>￥{{ row.minSalePrice || 0 }}~￥{{ row.maxSalePrice || 0 }}</span>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="折扣" align="center">
+            <template slot-scope="{ row }">
+              <span v-if="row.isDiscount === 1">{{ row.discount }}折</span>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="saleNum" label="销量" align="center">
+            <template slot-scope="{ row }">{{ row.saleNum || '-' }}</template>
+          </el-table-column>
+          <el-table-column prop="stockNum" label="库存" align="center">
+            <template slot-scope="{ row }">{{ row.stockNum || '-' }}</template>
+          </el-table-column>
+          <el-table-column label="状态" align="center">
+            <template slot-scope="{ row }">
+              <el-popconfirm
+                :title="row.status == 'DOWN' ? '当前为下架状态，是否更改为上架状态？' : '当前为上架状态，是否更改为下架状态？'"
+                :confirm-button-text="row.status == 'DOWN' ? '确认上架' : '确认下架'"
+                @confirm="toggleStatus(row)"
+              >
+                <el-tag
+                  slot="reference"
+                  size="mini"
+                  :type="row.status == 'DOWN' ? 'info' : 'success'"
+                  style="cursor: pointer;"
+                >
+                  {{ row.status == "DOWN" ? "已下架" : "上架中" }}
+                </el-tag>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+          <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>
+              <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="setDiscounts(row)">设置折扣</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.pageNumber"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          class="pagination-container"
+        ></el-pagination>
+      </el-card>
+
       <!-- 添加或编辑 -->
-      <add-or-update
+      <add-or-update @queryList="fetchData" ref="addOrUpdate"></add-or-update>
-        @queryList="$refs.oTable.reload()"
-        ref="addOrUpdate"
-      ></add-or-update>
       <!-- 改价格 -->
-      <AddPrice ref="AddPrice" @queryList="$refs.oTable.reload()"></AddPrice>
+      <AddPrice ref="AddPrice" @queryList="fetchData"></AddPrice>
       <!-- 改库存 -->
-      <addStock ref="addStock" @queryList="$refs.oTable.reload()"></addStock>
+      <addStock ref="addStock" @queryList="fetchData"></addStock>
       <!-- 打折扣 -->
-      <AddDiscount
+      <AddDiscount ref="AddDiscount" @queryList="fetchData"></AddDiscount>
-        ref="AddDiscount"
-        @queryList="$refs.oTable.reload()"
-      ></AddDiscount>
     </div>
     <div style="height: calc(100vh - 200px)" v-else>
       <el-empty :image-size="200" description="请先去完成商品哦"></el-empty>
@@ -167,20 +196,18 @@ export default {
   components: { AddOrUpdate, AddPrice, addStock, AddDiscount },
   data() {
     return {
-      activeName: "在售",
       dataList: [],
+      loading: false,
+      pagination: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
       formInline: {
         name: "",
-        marketId: "",
         shopId: "",
-        isAdvanceSell: 0
+        status: null,
-      },
+        isDiscount: null
-      tableProp: {
-        "auto-resize": true,
-        border: true,
-        height: "auto",
-        "row-id": "id",
-        "show-overflow": false
       },
       productFilterType: "SALE",
       selectList: [],
@@ -190,31 +217,42 @@ export default {
   created() {
     this.formInline = {
       name: "",
-      marketId: this.marketId,
       shopId: this.shopId,
-      isAdvanceSell: 0
+      status: null,
+      isDiscount: null
     };
-    this.$nextTick(() => {
+    this.fetchData();
-      this.$refs.oTable.reload();
-    });
   },
   methods: {
-    //如果有多个菜市场调用
+    handleSearch() {
-    getData() {
+      this.pagination.pageNumber = 1;
-      // this.$api.mer_admin
+      this.fetchData();
-      //   .storeList({ marketId: this.formInline.marketId })
+    },
-      //   .then((res) => {
+    handleReset() {
-      //     this.formInline.shopId = res.data.data[0].shopId;
+      this.$refs.searchForm.resetFields();
-      //     this.$nextTick(() => {
+      this.formInline = {
-      //       this.$refs.oTable.reload();
+        name: "",
-      //     });
+        shopId: this.shopId,
-      //   });
+        status: null,
+        isDiscount: null
+      };
+      this.handleSearch();
+    },
+    handleSizeChange(val) {
+      this.pagination.pageSize = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.pagination.pageNumber = val;
+      this.fetchData();
+    },
+    handleSelectionChange(val) {
+      this.selectList = val;
     },
     addProduct() {
       this.$refs.addOrUpdate.toggle().add(this.formInline.shopId);
     },
     deleteProduct() {
-      console.log(this.selectList);
       let integers = this.selectList.map(item => {
         return item.id;
       });
@@ -224,9 +262,8 @@ export default {
         type: "warning"
       })
         .then(() => {
-          console.log("111");
           this.$api.mer_admin.BatchDeleteProducts(integers).then(res => {
-            this.$refs.oTable.reload();
+            this.fetchData();
           });
         })
         .catch(() => {
@@ -236,13 +273,13 @@ export default {
           });
         });
     },
-    queryList(pageNo, pageSize) {
+    fetchData() {
-      console.log(this.formInline);
+      this.loading = true;
       this.$api.mer_admin
-        .getProductPage({
+        .productV2Page({
           p: {
-            pageNumber: pageNo,
+            pageNumber: this.pagination.pageNumber,
-            pageSize: pageSize
+            pageSize: this.pagination.pageSize
           },
           ...this.formInline,
           productFilterType: this.productFilterType,
@@ -250,241 +287,46 @@ export default {
           productQuerySortParam: []
         })
         .then(res => {
-          console.log(res);
+          this.dataList = res.data.data.data;
-          this.$refs.oTable.complete(
+          this.pagination.total = Number(res.data.data.total);
-            res.data.data.data,
-            Number(res.data.data.total)
-          );
         })
         .catch(err => {
-          this.$refs.oTable.complete(false);
+          this.dataList = [];
+          this.pagination.total = 0;
+        }).finally(() => {
+          this.loading = false;
         });
-      this.$api.mer_admin.getProductOverview(this.formInline).then(res => {
+      this.$api.mer_admin.productV2Overview(this.formInline).then(res => {
-        console.log(res, "概况");
         this.overview = res.data.data;
       });
     },
-    Reset() {
+    toggleStatus(row) {
-      this.formInline = {
+      let data = {
-        name: "",
+        ids: [row.id],
-        marketId: this.marketId,
+        status: row.status === "UP" ? "DOWN" : "UP"
-        shopId: this.shopId,
-        isAdvanceSell: 0
       };
-      this.$refs.oTable.reload();
+      this.$api.mer_admin.putOnShelvesProducts(data).then(res => {
+        this.fetchData();
+      });
     },
-    handleClick() {
+    async editProduct(row) {
-      switch (this.activeName) {
+      const res = await this.$api.mer_admin.productDetail({ id: row.id });
-        case "在售":
+      this.$refs.addOrUpdate.toggle(res.data.data).update();
-          this.productFilterType = "SALE";
+    },
-          break;
+    async priceAdjustment(row) {
-        case "仓库中":
+      const res = await this.$api.mer_admin.productDetail({ id: row.id });
-          this.productFilterType = "WAREHOUSE";
+      this.$refs.AddPrice.toggle(res.data.data).update();
-          break;
+    },
-        case "折扣":
+    async changeInventory(row) {
-          this.productFilterType = "DISCOUNT";
+      const res = await this.$api.mer_admin.productDetail({ id: row.id });
-          break;
+      this.$refs.addStock.toggle(res.data.data).update();
-      }
+    },
-      this.$refs.oTable.reload();
+    async setDiscounts(row) {
+      const res = await this.$api.mer_admin.productDetail({ id: row.id });
+      this.$refs.AddDiscount.toggle(res.data.data).update();
     }
   },
   computed: {
-    tableCols() {
-      return [
-        { type: "checkbox", width: "60px", fixed: "left" },
-        // { type: "seq", width: "60px", align: "center", title: "序号" },
-        {
-          title: "商品图",
-          field: "productPhotoList",
-          align: "center",
-          width: "80px",
-          type: "jsx",
-          render: ({ row }) => {
-            if (row.productPhotoList.length > 0) {
-              return (
-                <el-image
-                  preview-src-list={row.productPhotoList.map(item => {
-                    return item.url;
-                  })}
-                  src={row.productPhotoList[0].url}
-                ></el-image>
-              );
-            } else {
-              return <span>暂无商品图</span>;
-            }
-          }
-        },
-        {
-          title: "商品名称",
-          align: "center",
-          field: "name"
-        },
-        {
-          title: "商品售价",
-          align: "center",
-          field: "minSalePrice",
-          type: "jsx",
-          render: ({ row }) => {
-            if (row.minSalePrice == row.maxSalePrice) {
-              return <span>￥{row.minSalePrice}</span>;
-            } else {
-              return (
-                <span>
-                  ￥{row.minSalePrice}~￥{row.maxSalePrice}
-                </span>
-              );
-            }
-          }
-        },
-        {
-          title: "折扣",
-          align: "center",
-          field: "discountActivity",
-          type: "jsx",
-          render: ({ row }) => {
-            if (row.discountActivity) {
-              return <span>{row.discountActivity.ruleObject.discount}折</span>;
-            }
-          }
-        },
-        {
-          title: "销量",
-          align: "center",
-          field: "saleNum"
-        },
-        {
-          title: "库存",
-          align: "center",
-          field: "stockNum"
-        },
-        {
-          title: "是否为预售商品",
-          align: "center",
-          field: "isAdvanceSell",
-          type: "jsx",
-          render: ({ row }) => {
-            return <span>{row.isAdvanceSell == 1 ? "是" : "否"}</span>;
-          }
-        },
-        {
-          title: "状态",
-          // fixed: "right",
-          type: "jsx",
-          align: "center",
-          "title-suffix": {
-            message: "点击上架/下架切换责任书状态",
-            icon: "vxe-icon-question-circle-fill"
-          },
-          render: ({ row }) => {
-            let Enable = () => {
-              let data = {
-                ids: [row.id],
-                status: "UP"
-              };
-              if (row.status == "UP") {
-                data.status = "DOWN";
-              } else {
-                data.status = "UP";
-              }
-              this.$api.mer_admin.putOnShelvesProducts(data).then(res => {
-                console.log(res);
-                this.$refs.oTable.reload();
-              });
-            };
-            return (
-              <el-popconfirm
-                title={
-                  row.status == "DOWN"
-                    ? "当前为下架状态，是否更改为上架状态？"
-                    : "当前为上架状态，是否更改为下架状态？"
-                }
-                confirmButtonText={
-                  row.status == "DOWN" ? "确认上架" : "确认下架"
-                }
-                onConfirm={Enable}
-              >
-                <el-button
-                  slot="reference"
-                  size="mini"
-                  plain
-                  type={row.status == "DOWN" ? "info" : "success"}
-                >
-                  {row.status == "DOWN" ? "已下架" : "上架中"}
-                </el-button>
-              </el-popconfirm>
-            );
-          }
-        },
-        {
-          title: "操作 (提示：下架后可进行操作)",
-          fixed: "right",
-          type: "jsx",
-          align: "center",
-          width: "340px",
-          render: ({ row }) => {
-            let edit = () => {
-              this.$refs.addOrUpdate.toggle(row).update();
-            };
-            let priceAdjustment = () => {
-              console.log(row);
-              this.$refs.AddPrice.toggle(row).update();
-            };
-            let changeInventory = () => {
-              this.$refs.addStock.toggle(row).update();
-            };
-            let setDiscounts = () => {
-              this.$refs.AddDiscount.toggle(row).update();
-            };
-            return (
-              <div>
-                <el-button
-                  size="mini"
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={edit}
-                >
-                  编辑
-                </el-button>
-                <el-button
-                  size="mini"
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={priceAdjustment}
-                >
-                  改价
-                </el-button>
-                <el-button
-                  size="mini"
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={changeInventory}
-                >
-                  改库存
-                </el-button>
-                <el-button
-                  size="mini"
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={setDiscounts}
-                >
-                  设置折扣
-                </el-button>
-              </div>
-            );
-          }
-        }
-      ];
-    },
-    tableEvent() {
-      return {
-        "checkbox-all": ({ records, reserves }) => {
-          this.selectList = [...records, ...reserves];
-        },
-        "checkbox-change": ({ records, reserves }) => {
-          this.selectList = [...records, ...reserves];
-        }
-      };
-    },
     ...mapState("userData", [
       "isMerchant",
       "marketList",
@@ -496,27 +338,46 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
-.stat-list {
+.page-container {
-  display: flex;
+}
-  align-items: center;
+.search-card {
-  /* justify-content: space-between; */
+  margin-bottom: 15px;
-  // flex-wrap: wrap;
+}
-  margin-bottom: 10px;
+.stats-card {
-  padding: 10px;
+  margin-bottom: 15px;
-  border: 1px solid #ccc;
 }
 .stat-item {
-  width: 20%;
+  text-align: center;
-  margin: 20px 20px;
+  background-color: #f5f5f5;
-  display: flex;
+  padding: 15px;
-  align-items: center;
+  border-radius: 4px;
 }
-.stat-right {
+.stat-label {
-  margin-left: 12px;
+  font-size: 14px;
-  font-size: 18px;
+  color: #606266;
-}
-.stat-title {
   margin-bottom: 5px;
 }
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #409EFF;
+}
+.search-form .el-form-item {
+  margin-bottom: 10px;
+}
+.search-buttons {
+  text-align: left;
+}
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
+<style>
+.search-form .el-form-item__label {
+  padding-bottom: 0px !important;
+  font-size: 12px;
+  line-height: 20px;
+}
 </style>

src/views/modules/operation-management/commodity/popup/add-attribute.vue

@@ -1,221 +1,119 @@
 <template>
-  <div>
+  <el-dialog title="其他属性" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
-    <obj-modal
+    <div class="attribute-container">
-      ref="modal"
+      <el-alert title="示例：属性名称：温度，属性内容：常温,冷饮" type="info" show-icon :closable="false" style="margin-bottom: 16px"></el-alert>
-      labelWidth="150px"
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
-      :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
+          <el-input style="width: 80%" placeholder="请输入属性名称" v-model="ruleForm.name" clearable></el-input>
-              style="width: 80%"
-              placeholder="请输入属性名称"
-              v-model="ruleForm.name"
-              clearable
-            ></el-input>
         </el-form-item>
         <el-form-item label="属性内容：" prop="value">
-            <el-tag
+          <el-tag :key="tag" v-for="tag in ruleForm.value" closable :disable-transitions="false" @close="handleClose(tag)">
-              :key="tag"
-              v-for="tag in ruleForm.value"
-              closable
-              :disable-transitions="false"
-              @close="handleClose(tag)"
-            >
             {{ tag }}
           </el-tag>
-            <el-input
+          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
-              class="input-new-tag"
+            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
-              v-if="inputVisible"
-              v-model="inputValue"
-              ref="saveTagInput"
-              size="small"
-              @keyup.enter.native="handleInputConfirm"
-              @blur="handleInputConfirm"
-            >
           </el-input>
-            <el-button
+          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加内容</el-button>
-              v-else
-              class="button-new-tag"
-              size="small"
-              @click="showInput"
-              >+添加内容</el-button
-            >
         </el-form-item>
       </el-form>
     </div>
-    </obj-modal>
+    <span slot="footer" class="dialog-footer">
-  </div>
+      <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,
-      //表格属性
+      dialogVisible: false,
-      modalConfig: {
-        title: "属性",
-        show: false,
-        width: "80%",
-      },
-      modalData: {},
-      inputValue: "",
       inputVisible: false,
+      inputValue: "",
       ruleForm: {
         name: "",
         value: [],
       },
       rules: {
         name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
-        value: [
+        value: [{ required: true, type: 'array', message: "请添加属性内容", trigger: "change" }],
-          {
-            required: true,
-            message: "请输入属性内容",
-            trigger: "blur",
-          },
-        ],
       },
     };
   },
   methods: {
-    queryTableData(pageNo, pageSize) {},
+    toggle() {
-    toggle(e) {
+      this.dialogVisible = !this.dialogVisible;
-      if (this.modalConfig.show == false) {
-        this.modalConfig.show = true;
-      } else {
-        this.modalConfig.show = false;
-      }
-      if (e) {
-        this.init(cloneDeep(e.row));
-      }
       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);
+          this.isAdd = false;
-          if (data.length == 0) {
+          this.initData(data);
-            this.ruleForm = {
+        },
-              name: "",
-              value: [],
       };
-          } else {
+    },
+    initData(data) {
+      if (data && data.length > 0 && data[0].name) {
         this.ruleForm = {
           name: data[0].name,
-              value: data[0].value.split(","),
+          value: data[0].value ? data[0].value.split(",") : [],
         };
+      } else {
+        this.ruleForm = { name: "", value: [] };
       }
-          this.isAdd = false;
+      this.inputVisible = false;
-        },
+      this.inputValue = "";
-      };
-    },
-    init(row) {
-      this.modalData = row;
     },
     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 = "";
     },
-  },
+    submitForm() {
-  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.$emit("getAttribute", {
-                this.toggle();
+            name: this.ruleForm.name,
+            value: this.ruleForm.value.join(","),
+          });
+          this.dialogVisible = false;
         }
       });
     },
   },
-      ];
-    },
-  },
-  asyncComputed: {},
 };
 </script>
 <style lang="scss" scoped>
-.Example {
+.attribute-container {
-  margin: 0 0 20px 20px;
+  .el-tag + .el-tag {
-  width: 80%;
-}
-.iconSize {
-  font-size: 15px;
-  //   padding: 3px;
-}
-.el-tag + .el-tag {
     margin-left: 10px;
-}
+  }
-.button-new-tag {
+  .button-new-tag {
     margin-left: 10px;
     height: 32px;
     line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
-}
+  }
-.input-new-tag {
+  .input-new-tag {
     width: 90px;
     margin-left: 10px;
     vertical-align: bottom;
+  }
 }
 </style>

src/views/modules/operation-management/commodity/popup/add-specifications.vue

@@ -1,118 +1,134 @@
 <template>
-  <div>
+  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
-    <obj-modal ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
+    <div class="spec-container">
-      :modalHandles="modalHandles">
+      <div class="spec-table-container">
-      <div slot="dialog__content">
+        <el-table :data="AttributeData" border style="width: 100%">
-        <div v-for="(item, index) in AttributeData" :key="index">
+          <el-table-column label="属性名" align="center">
-          <el-row>
+            <template slot-scope="{ row }">
-            <el-input style="width: 80%; margin: 0 20px 0 0" placeholder="请输入属性" v-model="item.attributeName" clearable>
+              <el-input v-model="row.attributeName" placeholder="请输入属性名" @change="calculation"></el-input>
-            </el-input>
+            </template>
-            <el-button @click="deleteAttribute(index)" type="danger" icon="el-icon-delete" circle></el-button>
+          </el-table-column>
-          </el-row>
+          <el-table-column label="属性值" align="center">
-
+            <template slot-scope="{ row, $index }">
-          <el-row>
+              <div class="spec-values-wrapper">
-            <el-tag :key="tag" v-for="tag in item.attributeValue" closable :disable-transitions="false"
+                <el-tag
-              @close="handleClose(index, 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="item.inputVisible" v-model="inputValue" :ref="`saveTagInput${index}`"
+                <el-input
-              size="small" @keyup.enter.native="handleInputConfirm(index)" @blur="handleInputConfirm(index)">
+                  class="input-new-tag"
-            </el-input>
+                  v-if="row.inputVisible"
-            <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+新增规格</el-button></el-row>
+                  v-model="inputValue"
-        </div>
+                  :ref="`saveTagInput${$index}`"
-        <el-row type="flex" justify="center">
+                  size="small"
-          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row>
+                  @keyup.enter.native="handleInputConfirm($index)"
-        <obj-table-plus slot="dialog__after" style="height: 50vh" ref="oTable" @query="queryTableData"
+                  @blur="handleInputConfirm($index)"
-          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> -->
+                </el-input>
-        </obj-table-plus>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput($index)">+ 增加属性值</el-button>
               </div>
-    </obj-modal>
+            </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>
+      </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() {
-    toggle(e) {
+      this.dialogVisible = !this.dialogVisible;
-      if (this.modalConfig.show == false) {
-        this.modalConfig.show = true;
-      } else {
-        this.modalConfig.show = false;
-      }
-      if (e) {
-        this.init(cloneDeep(e.row));
-      }
       return {
         add: (productAttributeList, productSpecificationList) => {
-          this.modalConfig.title = "添加属性";
+          this.dialogTitle = "添加属性";
-          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.isAdd = true;
+          this.initData(productAttributeList, productSpecificationList);
         },
         update: (productAttributeList, productSpecificationList) => {
-          this.modalConfig.title = "编辑属性";
+          this.dialogTitle = "编辑属性";
-          console.log(productAttributeList, productSpecificationList);
+          this.isAdd = false;
-          if (productAttributeList.length == 0) {
+          this.initData(productAttributeList, productSpecificationList);
+        },
+      };
+    },
+    initData(productAttributeList, productSpecificationList) {
+      if (!productAttributeList || productAttributeList.length === 0) {
         this.AttributeData = [
           {
             attributeName: "",
@@ -121,22 +137,14 @@ export default {
           },
         ];
       } else {
-            this.AttributeData = productAttributeList.map((item) => {
+        this.AttributeData = productAttributeList.map((item) => ({
-              return {
           attributeName: item.attributeName,
-                attributeValue: item.attributeValue.split(","),
+          attributeValue: item.attributeValue ? item.attributeValue.split(",").filter(Boolean) : [],
           id: item.id,
           inputVisible: false,
-              };
+        }));
-            });
       }
-          this.tableData = productSpecificationList;
+      this.tableData = productSpecificationList || [];
-          this.isAdd = false;
-        },
-      };
-    },
-    init(row) {
-      this.modalData = row;
     },
     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 = [];
+      const validAttributes = this.AttributeData.filter(
-      let list = [];
+        (attr) => attr.attributeName && attr.attributeValue.length > 0
-      for (let i = 0; i < this.AttributeData.length; i++) {
+      );
-        if (i == 0) {
+
-          data = this.AttributeData[i].attributeValue.map((item) => {
+      if (validAttributes.length === 0) {
-            return {
+        this.tableData = [];
-              attributeList: [
+        return;
+      }
+
+      let result = validAttributes[0].attributeValue.map((value) => [
         {
-                  attributeName: this.AttributeData[i].attributeName,
+          attributeName: validAttributes[0].attributeName,
-                  attributeValue: item,
+          attributeValue: value,
         },
-              ],
+      ]);
-              name: item,
+
-            };
+      for (let i = 1; i < validAttributes.length; i++) {
-          });
+        let nextResult = [];
-        } else {
+        const { attributeName, attributeValue } = validAttributes[i];
-          data.forEach((it) => {
+        for (const existing of result) {
-            this.AttributeData[i].attributeValue.forEach((e) => {
+          for (const val of attributeValue) {
-              console.log(it.attributeList);
+            nextResult.push([
-              let attributeList = JSON.parse(JSON.stringify(it.attributeList));
+              ...existing,
-              attributeList.push({
+              {
-                attributeName: this.AttributeData[i].attributeName,
+                attributeName,
-                attributeValue: e,
+                attributeValue: val,
-              });
+              },
-              list.push({
+            ]);
+          }
+        }
+        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,
-                name: it.name + e,
+          attributeValue,
-              });
+          salePrice: oldData?.salePrice || 0,
-              console.log(list);
+          costPrice: oldData?.costPrice || 0,
-              // list.push(it + e);
+          marketPrice: oldData?.marketPrice || 0,
-            });
+          stockNum: oldData?.stockNum || 0,
-          });
+          weight: oldData?.weight || 0,
-          data = list;
+          volume: oldData?.volume || 0,
-          list = [];
-        }
-      }
-      this.tableData = data.map((item) => {
-        return {
-          attributeList: item.attributeList,
-          attributeValue: item.name,
-          salePrice: 0,
-          costPrice: 0,
-          marketPrice: 0,
-          stockNum: 0,
-          weight: 0,
-          volume: 0,
         };
       });
-      console.log(data);
     },
-  },
+    submitForm() {
-  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();
+      this.dialogVisible = false;
     },
   },
-      ];
-    },
-  },
-  asyncComputed: {},
 };
 </script>
 <style lang="scss" scoped>
-.el-row {
+.spec-container {
-  margin-bottom: 10px;
+  max-height: 60vh;
+  overflow-y: auto;
+  .add-attribute-btn {
+    text-align: center;
+    margin-top: 10px;
+  }
 }
-
+.spec-values-wrapper {
-.el-tag+.el-tag {
+  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>

src/views/modules/operation-management/order/index.vue

@@ -100,10 +100,6 @@
       </el-card>
     </div>
 
-    <el-card class="table-card" shadow="never">
-       <div slot="header">
-        <span>订单列表</span>
-      </div>
     <!-- 表格 -->
       <el-table
         :data="tableData"
@@ -135,26 +131,25 @@
                       size="small"
                       style="width: 100%"
                       :show-header="true">
-                      <el-table-column label="序号">
+<el-table-column prop="productName" label="商品名称">
-                        <template slot-scope="productScope">
+                        <template slot-scope="productScope">{{ productScope.row.productName || '-' }}</template>
-                          {{ productScope.$index + 1 }}
+                      </el-table-column>
-                        </template>
+                      <el-table-column prop="productCount" label="商品数量">
+                        <template slot-scope="productScope">{{ productScope.row.productCount || '-' }}</template>
                       </el-table-column>
-                      <el-table-column prop="productName" label="商品名称"></el-table-column>
-                      <el-table-column prop="productCount" label="商品数量"></el-table-column>
                       <el-table-column label="商品原价">
                         <template slot-scope="productScope">
-                          ¥ {{ (productScope.row.originPrice / 100).toFixed(2) }}
+                          ¥ {{ (productScope.row.originPrice / 100).toFixed(2) || '0.00' }}
                         </template>
                       </el-table-column>
                       <el-table-column label="商品终价">
                         <template slot-scope="productScope">
-                          ¥ {{ (productScope.row.finalPrice / 100).toFixed(2) }}
+                          ¥ {{ (productScope.row.finalPrice / 100).toFixed(2) || '0.00' }}
                         </template>
                       </el-table-column>
                       <el-table-column label="商品订单金额">
                         <template slot-scope="productScope">
-                          ¥ {{ (productScope.row.productOrderMoney / 100).toFixed(2) }}
+                          ¥ {{ (productScope.row.productOrderMoney / 100).toFixed(2) || '0.00' }}
                         </template>
                       </el-table-column>
                       <el-table-column prop="productImg" label="商品图片">
@@ -164,6 +159,7 @@
                                     style="width: 40px; height: 40px;"
                                     fit="cover"
                                     :preview-src-list="[productScope.row.productImg]"></el-image>
+                          <span v-else>-</span>
                         </template>
                       </el-table-column>
                     </el-table>
@@ -174,16 +170,18 @@
                     {{ shopScope.$index + 1 }}
                   </template>
                 </el-table-column>
-                <el-table-column prop="shopOrderNo" label="店铺订单号"></el-table-column>
+                <el-table-column prop="shopOrderNo" label="店铺订单号">
+                  <template slot-scope="shopScope">{{ shopScope.row.shopOrderNo || '-' }}</template>
+                </el-table-column>
                 <el-table-column prop="shopName" label="店铺名称">
                   <template slot-scope="shopScope">
-                    {{ shopScope.row.shopName || "暂无" }}
+                    {{ shopScope.row.shopName || "-" }}
                   </template>
                 </el-table-column>
                 <el-table-column prop="status" label="订单状态">
                   <template slot-scope="shopScope">
                     <el-tag :type="getShopStatusType(shopScope.row.status)" size="small">
-                      {{ getShopStatusText(shopScope.row.status) }}
+                      {{ getShopStatusText(shopScope.row.status) || '-' }}
                     </el-tag>
                   </template>
                 </el-table-column>
@@ -198,46 +196,62 @@
             {{ (pagination.pageNumber - 1) * pagination.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column prop="unitOrderNo" label="结算订单号" min-width="120"></el-table-column>
+        <el-table-column prop="unitOrderNo" label="结算订单号" min-width="120">
-        <el-table-column prop="createTime" label="下单时间" width="90"></el-table-column>
+          <template slot-scope="scope">{{ scope.row.unitOrderNo || '-' }}</template>
-        <el-table-column prop="receiverName" label="收货人姓名" width="80"></el-table-column>
+        </el-table-column>
-        <el-table-column prop="receiverPhone" label="收货人电话" width="100"></el-table-column>
+        <el-table-column prop="createTime" label="下单时间" width="90">
-        <el-table-column prop="poi" label="收货人地址" min-width="150"></el-table-column>
+          <template slot-scope="scope">{{ scope.row.createTime || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="receiverName" label="收货人姓名" width="80">
+          <template slot-scope="scope">{{ scope.row.receiverName || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="receiverPhone" label="收货人电话" width="100">
+          <template slot-scope="scope">{{ scope.row.receiverPhone || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="poi" label="收货人地址" min-width="150">
+          <template slot-scope="scope">{{ scope.row.poi || '-' }}</template>
+        </el-table-column>
         <el-table-column label="市场订单金额" min-width="100">
           <template slot-scope="scope">
-            <span>¥ {{ (scope.row.unitOrderMoney / 100).toFixed(2) }}</span>
+            <span>¥ {{ (scope.row.unitOrderMoney / 100).toFixed(2) || '0.00' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="市场订单商品金额" min-width="120">
           <template slot-scope="scope">
-            <span>¥ {{ (scope.row.productMoney / 100).toFixed(2) }}</span>
+            <span>¥ {{ (scope.row.productMoney / 100).toFixed(2) || '0.00' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="市场订单配送费" min-width="110">
           <template slot-scope="scope">
-            <span>¥ {{ (scope.row.deliveryMoney / 100).toFixed(2) }}</span>
+            <span>¥ {{ (scope.row.deliveryMoney / 100).toFixed(2) || '0.00' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="调度费" width="60">
           <template slot-scope="scope">
-            <span>¥ {{ (scope.row.dispatchMoney / 100).toFixed(2) }}</span>
+            <span>¥ {{ (scope.row.dispatchMoney / 100).toFixed(2) || '0.00' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="包装费" width="60">
           <template slot-scope="scope">
-            <span>¥ {{ (scope.row.packageMoney / 100).toFixed(2) }}</span>
+            <span>¥ {{ (scope.row.packageMoney / 100).toFixed(2) || '0.00' }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="status" label="订单状态" width="100">
            <template slot-scope="scope">
             <el-tag :type="getStatusTagType(scope.row.status)" size="small">
-              {{ getStatusText(scope.row.status) }}
+              {{ getStatusText(scope.row.status) || '-' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="marketId" label="市场编号" width="90"></el-table-column>
+        <el-table-column prop="marketId" label="市场编号" width="90">
-        <el-table-column prop="marketName" label="市场名称" min-width="100"></el-table-column>
+          <template slot-scope="scope">{{ scope.row.marketId || '-' }}</template>
-        <el-table-column prop="refundReason" label="申请退款原因" min-width="80"></el-table-column>
+        </el-table-column>
+        <el-table-column prop="marketName" label="市场名称" min-width="100">
+          <template slot-scope="scope">{{ scope.row.marketName || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="refundReason" label="申请退款原因" min-width="80">
+          <template slot-scope="scope">{{ scope.row.refundReason || '-' }}</template>
+        </el-table-column>
       </el-table>
 
       <!-- 分页 -->
@@ -251,7 +265,6 @@
         :total="pagination.total"
         class="pagination-container"
       ></el-pagination>
-    </el-card>
   </div>
 </template>