标签管理,分类管理页面

src/api/modules/trainingApi.js

@@ -0,0 +1,90 @@
+import http from "@/api/http.js"
+
+/* 培训管理模块 */
+
+
+//标签管理
+export const TagInterface = {
+    /**
+     * 获取标签列表
+     * @param {Object} params 
+     * @param {Number} params.PageSize 
+     * @param {Number} params.CurrentIndex
+     * @param {String} params.Keyword
+     * @returns 
+     */
+    getTagList:(params)=>{
+        return http.get('/eta_training_video/tag/page_list',params)
+    },
+    /**
+     * 新增标签
+     * @param {Object} params 
+     * @param {String} params.TagName
+     * @returns 
+     */
+    addTag:(params)=>{
+        return http.post('/eta_training_video/tag/add',params)
+    },
+    /**
+     * 编辑标签
+     * @param {Object} params 
+     * @param {Number} params.TagId
+     * @param {String} params.TagName
+     * @returns 
+     */
+    editTag:(params)=>{
+        return http.post('/eta_training_video/tag/edit',params)
+    },
+    /**
+     * 删除标签
+     * @param {Object} params 
+     * @param {Number} params.TagId
+     * @returns 
+     */
+    deleteTag:(params)=>{
+        return http.post('/eta_training_video/tag/remove',params)
+    }
+}
+
+//分类管理
+export const ClassifyInterface = {
+    /**
+     * 获取分类列表
+     * @param {Object} params 
+     * @param {Number} params.Keyword 
+     * @returns 
+     */
+     getClassifyList:(params)=>{
+        return http.get('/eta_training_video/classify/tree',params)
+    },
+    /**
+     * 新增分类
+     * @param {Object} params 
+     * @param {Number} params.ParentId
+     * @param {String} params.ClassifyName
+     * @returns 
+     */
+    addClassify:(params)=>{
+        return http.post('/eta_training_video/classify/add',params)
+    },
+    /**
+     * 编辑分类
+     * @param {Object} params 
+     * @param {Number} params.ParentId
+     * @param {Number} params.ClassifyId
+     * @param {String} params.ClassifyName
+     * @returns 
+     */
+    editClassify:(params)=>{
+        return http.post('/eta_training_video/classify/edit',params)
+    },
+    /**
+     * 删除分类
+     * @param {Object} params 
+     * @param {Number} params.ClassifyId
+     * @returns 
+     */
+    deleteClassify:(params)=>{
+        return http.post('/eta_training_video/classify/remove',params)
+    }
+}

src/views/training_manage/classifyManage.vue

@@ -2,45 +2,49 @@
     <div class="classify-manage-wrap traing-manage">
         <div class="top-wrap">
             <el-button type="primary" @click="handleModifyClassify({})">添加分类</el-button>
-            <el-input v-model="searchText" clearable 
-                prefix-icon="el-icon-search" placeholder="请输入分类名称" @input="handleCurrentChange(1)" 
-                style="width:240px;"></el-input>
+            <el-input v-model="searchText" clearable prefix-icon="el-icon-search" placeholder="请输入分类名称"
+                @input="getTableData" style="width:240px;"></el-input>
         </div>
         <div class="table-wrap">
