课程分类管理选项菜单

src/views/course/CoursewareAddOrUpdate.vue

@@ -22,32 +22,26 @@
                     </a-select-option>
                   </a-select>
                   <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
-
                   <!-- 课件分类弹框 -->
-                  <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+                  <a-modal v-model="fileUpload.visible" title="课程分类管理" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
-                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
+
-                      <span slot="type" slot-scope="text, record">
+                    <div class="table-operator">
-                        <a-tag color="cyan" v-if="text === 0">
+                      <a-button type="primary" icon="plus">新增分类</a-button>
-                          {{ record.type | typeFilter }}
+                    </div>
-                        </a-tag>
+                    <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :alert="false" :data="classfiy" :showPagination="false" :expandRowByClick="true">
-                        <a-tag color="blue" v-if="text === 1">
-                          {{ record.type | typeFilter }}
-                        </a-tag>
-                        <a-tag color="purple" v-if="text === 2">
-                          {{ record.type | typeFilter }}
-                        </a-tag>
-                      </span>
                       <span slot="action" slot-scope="text, record">
                         <template>
+                          <a v-if="hasPerm('sys:menu:add') && record.type !== 2" @click="$refs.menuForm.add(record.id)">新增下级</a>
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:add') && record.type !== 2 && hasPerm('sys:menu:edit')" />
                           <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
-                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit') && hasPerm('sys:menu:delete') " />
                           <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
                             <a>删除</a>
                           </a-popconfirm>
                         </template>
                       </span>
                     </s-table>
-                  </a-modal> -->
+                  </a-modal>
                 </div>
                 <div>课件大小：&nbsp;
                   <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
@@ -122,7 +116,8 @@
         </a-tabs>
       </a-tab-pane>
 
-       <a-tab-pane key="2" tab="视频服务器链接" :disabled="true">  <!-- videoServerLink.disabled -->
+      <a-tab-pane key="2" tab="视频服务器链接" :disabled="true">
+        <!-- videoServerLink.disabled -->
         <div style="background: #ececec; padding: 30px">
           <a-card title="视频服务器链接" :bordered="false" style="width: 100%">
             <div style="margin-bottom: 30px">
@@ -174,7 +169,8 @@
         </div>
 
       </a-tab-pane>
-      <a-tab-pane key="3" tab="第三方连接" :disabled="true">  <!-- thirdAddress.disabled -->
+      <a-tab-pane key="3" tab="第三方连接" :disabled="true">
+        <!-- thirdAddress.disabled -->
         <div style="background: #ececec; padding: 30px">
           <a-card title="第三方连接" :bordered="false" style="width: 100%">
             <div style="margin-bottom: 30px">
@@ -232,17 +228,21 @@
 
 
 <script>
+import { STable } from '@/components'
 import { coursewareDeatil } from '@/api/course/courseware'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import storage from 'store'
 import axios from 'axios'
 import { ossUpload } from '@/api/sys/oss'
