From 810939b3e92452906bb76eb11e946929212091a4 Mon Sep 17 00:00:00 2001
From: feijinping <feijinping@foxmail.com>
Date: Wed, 30 Nov 2022 00:00:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictTag/index.vue        |  51 +++--------
 src/store/getters.js                    |   3 +-
 src/store/modules/dict.js               |  15 +++-
 src/views/components/ProdCategory.vue   |  61 +++++++++++++
 src/views/pms/productCategory/index.vue | 108 ++++++++++++------------
 5 files changed, 140 insertions(+), 98 deletions(-)
 create mode 100644 src/views/components/ProdCategory.vue

diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index 4c196c4..50671ef 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -1,52 +1,23 @@
 <template>
-  <div>
-    <template v-for="(item, index) in options">
-      <template v-if="values.includes(item.value)">
-        <span
-          v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
-          :key="item.value"
-          :index="index"
-          :class="item.raw.cssClass"
-          >{{ item.label }}</span
-        >
-        <el-tag
-          v-else
-          :disable-transitions="true"
-          :key="item.value"
-          :index="index"
-          :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
-          :class="item.raw.cssClass"
-        >
-          {{ item.label }}
-        </el-tag>
-      </template>
-    </template>
-  </div>
+  <el-tag>{{valueLabel}}</el-tag>
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
-  name: "DictTag",
-  props: {
-    options: {
-      type: Array,
-      default: null,
-    },
-    value: [Number, String, Array],
-  },
+  props: ["value", "propName"],
   computed: {
-    values() {
-      if (this.value !== null && typeof this.value !== 'undefined') {
-        return Array.isArray(this.value) ? this.value : [String(this.value)];
-      } else {
+    ...mapGetters(['dictMap']),
+    options() {
+      if (!this.propName) {
         return [];
       }
+      return this.dictMap[this.propName] || []
     },
+    valueLabel() {
+      return this.options.find(it => it.value == this.value)?.label;
+    }
   },
 };
 </script>
-<style scoped>
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-</style>
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index a823148..b69eec1 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -15,6 +15,7 @@ const getters = {
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
 
-  dictMap: state => state.dict.dictMap
+  dictMap: state => state.dict.dictMap,
+  productCategories: state => state.dict.productCategories,
 }
 export default getters
diff --git a/src/store/modules/dict.js b/src/store/modules/dict.js
index d3d5c8d..7d3f1e9 100644
--- a/src/store/modules/dict.js
+++ b/src/store/modules/dict.js
@@ -1,15 +1,20 @@
 import {allByTypes} from "@/api/system/dict/data";
 import {dict_types} from "@/config/business";
+import {listPmsProductCategory} from "@/api/pms/productCategory";
 
 const dict = {
   state: {
-    dictMap: {}
+    dictMap: {},
+    productCategories: []
   },
 
   mutations: {
     SET_DICT_MAP: (state, map) => {
       state.dictMap = map
     },
+    SET_PRODUCT_CATEGORIES: (state, value) => {
+      state.productCategories = value
+    },
   },
   actions: {
     loadDictionaries({ commit, state }, force = false) {
@@ -31,6 +36,14 @@ const dict = {
         commit('SET_DICT_MAP', map)
       })
     },
+    loadProductCategories({ commit, state }, force = false) {
+      if (!force && state.productCategories.length > 0) {
+        return Promise.resolve();
+      }
+      return listPmsProductCategory({}).then(res => {
+        commit('SET_PRODUCT_CATEGORIES', res);
+      })
+    }
   }
 }
 
