增加二级分销相关设置以及页面

seller/src/views/lili-dialog/goods-dialog.vue

@@ -1,78 +1,217 @@
 <template>
   <div class="wrapper">
     <div class="wap-content">
-      <div class="query-wrapper">
-        <div class="query-item">
-          <div>搜索范围</div>
-          <el-input
-            v-model="goodsParams.goodsName"
-            placeholder="商品名称"
-            clearable
-            style="width: 150px"
-            @clear="onSearchGoods"
-            @keyup.enter="onSearchGoods"
-          />
-        </div>
-        <div class="query-item">
-          <el-cascader
-            v-model="category"
-            :options="skuList"
-            placeholder="请选择商品分类"
-            popper-class="goods-dialog-cascader-popper"
-            style="width: 250px"
-            clearable
-          />
-        </div>
-        <div class="query-item">
-          <el-button type="primary" @click="onSearchGoods">搜索</el-button>
-        </div>
-      </div>
-      <div>
-        <div class="wap-content-list">
-          <div
-            class="wap-content-item"
-            :class="{ active: item.selected }"
-            @click="checkedGoods(item, index)"
-            v-for="(item, index) in goodsData"
-            :key="index"
-          >
-            <div>
-              <img :src="item.thumbnail" alt="" />
+      <div class="goods-filter-panel">
+      <el-form :model="filterForm" inline label-width="72px" class="goods-filter-form" @keyup.enter="onSearchGoods">
+        <el-form-item label-width="0" class="filter-row-item">
+          <div class="filter-row">
+            <div class="filter-row-field">
+              <span class="filter-row-label">商品名称</span>
+              <el-input
+                v-model="filterForm.goodsName"
+                placeholder="请输入商品名称"
+                clearable
+                class="filter-control"
+              />
             </div>
-            <div class="wap-content-desc">
-              <div class="wap-content-desc-title">{{ item.goodsName }}</div>
-              <div class="wap-sku">
-                {{ item.goodsUnit }}
-                <el-tag
-                  style="margin-left: 10px"
-                  :type="item.salesModel === 'RETAIL' ? 'info' : 'primary'"
-                >
-                  {{ item.salesModel === "RETAIL" ? "零售型" : "批发型" }}
-                </el-tag>
+            <div class="filter-row-field">
+              <span class="filter-row-label">商品ID</span>
+              <el-input
+                v-model="filterForm.goodsId"
+                placeholder="请输入商品ID"
+                clearable
+                class="filter-control"
+              />
+            </div>
+            <div class="filter-row-field">
+              <span class="filter-row-label">商品类型</span>
+              <el-select v-model="filterForm.goodsType" placeholder="请选择" clearable class="filter-control">
+                <el-option label="实物商品" value="PHYSICAL_GOODS" />
+                <el-option label="虚拟商品" value="VIRTUAL_GOODS" />
+                <el-option label="电子卡券" value="E_COUPON" />
+              </el-select>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label-width="0" class="filter-row-item">
+          <div class="filter-row">
+            <div class="filter-row-field">
+              <span class="filter-row-label">品牌</span>
+              <el-select
+                v-model="filterForm.brandId"
+                placeholder="请选择品牌"
+                clearable
+                filterable
+                class="filter-control"
+              >
+                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </div>
+            <div class="filter-row-field">
+              <span class="filter-row-label">店铺分类</span>
+              <el-cascader
+                v-model="filterForm.storeCategoryPath"
+                :options="shopCategoryList"
+                :props="shopCategoryProps"
+                placeholder="请选择店铺分类"
+                clearable
+                filterable
+                class="filter-control"
+              />
+            </div>
+            <div class="filter-row-field">
+              <span class="filter-row-label">平台类目</span>
+              <el-cascader
+                v-model="filterForm.categoryPath"
+                :options="platformCategoryList"
+                :props="platformCategoryProps"
+                placeholder="请选择平台类目"
+                popper-class="goods-dialog-cascader-popper"
+                clearable
+                filterable
+                class="filter-control"
+              />
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label-width="0" class="range-form-item range-filter-row-item">
+          <div class="range-filter-row">
+            <div class="range-group">
+              <span class="filter-row-label">价格</span>
+              <div class="range-group-inputs">
+                <el-input v-model="filterForm.priceMin" placeholder="≥" clearable />
+                <span class="range-sep">~</span>
+                <el-input v-model="filterForm.priceMax" placeholder="≤" clearable />
               </div>