-            <el-table>
-                <el-table-column prop="classify_name" label="一级分类">
-                        <template slot-scope="{row}">
-                            <span>{{row.ischild?'':scope.row.ClassifyName}}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="classify_name" label="二级分类">
-                        <template slot-scope="{row}">
-                            <span>{{row.ischild?scope.row.ClassifyName:''}}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="操作" align="center">
-                        <template slot-scope="{row}">
-                            <el-button type="text" @click="handleModifyClassify(row)">编辑</el-button>
-                            <el-button type="text" @click="deleteClassify(row)">删除</el-button>
-                        </template>
-                    </el-table-column>
+            <el-table :data="tableData" v-loading="tableLoading" row-key="ClassifyId"
+                :tree-props="{children:'Children',hasChildren:'hasChildren'}">
+                <el-table-column prop="ClassifyName" label="一级分类" align="center">
+                    <template slot-scope="{row}">
+                        <span>{{row.ParentId?'':row.ClassifyName}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="ClassifyName" label="二级分类" align="center">
+                    <template slot-scope="{row}">
+                        <span>{{row.ParentId?row.ClassifyName:''}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="400px">
+                    <template slot-scope="{row}">
+                        <el-button type="text" @click="handleModifyClassify(row)">编辑</el-button>
+                        <el-button type="text" @click="deleteClassify(row)">删除</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
         </div>
         <!-- 添加分类弹窗 -->
-        <el-dialog
-            :title="currentClassify.id?'编辑标签':'添加标签'"
-            :visible.sync="isModifyDialogShow"
-            :close-on-click-modal="false"
-            :modal-append-to-body="false"
-            @close="isModifyDialogShow=false"
-            width="589px"
-            v-dialogDrag
-            center
-            >
+        <el-dialog :title="currentClassify.ClassifyId?'编辑分类':'添加分类'" :visible.sync="isModifyDialogShow"
+            :close-on-click-modal="false" :modal-append-to-body="false" @close="isModifyDialogShow=false" width="589px"
+            v-dialogDrag center>
             <div class="dialog-container">
-                <el-form>
-                    <el-form-item label="上级目录"></el-form-item>
-                    <el-form-item label="分类名称"></el-form-item>
+                <el-form :model="currentClassify" :rules="rules" ref="form" label-position="top">
+                    <el-form-item label="上级分类" prop="ParentId">
+                        <el-select v-model="currentClassify.ParentId" placeholder="请选择上级分类" style="width:100%;">
+                            <el-option v-for="item in currentClassify.ClassifyId
+                                ?(currentClassify.ParentId<=0?defaultList:optionList)
+                                :[...defaultList,...optionList]" 
+                            :key="item.ClassifyId"
+                            :label="item.ClassifyName"
+                            :value="item.ClassifyId"/>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="分类名称" prop="ClassifyName">
+                        <el-input v-model="currentClassify.ClassifyName" placeholder="请输入分类名称" style="width:100%;"></el-input>
+                    </el-form-item>
                 </el-form>
             </div>
             <div class="foot-container">
@@ -52,30 +56,118 @@
 </template>
 
 <script>
+import {ClassifyInterface} from '@/api/modules/trainingApi'
 export default {
     data() {
         return {
-            searchText:'',
-            tableData:[],
-
-            currentClassify:{},
-            isModifyDialogShow:false
+            searchText: '',
+            tableData: [],
+            tableLoading: false,
+            currentClassify: {},
+            defaultList:[{ClassifyId:-1,ClassifyName:'无'}],
+            isModifyDialogShow: false,
+            rules:{
+                ParentId:[{required:true,message:'请选择上级分类'}],
+                ClassifyName:[{required:true,message:'请输入分类名称'}]
+            }
         };
     },
+    watch:{
+        isModifyDialogShow(newVal){
+            if(newVal){
+                this.$nextTick(()=>{
+                    this.$refs.form&&this.$refs.form.clearValidate();
+                })
+            }
+        }
+    },
+    computed:{
+        optionList(){
+            const list = this.tableData.map(i=>{
+                return {
+                    ClassifyId:i.ClassifyId,
+                    ClassifyName:i.ClassifyName
+                }
+            })
+            return list
+        },
+    },
     methods: {
-        handleModifyClassify(data){
-            this.currentClassify = data
+        handleModifyClassify(data) {
+            this.currentClassify = _.cloneDeep(data)
+            if(data.ParentId===0){
+                this.currentClassify.ParentId = -1
+            }
             this.isModifyDialogShow = true
         },
-        modifyClassify(){},
-        deleteClassify(data){},
-        handleCurrentChange(page){
-
-        }
+        async modifyClassify() {
+            //params对ParentId为-1的数据做处理,转为0
+            await this.$refs.form.validate()
+            let res = null
+            if(this.currentClassify.ClassifyId){
+                res = await ClassifyInterface.editClassify({
+                    ClassifyId:this.currentClassify.ClassifyId,
+                    ParentId:this.currentClassify.ParentId===-1?0:this.currentClassify.ParentId,
+                    ClassifyName:this.currentClassify.ClassifyName
+                })
+            }else{
+                res = await ClassifyInterface.addClassify({
+                    ParentId:this.currentClassify.ParentId===-1?0:this.currentClassify.ParentId,
+                    ClassifyName:this.currentClassify.ClassifyName
+                })
+            }
+            if(res.Ret!==200) return 
+            this.$message.success(`${this.currentClassify.ClassifyId?'编辑':'添加'}成功`)
+            this.getTableData()
+            this.isModifyDialogShow = false
+        },
+        deleteClassify(data) {
+            if(data.Children&&data.Children.length){
+                this.$confirm(
+                    '该分类下已关联内容，不可删除！',
+                    '提示',
+                    {
+                        confirmButtonText: '知道了',
+                        showCancelButton:false,
+                        type: 'error',
+                    }
+                ).then(()=>{})
+            }else{
+                this.$confirm(
+                    '删除后不可恢复，是否确认删除？',
+                    '提示',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                    }
+                ).then(()=>{
+                    ClassifyInterface.deleteClassify({
+                        ClassifyId:data.ClassifyId
+                    }).then(res=>{
+                        if(res.Ret!==200) return 
+                        this.$message.success('删除成功')
+                        this.getTableData()
+                    })
+                    
+                })
+            }
+        },
+        getTableData(){
+            ClassifyInterface.getClassifyList({
+                Keyword:this.searchText
+            }).then(res=>{
+                if(res.Ret!==200) return
+                this.tableData = res.Data&&res.Data.List||[]
+            })
+        },
     },
+    mounted(){
+        this.getTableData()
+    }
 };
 </script>
 
 <style scoped lang="scss">
-
-</style>
+@import "./css/manage.scss";
+</style>

src/views/training_manage/config/tableColumn.js

@@ -1,14 +1,14 @@
 export const labelTableColumn = [
     {
         label:'标签名称',
-        key:'name',
+        key:'TagName',
         minWidth:'200px',
     },{
         label:'视频数',
-        key:'videoNum',
+        key:'VideoTotal',
     },{
         label:'创建时间',
-        key:'createTime',
+        key:'CreateTime',
         minWidth:'200px',
     }
 ]

src/views/training_manage/labelManage.vue

@@ -33,7 +33,7 @@
         </div>
         <!-- 添加标签弹窗 -->
         <el-dialog
-            :title="currentLabel.id?'编辑标签':'添加标签'"
+            :title="currentLabel.TagId?'编辑标签':'添加标签'"
             :visible.sync="isModifyDialogShow"
             :close-on-click-modal="false"
             :modal-append-to-body="false"
@@ -44,7 +44,7 @@
             >
             <div class="dialog-container">
                 <div class="input-item">
-                <el-input  placeholder="请输入标签名称" v-model.trim="currentLabel.name" required ></el-input>
+                <el-input  placeholder="请输入标签名称" v-model.trim="currentLabel.TagName" required ></el-input>
                 </div>
                 <p class="form-hint">注：名称不得超过5个字</p>
             </div>
@@ -58,17 +58,13 @@
 
 <script>
 import {labelTableColumn} from './config/tableColumn'
+import {TagInterface} from '@/api/modules/trainingApi'
 export default {
     data() {
         return {
             /* table */
             tableLoading:false,
-            tableData:[{
-                id:1,
-                name:'a标签',
-                videoNum:2,
-                createTime:'2023.09.13'
-            }],
+            tableData:[],
             tableColumn:labelTableColumn,
             searchText:'',
             /* table-page */
@@ -85,21 +81,31 @@ export default {
             this.currentLabel = data
             this.isModifyDialogShow = true
         },
-        modifyLabel(){
-            if(!this.currentData.name){
+        async modifyLabel(){
+            if(!this.currentLabel.TagName){
                 this.$message.warning("请输入标签名称")
                 return
             }
-            if(this.currentData.name.length>15){
+            if(this.currentLabel.TagName.length>5){
                 this.$message.warning("标签名称过长,请重新编辑")
                 return
             }
-            if(this.currentLabel.id){
+            let res = null
+            if(this.currentLabel.TagId){
                 //edit
+                res = await TagInterface.editTag({
+                    TagId:this.currentLabel.TagId,
+                    TagName:this.currentLabel.TagName
+                })
             }else{
                 //add
+                res = await TagInterface.addTag({
+                    TagName:this.currentLabel.TagName
+                })
             }
+            if(res.Ret!==200) return 
             //添加/编辑成功
+            this.$message.success(`${this.currentLabel.TagId?'编辑':'添加'}成功`)
             this.currentPage = 1
             this.getTableData()
             this.isModifyDialogShow = false
@@ -114,17 +120,42 @@ export default {
                 type: 'warning',
                 }
             ).then(()=>{
-                this.$message.success('删除成功')
-                this.currentPage=1
-                this.getTableData()
+                TagInterface.deleteTag({
+                    TagId:label.TagId
+                }).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.$message.success('删除成功')
+                    this.currentPage=1
+                    this.getTableData()
+                })
             }).catch(()=>{}).finally(()=>{})
         },
-        getTableData(){},
+        getTableData(){
+            this.tableLoading = true
+            TagInterface.getTagList({
+                PageSize:this.pageSize,
+                CurrentIndex:this.currentPage,
+                Keyword:this.searchText
+            }).then(res=>{
+                this.tableLoading = false
+                if(res.Ret!==200) return
+                if(!res.Data){
+                    this.tableData = []
+                    this.total = 0
+                    return
+                } 
+                this.tableData = res.Data.List||[]
+                this.total = res.Data.Paging.Totals
+            })
+        },
         handleCurrentChange(page){
             this.currentPage = page
             this.getTableData()
         }
     },
+    mounted(){
+        this.getTableData()
+    }
 };
 </script>
 

src/views/training_manage/modifyVideoPage.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="modify-video-page-wrap traing-manage">
+        <div class="top-wrap">
+            
+            <el-input v-model="searchText" clearable 
+                prefix-icon="el-icon-search" placeholder="请输入视频名称" @input="handleCurrentChange(1)" 
+                style="width:240px;"></el-input>
+        </div>
+        <div class="table-wrap">
+            <el-button type="primary" @click="handleModifyLabel({})">新增视频</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchText:'',
+            tableData: [],
+            tableLoading: false,
+
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+
+
+        };
+    },
+    methods: {
+        handleCurrentChange(page){
+
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/training_manage/videoManage.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="video-manage-wrap">
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>