diff --git a/src/views/components/ProdCategory.vue b/src/views/components/ProdCategory.vue
new file mode 100644
index 0000000..cd29627
--- /dev/null
+++ b/src/views/components/ProdCategory.vue
@@ -0,0 +1,61 @@
+<template>
+  <treeselect
+    v-model="value1"
+    :options="menuOptions"
+    :show-count="true"
+    placeholder="选择上级菜单"
+  />
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {mapGetters} from "vuex";
+export default {
+  name: "ProdCategory",
+  components: {Treeselect},
+  props: ['value'],
+  computed: {
+    ...mapGetters(['productCategories']),
+    value1: {
+      get() {
+        return this.value;
+      },
+      set(v) {
+        this.$emit('input', v);
+      }
+    },
+    menuOptions() {
+      if (!this.productCategories || this.productCategories.length === 0) {
+        return [];
+      }
+      const map = {}
+      this.productCategories.forEach(it => {
+        let list = map[it.parentId]
+        if (!list) {
+          list = [];
+          map[it.parentId] = list;
+        }
+        list.push({id: it.id, label: it.name, parentId: it.parentId});
+      })
+      const stack = [...map['0']];
+      while (stack.length > 0) {
+        const p = stack.shift();
+        if (!map[p.id]) {
+          continue
+        }
+        p.children = map[p.id];
+        stack.push(...map[p.id])
+      }
+      return [{id: 0, label: '根节点', children: map['0']}];
+    }
+  },
+  created() {
+    this.$store.dispatch('loadProductCategories')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/pms/productCategory/index.vue b/src/views/pms/productCategory/index.vue
index eac9f10..2ca9eae 100644
--- a/src/views/pms/productCategory/index.vue
+++ b/src/views/pms/productCategory/index.vue
@@ -22,19 +22,10 @@
       <el-form-item label="显示状态" prop="showStatus">
         <dict-select v-model="queryParams.showStatus" prop-name="sys_normal_disable" />
       </el-form-item>
-      <el-form-item label="SORT" prop="sort">
+      <el-form-item label="排序" prop="sort">
         <el-input
           v-model="queryParams.sort"
-          placeholder="请输入SORT"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="图标" prop="icon">
-        <el-input
-          v-model="queryParams.icon"
-          placeholder="请输入图标"
+          placeholder="排序"
           clearable
           size="small"
           @keyup.enter.native="handleQuery"
@@ -57,17 +48,18 @@
           v-hasPermi="['pms:productCategory:add']"
         >新增</el-button>
       </el-col>
-      </el-col>
     </el-row>
 
-    <el-table v-loading="loading" :data="pmsProductCategoryList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="上级分类的编号：0表示一级分类" align="center" prop="parentId" />
-      <el-table-column label="NAME" align="center" prop="name" />
-      <el-table-column label="分类级别：0->1级；1->2级" align="center" prop="level" />
-      <el-table-column label="显示状态：0->不显示；1->显示" align="center" prop="showStatus" />
-      <el-table-column label="SORT" align="center" prop="sort" />
-      <el-table-column label="图标" align="center" prop="icon" />
+    <el-table v-loading="loading" :data="pmsProductCategoryList" @selection-change="handleSelectionChange" row-key="id">
+      <el-table-column width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="层级" align="center" prop="level" />
+      <el-table-column label="显示状态" align="center" prop="showStatus">
+        <template v-slot="{ row }">
+          <dict-tag :value="row.showStatus" prop-name="sys_normal_disable"></dict-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -88,33 +80,23 @@
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
     <!-- 添加或修改商品分类对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body >
       <el-form ref="form" :model="form" :rules="rules" label-width="108px" inline class="dialog-form-two">
-        <el-form-item label="上级分类的编号：0表示一级分类" prop="parentId">
-          <el-input v-model="form.parentId" placeholder="请输入上级分类的编号：0表示一级分类" />
+        <el-form-item label="上级分类" prop="parentId">
+          <prod-category v-model="form.parentId" />
         </el-form-item>
-        <el-form-item label="NAME" prop="name">
-          <el-input v-model="form.name" placeholder="请输入NAME" />
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="名称" />
         </el-form-item>
-        <el-form-item label="分类级别：0->1级；1->2级" prop="level">
-          <el-input v-model="form.level" placeholder="请输入分类级别：0->1级；1->2级" />
+        <el-form-item label="层级" prop="level">
+          <el-input v-model="form.level" placeholder="层级：0->1级；1->2级" />
         </el-form-item>
-        <el-form-item label="显示状态：0->不显示；1->显示">
-          <el-radio-group v-model="form.showStatus">
-            <el-radio label="1">请选择字典生成</el-radio>
-          </el-radio-group>
+        <el-form-item label="显示状态">
+          <dict-select v-model="form.showStatus" prop-name="sys_normal_disable" />
         </el-form-item>
-        <el-form-item label="SORT" prop="sort">
-          <el-input v-model="form.sort" placeholder="请输入SORT" />
+        <el-form-item label="顺序" prop="sort">
+          <el-input v-model="form.sort" placeholder="顺序" />
         </el-form-item>
         <el-form-item label="图标" prop="icon">
           <el-input v-model="form.icon" placeholder="请输入图标" />
@@ -130,9 +112,11 @@
 
 <script>
 import { listPmsProductCategory, getPmsProductCategory, delPmsProductCategory, addPmsProductCategory, updatePmsProductCategory, exportPmsProductCategory } from "@/api/pms/productCategory";
+import ProdCategory from "@/views/components/ProdCategory";
 
 export default {
   name: "PmsProductCategory",
+  components: {ProdCategory},
   data() {
     return {
       // 遮罩层
@@ -147,8 +131,6 @@ export default {
       multiple: true,
       // 显示搜索条件
       showSearch: true,
-      // 总条数
-      total: 0,
       // 商品分类表格数据
       pmsProductCategoryList: [],
       // 弹出层标题
@@ -157,14 +139,11 @@ export default {
       open: false,
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
         parentId: null,
         name: null,
         level: null,
         showStatus: null,
         sort: null,
-        icon: null,
       },
       // 表单参数
       form: {},
@@ -180,13 +159,27 @@ export default {
     /** 查询商品分类列表 */
     getList() {
       this.loading = true;
-      const {pageNum, pageSize} = this.queryParams;
-      const query = {...this.queryParams, pageNum: undefined, pageSize: undefined};
-      const pageReq = {page: pageNum - 1, size: pageSize};
-      listPmsProductCategory(query, pageReq).then(response => {
-        const { content, totalElements } = response
-        this.pmsProductCategoryList = content;
-        this.total = totalElements;
+      const query = {...this.queryParams};
+      listPmsProductCategory(query).then(rows => {
+        const map = {}
+        rows.forEach(it => {
+          let list = map[it.parentId]
+          if (!list) {
+            list = [];
+            map[it.parentId] = list;
+          }
+          list.push(it);
+        })
+        const stack = [...map['0']];
+        while (stack.length > 0) {
+          const p = stack.shift();
+          if (!map[p.id]) {
+            continue
+          }
+          p.children = map[p.id];
+          stack.push(...map[p.id])
+        }
+        this.pmsProductCategoryList = map['0'];
         this.loading = false;
       });
     },
@@ -214,7 +207,6 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
@@ -248,19 +240,23 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          let p;
           if (this.form.id != null) {
-            updatePmsProductCategory(this.form).then(response => {
+            p = updatePmsProductCategory(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addPmsProductCategory(this.form).then(response => {
+            p = addPmsProductCategory(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
             });
           }
+          p.then(() => {
+            this.$store.dispatch('loadProductCategories', true)
+          })
         }
       });
     },