|
|
@@ -1,12 +1,117 @@
|
|
|
<template>
|
|
|
<div class="task">
|
|
|
<step-bar :step-number="2" />
|
|
|
+ <div class="task-course-info">
|
|
|
+ <div class="cover"><img :src="picture_url" alt="封面" /></div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">{{ name }}</div>
|
|
|
+ <div class="date">{{ begin_date }}<span>-</span>{{ end_date }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="task-button">
|
|
|
+ <el-button class="prev-step" @click="preStep"><i class="el-icon-back" />选择教材</el-button>
|
|
|
+ <el-button class="preserve" type="primary"><svg-icon icon-class="preserve" />保存</el-button>
|
|
|
+ <el-button>关闭</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="task-item">
|
|
|
+ <div class="task-item-list">
|
|
|
+ <template v-if="cs_item_list.length > 0">
|
|
|
+ <div
|
|
|
+ v-for="item in cs_item_list"
|
|
|
+ :key="item.id"
|
|
|
+ :class="['task-item-list-title', { selected: item.id === curItemID }]"
|
|
|
+ @click="curItemID = item.id"
|
|
|
+ >
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <el-dropdown placement="bottom" trigger="click" @command="deleteCSItem">
|
|
|
+ <i class="el-icon-more"></i>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item class="delete-menu" :command="item.id">
|
|
|
+ <span>删除</span><svg-icon icon-class="delete" />
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="task-item-list-title">新课节</div>
|
|
|
+ <el-button class="create-item selected" type="primary" @click="dialogVisible = true">
|
|
|
+ <svg-icon icon-class="create-white" /> 创建新课节
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="task-item-container">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="title">课节信息</div>
|
|
|
+ <div class="item-info-name">
|
|
|
+ <div>课节名称</div>
|
|
|
+ <el-input />
|
|
|
+ </div>
|
|
|
+ <div class="item-info-date">
|
|
|
+ <div>时间</div>
|
|
|
+ <el-date-picker
|
|
|
+ type="daterange"
|
|
|
+ range-separator="~"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ unlink-panels
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-task">
|
|
|
+ <div class="title">课节任务</div>
|
|
|
+ </div>
|
|
|
+ <div class="learning-materials">
|
|
|
+ <div class="title">学习资料</div>
|
|
|
+ <div>
|
|
|
+ <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--添加课节信息框-->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ title="课节信息"
|
|
|
+ width="490px"
|
|
|
+ top="25vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="itemForm"
|
|
|
+ :model="itemForm"
|
|
|
+ :rules="itemRules"
|
|
|
+ label-width="90px"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item label="课节名称" prop="name">
|
|
|
+ <el-input v-model="itemForm.name" class="item-name" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课节周期" prop="date">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="itemForm.date"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="~"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ unlink-panels
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="cancel" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addCSItem">确定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import StepBar from '@/components/StepBar';
|
|
|
-import { GetCourseInfo_ContainCSItem } from '@/api/course';
|
|
|
+import {
|
|
|
+ GetCourseInfo_ContainCSItem,
|
|
|
+ AddCSItemToCourse,
|
|
|
+ GetCSItemInfoBox,
|
|
|
+ DeleteCSItem
|
|
|
+} from '@/api/course';
|
|
|
|
|
|
export default {
|
|
|
name: 'CreateTask',
|
|
|
@@ -15,13 +120,77 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- id: this.$route.params.id
|
|
|
+ id: this.$route.params.id,
|
|
|
+ name: '',
|
|
|
+ picture_url: '',
|
|
|
+ begin_date: '',
|
|
|
+ end_date: '',
|
|
|
+ cs_item_list: [],
|
|
|
+ curItemID: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ itemForm: {
|
|
|
+ name: '',
|
|
|
+ date: []
|
|
|
+ },
|
|
|
+ itemRules: {
|
|
|
+ name: { required: true, message: '课节名称不能为空', trigger: 'blur' },
|
|
|
+ date: { required: true, message: '课节周期不能为空', trigger: 'blur' }
|
|
|
+ },
|
|
|
+ itemInfoBox: {
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
- created() {},
|
|
|
+ watch: {
|
|
|
+ curItemID: function () {
|
|
|
+ console.log(2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getCourseInfo();
|
|
|
+ },
|
|
|
methods: {
|
|
|
getCourseInfo() {
|
|
|
- GetCourseInfo_ContainCSItem().then(response => {});
|
|
|
+ GetCourseInfo_ContainCSItem({ id: this.id }).then(
|
|
|
+ ({ name, picture_url, begin_date, end_date, cs_item_list }) => {
|
|
|
+ this.name = name;
|
|
|
+ this.picture_url = picture_url;
|
|
|
+ this.begin_date = begin_date;
|
|
|
+ this.end_date = end_date;
|
|
|
+ this.cs_item_list = cs_item_list;
|
|
|
+ this.curItemID = cs_item_list[cs_item_list.length - 1].id;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ preStep() {
|
|
|
+ this.$router.push({ path: `/create_course_step_table/select_book/${this.id}` });
|
|
|
+ },
|
|
|
+ addCSItem() {
|
|
|
+ let data = {
|
|
|
+ course_id: this.id,
|
|
|
+ name: this.itemForm.name,
|
|
|
+ begin_time: this.itemForm.date[0],
|
|
|
+ end_time: this.itemForm.date[1]
|
|
|
+ };
|
|
|
+ AddCSItemToCourse(data).then(() => {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getCourseInfo();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCSItemInfoBox() {
|
|
|
+ GetCSItemInfoBox({ id: this.curItemID }).then(res => {});
|
|
|
+ },
|
|
|
+ deleteCSItem(id) {
|
|
|
+ this.$confirm('您确定要删除该课节吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ DeleteCSItem({ id }).then(() => {
|
|
|
+ this.$message.success('删除课节成功！');
|
|
|
+ this.getCourseInfo();
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -32,5 +201,158 @@ export default {
|
|
|
|
|
|
.task {
|
|
|
@include container;
|
|
|
+
|
|
|
+ margin-top: $step-h;
|
|
|
+
|
|
|
+ // 上部的课程信息
|
|
|
+ &-course-info {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .cover {
|
|
|
+ width: 192px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid #e5e5e5;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding: 26px 32px;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: #6b6b6b;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 中间的按钮
|
|
|
+ &-button {
|
|
|
+ margin: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prev-step .el-icon-back {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preserve .svg-icon {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下部的课节
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 8px;
|
|
|
+ height: calc(100vh - #{$header-h} - #{$step-h} - 240px);
|
|
|
+
|
|
|
+ &-list {
|
|
|
+ flex: 3;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #eee;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 24px;
|
|
|
+ height: 56px;
|
|
|
+ line-height: 24px;
|
|
|
+ background-color: #eee;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-item {
|
|
|
+ margin: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 11px 20px;
|
|
|
+ width: calc(100% - 48px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-container {
|
|
|
+ flex: 7;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
|
|
|
+
|
|
|
+ .learning-materials {
|
|
|
+ padding: 24px 32px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ @extend .learning-materials;
|
|
|
+
|
|
|
+ border-bottom: 1px solid #d9d9d9;
|
|
|
+
|
|
|
+ &-name,
|
|
|
+ &-date {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ > :first-child {
|
|
|
+ width: 110px;
|
|
|
+ min-width: 120px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: 600px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-task {
|
|
|
+ @extend .learning-materials;
|
|
|
+
|
|
|
+ border-bottom: 1px solid #d9d9d9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog {
|
|
|
+ .item-name {
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-dropdown-menu {
|
|
|
+ padding: 1px;
|
|
|
+
|
|
|
+ .delete-menu {
|
|
|
+ width: 128px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
