新增字典集合转树封装

修改系统课程新增中的课程类别为树形选择

src/utils/util.js

@@ -86,6 +86,30 @@ export function listToTree(list, tree, parentId) {
   return tree
 }
 
+// 词典集合转树
+export function dictToTree(list, tree, parentId) {
+  list.forEach(item => {
+    if (item.parentid === parentId) {
+      let item_ = {};
+      item_.title = item.name;
+      item_.value = item.value;
+      item_.key = item.id;
+      const child = { ...item_, children: [] };
+
+      dictToTree(list, child.children, item.value);
+
+      if (child.children.length <= 0) {
+        delete child.children
+      }else{
+        child.selectable = false;
+      }
+
+      tree.push(child)
+    }
+  })
+  return tree
+}
+
 //列表转🌲
 // export function list2Tree(list, parentId) {
 //   let obj = []

src/views/course/CourseAdd.vue

@@ -9,35 +9,27 @@
         <!-- 课程名称 -->
         <a-col :span="18" :offset="3">
           <a-form-model-item label="课程名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-            <a-input
-              v-model="form.courseName"
-              v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]"
-            />
+            <a-input v-model="form.courseName" v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]" />
           </a-form-model-item>
         </a-col>
 
         <!-- 课程类别 -->
         <a-col :span="9" :offset="3">
           <a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
-            <a-select v-model="form.courseType" placeholder="--请选择--">
+            <a-tree-select v-model="form.courseType" :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">
                 {{ item.name }}
               </a-select-option>
-            </a-select>
+            </a-select> -->
           </a-form-model-item>
         </a-col>
 
         <!-- 课件大小 -->
         <a-col :span="9">
           <a-form-item label="课时" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
-            <a-input-number
-              id="hour"
-              v-model="dataValue"
-              :min="1"
-              :max="1000"
-              @change="onChange"
-              :style="{ display: 'ln', width: '100%' }"
-            />
+            <a-input-number id="hour" v-model="dataValue" :min="1" :max="1000" @change="onChange" :style="{ display: 'ln', width: '100%' }" />
             {{ dataValue }}分钟
           </a-form-item>
         </a-col>
@@ -91,14 +83,7 @@
         <!-- 上传封面图片 -->
         <a-col :span="18" :offset="3">
           <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
-            <a-upload
-              action="/dawa/sys/oss/upload?sourceId=course"
-              list-type="picture-card"
-              :file-list="fileList"
-              :headers="getToken()"
-              @change="handleChange"
-              @preview="handlePreview"
-            >
+            <a-upload action="/dawa/sys/oss/upload?sourceId=course" list-type="picture-card" :file-list="fileList" :headers="getToken()" @change="handleChange" @preview="handlePreview">
               <div v-if="fileList.length < 1">
                 <a-icon type="plus" />
                 <div class="ant-upload-text">上传</div>
@@ -132,6 +117,7 @@ import { courseAdd, getCourseDetails } from '@/api/course/course'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { dictToTree } from '@/utils/util'
 
 export default {
   name: 'step1',
@@ -141,14 +127,14 @@ export default {
       form: {
         coverPath: '',
         tags: [],
-        courseTags:[]
+        courseTags: [],
       },
       url: '',
       previewVisible: false,
       fileList: [],
       previewImage: [],
       dictPerson: [],
-      dictCourseType: [],
+      dictCourseType: [], // 课程类别
       industry: [],
       dictCourseTag: [],
     }
@@ -161,21 +147,20 @@ export default {
     this.dictionaryDropDown()
     if (this.$route.query.id) {
       getCourseDetails({ id: this.$route.query.id }).then((res) => {
-        this.form = res.data;
-        this.form.isRequired = this.form.isRequired + '';
+        this.form = res.data
+        this.form.isRequired = this.form.isRequired + ''
 
-        this.form.tags = [];
+        this.form.tags = []
         this.form.courseTags.forEach((item, index) => {
-          this.form.tags.push(item.dictValue.toString());
-        });
+          this.form.tags.push(item.dictValue.toString())
+        })
       })
     }
   },
 
   methods: {
     //显示页面上的数字
-    onChange(dataValue) {
-    },
+    onChange(dataValue) {},
     save() {
       courseAdd(this.form).then((res) => {
         if (res.code == 200) {
@@ -194,7 +179,8 @@ export default {
       })
       // 课程类别
       dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
-        this.dictCourseType = res.data
+        // 词典转树结构
+        this.dictCourseType = dictToTree(res.data, [], 0)
       })
       // 人员类型
       dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
@@ -203,7 +189,7 @@ export default {
       // 标签项 默认选中的多选框
       dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
         const tagList = res.data
-        for ( let i = 0; i　< tagList.length; i++) {
+        for (let i = 0; i < tagList.length; i++) {
           tagList[i].value = tagList[i].value.toString()
         }
         this.dictCourseTag = tagList
@@ -225,8 +211,7 @@ export default {
       hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
       return hreader
     },
-    onSuccess(file) {
-    },
+    onSuccess(file) {},
     handleCancel() {
       this.previewVisible = false
     },
@@ -246,7 +231,7 @@ export default {
 
     //标签选择器
     handleTagChange(value) {
-      this.form.tags = value;
+      this.form.tags = value
     },
   },
 }