-              <div class="wap-content-desc-bottom">
-                <div>￥{{ $filters.unitPrice(item.price) }}</div>
+            </div>
+            <div class="range-group">
+              <span class="filter-row-label">销量</span>
+              <div class="range-group-inputs">
+                <el-input v-model="filterForm.salesMin" placeholder="≥" clearable />
+                <span class="range-sep">~</span>
+                <el-input v-model="filterForm.salesMax" placeholder="≤" clearable />
+              </div>
+            </div>
+            <div class="range-group">
+              <span class="filter-row-label">库存</span>
+              <div class="range-group-inputs">
+                <el-input v-model="filterForm.stockMin" placeholder="≥" clearable />
+                <span class="range-sep">~</span>
+                <el-input v-model="filterForm.stockMax" placeholder="≤" clearable />
               </div>
             </div>
           </div>
-          <div v-if="loading" v-loading="loading" class="loading-mask" />
-          <div v-if="empty" class="empty">暂无商品信息</div>
-        </div>
-        <el-pagination
-          v-model:current-page="goodsParams.pageNumber"
-          class="pageration"
-          :total="total"
-          :page-size="goodsParams.pageSize"
-          layout="total, prev, pager, next"
-          size="small"
-          @current-change="changePageSize"
-        />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSearchGoods">搜索</el-button>
+          <el-button @click="resetFilter">重置</el-button>
+        </el-form-item>
+      </el-form>
       </div>
