src/api/modules/mer_admin.js

@@ -51,13 +51,6 @@ 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({
@@ -71,18 +64,6 @@ 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,184 +1,155 @@
 <template>
-  <div class="page-container">
+  <div>
-    <div v-if="isMerchant">
+    <div v-if="isMerchant" style="height: calc(100vh - 200px)">
-      <el-card class="search-card" shadow="never">
+      <obj-table-plus
-        <el-form :model="formInline" ref="searchForm" label-position="top" class="search-form" size="small">
+        ref="oTable"
-          <el-row :gutter="15">
+        style="height: 100%"
-            <el-col :span="6">
+        :tableCols="tableCols"
-              <el-form-item label="商品名称" prop="name">
+        :tableProp="tableProp"
-                <el-input v-model="formInline.name" placeholder="请输入商品名称" clearable></el-input>
+        @query="queryList"
-              </el-form-item>
+        v-model="dataList"
-            </el-col>
+        :tableEvent="tableEvent"
-            <el-col :span="6" v-if="marketList.length > 0">
+        :enableAutoQuery="false"
-              <el-form-item label="店铺" prop="shopId">
+      >
-                <el-select v-model="formInline.shopId" placeholder="请选择店铺" style="width: 100%;">
+        <template slot="tableTop">
-                  <el-option v-for="item in storeList" :key="item.shopId" :label="item.shopName" :value="item.shopId"></el-option>
+          <el-form :inline="true" :model="formInline" class="demo-form-inline">
-                </el-select>
+            <!-- <el-form-item label="平台分类">
-              </el-form-item>
+              <el-select v-model="formInline.region" placeholder="活动区域">
-            </el-col>
+                <el-option label="区域一" value="shanghai"></el-option>
-            <el-col :span="6">
+                <el-option label="区域二" value="beijing"></el-option>
-              <el-form-item label="状态" prop="status">
+              </el-select>
-                <el-select v-model="formInline.status" placeholder="请选择状态" style="width: 100%;" clearable>
+            </el-form-item> -->
-                  <el-option label="上架" value="UP"></el-option>
+            <!-- <el-form-item label="商户分类">
-                  <el-option label="下架" value="DOWN"></el-option>
+              <el-select v-model="formInline.region" placeholder="活动区域">
-                </el-select>
+                <el-option label="区域一" value="shanghai"></el-option>
-              </el-form-item>
+                <el-option label="区域二" value="beijing"></el-option>
-            </el-col>
+              </el-select>
-            <el-col :span="6">
+            </el-form-item> -->
-              <el-form-item label="是否折扣" prop="isDiscount">
+            <el-form-item label="商品搜索">
-                <el-select v-model="formInline.isDiscount" placeholder="请选择是否折扣" style="width: 100%;" clearable>
+              <el-input
-                  <el-option label="是" :value="1"></el-option>
+                v-model="formInline.name"
-                  <el-option label="否" :value="0"></el-option>
+                placeholder="商品搜索"
-                </el-select>
+              ></el-input>
-              </el-form-item>
+            </el-form-item>
-            </el-col>
+            <el-form-item v-if="marketList.length > 0" label="菜市场">
-          </el-row>
+              <el-select
-          <el-row>
+                @change="getData"
-            <el-col :span="24" class="search-buttons">
+                v-model="formInline.marketId"
-              <el-button type="primary" @click="handleSearch" icon="el-icon-search" size="small">查询</el-button>
+                placeholder="请选择菜市场"
-              <el-button @click="handleReset" icon="el-icon-refresh" size="small">重置</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </el-card>
-
-      <el-card class="stats-card" shadow="never">
-        <el-row :gutter="20">
-          <el-col :span="6">
-            <div class="stat-item">
-              <div class="stat-label">总商品数量(个)</div>
-              <div class="stat-value">{{ overview.productCount || 0 }}</div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="stat-item">
-              <div class="stat-label">上架中商品数量(个)</div>
-              <div class="stat-value">{{ overview.productOnSaleCount || 0 }}</div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="stat-item">
-              <div class="stat-label">折扣商品数量(个)</div>
-              <div class="stat-value">{{ overview.productDiscountCount || 0 }}</div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="stat-item">
-              <div class="stat-label">仓库中商品数量(个)</div>
-              <div class="stat-value">{{ overview.productWarehouseCount || 0 }}</div>
-            </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>
-        <el-table
-          :data="dataList"
-          v-loading="loading"
-          style="width: 100%"
-          @selection-change="handleSelectionChange"
-          size="small"
-        >
-          <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>
-          </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
+                <el-option
-                  slot="reference"
+                  v-for="item in marketList"
-                  size="mini"
+                  :key="item.marketId"
-                  :type="row.status == 'DOWN' ? 'info' : 'success'"
+                  :label="item.marketName"
-                  style="cursor: pointer;"
+                  :value="item.marketId"
-                >
+                ></el-option>
-                  {{ row.status == "DOWN" ? "已下架" : "上架中" }}
+              </el-select>
-                </el-tag>
+            </el-form-item>
-              </el-popconfirm>
+            <el-form-item v-if="marketList.length > 0" label="店铺">
-            </template>
+              <el-select v-model="formInline.shopId" placeholder="请选择店铺">
-          </el-table-column>
+                <el-option
-          <el-table-column label="操作" align="center" width="400" fixed="right">
+                  v-for="item in storeList"
-            <template slot-scope="{ row }">
+                  :key="item.shopId"
-              <el-popconfirm
+                  :label="item.shopName"
-                style="margin-right: 10px;"
+                  :value="item.shopId"
-                :title="row.status == 'DOWN' ? '当前为下架状态，是否更改为上架状态？' : '当前为上架状态，是否更改为下架状态？'"
+                ></el-option>
-                :confirm-button-text="row.status == 'DOWN' ? '确认上架' : '确认下架'"
+              </el-select>
-                @confirm="toggleStatus(row)"
+            </el-form-item>
+            <el-form-item label="是否预售商品">
+              <el-select
+                v-model="formInline.isAdvanceSell"
+                placeholder="请选择是否预售"
               >
-                <el-button slot="reference" size="mini" :type="row.status === 'UP' ? 'danger' : 'success'">
+                <el-option label="是" :value="1"></el-option>
-                  {{ row.status === 'UP' ? '下架' : '上架' }}
+                <el-option label="否" :value="0"></el-option>
-                </el-button>
+              </el-select>
-              </el-popconfirm>
+            </el-form-item>
-              <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="editProduct(row)">编辑</el-button>
+            <el-form-item>
-              <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="priceAdjustment(row)">改价</el-button>
+              <el-button type="primary" @click="$refs.oTable.reload()"
-              <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="changeInventory(row)">改库存</el-button>
+                >查询</el-button
-              <el-button size="mini" :disabled="row.status != 'DOWN'" type="primary" @click="setDiscounts(row)">设置折扣</el-button>
+              >
-            </template>
+              <el-button type="primary" @click="Reset">重置</el-button>
-          </el-table-column>
+            </el-form-item>
-        </el-table>
+          </el-form>
-        <el-pagination
+          <div class="stat-list">
-          @size-change="handleSizeChange"
+            <div class="stat-item">
-          @current-change="handleCurrentChange"
+              <i style="font-size: 22px" class="el-icon-s-goods"></i>
-          :current-page="pagination.pageNumber"
+              <div class="stat-right">
-          :page-sizes="[10, 20, 30, 50]"
+                <div class="stat-title">总商品数量（个）</div>
-          :page-size="pagination.pageSize"
+                <div class="stat-value">
-          layout="total, sizes, prev, pager, next, jumper"
+                  <span style="font-size: 20px">{{
-          :total="pagination.total"
+                    overview.productCount
-          class="pagination-container"
+                  }}</span>
-        ></el-pagination>
+                </div>
-      </el-card>
+              </div>
-
+            </div>
+            <div class="stat-item">
+              <i style="font-size: 22px" class="el-icon-s-shop"></i>
+              <div class="stat-right">
+                <div class="stat-title">上架中商品数量（个）</div>
+                <div class="stat-value">
+                  <span style="font-size: 20px">{{
+                    overview.productOnSaleCount
+                  }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="stat-item">
+              <i style="font-size: 22px" class="el-icon-s-marketing"></i>
+              <div class="stat-right">
+                <div class="stat-title">折扣商品数量（个）</div>
+                <div class="stat-value">
+                  <span style="font-size: 20px">{{
+                    overview.productDiscountCount
+                  }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="stat-item">
+              <i style="font-size: 22px" class="el-icon-s-promotion"></i>
+              <div class="stat-right">
+                <div class="stat-title">仓库中商品数量（个）</div>
+                <div class="stat-value">
+                  <span style="font-size: 20px">{{
+                    overview.productWarehouseCount
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="在售" name="在售"></el-tab-pane>
+            <el-tab-pane label="仓库中" name="仓库中"></el-tab-pane>
+            <el-tab-pane label="折扣" name="折扣"></el-tab-pane>
+          </el-tabs>
+          <div class="mb-2">
+            <el-button type="primary" size="small" @click="addProduct"
+              >添加商品</el-button
+            >
+            <el-button
+              :disabled="selectList.length <= 0"
+              type="danger"
+              size="small"
+              @click="deleteProduct"
+              >批量删除</el-button
+            >
+          </div>
+        </template>
+      </obj-table-plus>
       <!-- 添加或编辑 -->
-      <add-or-update @queryList="fetchData" ref="addOrUpdate"></add-or-update>
+      <add-or-update
+        @queryList="$refs.oTable.reload()"
+        ref="addOrUpdate"
+      ></add-or-update>
       <!-- 改价格 -->
-      <AddPrice ref="AddPrice" @queryList="fetchData"></AddPrice>
+      <AddPrice ref="AddPrice" @queryList="$refs.oTable.reload()"></AddPrice>
       <!-- 改库存 -->
-      <addStock ref="addStock" @queryList="fetchData"></addStock>
+      <addStock ref="addStock" @queryList="$refs.oTable.reload()"></addStock>
       <!-- 打折扣 -->
-      <AddDiscount ref="AddDiscount" @queryList="fetchData"></AddDiscount>
+      <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>
@@ -196,18 +167,20 @@ export default {
   components: { AddOrUpdate, AddPrice, addStock, AddDiscount },
   data() {
     return {
+      activeName: "在售",
       dataList: [],
-      loading: false,
-      pagination: {
-        pageNumber: 1,
-        pageSize: 10,
-        total: 0
-      },
       formInline: {
         name: "",
+        marketId: "",
         shopId: "",
-        status: null,
+        isAdvanceSell: 0
-        isDiscount: null
+      },
+      tableProp: {
+        "auto-resize": true,
+        border: true,
+        height: "auto",
+        "row-id": "id",
+        "show-overflow": false
       },
       productFilterType: "SALE",
       selectList: [],
@@ -217,42 +190,31 @@ export default {
   created() {
     this.formInline = {
       name: "",
+      marketId: this.marketId,
       shopId: this.shopId,
-      status: null,
+      isAdvanceSell: 0
-      isDiscount: null
     };
-    this.fetchData();
+    this.$nextTick(() => {
+      this.$refs.oTable.reload();
+    });
   },
   methods: {
-    handleSearch() {
+    //如果有多个菜市场调用
-      this.pagination.pageNumber = 1;
+    getData() {
-      this.fetchData();
+      // this.$api.mer_admin
-    },
+      //   .storeList({ marketId: this.formInline.marketId })
-    handleReset() {
+      //   .then((res) => {
-      this.$refs.searchForm.resetFields();
+      //     this.formInline.shopId = res.data.data[0].shopId;
-      this.formInline = {
+      //     this.$nextTick(() => {
-        name: "",
+      //       this.$refs.oTable.reload();
-        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;
       });
@@ -262,8 +224,9 @@ export default {
         type: "warning"
       })
         .then(() => {
+          console.log("111");
           this.$api.mer_admin.BatchDeleteProducts(integers).then(res => {
-            this.fetchData();
+            this.$refs.oTable.reload();
           });
         })
         .catch(() => {
@@ -273,13 +236,13 @@ export default {
           });
         });
     },
-    fetchData() {
+    queryList(pageNo, pageSize) {
-      this.loading = true;
+      console.log(this.formInline);
       this.$api.mer_admin
-        .productV2Page({
+        .getProductPage({
           p: {
-            pageNumber: this.pagination.pageNumber,
+            pageNumber: pageNo,
-            pageSize: this.pagination.pageSize
+            pageSize: pageSize
           },
           ...this.formInline,
           productFilterType: this.productFilterType,
@@ -287,46 +250,241 @@ export default {
           productQuerySortParam: []
         })
         .then(res => {
-          this.dataList = res.data.data.data;
+          console.log(res);
-          this.pagination.total = Number(res.data.data.total);
+          this.$refs.oTable.complete(
+            res.data.data.data,
+            Number(res.data.data.total)
+          );
         })
         .catch(err => {
-          this.dataList = [];
+          this.$refs.oTable.complete(false);
-          this.pagination.total = 0;
-        }).finally(() => {
-          this.loading = false;
         });
-      this.$api.mer_admin.productV2Overview(this.formInline).then(res => {
+      this.$api.mer_admin.getProductOverview(this.formInline).then(res => {
+        console.log(res, "概况");
         this.overview = res.data.data;
       });
     },
-    toggleStatus(row) {
+    Reset() {
-      let data = {
+      this.formInline = {
-        ids: [row.id],
+        name: "",
-        status: row.status === "UP" ? "DOWN" : "UP"
+        marketId: this.marketId,
+        shopId: this.shopId,
+        isAdvanceSell: 0
       };
-      this.$api.mer_admin.putOnShelvesProducts(data).then(res => {
+      this.$refs.oTable.reload();
-        this.fetchData();
-      });
     },
-    async editProduct(row) {
+    handleClick() {
-      const res = await this.$api.mer_admin.productDetail({ id: row.id });
+      switch (this.activeName) {
-      this.$refs.addOrUpdate.toggle(res.data.data).update();
+        case "在售":
-    },
+          this.productFilterType = "SALE";
-    async priceAdjustment(row) {
+          break;
-      const res = await this.$api.mer_admin.productDetail({ id: row.id });
+        case "仓库中":
-      this.$refs.AddPrice.toggle(res.data.data).update();
+          this.productFilterType = "WAREHOUSE";
-    },
+          break;
-    async changeInventory(row) {
+        case "折扣":
-      const res = await this.$api.mer_admin.productDetail({ id: row.id });
+          this.productFilterType = "DISCOUNT";
-      this.$refs.addStock.toggle(res.data.data).update();
+          break;
-    },
+      }
-    async setDiscounts(row) {
+      this.$refs.oTable.reload();
-      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",
@@ -338,46 +496,27 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.page-container {
+.stat-list {
-}
+  display: flex;
-.search-card {
+  align-items: center;
-  margin-bottom: 15px;
+  /* justify-content: space-between; */
-}
+  // flex-wrap: wrap;
-.stats-card {
+  margin-bottom: 10px;
-  margin-bottom: 15px;
+  padding: 10px;
+  border: 1px solid #ccc;
 }
 .stat-item {
-  text-align: center;
+  width: 20%;
-  background-color: #f5f5f5;
+  margin: 20px 20px;
-  padding: 15px;
+  display: flex;
-  border-radius: 4px;
+  align-items: center;
 }
-.stat-label {
+.stat-right {
-  font-size: 14px;
+  margin-left: 12px;
-  color: #606266;
+  font-size: 18px;
+}
+.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,119 +1,221 @@
 <template>
-  <el-dialog title="其他属性" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
+  <div>
-    <div class="attribute-container">
+    <obj-modal
-      <el-alert title="示例：属性名称：温度，属性内容：常温,冷饮" type="info" show-icon :closable="false" style="margin-bottom: 16px"></el-alert>
+      ref="modal"
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
+      labelWidth="150px"
-        <el-form-item label="属性名称：" prop="name">
+      :modalConfig="modalConfig"
-          <el-input style="width: 80%" placeholder="请输入属性名称" v-model="ruleForm.name" clearable></el-input>
+      :modalData="modalData"
-        </el-form-item>
+      :modalHandles="modalHandles"
-        <el-form-item label="属性内容：" prop="value">
+    >
-          <el-tag :key="tag" v-for="tag in ruleForm.value" closable :disable-transitions="false" @close="handleClose(tag)">
+      <div slot="dialog__content">
-            {{ tag }}
+        <el-alert class="Example" title="需要注意的事项" type="info">
-          </el-tag>
+          <template slot="title">
-          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+            <el-form label-width="80px">
-            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
+              <el-form-item label="示例：">
-          </el-input>
+                <div class="iconSize">属性名称：温度</div>
-          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加内容</el-button>
+                <div class="iconSize">属性内容：常温；冷饮</div>
-        </el-form-item>
+                <div class="iconSize">顾客下单时可选择【常温】 或 【冷饮】</div>
-      </el-form>
+              </el-form-item>
-    </div>
+            </el-form>
-    <span slot="footer" class="dialog-footer">
+          </template>
-      <el-button @click="dialogVisible = false">取消</el-button>
+        </el-alert>
-      <el-button type="primary" @click="submitForm">{{ isAdd ? "确认添加" : "确认修改" }}</el-button>
+        <el-form
-    </span>
+          :model="ruleForm"
-  </el-dialog>
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="属性名称：" prop="name">
+            <el-input
+              style="width: 80%"
+              placeholder="请输入属性名称"
+              v-model="ruleForm.name"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="属性内容：" prop="value">
+            <el-tag
+              :key="tag"
+              v-for="tag in ruleForm.value"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+            <el-input
+              class="input-new-tag"
+              v-if="inputVisible"
+              v-model="inputValue"
+              ref="saveTagInput"
+              size="small"
+              @keyup.enter.native="handleInputConfirm"
+              @blur="handleInputConfirm"
+            >
+            </el-input>
+            <el-button
+              v-else
+              class="button-new-tag"
+              size="small"
+              @click="showInput"
+              >+添加内容</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+    </obj-modal>
+  </div>
 </template>
 <script>
+import { debounce, cloneDeep } from "lodash";
 export default {
+  components: {},
   data() {
     return {
       isAdd: true,
-      dialogVisible: false,
+      //表格属性
-      inputVisible: false,
+      modalConfig: {
+        title: "属性",
+        show: false,
+        width: "80%",
+      },
+      modalData: {},
       inputValue: "",
+      inputVisible: false,
       ruleForm: {
         name: "",
         value: [],
       },
       rules: {
         name: [{ required: true, message: "请输入属性名称", trigger: "blur" }],
-        value: [{ required: true, type: 'array', message: "请添加属性内容", trigger: "change" }],
+        value: [
+          {
+            required: true,
+            message: "请输入属性内容",
+            trigger: "blur",
+          },
+        ],
       },
     };
   },
   methods: {
-    toggle() {
+    queryTableData(pageNo, pageSize) {},
-      this.dialogVisible = !this.dialogVisible;
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
       return {
         add: (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);
         },
       };
     },
-    initData(data) {
+    init(row) {
-      if (data && data.length > 0 && data[0].name) {
+      this.modalData = row;
-        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 && !this.ruleForm.value.includes(inputValue)) {
+      if (inputValue) {
         this.ruleForm.value.push(inputValue);
       }
       this.inputVisible = false;
       this.inputValue = "";
     },
-    submitForm() {
+  },
-      this.$refs.ruleForm.validate((valid) => {
+  computed: {
-        if (valid) {
+    modalHandles() {
-          this.$emit("getAttribute", {
+      return [
-            name: this.ruleForm.name,
+        {
-            value: this.ruleForm.value.join(","),
+          label: "取消",
-          });
+          handle: () => {
-          this.dialogVisible = false;
+            this.toggle();
-        }
+          },
-      });
+        },
+        {
+          label: this.isAdd ? "确认添加" : "确认修改",
+          type: "primary",
+          loading: this.isLoading,
+          // submit: true,
+          handle: () => {
+            this.$refs.ruleForm.validate((valid) => {
+              if (valid) {
+                this.$emit("getAttribute", this.ruleForm);
+                this.toggle();
+              }
+            });
+          },
+        },
+      ];
     },
   },
+  asyncComputed: {},
 };
 </script>
 <style lang="scss" scoped>
-.attribute-container {
+.Example {
-  .el-tag + .el-tag {
+  margin: 0 0 20px 20px;
-    margin-left: 10px;
+  width: 80%;
-  }
-  .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>
+.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>

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

@@ -1,150 +1,142 @@
 <template>
-  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
+  <div>
-    <div class="spec-container">
+    <obj-modal ref="modal" labelWidth="150px" :modalConfig="modalConfig" :modalData="modalData"
-      <div class="spec-table-container">
+      :modalHandles="modalHandles">
-        <el-table :data="AttributeData" border style="width: 100%">
+      <div slot="dialog__content">
-          <el-table-column label="属性名" align="center">
+        <div v-for="(item, index) in AttributeData" :key="index">
-            <template slot-scope="{ row }">
+          <el-row>
-              <el-input v-model="row.attributeName" placeholder="请输入属性名" @change="calculation"></el-input>
+            <el-input style="width: 80%; margin: 0 20px 0 0" placeholder="请输入属性" v-model="item.attributeName" clearable>
-            </template>
+            </el-input>
-          </el-table-column>
+            <el-button @click="deleteAttribute(index)" type="danger" icon="el-icon-delete" circle></el-button>
-          <el-table-column label="属性值" align="center">
+          </el-row>
-            <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>
-      </div>
 
-      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" max-height="50vh">
+          <el-row>
-        <el-table-column type="index" label="序号" width="60" align="center" fixed="left"></el-table-column>
+            <el-tag :key="tag" v-for="tag in item.attributeValue" closable :disable-transitions="false"
-        <el-table-column prop="attributeValue" label="属性" align="center" min-width="160"></el-table-column>
+              @close="handleClose(index, tag)">
-        <el-table-column label="成本（元）" align="center" min-width="160">
+              {{ tag }}
-          <template slot-scope="{ row }">
+            </el-tag>
-            <el-input-number size="small" v-model="row.costPrice" :min="0" placeholder="请输入成本"></el-input-number>
+            <el-input class="input-new-tag" v-if="item.inputVisible" v-model="inputValue" :ref="`saveTagInput${index}`"
-          </template>
+              size="small" @keyup.enter.native="handleInputConfirm(index)" @blur="handleInputConfirm(index)">
-        </el-table-column>
+            </el-input>
-        <el-table-column label="市场价（元）" align="center" min-width="160">
+            <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+新增规格</el-button></el-row>
-          <template slot-scope="{ row }">
+        </div>
-            <el-input-number size="small" v-model="row.marketPrice" :min="0" placeholder="请输入市场价"></el-input-number>
+        <el-row type="flex" justify="center">
-          </template>
+          <el-button @click="addAttribute" type="text">+添加其他属性</el-button></el-row>
-        </el-table-column>
+        <obj-table-plus slot="dialog__after" style="height: 50vh" ref="oTable" @query="queryTableData"
-        <el-table-column label="库存" align="center" min-width="160">
+          v-model="tableData" :tableCols="tableCols" :tableProp="tableProp" :toolbarProp="toolbarProp"
-          <template slot-scope="{ row }">
+          :tableEvent="tableEvent" :enableAutoQuery="false">
-            <el-input-number size="small" v-model="row.stockNum" :min="0" placeholder="请输入库存"></el-input-number>
+          <!-- <div slot="tableTop" class="mb-2">
-          </template>
+            <el-button type="primary" size="mini" @click="calculation"
-        </el-table-column>
+              >计算属性</el-button
-        <el-table-column label="重量（千克）" align="center" min-width="160">
+            >
-          <template slot-scope="{ row }">
+          </div> -->
-            <el-input-number size="small" v-model="row.weight" :min="0" placeholder="请输入重量"></el-input-number>
+        </obj-table-plus>
-          </template>
+      </div>
-        </el-table-column>
+    </obj-modal>
-        <el-table-column label="体积（立方米）" align="center" min-width="160">
+  </div>
-          <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 { cloneDeep } from "lodash";
+import { debounce, 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: {
-    toggle() {
+    queryTableData(pageNo, pageSize) {},
-      this.dialogVisible = !this.dialogVisible;
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
       return {
         add: (productAttributeList, productSpecificationList) => {
-          this.dialogTitle = "添加属性";
+          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.isAdd = true;
-          this.initData(productAttributeList, productSpecificationList);
         },
         update: (productAttributeList, productSpecificationList) => {
-          this.dialogTitle = "编辑属性";
+          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.isAdd = false;
-          this.initData(productAttributeList, productSpecificationList);
         },
       };
     },
-    initData(productAttributeList, productSpecificationList) {
+    init(row) {
-      if (!productAttributeList || productAttributeList.length === 0) {
+      this.modalData = row;
-        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(
@@ -153,125 +145,267 @@ export default {
       );
       this.calculation();
     },
+    //聚焦
     showInput(index) {
-      this.AttributeData.forEach((item, i) => {
+      console.log(index);
-        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 && !this.AttributeData[index].attributeValue.includes(inputValue)) {
+      if (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() {
-      const validAttributes = this.AttributeData.filter(
+      let data = [];
-        (attr) => attr.attributeName && attr.attributeValue.length > 0
+      let list = [];
-      );
+      for (let i = 0; i < this.AttributeData.length; i++) {
-
+        if (i == 0) {
-      if (validAttributes.length === 0) {
+          data = this.AttributeData[i].attributeValue.map((item) => {
-        this.tableData = [];
+            return {
-        return;
+              attributeList: [
-      }
+                {
-
+                  attributeName: this.AttributeData[i].attributeName,
-      let result = validAttributes[0].attributeValue.map((value) => [
+                  attributeValue: item,
-        {
+                },
-          attributeName: validAttributes[0].attributeName,
+              ],
-          attributeValue: value,
+              name: item,
-        },
+            };
-      ]);
+          });
-
+        } else {
-      for (let i = 1; i < validAttributes.length; i++) {
+          data.forEach((it) => {
-        let nextResult = [];
+            this.AttributeData[i].attributeValue.forEach((e) => {
-        const { attributeName, attributeValue } = validAttributes[i];
+              console.log(it.attributeList);
-        for (const existing of result) {
+              let attributeList = JSON.parse(JSON.stringify(it.attributeList));
-          for (const val of attributeValue) {
+              attributeList.push({
-            nextResult.push([
+                attributeName: this.AttributeData[i].attributeName,
-              ...existing,
+                attributeValue: e,
-              {
+              });
-                attributeName,
+              list.push({
-                attributeValue: val,
+                attributeList,
-              },
+                name: it.name + e,
-            ]);
+              });
-          }
+              console.log(list);
+              // list.push(it + e);
+            });
+          });
+          data = list;
+          list = [];
         }
-        result = nextResult;
       }
-
+      this.tableData = data.map((item) => {
-      this.tableData = result.map((attributeList) => {
-        const attributeValue = attributeList.map((attr) => attr.attributeValue).join("/");
-        // 保留旧数据
-        const oldData = this.tableData.find(item => item.attributeValue === attributeValue);
         return {
-          attributeList,
+          attributeList: item.attributeList,
-          attributeValue,
+          attributeValue: item.name,
-          salePrice: oldData?.salePrice || 0,
+          salePrice: 0,
-          costPrice: oldData?.costPrice || 0,
+          costPrice: 0,
-          marketPrice: oldData?.marketPrice || 0,
+          marketPrice: 0,
-          stockNum: oldData?.stockNum || 0,
+          stockNum: 0,
-          weight: oldData?.weight || 0,
+          weight: 0,
-          volume: oldData?.volume || 0,
+          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>
-.spec-container {
+.el-row {
-  max-height: 60vh;
+  margin-bottom: 10px;
-  overflow-y: auto;
-  .add-attribute-btn {
-    text-align: center;
-    margin-top: 10px;
-  }
 }
-.spec-values-wrapper {
+
-  display: flex;
+.el-tag+.el-tag {
-  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>
+</style>

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

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