实训案例管理初始页面整理

src/App.vue

@@ -1,7 +1,6 @@
 <template>
 	<div id="app">
-		<transition name="fade"
+		<transition name="fade" mode="out-in">
-		            mode="out-in">
 			<router-view></router-view>
 		</transition>
 	</div>

src/main.js

@@ -46,9 +46,14 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   //NProgress.start();
+  // debugger;
   let user = JSON.parse(sessionStorage.getItem('user'));
   if (!user && to.path != '/login') {
-    next({ path: '/login' })
+    if(to.path == '/train'){//暂时这么写，user是需要有值的，这里先方便页面
+      next()
+    }else{
+      next({ path: '/login' })
+    }
   }else if(user && to.path =='/login'){
     next({name:'Index'})
   } else {

src/router/index.js

@@ -1,7 +1,12 @@
 import curRoutes from '@/common/js/testR.js';  //用户当前路由  测试
-import Utils from '@/common/js/utils.js';  //
+import Utils from '@/common/js/utils.js';
 
-// 
+// 实训案例管理主页
+const TrainHome = resolve => require(['@/views/TrainHome.vue'], resolve)
+const CaseList = resolve => require(['@/views/train/case-list.vue'], resolve)
+const CaseDetail = resolve => require(['@/views/train/case-detail.vue'], resolve)
+
+//
 const Login = resolve => require(['@/views/Login.vue'], resolve)
 const NotFound = resolve => require(['@/views/404.vue'], resolve)
 const Home = resolve => require(['@/views/Home.vue'], resolve)
@@ -99,6 +104,16 @@ let routes = [
         name: 'Login',
         hidden: true
     },
+    {
+        path: '/train',
+        component: TrainHome,
+        name: 'train',
+        hidden: true,
+        children: [
+            {path: '/train/case/list', component: CaseList, name: 'CaseList', meta: {Name: '案例列表'}},
+            {path: '/train/case/detail', component: CaseDetail, name: 'CaseDetail', meta: {Name: '案例详情'}}
+        ]
+    },
     {
         path: '/404',
         component: NotFound,

src/views/TrainHome.vue

@@ -0,0 +1,117 @@
+<template>
+    <el-row class="container">
+        <el-col :span="24" class="header">
+            <el-col :span="20" class="logo">
+                <i class="iconfont iconset2 sys-icon"></i>
+                <span class="sys-name">智信链后台管理系统</span>
+            </el-col>
+        </el-col>
+        <el-col :span="24" class="menu">
+            <!--导航菜单-->
+            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+                <el-menu-item index="1"><router-link to="/train/case/list">实训管理</router-link></el-menu-item>
+            </el-menu>
+            <section class="content-container">
+                <div class="grid-content bg-purple-light">
+                    <el-col :span="24" class="content-wrapper">
+                        <transition name="fade" mode="out-in">
+                            <router-view></router-view>
+                        </transition>
+                    </el-col>
+                </div>
+            </section>
+        </el-col>
+    </el-row>
+</template>
+
+<script>
+    export default {
+        name: "TrainHome",
+        data() {
+            return {
+                activeIndex: '1'//当前激活菜单的 index
+            };
+        },
+        mounted() {
+            this.$router.push({name: 'CaseList'})
+        },
+        methods: {
+
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '../styles/link.scss';
+
+    .container {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        width: 100%;
+        .header {
+            width: 100%;
+            height: 60px;
+            line-height: 60px;
+            background: $color-primary;
+            color:#fff;
+            .sys-icon {
+                font-size: 40px;
+                vertical-align: middle;
+                margin-right: 10px;
+            }
+            .sys-name {
+                font-size: 18px;
+            }
+            .userinfo {
+                // text-align: right;
+                padding-right: 35px;
+                float: right;
+                .userinfo-inner {
+                    cursor: pointer;
+                    color:#fff;
+                }
+            }
+            .logo {
+                //width:230px;
+                height:60px;
+                font-size: 22px;
+                padding-left:$pad-primary;
+                padding-right:$pad-primary;
+                img {
+                    width: 40px;
+                    float: left;
+                    margin: 10px 10px 10px 18px;
+                }
+                .txt {
+                    color:#fff;
+                }
+            }
+            .logo-width{
+                width:230px;
+            }
+            .logo-collapse-width{
+                width:60px
+            }
+        }
+
+        .menu {
+            width: 100%;
+            /deep/ .el-menu--horizontal {
+                height: 46px;
+                line-height: 46px;
+                .el-menu-item {
+                    height: 46px;
+                    line-height: 46px;
+                    a {
+                        text-decoration: none;
+                    }
+                }
+                .el-menu-item:first-child {
+                    margin-left: 20px;
+                }
+            }
+
+        }
+    }
+</style>

src/views/train/case-detail.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>案例新增查看修改</div>
+</template>
+
+<script>
+    export default {
+        name: "case-detail"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/train/case-list.vue

@@ -0,0 +1,278 @@
+<template>
+    <div style="background-color: #eeeeee;">
+        <div style="padding: 10px 0px 0px 20px;margin-bottom: 10px;background-color: #FFFFFF;">
+            <el-form :inline="true" :model="searchObj" class="demo-form-inline">
+                <el-form-item label="实训用途">
+                    <el-select v-model="searchObj.type" placeholder="实训用途">
+                        <el-option label="全部" value=""></el-option>
+                        <el-option label="考核" value="1"></el-option>
+                        <el-option label="练习" value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="创建人">
+                    <el-select v-model="searchObj.isAdmin" placeholder="创建人">
+                        <el-option label="全部" value=""></el-option>
+                        <el-option label="管理员" value="1"></el-option>
+                        <el-option label="教师" value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="实训名称">
+                    <el-input v-model="searchObj.name" placeholder="实训名称"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="doSearch">查询</el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="doNew">创建</el-button>
+                </el-form-item>
+                <!--<el-form-item>
+                    <el-button type="danger" @click="doBatchDel">批量删除</el-button>
+                </el-form-item>-->
+            </el-form>
+        </div>
+        <div style="padding: 20px;background-color: #FFFFFF;">
+            <el-table ref="multipleTable" :data="listData" @selection-change="handleProjectSelectionChange" border style="width: 100%">
+                <el-table-column type="selection" width="55"></el-table-column>
+                <el-table-column type="index" label="序号" width="100"></el-table-column>
+                <el-table-column prop="name" label="项目名称" width="400"></el-table-column>
+                <el-table-column prop="type" label="项目权限" width="120">
+                    <template slot-scope="scope">
+                        {{ scope.row.type === 1 ? '练习': '' }}
+                        {{ scope.row.type === 2 ? '考核': '' }}
+                        {{ scope.row.type === 3 ? '竞赛': '' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="isAdmin" label="创建人" width="120">
+                    <template slot-scope="scope">
+                        {{ scope.row.isAdmin === 0 ? '教师': '' }}
+                        {{ scope.row.isAdmin === 1 ? '系统': '' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
+                <el-table-column label="操作">
+
+                    <template slot-scope="scope">
+                        <div v-if="showSearchDiv==1">
+                            <el-button @click="toInputForm(scope.row,0)" type="text" size="small">查看</el-button>
+                            <el-button @click="toInputForm(scope.row,1)" type="text" size="small"
+                                       v-if="isShowEditOrDelBtn(scope.row)">编辑
+                            </el-button>
+                            <el-button @click="doSingleDel(scope.row)" type="text" size="small" v-if="isShowEditOrDelBtn(scope.row)">
+                                删除
+                            </el-button>
+                        </div>
+                        <div v-else>
+                            <el-button @click="gotoDb(scope.row)" type="text" size="small">进入</el-button>
+                        </div>
+                    </template>
+
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="currentPage"
+                    :page-sizes="[5,10,15,20,25,30]"
+                    :page-size="pageSize"
+                    layout="total,sizes, prev, pager, next,jumper"
+                    :total="totalCount">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'case-list',
+        data() {
+            return {
+                searchObj: {
+                    type: '',
+                    isAdmin: '',
+                    name: '',
+                    showSearchDiv: 1,
+                    selfIsAdmin:1
+                },
+                listData: [],
+                delProjectItems: [],
+                totalCount: 0,
+                currentPage: 1,
+                pageSize: 10,
+
+            }
+        },
+        created() {
+            this.initList();
+        },
+        methods: {
+            setDefaultUserName(loginId) {
+                this.$util.setCookie('userLoginId', loginId);
+            },
+            gotoDb: function (row) {
+                let self = this;
+                let userType = this.$store.state.app.user.userType;
+                let customerManager = JSON.parse(self.$util.getCookie("customerManager"));
+                self.$store.commit('startLoading');
+                self.$http.post('/pmtapi/base_Account/login', {
+                    username: customerManager.userName,
+                    password: customerManager.password,
+                    caseId: row.id,
+                    captchaCode: "yyyf",
+                }).then(function (response) {
+                    self.$store.commit('loginIn', {
+                        appKey: response.appKey,
+                        userId: response.userId,
+                        userLoginId: response.userLoginId,
+                        userDisplayName: response.userDisplayName,
+                        userMobile: response.userMobile,
+                        userType: userType,
+                        showSearchDiv: 0,
+                        currentRole:0
+                    });
+
+                    self.$store.commit('endLoading');
+
+                    self.setDefaultUserName(customerManager.userName);
+
+                    let toPath = null;
+                    if (!toPath || self.$router.currentRoute.name == 'login' || self.$router.currentRoute.name == '404') {
+                        toPath = "/";
+                    }
+                    self.$router.push({
+                        path: toPath
+                    });
+
+                    self.$message({
+                        message: '成功进入',
+                        type: 'success',
+                        onClose: function () {
+                            $("body").removeClass("el-loading-parent--hidden").removeClass("el-loading-parent--relative");
+                        }
+                    });
+                }).catch(function (error) {
+                    self.$store.commit('endLoading');
+                    self.$message.error(error);
+                });
+            },
+            initList(searchObj) {
+                this.searchObj.selfIsAdmin = this.$store.state.app.user.userType == 1 ? 0 : 1;
+                this.$http.post('/authapi/bs_projectManage/getProjectPagedList', {
+                    skipCount: this.currentPage,
+                    maxResultCount: this.pageSize,
+                    searchObj: this.searchObj
+                }).then(response => {
+                    if (response) {
+                        this.listData = response.items;
+                        this.totalCount = response.totalCount;
+                    }
+                }).catch(error => {
+                    console.info(error)
+                });
+                this.showSearchDiv = this.$store.state.app.user.showSearchDiv;
+            },
+            isShowEditOrDelBtn(row) {
+                let userType = this.$store.state.app.user.userType;
+                let projectType = row.isAdmin;
+                if (userType == 1 && projectType == 1) {// 教师只能查看内置项目
+                    return false;
+                }
+                if(userType==2 && projectType==0 ) {// 管理员只能查看教师项目
+                    return false;
+                }
+                return true;
+            },
+            doNew() {// 新增
+                this.toInputForm();
+            },
+            handleProjectSelectionChange(val) {
+                this.delProjectItems = val;
+            },
+            doBatchDel() {// 批量删除
+                if (!this.delProjectItems || this.delProjectItems.length === 0) {
+                    this.$notify.warning({
+                        title: '系统提示',
+                        message: '您没选择任何行，无法操作！',
+                        duration: 2000,
+                    });
+                    return;
+                }
+                let ids = this.delProjectItems.map(function (row) {
+                    return row.id;
+                });
+                this.$confirm('确认要删除这 ' + ids.length + ' 项数据吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.$http.post('/authapi/bs_projectManage/batchDeleteProjects', ids).then(response => {
+
+                        if (response.status==1) {
+                            this.$notify.success({
+                                title: '系统删除成功',
+                                message: '系统批量删除成功！',
+                            });
+                            this.initList();
+                        } else {
+                            this.$notify.error({
+                                title: '错误提示',
+                                message: response.msg,
+                            });
+                        }
+                    }).catch(error => {
+                        console.info(error)
+                    })
+                }).catch(() => {
+                });
+            },
+            doSingleDel(row) { // 单个删除
+                this.$confirm('确认要删除这项数据吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.$http.post('/authapi/bs_projectManage/singleDeleteProject', {id: row.id}).then(response => {
+                        if (response.status==1) {
+                            this.$notify.success({
+                                title: '系统删除成功',
+                                message: '系统删除成功！',
+                            });
+                            this.initList();
+                        } else {
+                            this.$notify.error({
+                                title: '错误提示',
+                                message: response.msg,
+                            });
+                        }
+                    }).catch(error => {
+                        console.info(error)
+                    })
+                }).catch(() => {
+                });
+            },
+            doSearch() {
+                this.initList(this.searchObj);
+                this.currentPage = 1;
+            },
+            toInputForm(row, isEdit) {
+                let toPath = '/backstage/project/inputForm';
+                if (row) {
+                    this.$router.push({path: toPath, query: {id: row.id, isEdit: isEdit}});// 编辑或查看
+                } else {
+                    this.$router.push({path: toPath});// 新增
+                }
+            },
+            handleSizeChange(size) {
+                this.pageSize = size;
+                this.initList(this.searchObj);
+            },
+            handleCurrentChange(currentPage) {
+                this.currentPage = currentPage;
+                this.initList(this.searchObj);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>