+
+      <div ref="tableWrap" class="goods-table-wrap">
+        <el-table
+          ref="goodsTable"
+          v-loading="loading"
+          :data="goodsData"
+          border
+          :height="tableHeight"
+          :highlight-current-row="type !== 'multiple'"
+          class="goods-sku-table"
+          row-key="id"
+          @row-click="handleRowClick"
+          @selection-change="handleSelectionChange"
+        >
+        <el-table-column
+          v-if="type === 'multiple'"
+          type="selection"
+          width="48"
+          align="center"
+          :reserve-selection="true"
+        />
+        <el-table-column prop="id" label="ID" min-width="150" show-overflow-tooltip />
+        <el-table-column label="商品图片" width="90" align="center">
+          <template #default="{ row }">
+            <img v-if="row" :src="row.thumbnail" class="goods-thumb" alt="" />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" min-width="160" class-name="goods-name-column">
+          <template #default="{ row }">
+            <span v-if="row" class="goods-name-text">{{ row.goodsName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row?.simpleSpecs || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品类型" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ goodsTypeText(row?.goodsType) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="店铺分类" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ storeCategoryText(row?.storeCategoryPath) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="平台类目" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ platformCategoryText(row?.categoryPath) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="品牌" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ brandText(row?.brandId) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="价格" width="100" align="right">
+          <template #default="{ row }">
+            <span v-if="row" class="goods-price">{{ $filters.unitPrice(row.price, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="销量" width="80" align="center">
+          <template #default="{ row }">
+            {{ row?.buyCount ?? 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="quantity" label="库存" width="80" align="center" />
+        <template #empty>
+          <div class="empty">{{ loading ? "" : "暂无商品信息" }}</div>
+        </template>
+      </el-table>
+      </div>
+
+      <el-pagination
+        v-model:current-page="goodsParams.pageNumber"
+        class="pageration"
+        :total="total"
+        :page-size="goodsParams.pageSize"
+        layout="total, prev, pager, next"
+        size="small"
+        @current-change="changePageSize"
+      />
     </div>
   </div>
 </template>
 <script>
 import * as API_Goods from "@/api/goods";
+
+const defaultFilterForm = () => ({
+  goodsName: "",
+  goodsId: "",
+  storeCategoryPath: "",
+  categoryPath: "",
+  goodsType: "",
+  brandId: "",
+  priceMin: "",
+  priceMax: "",
+  salesMin: "",
+  salesMax: "",
+  stockMin: "",
+  stockMax: "",
+});
+
 export default {
   props: {
     selectedWay: {
@@ -84,29 +223,39 @@ export default {
     return {
       type: "multiple",
       selectedList: [],
-      skuList: [],
+      platformCategoryList: [],
+      shopCategoryList: [],
+      brandList: [],
+      platformCategoryProps: {
+        value: "id",
+        label: "name",
+        children: "children",
+        checkStrictly: true,
+        emitPath: false,
+      },
+      shopCategoryProps: {
+        value: "value",
+        label: "label",
+        children: "children",
+        checkStrictly: true,
+        emitPath: false,
+      },
+      filterForm: defaultFilterForm(),
       total: 0,
       goodsParams: {
         pageNumber: 1,
-        pageSize: 15,
+        pageSize: 20,
         order: "desc",
-        goodsName: "",
-        sn: "",
-        categoryPath: "",
         marketEnable: "UPPER",
         authFlag: "PASS",
         sort: "createTime",
       },
-      category: [],
       goodsData: [],
-      empty: false,
       loading: false,
+      tableHeight: 400,
     };
   },
   watch: {
-    category(val) {
-      this.goodsParams.categoryPath = val && val.length ? val.join(",") : "";
-    },
     selectedWay: {
       handler(val) {
         this.selectedList = Array.isArray(val) ? val.slice() : [];
@@ -114,157 +263,366 @@ export default {
       deep: true,
       immediate: true,
     },
-    "goodsParams.categoryPath": {
-      handler() {
-        this.goodsData = [];
-        this.goodsParams.pageNumber = 1;
-        this.getQueryGoodsList();
-      },
-      deep: true,
-    },
   },
   mounted() {
     this.init();
+    this.$nextTick(this.calcTableHeight);
+    window.addEventListener("resize", this.calcTableHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.calcTableHeight);
   },
   methods: {
+    calcTableHeight() {
+      this.$nextTick(() => {
+        const wrap = this.$refs.tableWrap;
+        if (wrap) {
+          this.tableHeight = Math.max(wrap.clientHeight, 320);
+        }
+      });
+    },
     onSearchGoods() {
-      this.goodsData = [];
       this.goodsParams.pageNumber = 1;
       this.getQueryGoodsList();
     },
+    resetFilter() {
+      this.filterForm = defaultFilterForm();
+      this.onSearchGoods();
+    },
     changePageSize(v) {
       this.goodsParams.pageNumber = v;
       this.getQueryGoodsList();
     },
+    buildQueryParams() {
+      const params = {
+        ...this.goodsParams,
+        goodsName: this.filterForm.goodsName || undefined,
+        goodsId: this.filterForm.goodsId || undefined,
+        goodsType: this.filterForm.goodsType || undefined,
+        brandId: this.filterForm.brandId || undefined,
+        storeCategoryPath: this.filterForm.storeCategoryPath || undefined,
+        categoryPath: this.filterForm.categoryPath || undefined,
+        geQuantity: undefined,
+        leQuantity: undefined,
+        geBuyCount: undefined,
+        leBuyCount: undefined,
+        price: undefined,
+      };
+
+      const { priceMin, priceMax, salesMin, salesMax, stockMin, stockMax } = this.filterForm;
+      if (priceMin !== "" && priceMax !== "") {
+        params.price = `${priceMin}_${priceMax}`;
+      } else if (priceMin !== "") {
+        params.price = String(priceMin);
+      } else if (priceMax !== "") {
+        params.price = `0_${priceMax}`;
+      }
+
+      if (stockMin !== "" && stockMin != null) params.geQuantity = Number(stockMin);
+      if (stockMax !== "" && stockMax != null) params.leQuantity = Number(stockMax);
+      if (salesMin !== "" && salesMin != null) params.geBuyCount = Number(salesMin);
+      if (salesMax !== "" && salesMax != null) params.leBuyCount = Number(salesMax);
+
+      return params;
+    },
     getQueryGoodsList() {
       this.loading = true;
-      API_Goods.getGoodsSkuData(this.goodsParams)
+      API_Goods.getGoodsSkuData(this.buildQueryParams())
         .then((res) => {
           this.initGoods(res);
         })
         .finally(() => {
           this.loading = false;
+          this.calcTableHeight();
         });
     },
     initGoods(res) {
       const records = res?.result?.records || [];
-      if (records.length) {
-        records.forEach((item) => {
-          item.selected = false;
-          item.___type = "goods";
-          this.selectedList.forEach((e) => {
-            if (e.id && e.id === item.id) {
-              item.selected = true;
+      this.total = res?.result?.total || 0;
+      records.forEach((item) => {
+        item.selected = false;
+        item.___type = "goods";
+        this.selectedList.forEach((e) => {
+          if (e.id && e.id === item.id) {
+            item.selected = true;
+          }
+        });
+      });
+      this.goodsData = records;
+      this.syncTableSelection();
+    },
+    syncTableSelection() {
+      this.$nextTick(() => {
+        const table = this.$refs.goodsTable;
+        if (!table) return;
+        if (this.type === "multiple") {
+          table.clearSelection();
+          this.goodsData.forEach((row) => {
+            if (row.selected) {
+              table.toggleRowSelection(row, true);
             }
           });
-        });
-        this.total = res.result.total || 0;
-        this.goodsData = records;
-        this.empty = false;
-      } else {
-        this.goodsData = [];
-        this.empty = true;
-      }
+          return;
+        }
+        const selected = this.goodsData.find((item) => item.selected);
+        table.setCurrentRow(selected || null);
+      });
     },
     emitSelected(list) {
       this.selectedList = list;
       this.$emit("selected", this.selectedList);
     },
+    handleRowClick(row) {
+      if (this.type === "multiple") return;
+      this.goodsData.forEach((item) => {
+        item.selected = false;
+      });
+      row.selected = true;
+      this.emitSelected([row]);
+      this.$refs.goodsTable?.setCurrentRow(row);
+    },
+    handleSelectionChange(selection) {
+      if (this.type !== "multiple") return;
+      const selectedIds = new Set(selection.map((item) => item.id));
+      this.goodsData.forEach((item) => {
+        item.selected = selectedIds.has(item.id);
+      });
+      const currentPageIds = new Set(this.goodsData.map((item) => item.id));
+      const otherPages = this.selectedList.filter((item) => !currentPageIds.has(item.id));
+      this.emitSelected([...otherPages, ...selection]);
+    },
+    formatShopCategory(list) {
+      return (list || []).map((item) => ({
+        value: item.id,
+        label: item.labelName,
+        children:
+          item.children && item.children.length ? this.formatShopCategory(item.children) : undefined,
+      }));
+    },
+    goodsTypeText(value) {
+      if (value === "PHYSICAL_GOODS") return "实物商品";
+      if (value === "VIRTUAL_GOODS") return "虚拟商品";
+      if (value === "E_COUPON") return "电子卡券";
+      return "-";
+    },
+    brandText(brandId) {
+      if (!brandId) return "-";
+      const brand = this.brandList.find((item) => String(item.id) === String(brandId));
+      return brand?.name || "-";
+    },
+    findTreeNodeLabel(tree, targetId, valueKey, labelKey) {
+      for (const node of tree || []) {
+        if (String(node[valueKey]) === String(targetId)) {
+          return node[labelKey];
+        }
+        const childLabel = this.findTreeNodeLabel(node.children, targetId, valueKey, labelKey);
+        if (childLabel) return childLabel;
+      }
+      return "";
+    },
+    categoryPathText(path, tree, valueKey, labelKey) {
+      if (!path) return "-";
+      const ids = String(path).split(",").filter(Boolean);
+      if (!ids.length) return "-";
+      const labels = ids
+        .map((id) => this.findTreeNodeLabel(tree, id, valueKey, labelKey))
+        .filter(Boolean);
+      return labels.length ? labels.join(" / ") : "-";
+    },
+    storeCategoryText(path) {
+      return this.categoryPathText(path, this.shopCategoryList, "value", "label");
+    },
+    platformCategoryText(path) {
+      if (!path) return "-";
+      const ids = String(path).split(",").filter(Boolean);
+      if (!ids.length) return "-";
+      const targetId = ids.length >= 3 ? ids[2] : ids[ids.length - 1];
+      const label = this.findTreeNodeLabel(this.platformCategoryList, targetId, "id", "name");
+      return label || "-";
+    },
     init() {
-      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
-        this.initGoods(res);
-      });
-      API_Goods.getGoodsCategoryAll(0).then((res) => {
-        if (res.result) {
-          this.deepGroup(res.result);
+      this.getQueryGoodsList();
+      API_Goods.getCategoryTree().then((res) => {
+        if (res?.success) {
+          this.platformCategoryList = res.result || [];
         }
       });
-    },
-    deepGroup(val) {
-      val.forEach((item) => {
-        let childWay = [];
-        if (item.children) {
-          item.children.forEach((child) => {
-            if (child.children) {
-              child.children.forEach((grandson, index, arr) => {
-                arr[index] = {
-                  value: grandson.id,
-                  label: grandson.name,
-                };
-              });
-            }
-            childWay.push({
-              value: child.id,
-              label: child.name,
-              children: child.children,
-            });
-          });
+      API_Goods.getShopGoodsLabelListSeller().then((res) => {
+        if (res?.success) {
+          this.shopCategoryList = this.formatShopCategory(res.result || []);
         }
-        this.skuList.push({
-          value: item.id,
-          label: item.name,
-          children: childWay,
-        });
       });
-    },
-    checkedGoods(val) {
-      if (this.type !== "multiple") {
-        this.goodsData.forEach((item) => {
-          item.selected = false;
-        });
-        val.selected = true;
-        this.emitSelected([val]);
-        return;
-      }
-      if (!val.selected) {
-        val.selected = true;
-        this.emitSelected([...this.selectedList, val]);
-      } else {
-        val.selected = false;
-        this.emitSelected(this.selectedList.filter((item) => item.id !== val.id));
-      }
+      API_Goods.getBrandListData().then((res) => {
+        this.brandList = Array.isArray(res) ? res : res?.result || [];
+      });
     },
   },
 };
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
+
+.wrapper {
+  height: 100%;
+  flex-direction: column;
+}
+
 .wap-content {
   width: 100%;
+  flex: 1;
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
+
+.goods-table-wrap {
+  flex: 1;
+  min-height: 0;
+}
+
+.goods-filter-panel {
+  background: #f5f7fa;
+  padding: 12px 16px 4px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.goods-filter-form {
+  margin-bottom: 0;
+
+  :deep(.el-form-item) {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
+}
+
+.range-form-item {
+  :deep(.el-form-item__content) {
+    margin-left: 0 !important;
+  }
+}
+
+.range-filter-row-item {
+  display: block;
+  width: 100%;
+
+  :deep(.el-form-item__content) {
+    width: 100%;
+  }
+}
+
+.filter-row-item {
+  display: block;
+  width: 100%;
+
+  :deep(.el-form-item__content) {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 16px;
+}
+
+.filter-row-field {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 244px;
+  min-width: 244px;
+}
+
+.filter-control {
+  width: 160px;
+}
+
+.filter-row-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 72px;
+  padding-right: 12px;
+  color: #606266;
+  font-size: 14px;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.range-filter-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 16px;
+}
+
+.range-group {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 244px;
+  min-width: 244px;
+}
+
+.range-group-inputs {
+  display: inline-flex;
+  align-items: center;
+
+  :deep(.el-input) {
+    width: 72px;
+  }
+}
+
+.range-sep {
+  margin: 0 4px;
+  color: #909399;
+  user-select: none;
+}
+
+.goods-sku-table {
+  width: 100%;
+}
+
+.goods-name-text {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+:deep(.goods-name-column .cell) {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.goods-thumb {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  vertical-align: middle;
+}
+
+.goods-price {
+  color: $theme_color;
+}
+
 .empty {
   text-align: center;
-  padding: 8px 0;
-  width: 100%;
-}
-.wap-content {
-  flex: 1;
-  padding: 0;
-}
-.wap-content-list {
-  display: flex;
-  position: relative;
-  flex-wrap: wrap;
-  height: 340px;
-}
-.wap-content-item {
-  width: 210px;
-  margin: 10px 7px;
-  padding: 6px 0;
-}
-.active {
-  background: url("../../assets/selected.png") no-repeat;
-  background-position: right;
-  background-size: 10%;
-}
-.loading-mask {
-  position: absolute;
-  inset: 0;
+  padding: 24px 0;
+  color: #909399;
 }
+
 .pageration {
   margin-top: 12px;
   justify-content: flex-end;
 }
+
+:deep(.el-table__body tr) {
+  cursor: pointer;
+}
 </style>
 <style lang="scss">
 .goods-dialog-cascader-popper {