-import { coursewareAdd } from '@/api/course/courseware'
+import { coursewareAdd, coursewareClassList } from '@/api/course/courseware'
-import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { listToTree } from '@/utils/util'
+
+const rootParentId = 0
 
 export default {
   data() {
     return {
+      treeData: [],
       courseware: {}, //课件详情
       queryParam: { coursewareId: this.$route.query.coursewareId }, //编辑传参
       successOssFile: [],
@@ -274,64 +274,57 @@ export default {
         sizeStr: '',
         type: '4',
       },
+      columns: [
+        {
+          title: '名称',
+          dataIndex: 'name',
+          key: 'name',
+          ellipsis: true,
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '200px',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
     }
   },
-  components: {},
+  components: { STable, listToTree },
   created() {
-    //判断是否是编辑
+    //判断是否加载数据
-    if (this.queryParam.coursewareId) {
+    if (this.queryParam.coursewareId) this.load()
-      let parameter = {}
-      coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
-        this.courseware = res.data
-
-        //编辑只能更改所在的位置的
-        this.fileUpload.disabled = true
-        this.fileUpload.videoForm.disabled = true
-        this.fileUpload.textForm.disabled = true
-        this.videoServerLink.disabled = true
-        this.thirdAddress.disabled = true
-
-        //分配到各自的提交模块
-        if (this.courseware.type == '1' || this.courseware.type == '2') {
-          this.parentTabKey = '1'
-          if (this.courseware.type == '1') {
-            this.fileUpload.tabkey = '1'
-            this.fileUpload.videoForm = this.courseware
-            this.fileUpload.videoForm.disabled = false
-            this.courseware.videoList.forEach(element => {
-              let successOssFile_ = {};
-              successOssFile_["id"] = element.id;
-              successOssFile_["uid"] = element.id;
-              successOssFile_["uuid"] = element.id;
-              successOssFile_["code"] = 200;
-              successOssFile_["name"] = element.name;
-              successOssFile_["url"] = element.path;
-              successOssFile_["size"] = element.size;
-              this.successOssFile.push(successOssFile_);
-            });
-            console.log('11------', this.successOssFile)
-          } else {
-            this.fileUpload.tabkey = '2'
-            this.fileUpload.textForm = this.courseware
-            this.fileUpload.textForm.disabled = false
-          }
-        }
-
-        if (this.courseware.type == '3') {
-          this.parentTabKey = '2'
-          this.videoServerLink = this.courseware
-          this.videoServerLink.disabled = false
-        }
-
-        if (this.courseware.type == '4') {
-          this.parentTabKey = '3'
-          this.thirdAddress = this.courseware
-          this.thirdAddress.disabled = false
-        }
-      })
-    }
   },
   methods: {
+    //弹框
+    showModal() {
+      this.fileUpload.visible = true
+      // this.classfiy()
+    },
+
+    //加载分类标签数据
+    classfiy() {
+      let parameter = {}
+      return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
+        const list2tree1 = (list, parentId) => {
+          return list.filter((item) => {
+            // 默认选中第一个节点
+            // if (this.treeDataOne) this.treeDataOne.push(item.id)
+            if (item.parentid === parentId) {
+              item.children = list2tree1(list, item.id)
+              return true
+            }
+            return false
+          })
+        }
+        // const coursewareClassList = listToTree(res.data, [], rootParentId)
+        let coursewareClassList = list2tree1(res.data, 0)
+        console.log('coursewareClassList::::', coursewareClassList)
+        this.treeData = coursewareClassList
+        return coursewareClassList
+      })
+    },
+
     //返回
     goback() {
       this.$router.push({
@@ -435,7 +428,7 @@ export default {
 
           //如果是编辑
           if (this.queryParam.coursewareId) {
-            //在原基础上增加 
+            //在原基础上增加
             if (this.fileUpload.tabkey == '1' && this.parentcallback == '1') {
               this.fileUpload.videoForm.size =
                 this.fileUpload.videoForm.size + parseFloat(videoSize) + parseFloat(this.fileUpload.videoForm.sizeStr)
@@ -471,11 +464,6 @@ export default {
       this.refreshFileSize()
     },
 
-    //弹框
-    showModal() {
-      this.fileUpload.visible = true
-    },
-
     //保存
     save() {
       //视频赋给表单里面的字段
@@ -586,6 +574,62 @@ export default {
       form = this.thirdAddress
       return form
     },
+
+    //加载数据
+    load() {
+      //判断是否是编辑
+      if (this.queryParam.coursewareId) {
+        let parameter = {}
+        coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
+          this.courseware = res.data
+
+          //编辑只能更改所在的位置的
+          this.fileUpload.disabled = true
+          this.fileUpload.videoForm.disabled = true
+          this.fileUpload.textForm.disabled = true
+          this.videoServerLink.disabled = true
+          this.thirdAddress.disabled = true
+
+          //分配到各自的提交模块
+          if (this.courseware.type == '1' || this.courseware.type == '2') {
+            this.parentTabKey = '1'
+            if (this.courseware.type == '1') {
+              this.fileUpload.tabkey = '1'
+              this.fileUpload.videoForm = this.courseware
+              this.fileUpload.videoForm.disabled = false
+              this.courseware.videoList.forEach((element) => {
+                let successOssFile_ = {}
+                successOssFile_['id'] = element.id
+                successOssFile_['uid'] = element.id
+                successOssFile_['uuid'] = element.id
+                successOssFile_['code'] = 200
+                successOssFile_['name'] = element.name
+                successOssFile_['url'] = element.path
+                successOssFile_['size'] = element.size
+                this.successOssFile.push(successOssFile_)
+              })
+              console.log('11------', this.successOssFile)
+            } else {
+              this.fileUpload.tabkey = '2'
+              this.fileUpload.textForm = this.courseware
+              this.fileUpload.textForm.disabled = false
+            }
+          }
+
+          if (this.courseware.type == '3') {
+            this.parentTabKey = '2'
+            this.videoServerLink = this.courseware
+            this.videoServerLink.disabled = false
+          }
+
+          if (this.courseware.type == '4') {
+            this.parentTabKey = '3'
+            this.thirdAddress = this.courseware
+            this.thirdAddress.disabled = false
+          }
+        })
+      }
+    },
   },
 }
 </script>