树形结构

src/views/course/CourseAdd.vue

@@ -16,7 +16,7 @@
         <!-- 课程类别 -->
         <a-col :span="9" :offset="3">
           <a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
-            <a-tree-select v-model="form.courseType" :tree-data="dictCourseType" placeholder="请选择课程类别"></a-tree-select>
+            <a-tree-select v-model="form.courseType" :replaceFields="replaceFields" :tree-data="dictCourseType" placeholder="请选择课程类别"></a-tree-select>
 
             <!-- <a-select v-model="form.courseType" placeholder="--请选择--">
               <a-select-option v-for="(item, index) in dictCourseType" :key="index" :value="item.value">
@@ -104,6 +104,7 @@
 
 
 <script>
+import { coursewareClassList } from '@/api/course/courseware'
 import { courseAdd, getCourseDetails } from '@/api/course/course'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
@@ -115,6 +116,7 @@ export default {
   name: 'step1',
   data() {
     return {
+      replaceFields:{children:'children', title:'name', key:'id', value: 'value' },
       pageName: this.$route.query.id ? '课程编辑' : '课程新增',
       dataValue: 1,
       form: {
@@ -132,6 +134,7 @@ export default {
       dictCourseType: [], // 课程类别
       industry: [],
       dictCourseTag: [],
+      treeDataOne:[]
     }
   },
   components: {
@@ -140,6 +143,7 @@ export default {
     getCourseDetails,
   },
   created() {
+    this.getCourseTreeData(0) //进来首先获取系统课程
     this.dictionaryDropDown()
     if(this.$route.query.id) this.loadData();
   },
@@ -147,6 +151,7 @@ export default {
   methods: {
     //加载数据
     loadData() {
+      this.getCourseTreeData(0)
       if (this.$route.query.id) {
         getCourseDetails({ id: this.$route.query.id }).then((res) => {
           this.form = res.data
@@ -179,10 +184,10 @@ export default {
         this.industry = res.data
       })
       // 课程类别
-      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
+      // dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
         // 词典转树结构
-        this.dictCourseType = dictToTree(res.data, [], 0)
+        // this.dictCourseType = dictToTree(res.data, [], 0)
-      })
+      // })
       // 人员类型
       dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
         this.dictPerson = res.data
@@ -209,6 +214,29 @@ export default {
       })
     },
 
+
+    //获取课程分类数据，转换成树结构
+    getCourseTreeData(type) {
+      coursewareClassList({ type: type }).then((res) => {
+        //list转🌲
+        const list2tree1 = (list, parentId) => {
+          return list.filter((item) => {
+            // 默认选中第一个节点
+            if (!this.treeDataOne) this.treeDataOne.push(item.value)
+            if (item.parentId === parentId) {
+              item.children = list2tree1(list, item.id)
+              return true
+            }
+            return false
+          })
+        }
+        this.dictCourseType = list2tree1(res.data, 0)
+        console.log("dict",this.dictCourseType);
+      })
+    },
+
+
+
     //标签选择器
     handleTagChange(value) {
       this.form.tags = value

src/views/course/CoursewareAddOrUpdate.vue

@@ -76,6 +76,7 @@
                     </a-button>&nbsp;&nbsp;&nbsp;
                   </a-upload>
                 </div>
+                <a-progress :percent="schedule" v-if="schedule > 0" />
               </a-card>
             </div>
           </a-tab-pane>