ETA1.0.8 init

src/routes/modules/trainingRoutes.js

@@ -0,0 +1,28 @@
+//培训管理路由模块
+const home = r => require.ensure([], () => r(require('@/views/Home.vue')), 'Home'); //主页
+export default[
+    {
+        path:'/',
+        component:home,
+        name:'培训管理',
+        hidden:false,
+        icon_path:require('@/assets/img/home/training_icon.png'),
+        children:[
+            {
+                path: "trainingVideo",
+                name: "视频管理",
+                component: () => import('@/views/training_manage/videoManage.vue')
+            },
+            {
+                path: "trainingLabel",
+                name: "标签管理",
+                component: () => import('@/views/training_manage/labelManage.vue')
+            },
+            {
+                path: "trainingClassify",
+                name: "分类管理",
+                component: () => import('@/views/training_manage/classifyManage.vue')
+            },
+        ]
+    }
+]

src/views/training_manage/classifyManage.vue

@@ -0,0 +1,81 @@
+<template>
+    <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>
+        </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>
+        </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
+            >
+            <div class="dialog-container">
+                <el-form>
+                    <el-form-item label="上级目录"></el-form-item>
+                    <el-form-item label="分类名称"></el-form-item>
+                </el-form>
+            </div>
+            <div class="foot-container">
+                <el-button @click="isModifyDialogShow=false">取 消</el-button>
+                <el-button type="primary" @click="modifyClassify">确认</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchText:'',
+            tableData:[],
+
+            currentClassify:{},
+            isModifyDialogShow:false
+        };
+    },
+    methods: {
+        handleModifyClassify(data){
+            this.currentClassify = data
+            this.isModifyDialogShow = true
+        },
+        modifyClassify(){},
+        deleteClassify(data){},
+        handleCurrentChange(page){
+
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/training_manage/config/tableColumn.js

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

src/views/training_manage/css/manage.scss

@@ -0,0 +1,30 @@
+.traing-manage{
+    .top-wrap,.table-wrap{
+        padding:20px;
+        background-color:#fff;
+        border-radius: 4px;
+    }
+    .top-wrap{
+        display: flex;
+        justify-content: space-between;
+    }
+    .table-wrap{
+        margin-top: 20px;
+    }
+    .el-dialog{
+        .dialog-container{
+          padding-bottom: 20px;
+          .input-item{
+            margin-bottom:10px;
+          }
+          .form-hint{
+            color:#999999;
+            font-size: 12px;
+          }
+        }
+        .foot-container{
+            text-align: center;
+            padding-bottom: 20px;
+        }
+      }
+}

src/views/training_manage/labelManage.vue

@@ -0,0 +1,133 @@
+<template>
+    <!-- 培训管理-标签管理 -->
+    <div class="label-manage-wrap traing-manage">
+        <div class="top-wrap">
+            <el-button type="primary" @click="handleModifyLabel({})">新增标签</el-button>
+            <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-table :data="tableData" border v-loading="tableLoading">
+                <el-table-column v-for="column in tableColumn" :key="column.key" 
+                    :label="column.label" align="center"
+                    :prop="column.key"
+                    :min-width="column.minWidth">
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="{row}">
+                        <el-button type="text" @click="handleModifyLabel(row)">编辑</el-button>
+                        <el-button type="text" @click="deleteLabel(row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                layout="total,prev,pager,next,jumper" 
+                background
+                :current-page="currentPage"
+                @current-change="handleCurrentChange"
+                :page-size="pageSize" 
+                :total="total"
+                style="text-align:right;margin-top:30px;">
+        </el-pagination>
+        </div>
+        <!-- 添加标签弹窗 -->
+        <el-dialog
+            :title="currentLabel.id?'编辑标签':'添加标签'"
+            :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">
+                <div class="input-item">
+                <el-input  placeholder="请输入标签名称" v-model.trim="currentLabel.name" required ></el-input>
+                </div>
+                <p class="form-hint">注：名称不得超过5个字</p>
+            </div>
+            <div class="foot-container">
+                <el-button @click="isModifyDialogShow=false">取 消</el-button>
+                <el-button type="primary" @click="modifyLabel">确认</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import {labelTableColumn} from './config/tableColumn'
+export default {
+    data() {
+        return {
+            /* table */
+            tableLoading:false,
+            tableData:[{
+                id:1,
+                name:'a标签',
+                videoNum:2,
+                createTime:'2023.09.13'
+            }],
+            tableColumn:labelTableColumn,
+            searchText:'',
+            /* table-page */
+            currentPage:1,
+            pageSize:10,
+            total:0,
+            /* modify label */
+            currentLabel:{},
+            isModifyDialogShow:false,
+        };
+    },
+    methods: {
+        handleModifyLabel(data){
+            this.currentLabel = data
+            this.isModifyDialogShow = true
+        },
+        modifyLabel(){
+            if(!this.currentData.name){
+                this.$message.warning("请输入标签名称")
+                return
+            }
+            if(this.currentData.name.length>15){
+                this.$message.warning("标签名称过长,请重新编辑")
+                return
+            }
+            if(this.currentLabel.id){
+                //edit
+            }else{
+                //add
+            }
+            //添加/编辑成功
+            this.currentPage = 1
+            this.getTableData()
+            this.isModifyDialogShow = false
+        },
+        deleteLabel(label){
+            this.$confirm(
+                '删除后不可恢复，是否确认删除该标签？',
+                '提示',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                }
+            ).then(()=>{
+                this.$message.success('删除成功')
+                this.currentPage=1
+                this.getTableData()
+            }).catch(()=>{}).finally(()=>{})
+        },
+        getTableData(){},
+        handleCurrentChange(page){
+            this.currentPage = page
+            this.getTableData()
+        }
+    },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./css/manage.scss";
+</style>