|
|
@@ -1,321 +1,344 @@
|
|
|
-<template>
|
|
|
- <div id="detail">
|
|
|
- <detail-frame :title="pageTitle" returns="./index">
|
|
|
- <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew" :reset="false">
|
|
|
- <template #radios="{item}">
|
|
|
- <template v-if="item.model === 'type'">
|
|
|
- <el-radio v-for="(i, index) in types" :key="index" :label="i.code">{{ i.name }}</el-radio>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template #custom="{item}">
|
|
|
- <template v-if="item.model === 'lesson'">
|
|
|
- <el-row type="flex" align="middle" justify="end" class="btn_bar">
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="primary" size="mini" @click="reset">清空课表</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="primary" size="mini" @click="toAddEvent">添加时间段</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="primary" size="mini" @click="toAddDay">添加天数</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-table :data="lessons" stripe border>
|
|
|
- <el-table-column align="center" label="时间" prop="time"></el-table-column>
|
|
|
- <el-table-column align="center" v-for="(d, index) in dayList" :key="index" :label="d.label" :prop="d.prop"></el-table-column>
|
|
|
- <el-table-column label="操作" align="center">
|
|
|
- <template v-slot="{ row, $index }">
|
|
|
- <el-row type="flex" align="middle" justify="center">
|
|
|
- <el-col :span="4">
|
|
|
- <el-tooltip :key="$index" effect="dark" content="编辑" placement="bottom">
|
|
|
- <el-button type="text" size="mini" icon="el-icon-edit" @click="toEdit(row, $index)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <el-tooltip :key="$index" effect="dark" content="删除" placement="bottom">
|
|
|
- <el-button type="text" size="mini" icon="el-icon-delete" @click="todelete(row, $index)"></el-button>
|
|
|
- </el-tooltip>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </data-form>
|
|
|
- </detail-frame>
|
|
|
- <el-drawer :visible.sync="drawer" @close="toClose" direction="rtl" :with-header="false">
|
|
|
- <el-tabs style="padding:10px;">
|
|
|
- <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>
|
|
|
- </data-form>
|
|
|
- </el-scrollbar>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-drawer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-var moment = require('moment');
|
|
|
-import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
-import dataForm from '@frame/components/form';
|
|
|
-import { lesson as lessons } from '@frame/config/lesson-template';
|
|
|
-import _ from 'lodash';
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: subject } = createNamespacedHelpers('subject');
|
|
|
-const { mapActions: lesson } = createNamespacedHelpers('lesson');
|
|
|
-const { mapActions: classtype } = createNamespacedHelpers('classtype');
|
|
|
-export default {
|
|
|
- name: 'detail',
|
|
|
- props: {},
|
|
|
- components: { detailFrame, dataForm },
|
|
|
- data: () => {
|
|
|
- return {
|
|
|
- drawer: false,
|
|
|
- info: { type: '0' },
|
|
|
- form: {},
|
|
|
- fields: [
|
|
|
- { label: '模板名称', required: true, model: 'title' },
|
|
|
- { label: '类型', required: true, model: 'type', type: 'radio' },
|
|
|
- { label: '课程安排', model: 'lesson', custom: true },
|
|
|
- ],
|
|
|
- types: [],
|
|
|
- rules: {
|
|
|
- title: [{ required: true, message: '请输入模板名称' }],
|
|
|
- type: [{ required: true, message: '请选择模板类型' }],
|
|
|
- },
|
|
|
- oFields: [
|
|
|
- // { label: '时间', model: 'time', type: 'time', custom: true },
|
|
|
- // { label: '第一天类型', model: 'day1type', type: 'radio' },
|
|
|
- // { label: '第一天安排', model: 'day1', custom: true },
|
|
|
- ],
|
|
|
- lessons: lessons,
|
|
|
- dayType: [{ label: '活动' }, { label: '课程' }],
|
|
|
- actList: [
|
|
|
- { label: '--' },
|
|
|
- { label: '报到+开班仪式' },
|
|
|
- { label: '午餐+休息' },
|
|
|
- { label: '晚餐' },
|
|
|
- { label: '团队组建' },
|
|
|
- { label: '拓展交流' },
|
|
|
- { label: '课程作业小组展示' },
|
|
|
- { label: '课程作业' },
|
|
|
- { label: '礼仪课小组面试' },
|
|
|
- { label: '结业仪式' },
|
|
|
- ],
|
|
|
- dayList: [],
|
|
|
- subjectList: [],
|
|
|
- classTypeList: [],
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getOtherList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...classtype({ getClassType: 'query' }),
|
|
|
- ...subject({ getSubjectList: 'query' }),
|
|
|
- ...lesson(['modelFetch', 'modelCreate', 'modelUpdate']),
|
|
|
- async search() {
|
|
|
- const res = await this.modelFetch(this.id);
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- this.$set(this, `info`, res.data);
|
|
|
- let { lessons } = res.data;
|
|
|
- lessons = JSON.parse(lessons);
|
|
|
- // 设置天数
|
|
|
- let keys = [];
|
|
|
- for (const l of lessons) {
|
|
|
- let ks = Object.keys(l).filter(f => f.endsWith('type'));
|
|
|
- keys.push(...ks);
|
|
|
- }
|
|
|
- keys = _.uniq(keys);
|
|
|
- this.toSetDayList(keys.length);
|
|
|
- this.$set(this, `lessons`, lessons);
|
|
|
- }
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
- async handleSave({ isNew, data }) {
|
|
|
- let res;
|
|
|
- let msg;
|
|
|
- data.lessons = JSON.stringify(this.lessons);
|
|
|
- if (isNew) {
|
|
|
- res = await this.modelCreate(data);
|
|
|
- msg = `${this.pageTitle}添加成功`;
|
|
|
- } else {
|
|
|
- res = await this.modelUpdate(data);
|
|
|
- msg = `${this.pageTitle}修改成功`;
|
|
|
- }
|
|
|
- if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
|
|
|
- },
|
|
|
- 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.toAddEvent();
|
|
|
- },
|
|
|
- handleOsave({ data }) {
|
|
|
- //TODO 将对应另一天的课也改了
|
|
|
- let { index } = data;
|
|
|
- if (!_.isArray(_.get(data, 'time'))) {
|
|
|
- this.$message.error('时间格式错误');
|
|
|
- console.warning('时间不是数组,之后无法进行转换');
|
|
|
- return;
|
|
|
- }
|
|
|
- data.time = _.join(data.time, '-');
|
|
|
- if (index != undefined && index >= 0) {
|
|
|
- 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);
|
|
|
- } else {
|
|
|
- this.lessons.push(data);
|
|
|
- }
|
|
|
- this.$set(this, `lessons`, this.getOrderForTime(this.lessons));
|
|
|
- this.drawer = false;
|
|
|
- },
|
|
|
- todelete(row, index) {
|
|
|
- this.lessons.splice(index, 1);
|
|
|
- },
|
|
|
- //根据时间排序
|
|
|
- getOrderForTime(data) {
|
|
|
- let duplicate = JSON.parse(JSON.stringify(data));
|
|
|
- duplicate = duplicate.sort((a, b) => {
|
|
|
- let a_arr = a.time.split('-');
|
|
|
- let b_arr = b.time.split('-');
|
|
|
- let at = moment(`${moment().format('YYYY-MM-DD')} ${a_arr[0]}`).format('X');
|
|
|
- let bt = moment(`${moment().format('YYYY-MM-DD')} ${b_arr[0]}`).format('X');
|
|
|
- return at - bt;
|
|
|
- });
|
|
|
- return duplicate;
|
|
|
- },
|
|
|
- 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);
|
|
|
- },
|
|
|
- //添加时间段
|
|
|
- toAddEvent() {
|
|
|
- let arr = [{ label: '时间', model: 'time', type: 'time', custom: true }];
|
|
|
- let day = _.get(this.dayList, 'length', 0);
|
|
|
- for (let i = 1; i <= day; i++) {
|
|
|
- let obj1 = { label: `第${i}天类型`, model: `day${i}type`, type: 'radio' };
|
|
|
- let obj2 = { label: `第${i}天安排`, model: `day${i}`, custom: true };
|
|
|
- arr.push(obj1);
|
|
|
- arr.push(obj2);
|
|
|
- }
|
|
|
- this.$set(this, `oFields`, arr);
|
|
|
- this.drawer = true;
|
|
|
- },
|
|
|
- //添加天数
|
|
|
- toAddDay() {
|
|
|
- let len = _.get(this.dayList, 'length', 0);
|
|
|
- this.toSetDayList(len + 1);
|
|
|
- },
|
|
|
- toSetDayList(day) {
|
|
|
- let res = [];
|
|
|
- for (let i = 1; i <= day; i++) {
|
|
|
- let obj = {};
|
|
|
- obj.label = `第${i}天`;
|
|
|
- obj.prop = `day${i}`;
|
|
|
- res.push(obj);
|
|
|
- }
|
|
|
- this.$set(this, `dayList`, res);
|
|
|
- },
|
|
|
- async getOtherList() {
|
|
|
- const res = await this.getClassType();
|
|
|
- if (this.$checkRes(res)) this.$set(this, `types`, res.data);
|
|
|
- },
|
|
|
- reset() {
|
|
|
- this.$set(this, `lessons`, []);
|
|
|
- this.$set(this, `dayList`, []);
|
|
|
- },
|
|
|
- toinit() {
|
|
|
- this.toSetDayList(6);
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isNew: {
|
|
|
- immediate: true,
|
|
|
- handler(val) {
|
|
|
- if (!val) this.search();
|
|
|
- else this.toinit();
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['user']),
|
|
|
- id() {
|
|
|
- return this.$route.query.id;
|
|
|
- },
|
|
|
- isNew() {
|
|
|
- return this.$route.query.id ? false : true;
|
|
|
- },
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.el-scrollbar__wrap {
|
|
|
- overflow-x: auto !important;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div id="detail">
|
|
|
+ <detail-frame :title="pageTitle" returns="./index">
|
|
|
+ <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew" :reset="false">
|
|
|
+ <template #radios="{item}">
|
|
|
+ <template v-if="item.model === 'type'">
|
|
|
+ <el-radio v-for="(i, index) in types" :key="index" :label="i.code">{{ i.name }}</el-radio>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template #custom="{item}">
|
|
|
+ <template v-if="item.model === 'lesson'">
|
|
|
+ <el-row type="flex" align="middle" justify="end" class="btn_bar">
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" size="mini" @click="reset">清空课表</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" size="mini" @click="toAddEvent">添加时间段</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" size="mini" @click="toAddDay">添加天数</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-table :data="lessons" stripe border>
|
|
|
+ <el-table-column align="center" label="时间" prop="time"></el-table-column>
|
|
|
+ <el-table-column align="center" v-for="(d, index) in dayList" :key="index" :label="d.label" :prop="d.prop">
|
|
|
+ <template #header>
|
|
|
+ {{ d.label }} <el-link size="mini" type="danger" icon="el-icon-delete" style="margin-left:5px" @click="deleteDay(d.prop)"></el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template v-slot="{ row, $index }">
|
|
|
+ <el-row type="flex" align="middle" justify="center">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-tooltip :key="$index" effect="dark" content="编辑" placement="bottom">
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-edit" @click="toEdit(row, $index)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-tooltip :key="$index" effect="dark" content="删除" placement="bottom">
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-delete" @click="todelete(row, $index)"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </data-form>
|
|
|
+ </detail-frame>
|
|
|
+ <el-drawer :visible.sync="drawer" @close="toClose" direction="rtl" :with-header="false">
|
|
|
+ <el-tabs style="padding:10px;">
|
|
|
+ <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`]" @change="val => selectLesson(val, item.model)">
|
|
|
+ <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>
|
|
|
+ </data-form>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+var moment = require('moment');
|
|
|
+import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
+import dataForm from '@frame/components/form';
|
|
|
+import { lesson as lessons } from '@frame/config/lesson-template';
|
|
|
+import _ from 'lodash';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: subject } = createNamespacedHelpers('subject');
|
|
|
+const { mapActions: lesson } = createNamespacedHelpers('lesson');
|
|
|
+const { mapActions: classtype } = createNamespacedHelpers('classtype');
|
|
|
+export default {
|
|
|
+ name: 'detail',
|
|
|
+ props: {},
|
|
|
+ components: { detailFrame, dataForm },
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ drawer: false,
|
|
|
+ info: { type: '0' },
|
|
|
+ form: {},
|
|
|
+ fields: [
|
|
|
+ { label: '模板名称', required: true, model: 'title' },
|
|
|
+ { label: '类型', required: true, model: 'type', type: 'radio' },
|
|
|
+ { label: '课程安排', model: 'lesson', custom: true },
|
|
|
+ ],
|
|
|
+ types: [],
|
|
|
+ rules: {
|
|
|
+ title: [{ required: true, message: '请输入模板名称' }],
|
|
|
+ type: [{ required: true, message: '请选择模板类型' }],
|
|
|
+ },
|
|
|
+ oFields: [
|
|
|
+ // { label: '时间', model: 'time', type: 'time', custom: true },
|
|
|
+ // { label: '第一天类型', model: 'day1type', type: 'radio' },
|
|
|
+ // { label: '第一天安排', model: 'day1', custom: true },
|
|
|
+ ],
|
|
|
+ lessons: lessons,
|
|
|
+ dayType: [{ label: '活动' }, { label: '课程' }],
|
|
|
+ actList: [
|
|
|
+ { label: '--' },
|
|
|
+ { label: '报到+开班仪式' },
|
|
|
+ { label: '午餐+休息' },
|
|
|
+ { label: '晚餐' },
|
|
|
+ { label: '团队组建' },
|
|
|
+ { label: '拓展交流' },
|
|
|
+ { label: '课程作业小组展示' },
|
|
|
+ { label: '课程作业' },
|
|
|
+ { label: '礼仪课小组面试' },
|
|
|
+ { label: '结业仪式' },
|
|
|
+ ],
|
|
|
+ dayList: [],
|
|
|
+ subjectList: [],
|
|
|
+ classTypeList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getOtherList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...classtype({ getClassType: 'query' }),
|
|
|
+ ...subject({ getSubjectList: 'query' }),
|
|
|
+ ...lesson(['modelFetch', 'modelCreate', 'modelUpdate']),
|
|
|
+ async search() {
|
|
|
+ const res = await this.modelFetch(this.id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `info`, res.data);
|
|
|
+ let { lessons } = res.data;
|
|
|
+ lessons = JSON.parse(lessons);
|
|
|
+ // 设置天数
|
|
|
+ let keys = [];
|
|
|
+ for (const l of lessons) {
|
|
|
+ let ks = Object.keys(l).filter(f => f.endsWith('type'));
|
|
|
+ keys.push(...ks);
|
|
|
+ }
|
|
|
+ keys = _.uniq(keys);
|
|
|
+ this.toSetDayList(keys.length);
|
|
|
+ this.$set(this, `lessons`, lessons);
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ async handleSave({ isNew, data }) {
|
|
|
+ let res;
|
|
|
+ let msg;
|
|
|
+ data.lessons = JSON.stringify(this.lessons);
|
|
|
+ if (isNew) {
|
|
|
+ res = await this.modelCreate(data);
|
|
|
+ msg = `${this.pageTitle}添加成功`;
|
|
|
+ } else {
|
|
|
+ res = await this.modelUpdate(data);
|
|
|
+ msg = `${this.pageTitle}修改成功`;
|
|
|
+ }
|
|
|
+ if (this.$checkRes(res, msg)) this.$router.push({ path: './index' });
|
|
|
+ },
|
|
|
+ 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.toAddEvent();
|
|
|
+ },
|
|
|
+ handleOsave({ data }) {
|
|
|
+ //TODO 将对应另一天的课也改了
|
|
|
+ let { index } = data;
|
|
|
+ if (!_.isArray(_.get(data, 'time'))) {
|
|
|
+ this.$message.error('时间格式错误');
|
|
|
+ console.warning('时间不是数组,之后无法进行转换');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data.time = _.join(data.time, '-');
|
|
|
+ if (index != undefined && index >= 0) {
|
|
|
+ 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);
|
|
|
+ } else {
|
|
|
+ this.lessons.push(data);
|
|
|
+ }
|
|
|
+ this.$set(this, `lessons`, this.getOrderForTime(this.lessons));
|
|
|
+ this.drawer = false;
|
|
|
+ },
|
|
|
+ todelete(row, index) {
|
|
|
+ this.lessons.splice(index, 1);
|
|
|
+ },
|
|
|
+ //根据时间排序
|
|
|
+ getOrderForTime(data) {
|
|
|
+ let duplicate = JSON.parse(JSON.stringify(data));
|
|
|
+ duplicate = duplicate.sort((a, b) => {
|
|
|
+ let a_arr = a.time.split('-');
|
|
|
+ let b_arr = b.time.split('-');
|
|
|
+ let at = moment(`${moment().format('YYYY-MM-DD')} ${a_arr[0]}`).format('X');
|
|
|
+ let bt = moment(`${moment().format('YYYY-MM-DD')} ${b_arr[0]}`).format('X');
|
|
|
+ return at - bt;
|
|
|
+ });
|
|
|
+ return duplicate;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ //添加时间段
|
|
|
+ toAddEvent() {
|
|
|
+ let arr = [{ label: '时间', model: 'time', type: 'time', custom: true }];
|
|
|
+ let day = _.get(this.dayList, 'length', 0);
|
|
|
+ for (let i = 1; i <= day; i++) {
|
|
|
+ let obj1 = { label: `第${i}天类型`, model: `day${i}type`, type: 'radio' };
|
|
|
+ let obj2 = { label: `第${i}天安排`, model: `day${i}`, custom: true };
|
|
|
+ arr.push(obj1);
|
|
|
+ arr.push(obj2);
|
|
|
+ }
|
|
|
+ this.$set(this, `oFields`, arr);
|
|
|
+ this.drawer = true;
|
|
|
+ },
|
|
|
+ //添加天数
|
|
|
+ toAddDay() {
|
|
|
+ let len = _.get(this.dayList, 'length', 0);
|
|
|
+ this.toSetDayList(len + 1);
|
|
|
+ },
|
|
|
+ toSetDayList(day) {
|
|
|
+ let res = [];
|
|
|
+ for (let i = 1; i <= day; i++) {
|
|
|
+ let obj = {};
|
|
|
+ obj.label = `第${i}天`;
|
|
|
+ obj.prop = `day${i}`;
|
|
|
+ res.push(obj);
|
|
|
+ }
|
|
|
+ this.$set(this, `dayList`, res);
|
|
|
+ },
|
|
|
+ async getOtherList() {
|
|
|
+ const res = await this.getClassType();
|
|
|
+ if (this.$checkRes(res)) this.$set(this, `types`, res.data);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.$set(this, `lessons`, []);
|
|
|
+ this.$set(this, `dayList`, []);
|
|
|
+ },
|
|
|
+ toinit() {
|
|
|
+ this.toSetDayList(6);
|
|
|
+ },
|
|
|
+ // 选择课程显示名称
|
|
|
+ selectLesson(val, model) {
|
|
|
+ console.log(val, model);
|
|
|
+ const r = this.subjectList.find(f => f._id === val);
|
|
|
+ if (r) this.$set(this.form, model, r.name);
|
|
|
+ },
|
|
|
+ // 删除天
|
|
|
+ deleteDay(day) {
|
|
|
+ console.log(day);
|
|
|
+ this.dayList = this.dayList.filter(f => f.prop !== day);
|
|
|
+ let dup = _.cloneDeep(this.lessons);
|
|
|
+ dup = dup.map(i =>
|
|
|
+ _.pick(
|
|
|
+ i,
|
|
|
+ Object.keys(i).filter(f => !f.includes(day))
|
|
|
+ )
|
|
|
+ );
|
|
|
+ this.$set(this, 'lessons', dup);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isNew: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ if (!val) this.search();
|
|
|
+ else this.toinit();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ isNew() {
|
|
|
+ return this.$route.query.id ? false : true;
|
|
|
+ },
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.el-scrollbar__wrap {
|
|
|
+ overflow-x: auto !important;
|
|
|
+}
|
|
|
+</style>
|
