tree node select & tree filter

src/views/accurateTeaching/library/addLibrary.vue

@@ -3,8 +3,9 @@
     <el-card class="box-card" style="margin-bottom:30px">
       <el-row :gutter="24">
         <el-col :span="16">
-          <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ;color: #1890ff;font-size: 14px;">
-            个人资源库 / {{title}} / 课件上传
+          <div
+            style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ;color: #1890ff;font-size: 14px;">
+            个人资源库 / {{ title }} / 课件上传
           </div>
         </el-col>
         <el-col :span="8" style="text-align: right;">
@@ -20,14 +21,17 @@
         <el-form-item label="课件名称：" style="margin-top:30px;">
           <el-input v-model="resourcesName" placeholder="请填写课件名称"></el-input>
         </el-form-item>
-        <form-search labelWidth="75px" :searchformShow="searchformShow" :isForm="true" @handleQuery="handleQuery" @change="formChange">
+        <form-search labelWidth="75px" :searchformShow="searchformShow" :isForm="true" @handleQuery="handleQuery"
+                     @change="formChange">
         </form-search>
         <el-form-item label="章节目录：">
-          <el-select ref="chapterSelector" size="small" placeholder="请先选择科目、版本、学册后在选择章节" clearable v-model="selectLabel" @clear="selectClear" style="width:100%">
+          <el-select ref="chapterSelector" size="small" placeholder="请先选择科目、版本、学册后在选择章节" clearable v-model="selectLabel"
+                     @clear="selectClear" style="width:100%">
             <el-option class="option-style" :label="selectLabel" :value="selectValue">
               <el-input class="search" size="small" placeholder="输入关键字进行过滤" v-model="keywork" @click.stop.native>
               </el-input>
-              <el-tree :data="treeDate" :props="treeProps" @node-click="nodeClick"></el-tree>
+              <el-tree ref="tree" :data="treeDate" :props="treeProps" :expand-on-click-node="false"
+                       :filter-node-method="filterChapterNode" @node-click="nodeClick"></el-tree>
             </el-option>
           </el-select>
         </el-form-item>
@@ -43,16 +47,9 @@
 </template>
 
 <script>
-import {
-  getUploadToken,
-  uploadFile2OSS
-} from '@/api/webApi/common.js'
-import {
-  treeList,
-} from '@/api/webApi/webQue.js'
-import {
-  add
-} from '@/api/webApi/person.js'
+import { treeList } from '@/api/webApi/webQue.js'
+import { add } from '@/api/webApi/person.js'
+
 export default {
   data() {
     return {
@@ -83,20 +80,20 @@ export default {
         children: 'children',
         label: 'name',
         code: 'id'
-      },
+      }
     }
   },
   watch: {
     keywork(val) {
       this.$refs.tree.filter(val)
     },
-    'queryParams.slipid': function (vlaue) {
+    'queryParams.slipid': function(vlaue) {
       if (vlaue) {
         // load chapter tree
         let Ajax = {
           editionId: this.queryParams.edition, //版本
           subjectId: this.queryParams.userSubject, //科目
-          gradeId: this.queryParams.slipid, //学册
+          gradeId: this.queryParams.slipid //学册
         }
         this.deptOptions = []
         treeList(Ajax).then(response => {
@@ -120,7 +117,7 @@ export default {
 
     },
     formChange(data, type) {
-      if (type != 'coursewareType') {        
+      if (type != 'coursewareType') {
         // reset
         this.selectClear()
         this.treeDate = []
@@ -129,8 +126,8 @@ export default {
       console.log(this.queryParams)
     },
     uploadChanged(fileList) {
-      this.fileList = fileList;
-      const fileName = this.fileList.length ? this.fileList[0].name : ""
+      this.fileList = fileList
+      const fileName = this.fileList.length ? this.fileList[0].name : ''
       this.resourcesName = fileName
     },
     save() {
@@ -151,16 +148,16 @@ export default {
         return
       }
       let Ajax = {
-        "subjectId": this.queryParams.subjectid || this.queryParams.userSubject,
-        "resourcesName": this.resourcesName,
-        "resourcesUrl": this.fileList[0].url,
-        "fileSize": this.fileList[0].fileSize,
-        "category": this.$route.query.type == '课件资源' ? '2' : '3',
-        "chapterId": this.queryParams.section,
-        "edition": this.queryParams.edition,
+        'subjectId': this.queryParams.subjectid || this.queryParams.userSubject,
+        'resourcesName': this.resourcesName,
+        'resourcesUrl': this.fileList[0].url,
+        'fileSize': this.fileList[0].fileSize,
+        'category': this.$route.query.type == '课件资源' ? '2' : '3',
+        'chapterId': this.queryParams.section,
+        'edition': this.queryParams.edition,
         'bookId': this.queryParams.slipid,
-        "linkWay": 1,
-        "coursewareType": this.queryParams.coursewareType
+        'linkWay': 1,
+        'coursewareType': this.queryParams.coursewareType
       }
       this.loading = true
       add(Ajax).then(res => {
@@ -177,22 +174,18 @@ export default {
       this.selectValue = null
       this.queryParams.section = null
     },
-    filterNode(value, data) {
-      if (!value) {
-        return true
-      }
-      return data.label.indexOf(value) !== -1
+    filterChapterNode(value, data) {
+      if (!value) return true
+      return data.name?.includes(value)
     },
     nodeClick(obj, node) {
-      if (!obj.children?.length) {
-        this.treeClick = obj.id
-        this.selectLabel = obj.name
-        this.selectValue = obj.id
-        this.queryParams.section = obj.id
+      // 让用户可以选择任何结点
+      this.treeClick = obj.id
+      this.selectLabel = obj.name
+      this.selectValue = obj.id
+      this.queryParams.section = obj.id
 
-        this.$refs.chapterSelector.blur()
-      }
-      console.log(obj, node, this.queryParams)
+      this.$refs.chapterSelector.blur()
     },
     checkChange(obj, node) {
       console.log(obj, node)