|
|
@@ -0,0 +1,377 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-main>
|
|
|
+ <div class="tou">项目模板管理</div>
|
|
|
+ <div>
|
|
|
+ <div style="margin: 15px 0; display: flex; justify-content: flex-end">
|
|
|
+ <el-button type="primary" size="small" @click="dialogVisible1 = true">添加项目模板</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ :data="tableData"
|
|
|
+ stripe
|
|
|
+ border
|
|
|
+ :header-cell-style="{ background: '#f1f1f1', 'text-align': 'center' }"
|
|
|
+ :cell-style="{ 'text-align': 'center' }"
|
|
|
+ style="width: 100%"
|
|
|
+ :height="tableHeight"
|
|
|
+ v-loading="isLoading"
|
|
|
+ >
|
|
|
+ <el-table-column prop="title" label="模板标题" min-width="25"></el-table-column>
|
|
|
+ <el-table-column prop="time" label="创建时间" min-width="10"></el-table-column>
|
|
|
+ <el-table-column label="操作" min-width="10">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="pb_buttonBox">
|
|
|
+ <!-- <el-button size="mini" type="primary" @click="check(scope.row)">查看</el-button> -->
|
|
|
+ <!-- @click="goTo('/course?index=1&id=' + scope.row.courseId)" -->
|
|
|
+ <el-button size="mini" type="primary" @click="deleteTemplate(scope.row.id)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="student_page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="10"
|
|
|
+ :total="total"
|
|
|
+ v-if="!isListAjax && page"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ <el-dialog
|
|
|
+ title="添加课程"
|
|
|
+ :visible.sync="dialogVisible1"
|
|
|
+ width="500px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy"
|
|
|
+ style="text-align: center"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="cardHead">
|
|
|
+ <el-input
|
|
|
+ v-model="searchClassName"
|
|
|
+ placeholder="请输入需要添加的课程"
|
|
|
+ @keypress.native.enter="Search"
|
|
|
+ ></el-input>
|
|
|
+ <el-button type="text" style="margin: 0 0 0 20px" @click="Search">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="cardList">
|
|
|
+ <el-radio-group v-model="checkList" v-if="courseList.length > 0">
|
|
|
+ <div v-for="item in courseList" :key="item.courseId">
|
|
|
+ <el-popover placement="top-start" trigger="hover">
|
|
|
+ <p style="max-width: 380px">课程名称: {{ item.title }}</p>
|
|
|
+ <p style="max-width: 380px">简介: {{ snippet(item.brief) }}</p>
|
|
|
+ <el-radio :label="item.courseId" slot="reference">
|
|
|
+ <span>课程名称：</span>
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </el-radio>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </el-radio-group>
|
|
|
+ <div v-else>暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible1 = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addTemplate">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import EditorBar from "../../components/tools/wangEnduit";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { EditorBar },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableHeight: 500,
|
|
|
+ courseName: "",
|
|
|
+ dialogVisible1: false,
|
|
|
+ dialogVisible2: false,
|
|
|
+ isClear: false,
|
|
|
+ tableData: [],
|
|
|
+ page: 1,
|
|
|
+ total: 0,
|
|
|
+ isLoading: false,
|
|
|
+ isListAjax: false,
|
|
|
+ tTitle: "",
|
|
|
+ detail: "",
|
|
|
+ templateD: {},
|
|
|
+ courseList: [],
|
|
|
+ searchClassName: "",
|
|
|
+ checkList: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //搜索获取课程
|
|
|
+ Search() {
|
|
|
+ this.checkList = "";
|
|
|
+ let params = { t: this.searchClassName };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getSearchCourse", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.courseList = res.data[0];
|
|
|
+ console.log(this.courseList);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ change(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ //在method里面写方法
|
|
|
+ snippet(value) {
|
|
|
+ return value.replace(/<[^>]*>/g, "");
|
|
|
+ },
|
|
|
+
|
|
|
+ changeHeight() {
|
|
|
+ this.tableHeight =
|
|
|
+ window.innerHeight - this.$refs.table.$el.offsetTop - 200;
|
|
|
+ if (this.tableHeight <= 530) {
|
|
|
+ this.tableHeight = 530;
|
|
|
+ }
|
|
|
+ // 监听窗口大小变化
|
|
|
+ let self = this;
|
|
|
+ window.onresize = function () {
|
|
|
+ self.tableHeight =
|
|
|
+ window.innerHeight - self.$refs.table.$el.offsetTop - 200;
|
|
|
+ if (self.tableHeight <= 530) {
|
|
|
+ self.tableHeight = 530;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // this.$refs.table.$el.offsetTop：表格距离浏览器的高度 //200表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度
|
|
|
+ },
|
|
|
+ time() {
|
|
|
+ if (!this.now) {
|
|
|
+ this.now = new Date().getTime();
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ let time = new Date().getTime();
|
|
|
+ if (time - this.now > 3000) {
|
|
|
+ this.now = time;
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.page = val;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.detail = "";
|
|
|
+ this.tTitle = "";
|
|
|
+ this.checkList = "";
|
|
|
+ },
|
|
|
+ addTemplate() {
|
|
|
+ if (this.checkList === "") {
|
|
|
+ this.$message.error("请选择作为模板得课程");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.time()) {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ cid: this.checkList,
|
|
|
+ uid: this.$store.state.userInfo.uid,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addCourseTemplateAdmin", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "添加成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.init();
|
|
|
+ this.getTemplate();
|
|
|
+ this.dialogVisible1 = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("添加失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTemplate() {
|
|
|
+ this.isLoading = true;
|
|
|
+ let params = { page: this.page };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "getCourseTemplateAdmin", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
|
|
|
+ this.tableData = res.data[0];
|
|
|
+ console.log(this.tableData);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //删除通知
|
|
|
+ deleteTemplate(id) {
|
|
|
+ let params = [{ nid: id }];
|
|
|
+ this.$confirm("确定删除此模板吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "deleteCourseTemplateAdmin", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ if (this.page != 1 && this.tableData.length == 1) {
|
|
|
+ this.page--;
|
|
|
+ }
|
|
|
+ this.getTemplate();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("删除失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ check(res) {
|
|
|
+ this.dialogVisible2 = true;
|
|
|
+ this.templateD = res;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.page = 1;
|
|
|
+ this.Search();
|
|
|
+ this.changeHeight();
|
|
|
+ this.getTemplate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tou {
|
|
|
+ border-bottom: 1px solid #c9c9c9;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__header {
|
|
|
+ background: #3d67bc !important;
|
|
|
+ padding: 15px 20px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn {
|
|
|
+ top: 19px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.student_page {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.tian1 {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+.tian1 span {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+/* table 样式 */
|
|
|
+.cont >>> table {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+}
|
|
|
+.cont >>> table td,
|
|
|
+.cont >>> table th {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ padding: 3px 5px;
|
|
|
+}
|
|
|
+.cont >>> table th {
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* blockquote 样式 */
|
|
|
+.cont >>> blockquote {
|
|
|
+ display: block;
|
|
|
+ border-left: 8px solid #d0e5f2;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ line-height: 1.4;
|
|
|
+ font-size: 100%;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/* code 样式 */
|
|
|
+.cont >>> code {
|
|
|
+ display: inline-block;
|
|
|
+ *display: inline;
|
|
|
+ *zoom: 1;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ margin: 0 3px;
|
|
|
+}
|
|
|
+.cont >>> pre code {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* ul ol 样式 */
|
|
|
+.cont >>> ul,
|
|
|
+ol {
|
|
|
+ margin: 10px 0 10px 20px;
|
|
|
+}
|
|
|
+.head {
|
|
|
+ margin: 0 0 15px;
|
|
|
+ font-size: 20px;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+ /* height: 35px; */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+.name {
|
|
|
+ /* margin-top: -30px; */
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.cardList {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 360px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.cardList div {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+.cardList div:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.cardHead {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.box-card {
|
|
|
+ /* width: 480px; */
|
|
|
+}
|
|
|
+</style>
|
