bugfix

src/components/common/container.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mian" :style="style">
     <h1 class="contain-title">{{ title }}</h1>
-    <div>
+    <div class="main-content">
       <slot> </slot>
     </div>
     <div class="fixd-right-btn">
@@ -19,7 +19,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: "123",
+      default: "",
     },
     height: {
       type: String,

src/permission.js

@@ -42,7 +42,6 @@ router.beforeEach((to, from, next) => {
             });
         });
       } else {
-        console.log("to:", to);
         next();
       }
     }

src/store/getters.js

@@ -1,6 +1,5 @@
+import store from "@/store";
 import api from "@/api/api";
-import { getAllStoreList } from "../api/store/index";
-import { goodscategorytree } from "../api/goods/index";
 const getters = {
   sidebar: (state) => state.app.sidebar,
   size: (state) => state.app.size,
@@ -36,25 +35,19 @@ const getters = {
   },
   roleList(state) {
     if (!state.dict.roleList) {
-      api.obtainRoleList({ status: 1 }).then((res) => {
-        state.dict.roleList = res.rows;
-      });
+      store.commit("EDICROLELIST")
     }
     return state.dict.roleList;
   },
   storeList(state) {
     if (!state.dict.storeList.length) {
-      getAllStoreList().then((res) => {
-        state.dict.storeList = res.data;
-      });
+      store.commit("EDICSTORELIST")
     }
     return state.dict.storeList;
   },
   categoryList(state) {
     if (!state.dict.categoryList.length) {
-      goodscategorytree({ status: 1 }).then((res) => {
-        state.dict.categoryList = res.data;
-      });
+      store.commit("EDICSCATEGORY")
     }
     return state.dict.categoryList;
   },

src/store/modules/dict.js

@@ -1,6 +1,20 @@
 import api from "@/api/api";
 import { getAllStoreList } from "../../api/store/index";
 import { goodscategorytree } from "../../api/goods/index";
+
+function setLevel(data, index = 1) {
+  data.forEach((ele) => {
+    ele.level = index;
+    if (ele.children?.length) {
+      if (index % 3 == 0) {
+        ele.isHasChildren = true;
+      }
+      setLevel(ele.children, index + 1);
+    }
+  });
+  return data;
+}
+
 const state = {
   roleList: null, //角色列表
   storeList: [],
@@ -15,12 +29,12 @@ const mutations = {
   },
   EDICSTORELIST(state) {
     getAllStoreList().then((res) => {
-      state.storeList = res.rows;
+      state.storeList = res.data;
     });
   },
   EDICSCATEGORY(state) {
     goodscategorytree({ status: 1 }).then((res) => {
-      state.categoryList = res.data;
+      state.categoryList = setLevel(res.data);
     });
   },
 };

src/views/components/index/goodsList.vue

@@ -10,13 +10,10 @@
     </div>
     <div class="good-main">
       <div class="good-category">
-        <!-- <el-tree
-          highlight-current
-          :data="data"
-          :props="defaultProps"
-          :render-content="renderContent"
-        ></el-tree> -->
-        <category-tree></category-tree>
+        <category-tree
+          :treeList="categoryList"
+          @more="handelShowMore"
+        ></category-tree>
       </div>
       <div class="good-list scrollbar">
         <div
@@ -35,6 +32,23 @@
         </div>
       </div>
     </div>
+    <Base-dialog
+      title="筛选分类"
+      :isShow.sync="isShow"
+      @open="open"
+      @submit="submitForm"
+      width="850px"
+    >
+      <div class="treeBox">
+        <category-tree
+          v-for="(item, index) in treeArr"
+          :key="index"
+          :treeList="item"
+          :level="item[0].level + 2"
+          width="185px"
+        ></category-tree>
+      </div>
+    </Base-dialog>
   </container>
 </template>
 
@@ -124,12 +138,16 @@ export default {
         label: "label",
       },
       ids: [1],
+      isShow: false,
+      treeArr: [],
     };
   },
 
   mounted() {},
 
   methods: {
+    open() {},
+    submitForm() {},
     select(item) {
       const index = this.selectedList.findIndex((e) => e.id == item);
       if (index != -1) {
@@ -138,12 +156,13 @@ export default {
         this.selectedList.push({ id: item });
       }
     },
-    renderContent(h, { node, data, store }) {
-      return (
-        <span class="custom-tree-node fl_b">
-          <span class="custom-tree-text line1">{node.label}</span>
-        </span>
-      );
+    handelShowMore(data) {
+      if (!this.treeArr.length) {
+        this.treeArr.push(this.categoryList);
+      }
+      this.treeArr.push(data.children);
+      console.log(this.treeArr);
+      this.isShow = true;
     },
   },
   computed: {
@@ -160,53 +179,9 @@ export default {
 
 <style lang="scss" scoped>
 .good-main {
-  height: 100%;
   display: flex;
   margin-top: 16px;
-  .good-category {
-    height: calc(100% - 50px);
-    background: #f6f7f9;
-    border-radius: 8px;
-    width: 120px;
-    /deep/ {
-      .el-tree {
-        background: #f6f7f9;
-        border-radius: 8px;
-      }
-      .el-tree-node__content {
-        height: 48px;
-        color: #4a4a4b;
-      }
-      div {
-        .el-tree-node__label {
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-        &[style="padding-left: 18px;"] {
-          padding-left: 6px !important;
-        }
-        &[style="padding-left: 36px;"] {
-          padding-left: 12px !important;
-        }
-      }
-      .el-tree--highlight-current
-        .el-tree-node.is-current
-        > .el-tree-node__content {
-        background: #f6f7f9;
-        color: #fa821f;
-      }
-      .custom-tree-node {
-        height: 48px;
-        .custom-tree-text {
-          width: 90px;
-        }
-      }
-      .el-tree-node__expand-icon {
-        font-size: 16px;
-      }
-    }
-  }
+  height: 100%;
   .good-list {
     display: flex;
     justify-content: space-between;
@@ -214,7 +189,7 @@ export default {
     margin-left: 20px;
     flex-wrap: wrap;
     align-content: flex-start;
-    height: calc(100% - 50px);
+    height: calc(100vh - 230px);
     overflow-x: auto;
     p {
       padding: 0;
@@ -243,4 +218,10 @@ export default {
     }
   }
 }
+.treeBox {
+  display: flex;
+  .good-category{
+    margin-right: 20px;
+  }
+}
 </style>

src/views/components/index/payContain.vue

@@ -143,9 +143,9 @@ export default {
   color: #4a4a4b;
 }
 .pay-top {
-  margin-bottom: 50px;
+  margin-bottom: 40px;
   .good-list {
-    height: 330px;
+    height: 260px;
     overflow-x: auto;
     .good-item {
       height: 60px;

src/views/components/index/tree.vue

@@ -1,23 +1,37 @@
 <template>
-  <el-tree
-    highlight-current
-    :expand-on-click-node="false"
-    :data="categoryList"
-    :props="defaultProps"
-  ></el-tree>
+  <div class="good-category" :style="{ width: width }">
+    <el-tree
+      highlight-current
+      :expand-on-click-node="false"
+      :data="treeList"
+      :props="defaultProps"
+      @node-expand="nodeExpand"
+      :filter-node-method="filterNode"
+      :auto-expand-parent="false"
+      :indent="6"
+      ref="tree"
+    ></el-tree>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 export default {
   name: "SaasMemberTree",
   props: {
+    width: {
+      type: String,
+      default: "120px",
+    },
     treeList: {
       type: Array,
       default: () => {
         return [];
       },
     },
+    level: {
+      type: Number,
+      default: 3,
+    },
   },
   data() {
     return {
@@ -27,10 +41,15 @@ export default {
       },
     };
   },
-
-  mounted() {},
-
   methods: {
+    nodeExpand(data) {
+      if (data.isHasChildren) {
+        this.$emit("more", data);
+      }
+    },
+    filterNode(value, data) {
+      return data.level <= value;
+    },
     renderContent(h, { node, data, store }) {
       return (
         <span class="custom-tree-node fl_b">
@@ -38,11 +57,66 @@ export default {
         </span>
       );
     },
+    allExpandNodes(node) {
+      for (let i = 0; i < node.childNodes.length; i++) {
+        node.childNodes[i].expanded = this.expandAll;
+        if (node.childNodes[i].childNodes.length > 0) {
+          this.allExpandNodes(node.childNodes[i]);
+        }
+      }
+    },
   },
-  computed: {
-    ...mapGetters(["categoryList"]),
+  watch: {
+    treeList: {
+      handler(val) {
+        this.$nextTick(() => {
+          this.$refs.tree.filter(this.level);
+          this.allExpandNodes(this.$refs.tree.root);
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.good-category {
+  // height: calc(100% - 50px);
+  background: #f6f7f9;
+  border-radius: 8px;
+  /deep/ {
+    .el-tree {
+      background: #f6f7f9;
+      border-radius: 8px;
+    }
+    .el-tree-node__content {
+      height: 48px;
+      color: #4a4a4b;
+    }
+    div {
+      .el-tree-node__label {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+    .el-tree--highlight-current
+      .el-tree-node.is-current
+      > .el-tree-node__content {
+      background: #f6f7f9;
+      color: #fa821f;
+    }
+    .custom-tree-node {
+      height: 48px;
+      .custom-tree-text {
+        width: 90px;
+      }
+    }
+    .el-tree-node__expand-icon {
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/views/goodsMag/classify.vue

@@ -6,12 +6,12 @@
       >
       <el-button @click="batchDel">批量删除</el-button>
     </template>
-    <search-box-new
+    <!-- <search-box-new
       :formData="formData"
       :formList="formList"
       @search="search"
       @init="init"
-    />
+    /> -->
     <table-list
       ref="tableList"
       :tableSets="tableSet"

src/views/goodsMag/components/ClassSetDlg.vue

@@ -182,7 +182,7 @@ export default {
     changeCategory(val) {
       if (this.form.storeId) return;
       let data = this.$refs["cascader"].getCheckedNodes()[0].data;
-      this.form.storeId = data.storeId
+      this.form.storeId = data.storeId;
     },
   },
   computed: {
@@ -209,7 +209,7 @@ export default {
         return array;
       };
     },
-    ...mapGetters(["storeList","categoryList"]),
+    ...mapGetters(["storeList", "categoryList"]),
   },
   components: {},
 };