页面修改

src/components/mall/goodlist.vue

@@ -58,8 +58,11 @@
         <li>
           <span>
             <em>分类</em>
-            <el-select v-model="statusValue" placeholder="请选择">
-
+            <el-select v-model="showCategoryName" placeholder="请选择" multiple collapse-tags @change="selectChange">
+              <el-option :value="chooseCategroyArray" style="height: auto">
+                <el-tree :data="CategoryList" show-checkbox node-key="Id" ref="tree" highlight-current
+                  :props="defaultProps" @check-change="categoryCheckChange"></el-tree>
+              </el-option>
             </el-select>
           </span>
         </li>
@@ -145,7 +148,15 @@
         statusValue: 0, //请选择
         //数据列表
         DataList: [],
+        CategoryList: [], //分类列表
         loading: false,
+        showCategoryName: "",
+        chooseCategroyArray: [],
+        //默认属性
+        defaultProps: {
+          children: 'ChildList',
+          label: 'Name'
+        },
         //查询参数
         msg: {
           currentPage: 1,
@@ -162,8 +173,61 @@
       };
     },
     methods: {
+      //下拉框改变
+      selectChange(e) {
+        var arrNew = [];
+        var dataLength = this.chooseCategroyArray.length;
+        var eleng = e.length;
+        for (let i = 0; i < dataLength; i++) {
+          for (let j = 0; j < eleng; j++) {
+            if (e[j] === this.chooseCategroyArray[i].Name) {
+              arrNew.push(this.chooseCategroyArray[i])
+            }
+          }
+        }
+        this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值
+      },
+      //分类选中
+      categoryCheckChange() {
+        //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
+        let res = this.$refs.tree.getCheckedNodes(true, true);
+        let arrLabel = [];
+        let arr = [];
+        res.forEach(item => {
+          arrLabel.push(item.Name);
+          arr.push(item);
+        });
+        this.chooseCategroyArray = arr;
+        this.showCategoryName = arrLabel;
+      },
+      //获取分类列表
+      getCategroy() {
+        let msg1 = {
+          Id: 0,
+          Name: '',
+          Tier: 0,
+          ParentId: 0,
+          Enabled: 1,
+          IsShow: 1,
+        }
+        this.mallapipost("/api/AppletGoods/GetProductCategoryTreeList", msg1, res => {
+          if (res.data.resultCode == 1) {
+            let pageData = res.data.data;
+            this.CategoryList = pageData;
+          }
+        })
+      },
       //获取商品列表
       getGoodList() {
+         
+        this.msg.CategoryIds = "";
+        var tempCategory = "";
+        if (this.chooseCategroyArray && this.chooseCategroyArray.length > 0) {
+          this.chooseCategroyArray.forEach(item => {
+            tempCategory += item.Id + ",";
+          })
+        }
+        this.msg.CategoryIds = tempCategory.substring(0, tempCategory.lastIndexOf(','));
         if (this.getLocalStorage().MallUserId) {
           this.msg.ERPUserId = this.getLocalStorage().MallUserId;
         }
@@ -177,7 +241,7 @@
           this.msg,
           res => {
             this.loading = false;
-            console.log("res.data.data", res.data.data);
+            //console.log("res.data.data", res.data.data);
             if (res.data.resultCode == 1) {
               var tempArray = res.data.data.pageData;
               this.DataList = tempArray;
@@ -198,7 +262,7 @@
       },
     },
     mounted() {
-      console.log("aaa")
+      this.getCategroy();
       this.getGoodList();
     }
   };