课程增加分类筛选

src/views/modules/course/courseList.vue

@@ -7,11 +7,24 @@
     >
       <el-form-item label="课程名称">
         <el-input
-          v-model="query.keywords"
+          v-model="query.courseName"
           placeholder="课程名称"
           clearable
         ></el-input>
       </el-form-item>
+      <el-form-item label="平台分类">
+        <el-cascader clearable
+          :props="{
+            label: 'title',
+            value: 'id',
+            checkStrictly: true
+          }"
+          v-model="selectType"
+          :options="options"
+          @change="handleChange"
+        >
+        </el-cascader>
+      </el-form-item>
       <!-- <el-form-item label="出版社名称">
         <el-input v-model="query.publisherName" placeholder="出版社名称" clearable></el-input>
       </el-form-item>
@@ -125,19 +138,15 @@
         label="层级">
       </el-table-column> -->
 
-      <el-table-column label="课程图"  header-align="center"  align="center">
+      <el-table-column label="课程图" header-align="center" align="center">
         <template slot-scope="scope">
-          <div v-if="scope.row.image"  style="width:100%;display: flex;
-          align-items: center;justify-content: center;">
- <img
-            :src="scope.row.image"
-            alt=""
-            width="80px"
-            height="80px"
-           
-          />
+          <div
+            v-if="scope.row.image"
+            style="width:100%;display: flex;
+          align-items: center;justify-content: center;"
+          >
+            <img :src="scope.row.image" alt="" width="80px" height="80px" />
           </div>
-         
         </template>
       </el-table-column>
       <el-table-column
@@ -254,6 +263,24 @@ import AddOrUpdate from "./course-add-or-update";
 export default {
   data() {
     return {
+      selectType: [],
+      options: [
+        {
+          id: 'all',
+          title: "全部",
+          children: undefined
+        },
+        {
+          id: 1,
+          title: "医学",
+          children: []
+        },
+        {
+          id: 2,
+          title: "国学",
+          children: []
+        }
+      ],
       dataForm: {
         key: ""
       },
@@ -261,7 +288,7 @@ export default {
         type: "",
         categoryId: "",
         sociologyId: "",
-        keywords: ""
+        courseName: ""
       },
       dataList: [],
       delFlag: false,
@@ -270,7 +297,11 @@ export default {
       totalPage: 0,
       dataListLoading: false,
       dataListSelections: [],
-      addOrUpdateVisible: false
+      addOrUpdateVisible: false,
+      urlList: {
+        medicalList: "/master/courseMedical/getCourseMedicalList", //医学
+        sociologyList: "/master/courseSociology/getCourseSociologyList" //国学
+      }
     };
   },
   components: {
@@ -282,22 +313,74 @@ export default {
       console.log(this.pageIndex);
     }
     this.getDataList();
+    this.getTreeList(this.urlList.medicalList, 1);
+    this.getTreeList(this.urlList.sociologyList, 2);
   },
   methods: {
+    handleChange(value) {
+      console.log(value, "989999999");
+    },
+    async getTreeList(treeList, type) {
+      this.dataListLoading = true;
+      await this.$http({
+        url: this.$http.adornUrl(treeList),
+        method: "get"
+      }).then(({ data }) => {
+        console.log("🚀 ~ getDataList ~ data:", data);
+        if (data && data.code === 0) {
+          if (type == 1) {
+            this.options[type].children = data.Medicals;
+          } else if (type == 2) {
+            this.options[type].children = data.sociologys;
+          }
+
+          // this.totalPage = data.page.totalCount
+        } else {
+          this.options[type].children = [];
+          // this.totalPage = 0
+        }
+        this.dataListLoading = false;
+      });
+
+      console.log("this.options at line 333:", this.options);
+    },
     // 获取数据列表
     getDataList() {
+      var data = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        courseName: this.query.courseName //关键字
+      };
+
+      if (this.selectType.length == 0) {
+        data.type = 0;
+        data.medicalId = "";
+        data.sociologyId = "";
+      } else if (this.selectType.length >= 1) {
+        data.type = this.selectType[0]=='all'?0:this.selectType[0];
+        if (this.selectType.length == 1) {
+
+          data.medicalId = "";
+        data.sociologyId = "";
+
+        }
+        if (this.selectType.length > 1) {
+          if (this.selectType[0] == 1) {
+            data.medicalId = this.selectType[this.selectType.length - 1];
+            data.sociologyId = "";
+          }
+          if (this.selectType[0] == 2) {
+            data.medicalId = "";
+            data.sociologyId = this.selectType[this.selectType.length - 1];
+          }
+        }
+      }
+
       this.dataListLoading = true;
       this.$http({
         url: this.$http.adornUrl("/master/course/getCourseList"),
         method: "post",
-        data: this.$http.adornData({
-          page: this.pageIndex,
-          limit: this.pageSize,
-          type: this.query.type || 0, //类型0全部，1：医学，2：国学
-          categoryId: this.query.categoryId, //医学类型id，当type为1时为必填项;为0时代表全部
-          sociologyId: this.query.sociologyId, //国学类型id,当type为2时为必填项；为0代表全部
-          keywords: this.query.keywords //关键字
-        })
+        data: this.$http.adornData(data)
       }).then(({ data }) => {
         if (data && data.code === 0) {
           this.dataList = data.page.records;
@@ -453,3 +536,10 @@ export default {
   }
 };
 </script>
+<style lang="less" scoped>
+.el-select-dropdown__item.selected {
+  /deep/ .el-select-dropdown__item.selected {
+    color: #149f97;
+  }
+}
+</style>