上级分类组件优化

src/views/components/ProdCategory.vue

@@ -1,65 +0,0 @@
-<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', 'root'],
-  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])
-      }
-      if (this.root) {
-        return [{id: 0, label: '根节点', children: map['0']}];
-      }
-      return map['0'];
-    }
-  },
-  created() {
-    this.$store.dispatch('mall/loadProductCategories')
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/components/ProductCategorySelect.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-cascader
+    v-model="value1"
+    :options="menuOptions"
+    :props="{ checkStrictly: true }"
+    placeholder="选择上级类目"
+  />
+</template>
+
+<script>
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {mapGetters} from "vuex";
+
+export default {
+  name: "ProductCategorySelect",
+  props: ['value'],
+  computed: {
+    ...mapGetters(['productCategories']),
+    value1: {
+      get() {
+        console.log(this.value)
+        return this.value;
+      },
+      set(v) {
+        console.log(v)
+        this.$emit('input', v);
+      }
+    },
+    menuOptions() {
+      if (!this.productCategories || this.productCategories.length === 0) {
+        return [];
+      }
+      this.recurs(this.productCategories)
+      return this.productCategories
+    }
+  },
+  methods: {
+    recurs(list){
+      list.forEach(it => {
+        it.label = it.name
+        it.value = it.id
+        if(it.children){
+          this.recurs(it.children)
+        }
+      })
+    }
+  },
+  created() {
+    this.$store.dispatch('mall/loadProductCategories')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/index.vue

@@ -130,7 +130,7 @@
                 h4 参与京东服务市场商品分析应用开发，参与京东服务市场会员积分应用开发
             el-timeline-item(placement="top" timestamp="2019年")
               el-card
-                h4 参与京东服务市场商品搬家应用开发，参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
+                h4 参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
             el-timeline-item(placement="top" timestamp="2020年")
               el-card
                 h4 所参与开发的拼多多订单应用排名服务市场类目第一，开始快手服务市场订单应用开发

src/views/pms/product/AddProduct.vue

@@ -75,12 +75,12 @@
 
 <script>
 import {addPmsProduct, getPmsProduct, updatePmsProduct} from "@/api/pms/product";
-import ProdCategory from "@/views/components/ProdCategory";
+import ProductCategorySelect from "@/views/components/ProductCategorySelect";
 import BrandSelect from "@/views/components/BrandSelect";
 
 export default {
   name: "AddProduct",
-  components: {BrandSelect, ProdCategory},
+  components: {BrandSelect, ProductCategorySelect},
   data() {
     return {
       form: {},

src/views/pms/productCategory/index.vue

@@ -93,10 +93,10 @@
           <el-input v-model="form.sort" placeholder="排序"/>
         </el-form-item>
         <el-form-item label="层级" prop="level">
-          <el-input v-model="form.level" placeholder="层级：0->1级；1->2级"/>
+          <el-input v-model="form.level" placeholder="层级"/>
         </el-form-item>
         <el-form-item label="上级分类" prop="parentId">
-          <prod-category class="w200" v-model="form.parentId" :root="true"/>
+          <product-category-select class="w200" v-model="form.parentId"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -116,12 +116,12 @@ import {
   updatePmsProductCategory,
   exportPmsProductCategory
 } from "@/api/pms/productCategory";
-import ProdCategory from "@/views/components/ProdCategory";
+import ProductCategorySelect from "@/views/components/ProductCategorySelect";
 
 export default {
   name: "PmsProductCategory",
   dicts: ['sys_normal_disable'],
-  components: {ProdCategory},
+  components: {ProductCategorySelect},
   data() {
     return {
       // 遮罩层
@@ -227,6 +227,9 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           let p;
+          if(this.form.parentId){
+            this.form.parentId = this.form.parentId.pop()
+          }
           if (this.form.id != null) {
             p = updatePmsProductCategory(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");