|
@@ -9,7 +9,7 @@
|
|
|
</template>
|
|
|
<template #custom="{item}">
|
|
|
<template v-if="item.model === 'lesson'">
|
|
|
- <el-table :data="arrList" stripe border>
|
|
|
+ <el-table :data="lessons" stripe border>
|
|
|
<el-table-column align="center" label="时间" prop="time"></el-table-column>
|
|
|
<el-table-column align="center" label="第一天" prop="day1"></el-table-column>
|
|
|
<el-table-column align="center" label="第二天" prop="day2"></el-table-column>
|
|
@@ -31,22 +31,47 @@
|
|
|
</detail-frame>
|
|
|
<el-drawer :visible.sync="drawer" @close="toClose" direction="rtl" :with-header="false">
|
|
|
<el-tabs style="padding:10px;">
|
|
|
- <el-tab-pane label="课程安排">
|
|
|
- <data-form :styles="{ padding: 0 }" :data="form" :fields="oFields" :rules="{}" @save="handleOsave" :isNew="false">
|
|
|
- <template #custom="{item, form}">
|
|
|
- <template v-if="item.model === 'time'">
|
|
|
- <el-time-select placeholder="起始时间" value-format="HH:mm" v-model="form.startTime" :picker-options="{ start: '08:00', end: '23:30' }">
|
|
|
- </el-time-select>
|
|
|
- <el-time-select
|
|
|
- placeholder="结束时间"
|
|
|
- value-format="HH:mm"
|
|
|
- v-model="form.endTime"
|
|
|
- :picker-options="{ start: '08:00', end: '23:30', minTime: form.startTime }"
|
|
|
- >
|
|
|
- </el-time-select>
|
|
|
+ <el-tab-pane label="课程安排" style="height:93vh;">
|
|
|
+ <el-scrollbar style="height:100%;overflow-x:hidden">
|
|
|
+ <data-form :styles="{ padding: 0 }" :data="form" :fields="oFields" :rules="{}" @save="handleOsave" :isNew="false">
|
|
|
+ <template #radios="{item, form}">
|
|
|
+ <template v-if="isType(item.model, 'radio')">
|
|
|
+ <el-radio v-for="(i, index) in dayType" :key="index" :label="i.label">{{ i.label }}</el-radio>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template #custom="{item, form}">
|
|
|
+ <template v-if="item.model === 'time'">
|
|
|
+ <el-time-picker
|
|
|
+ is-range
|
|
|
+ v-model="form.time"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围"
|
|
|
+ size="mini"
|
|
|
+ value-format="HH:mm"
|
|
|
+ format="HH:mm"
|
|
|
+ >
|
|
|
+ </el-time-picker>
|
|
|
+ </template>
|
|
|
+ <template v-if="isType(item.model, 'select')">
|
|
|
+ <template v-if="form[`${item.model}type`] === '活动'">
|
|
|
+ <el-select v-model="form[item.model]">
|
|
|
+ <el-option v-for="(i, index) in actList" :key="index" :label="i.label" :value="i.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="form[`${item.model}type`] === '课程'">
|
|
|
+ <el-select v-model="form[`${item.model}subid`]">
|
|
|
+ <el-option v-for="(i, index) in subjectList" :key="index" :label="i.name" :value="i.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ 请选择当前时间段活动类型
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
- </template>
|
|
|
- </data-form>
|
|
|
+ </data-form>
|
|
|
+ </el-scrollbar>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-drawer>
|
|
@@ -56,7 +81,10 @@
|
|
|
<script>
|
|
|
import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
import dataForm from '@frame/components/form';
|
|
|
+import { lesson } from '@frame/config/lesson-template';
|
|
|
+import _ from 'lodash';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: subject } = createNamespacedHelpers('subject');
|
|
|
export default {
|
|
|
name: 'detail',
|
|
|
props: {},
|
|
@@ -69,7 +97,7 @@ export default {
|
|
|
fields: [
|
|
|
{ label: '模板名称', required: true, model: 'title' },
|
|
|
{ label: '类型', required: true, model: 'type', type: 'radio' },
|
|
|
- { label: '课程安排', required: true, model: 'lesson', custom: true },
|
|
|
+ { label: '课程安排', model: 'lesson', custom: true },
|
|
|
],
|
|
|
types: [
|
|
|
{ label: '普通班', value: '0' },
|
|
@@ -79,18 +107,43 @@ export default {
|
|
|
title: [{ required: true, message: '请输入模板名称' }],
|
|
|
type: [{ required: true, message: '请选择模板类型' }],
|
|
|
},
|
|
|
- oFields: [{ label: '时间', model: 'time', type: 'time', custom: true }],
|
|
|
- arrList: [
|
|
|
- { time: `8:30-11:30`, day1: '--', day2: '科目一', day3: '科目二', day4: '科目三', day5: '科目四', day6: '--' },
|
|
|
- { time: `11:30-13:30`, day1: '--', day2: '午餐+休息', day3: '午餐+休息', day4: '午餐+休息', day5: '午餐+休息', day6: '--' },
|
|
|
- { time: `13:30-16:30`, day1: '13:30报道;15:30开班仪式', day2: '科目一', day3: '科目二', day4: '科目三', day5: '科目四', day6: '--' },
|
|
|
- { time: `16:30-17:30`, day1: '晚餐', day2: '晚餐', day3: '晚餐', day4: '晚餐', day5: '晚餐', day6: '--' },
|
|
|
- { time: `17:30-19:45`, day1: '团队组建', day2: '拓展交流', day3: '课程作业小组展示 ', day4: '课程作业', day5: '礼仪课小组面试 ', day6: '结业仪式' },
|
|
|
+ oFields: [
|
|
|
+ { label: '时间', model: 'time', type: 'time', custom: true },
|
|
|
+ { label: '第一天类型', model: 'day1type', type: 'radio' },
|
|
|
+ { label: '第一天安排', model: 'day1', custom: true },
|
|
|
+ { label: '第二天类型', model: 'day2type', type: 'radio' },
|
|
|
+ { label: '第二天安排', model: 'day2', custom: true },
|
|
|
+ { label: '第三天类型', model: 'day3type', type: 'radio' },
|
|
|
+ { label: '第三天安排', model: 'day3', custom: true },
|
|
|
+ { label: '第四天类型', model: 'day4type', type: 'radio' },
|
|
|
+ { label: '第四天安排', model: 'day4', custom: true },
|
|
|
+ { label: '第五天类型', model: 'day5type', type: 'radio' },
|
|
|
+ { label: '第五天安排', model: 'day5', custom: true },
|
|
|
+ { label: '第六天类型', model: 'day6type', type: 'radio' },
|
|
|
+ { label: '第六天安排', model: 'day6', custom: true },
|
|
|
],
|
|
|
+ lessons: lesson,
|
|
|
+ dayType: [{ label: '活动' }, { label: '课程' }],
|
|
|
+ actList: [
|
|
|
+ { label: '--' },
|
|
|
+ { label: '报道+开班仪式' },
|
|
|
+ { label: '午餐+休息' },
|
|
|
+ { label: '晚餐' },
|
|
|
+ { label: '团队组建' },
|
|
|
+ { label: '拓展交流' },
|
|
|
+ { label: '课程作业小组展示' },
|
|
|
+ { label: '课程作业' },
|
|
|
+ { label: '礼仪课小组面试' },
|
|
|
+ { label: '结业仪式' },
|
|
|
+ ],
|
|
|
+ subjectList: [],
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
+ ...subject({
|
|
|
+ getSubjectList: 'query',
|
|
|
+ }),
|
|
|
async search() {
|
|
|
const res = await this.fetch(this.id);
|
|
|
if (this.$checkRes(res)) this.$set(this, `info`, res.data);
|
|
@@ -99,31 +152,49 @@ export default {
|
|
|
async handleSave({ isNew, data }) {
|
|
|
let res;
|
|
|
let msg;
|
|
|
- if (isNew) {
|
|
|
- res = await this.create(data);
|
|
|
- msg = `${this.pageTitle}添加成功`;
|
|
|
- } else {
|
|
|
- res = await this.update(data);
|
|
|
- msg = `${this.pageTitle}修改成功`;
|
|
|
- }
|
|
|
- if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
|
|
|
+ data.lessons = JSON.stringify(this.lessons);
|
|
|
+ console.log(data);
|
|
|
+ // if (isNew) {
|
|
|
+ // res = await this.create(data);
|
|
|
+ // msg = `${this.pageTitle}添加成功`;
|
|
|
+ // } else {
|
|
|
+ // res = await this.update(data);
|
|
|
+ // msg = `${this.pageTitle}修改成功`;
|
|
|
+ // }
|
|
|
+ // if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
|
|
|
},
|
|
|
- toEdit(data, index) {
|
|
|
- data.index = index;
|
|
|
- let times = data.time.split('-');
|
|
|
- if (times.length === 2) {
|
|
|
- data.stratTime = times[0];
|
|
|
- data.endTime = times[1];
|
|
|
- }
|
|
|
-
|
|
|
- this.$set(this, `form`, data);
|
|
|
+ async toEdit(data, index) {
|
|
|
+ let newData = JSON.parse(JSON.stringify(data));
|
|
|
+ newData.index = index;
|
|
|
+ let times = newData.time.split('-');
|
|
|
+ if (times.length === 2) newData.time = times;
|
|
|
+ let subject = await this.getSubjectList({ type: this.info.type });
|
|
|
+ if (subject.errcode === 0) this.$set(this, `subjectList`, subject.data);
|
|
|
+ this.$set(this, `form`, newData);
|
|
|
this.drawer = true;
|
|
|
},
|
|
|
handleOsave({ data }) {
|
|
|
- console.log(data);
|
|
|
+ data.time = _.join(data.time, '-');
|
|
|
+ let index = JSON.parse(JSON.stringify(data.index));
|
|
|
+ let keys = Object.keys(data);
|
|
|
+ let midArr = keys.filter(f => /^day\d$/.test(f));
|
|
|
+ for (const key of midArr) {
|
|
|
+ if (data[`${key}type`] === '课程') data[key] = this.subjectList.find(f => f.id === data[`${key}subid`]).name;
|
|
|
+ else delete data[`${key}subid`];
|
|
|
+ }
|
|
|
+ data = _.omit(data, ['index']);
|
|
|
+ this.$set(this.lessons, index, data);
|
|
|
+ this.drawer = false;
|
|
|
},
|
|
|
toClose() {
|
|
|
this.drawer = false;
|
|
|
+ this.form = {};
|
|
|
+ },
|
|
|
+ isType(model, type) {
|
|
|
+ let reg;
|
|
|
+ if (type === 'radio') reg = /^day\dtype$/;
|
|
|
+ else reg = /^day\d$/;
|
|
|
+ return reg.test(model);
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
@@ -152,4 +223,8 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less">
|
|
|
+.el-scrollbar__wrap {
|
|
|
+ overflow-x: auto !important;
|
|
|
+}
|
|
|
+</style>
|