|
|
@@ -4,7 +4,7 @@
|
|
|
<el-row :gutter="10" type="flex">
|
|
|
<el-col :span="12">
|
|
|
<el-card header="全年计划信息">
|
|
|
- <el-form :model="info" :rules="rules" :isNew="isNew" label-width="60px" size="small" @submit.native.prevent>
|
|
|
+ <el-form ref="planForm" :model="info" :rules="rules" :isNew="isNew" label-width="60px" size="small" @submit.native.prevent>
|
|
|
<el-form-item label="年份" required>
|
|
|
{{ info.year }}
|
|
|
</el-form-item>
|
|
|
@@ -14,13 +14,13 @@
|
|
|
|
|
|
<el-collapse v-model="collapse" accordion>
|
|
|
<el-collapse-item title="计划简表" name="1">
|
|
|
- <data-table :fields="fields" :data="selectList" :opera="opera" @edit="toEdit" @delete="toDelete" :height="heights"></data-table>
|
|
|
+ <data-table :fields="fields" :data="events" :opera="opera" @edit="toEdit" @delete="toDelete" :height="heights"></data-table>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
<el-form-item>
|
|
|
<el-row type="flex" align="middle" justify="space-around" style="margin-top:20px">
|
|
|
<el-col :span="6">
|
|
|
- <el-button type="primary" @click="savePlan">保存全年计划</el-button>
|
|
|
+ <el-button type="primary" @click="toSavePlan">保存全年计划</el-button>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form-item>
|
|
|
@@ -29,17 +29,45 @@
|
|
|
</el-col>
|
|
|
<el-col :span="16" :style="`width:${widths}px`">
|
|
|
<el-card ref="card">
|
|
|
- <calendar :selfBtn="selfBtn" @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
|
|
|
+ <calendar @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</detail-frame>
|
|
|
<el-drawer :visible.sync="drawer" direction="rtl" title="安排计划" @close="toClose">
|
|
|
- <event :data="form" :isNew="formIsNew" :predefineColors="predefineColors" @save="saveForm"></event>
|
|
|
+ <el-form :model="form" ref="form" :rules="formRules" label-width="80px" size="small" @submit.native.prevent style="padding: 15px;">
|
|
|
+ <el-form-item label="开始时间" prop="start" required>
|
|
|
+ <el-date-picker v-model="form.start" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="end" required>
|
|
|
+ <el-date-picker v-model="form.end" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="期数" prop="term" required> <el-input v-model="form.term"></el-input> </el-form-item>
|
|
|
+ <el-form-item label="班级类型" prop="type" required>
|
|
|
+ <el-radio-group v-model="form.type">
|
|
|
+ <el-radio label="0">正常班级</el-radio>
|
|
|
+ <el-radio label="1">特殊班级</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="批次" prop="batch" v-if="form.type === '0'"> <el-input v-model="form.batch"></el-input> </el-form-item>
|
|
|
+ <el-form-item label="班级数量" prop="class" v-if="form.type === '0'"> <el-input v-model="form.class"></el-input> </el-form-item>
|
|
|
+ <el-form-item label="每班人数" prop="number" required> <el-input v-model="form.number"></el-input> </el-form-item>
|
|
|
+ <el-form-item label="班级名称" prop="name" v-if="form.type === '1'"> <el-input v-model="form.name"></el-input> </el-form-item>
|
|
|
+ <el-form-item label="颜色" prop="color">
|
|
|
+ <el-color-picker v-model="form.color" :predefine="predefineColors" size="mini"></el-color-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-row type="flex" align="middle" justify="space-around">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button type="primary" @click="saveForm">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button @click="resetForm">重置</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</el-drawer>
|
|
|
- <el-dialog title="设置假期" :visible.sync="dialog">
|
|
|
- <vacation-form :list="vacation" @update="setVacation"></vacation-form>
|
|
|
- </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -47,117 +75,118 @@
|
|
|
import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
import calendar from '@frame/components/calendar';
|
|
|
import dataTable from '@frame/components/data-table';
|
|
|
-import vacationForm from './parts/vacation';
|
|
|
-import event from './parts/event';
|
|
|
import _ from 'lodash';
|
|
|
-import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: mapClass } = createNamespacedHelpers('trainplan');
|
|
|
+import { createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('trainplan');
|
|
|
export default {
|
|
|
metaInfo: { title: '计划详情' },
|
|
|
name: 'detail',
|
|
|
props: {},
|
|
|
- components: { detailFrame, calendar, dataTable, vacationForm, event },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- info: {
|
|
|
- year: '',
|
|
|
- termnum: {
|
|
|
- batchnum: [],
|
|
|
- },
|
|
|
+ components: { detailFrame, calendar, dataTable },
|
|
|
+ data: () => ({
|
|
|
+ termnum: [],
|
|
|
+ info: {
|
|
|
+ year: '',
|
|
|
+ termnum: {
|
|
|
+ batchnum: [],
|
|
|
},
|
|
|
+ },
|
|
|
|
|
|
- form: { color: '#409EFF' },
|
|
|
- formIsNew: true,
|
|
|
- rules: {
|
|
|
- title: [{ required: true, message: '请输入标题' }],
|
|
|
+ form: { color: '#409EFF' },
|
|
|
+ rules: {
|
|
|
+ title: [{ required: true, message: '请输入标题' }],
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
|
|
|
+ end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
|
|
|
+ term: [{ required: true, message: '请输入期数' }],
|
|
|
+ number: [{ required: true, message: '请输入每班人数' }],
|
|
|
+ type: [{ required: true, message: '请选择班级类型' }],
|
|
|
+ },
|
|
|
+ drawer: false,
|
|
|
+ events: [],
|
|
|
+ predefineColors: ['#409EFF'],
|
|
|
+ collapse: '',
|
|
|
+ fields: [
|
|
|
+ { label: '开始时间', prop: 'start' },
|
|
|
+ { label: '结束时间', prop: 'end' },
|
|
|
+ { label: '期数', prop: 'term' },
|
|
|
+ { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
|
|
|
+ ],
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ method: 'edit',
|
|
|
},
|
|
|
- formRules: {
|
|
|
- start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
|
|
|
- end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
|
|
|
- term: [{ required: true, message: '请输入期数' }],
|
|
|
- number: [{ required: true, message: '请输入每班人数' }],
|
|
|
- type: [{ required: true, message: '请选择班级类型' }],
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ method: 'delete',
|
|
|
+ confirm: true,
|
|
|
},
|
|
|
- drawer: false,
|
|
|
- dialog: false,
|
|
|
- events: [],
|
|
|
- predefineColors: ['#409EFF'],
|
|
|
- collapse: '',
|
|
|
- fields: [
|
|
|
- { label: '开始时间', prop: 'start' },
|
|
|
- { label: '结束时间', prop: 'end' },
|
|
|
- { label: '期数', prop: 'term' },
|
|
|
- { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
|
|
|
- ],
|
|
|
- opera: [
|
|
|
+ ],
|
|
|
+ heights: 250,
|
|
|
+ axiosData: {
|
|
|
+ termnum: [
|
|
|
{
|
|
|
- label: '编辑',
|
|
|
- icon: 'el-icon-edit',
|
|
|
- method: 'edit',
|
|
|
+ term: '1',
|
|
|
+ batchnum: [],
|
|
|
+ classnum: 2,
|
|
|
},
|
|
|
{
|
|
|
- label: '删除',
|
|
|
- icon: 'el-icon-delete',
|
|
|
- method: 'delete',
|
|
|
- confirm: true,
|
|
|
+ term: '2',
|
|
|
+ batchnum: [],
|
|
|
+ classnum: 3,
|
|
|
},
|
|
|
- ],
|
|
|
- heights: 250,
|
|
|
- selfBtn: {
|
|
|
- vacation: {
|
|
|
- text: '设置假期',
|
|
|
- //设置假期
|
|
|
- click: () => (this.dialog = true),
|
|
|
- position: 'left',
|
|
|
+ {
|
|
|
+ term: '3',
|
|
|
+ batchnum: [],
|
|
|
+ classnum: 1,
|
|
|
},
|
|
|
- },
|
|
|
- selectList: [],
|
|
|
- vacation: [],
|
|
|
- };
|
|
|
- },
|
|
|
+ ],
|
|
|
+ title: '',
|
|
|
+ year: 2020,
|
|
|
+ },
|
|
|
+ }),
|
|
|
created() {
|
|
|
if (this.isNew) this.$set(this.info, `year`, new Date().getFullYear());
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
- ...mapClass(['fetch', 'create', 'update']),
|
|
|
- // ...mapClass(['fetch', 'create', 'update']),
|
|
|
- //查询计划
|
|
|
-
|
|
|
...mapActions(['fetch', 'create', 'update']),
|
|
|
//查询计划
|
|
|
async search() {
|
|
|
const res = await this.fetch(this.id);
|
|
|
- console.log(res);
|
|
|
- // if (this.$checkRes(res)) this.$set(this, `info`, res.data);
|
|
|
- // this.loading = false;
|
|
|
- // let events = [];
|
|
|
- // events = _.flatten(
|
|
|
- // this.axiosData.termnum.map(item => {
|
|
|
- // item.batchnum.map(i => {
|
|
|
- // i.term = item.term;
|
|
|
- // return i;
|
|
|
- // });
|
|
|
- // return item.batchnum;
|
|
|
- // })
|
|
|
- // );
|
|
|
- // let { termnum, year, title } = this.axiosData;
|
|
|
- // this.$set(this, `events`, events);
|
|
|
- // this.$set(this, `info`, { title, year });
|
|
|
+ if (this.$checkRes(res)) this.$set(this, `info`, res.data);
|
|
|
+ let midArr = JSON.parse(JSON.stringify(res.data));
|
|
|
+ let events = [];
|
|
|
+ events = _.flatten(
|
|
|
+ midArr.termnum.map(item => {
|
|
|
+ item.batchnum.map(i => {
|
|
|
+ i.term = item.term;
|
|
|
+ i.id = i._id;
|
|
|
+ i.start = JSON.parse(JSON.stringify(i.startdate));
|
|
|
+ i.end = JSON.parse(JSON.stringify(i.enddate));
|
|
|
+ i.title = JSON.parse(JSON.stringify(i.name));
|
|
|
+ delete i.startdate, delete i.enddate, delete i.name;
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ return item.batchnum;
|
|
|
+ })
|
|
|
+ );
|
|
|
+ //这个events不完整,真正的events还需要将假期的数据整合至一起
|
|
|
+ //计划+假期=所有事件 当前events=selectList 计划事件
|
|
|
+ //TODO,服务端修改后,整理假期事件并整合
|
|
|
+ console.log(events);
|
|
|
+ this.$set(this, `selectList`, JSON.parse(JSON.stringify(events)));
|
|
|
+ this.$set(this, `events`, events);
|
|
|
},
|
|
|
//拖拽选择事件
|
|
|
selectDate(object) {
|
|
|
- let start = JSON.parse(JSON.stringify(object.startStr));
|
|
|
- let end = JSON.parse(JSON.stringify(object.endStr));
|
|
|
- let res = this.inVacation(start, end);
|
|
|
- if (!res) {
|
|
|
- this.$message.error(`不能在假期中安排计划`);
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$set(this.form, `start`, start);
|
|
|
- this.$set(this.form, `end`, end);
|
|
|
+ this.$set(this.form, `start`, JSON.parse(JSON.stringify(object.startStr)));
|
|
|
+ this.$set(this.form, `end`, JSON.parse(JSON.stringify(object.endStr)));
|
|
|
this.drawer = true;
|
|
|
- this.formIsNew = true;
|
|
|
},
|
|
|
//日历事件点击事件
|
|
|
eventClick({ event }) {
|
|
|
@@ -168,20 +197,28 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
this.drawer = true;
|
|
|
- this.formIsNew = false;
|
|
|
},
|
|
|
//列表编辑事件
|
|
|
toEdit({ data, index }) {
|
|
|
this.$set(this, `form`, JSON.parse(JSON.stringify(data)));
|
|
|
this.drawer = true;
|
|
|
- this.formIsNew = false;
|
|
|
},
|
|
|
//列表删除事件
|
|
|
toDelete({ data, index }) {
|
|
|
this.events.splice(index, 1);
|
|
|
},
|
|
|
+ //全年计划保存验证
|
|
|
+ toSavePlan() {
|
|
|
+ this.$refs['planForm'].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.savePlan();
|
|
|
+ } else {
|
|
|
+ console.warn('form validate error!!!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
//保存计划事件
|
|
|
- savePlan({ isNew }) {
|
|
|
+ savePlan() {
|
|
|
//全年计划内容
|
|
|
|
|
|
let data = JSON.parse(JSON.stringify(this.info));
|
|
|
@@ -190,10 +227,20 @@ export default {
|
|
|
console.log(data.year);
|
|
|
let termnum = [];
|
|
|
//1,获取所有期数
|
|
|
- //2,按期数将events内数据分组
|
|
|
- termnum = _.uniq(this.events.map(item => item.term)).map(i => {
|
|
|
+ //2,按期数将selectList内数据分组
|
|
|
+ termnum = _.uniq(this.selectList.map(item => item.term)).map(i => {
|
|
|
let object = { term: i };
|
|
|
- object.batchnum = this.events.filter(fil => fil.term === i).map(b => _.pickBy(b, (val, key) => key !== 'term'));
|
|
|
+ object.batchnum = this.selectList
|
|
|
+ .filter(fil => fil.term === i)
|
|
|
+ .map(b => {
|
|
|
+ b = _.pickBy(b, (val, key) => key !== 'term');
|
|
|
+ b.startdate = JSON.parse(JSON.stringify(b.start));
|
|
|
+ b.enddate = JSON.parse(JSON.stringify(b.end));
|
|
|
+ b.name ? b.name : (b.name = JSON.parse(JSON.stringify(b.title)));
|
|
|
+ delete b.start, delete b.end;
|
|
|
+ if (_.startsWith(b.id, 'eve') || _.startsWith(b.id, 'vac')) delete b.id;
|
|
|
+ return b;
|
|
|
+ });
|
|
|
object.classnum = object.batchnum.reduce((pre, cur) => {
|
|
|
if (cur.type === '0') return pre + parseInt(cur.class);
|
|
|
else return pre + 1;
|
|
|
@@ -201,12 +248,17 @@ export default {
|
|
|
return object;
|
|
|
});
|
|
|
data.termnum = termnum;
|
|
|
+ //3 设置假期
|
|
|
+ let vacation = JSON.parse(JSON.stringify(this.vacation));
|
|
|
+ vacation = vacation.map(i => {
|
|
|
+ let object = { begindate: i.start, finishdate: i.end, name: i.title };
|
|
|
+ return object;
|
|
|
+ });
|
|
|
+ data.festivals = vacation;
|
|
|
let res;
|
|
|
let msg;
|
|
|
- console.log(this.isNew);
|
|
|
if (this.isNew) {
|
|
|
res = this.create(data);
|
|
|
- console.log(data);
|
|
|
msg = `${this.keyWord}添加成功`;
|
|
|
} else {
|
|
|
res = this.update(data);
|
|
|
@@ -215,13 +267,25 @@ export default {
|
|
|
if (this.$checkRes(res, msg)) this.$router.push({ path: '/plan/index' });
|
|
|
},
|
|
|
//保存表单函数
|
|
|
- saveForm(events) {
|
|
|
- this.setEvent(events);
|
|
|
+ saveForm() {
|
|
|
+ this.$refs['form'].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.setEvent();
|
|
|
+ this.resetForm();
|
|
|
+ } else {
|
|
|
+ console.warn('form validate error!!!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //重置表单函数
|
|
|
+ resetForm() {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.setHeight();
|
|
|
},
|
|
|
//添加/修改函数
|
|
|
- setEvent({ data: form, isNew }) {
|
|
|
+ setEvent() {
|
|
|
//TODO 需要根据班级类型把数据分开
|
|
|
- let data = JSON.parse(JSON.stringify(form));
|
|
|
+ let data = JSON.parse(JSON.stringify(this.form));
|
|
|
let { start, end, term, type, number, color, id } = data;
|
|
|
let object = {};
|
|
|
if (data.type === '0') {
|
|
|
@@ -233,10 +297,9 @@ export default {
|
|
|
let { name } = data;
|
|
|
object = { start, end, term, type, number, color, name, title: name };
|
|
|
}
|
|
|
- if (isNew) {
|
|
|
- object.id = `p${new Date().getTime()}`;
|
|
|
+ if (this.isNew) {
|
|
|
+ object.id = `eve${new Date().getTime()}`;
|
|
|
this.events.push(object);
|
|
|
- this.selectList.push(object);
|
|
|
} else {
|
|
|
object.id = id;
|
|
|
this.$set(
|
|
|
@@ -244,19 +307,14 @@ export default {
|
|
|
_.findIndex(this.events, item => item.id == object.id),
|
|
|
object
|
|
|
);
|
|
|
- this.$set(
|
|
|
- this.selectList,
|
|
|
- _.findIndex(this.selectList, item => item.id == object.id),
|
|
|
- object
|
|
|
- );
|
|
|
this.drawer = false;
|
|
|
}
|
|
|
if (_.findIndex(this.predefineColors, item => item == data.color) < 0) this.predefineColors.push(data.color);
|
|
|
- this.toClose();
|
|
|
},
|
|
|
//关闭抽屉函数
|
|
|
toClose() {
|
|
|
this.drawer = false;
|
|
|
+ this.form = { color: '#409EFF' };
|
|
|
this.formIsNew = true;
|
|
|
this.setHeight();
|
|
|
},
|
|
|
@@ -265,15 +323,28 @@ export default {
|
|
|
this.$set(this, `heights`, heights);
|
|
|
},
|
|
|
//更新假期列表
|
|
|
- setVacation(data) {
|
|
|
- console.log(data);
|
|
|
+ setVacation({ data, type }) {
|
|
|
this.$set(this, `vacation`, data);
|
|
|
- let arr = data.map(i => {
|
|
|
- i.color = `red`;
|
|
|
- i.editable = false;
|
|
|
- return i;
|
|
|
- });
|
|
|
- this.$set(this, `events`, this.events.concat(arr));
|
|
|
+ let arr = [];
|
|
|
+ if (type === 'add') {
|
|
|
+ arr = data.map(i => {
|
|
|
+ i.color = `red`;
|
|
|
+ i.editable = false;
|
|
|
+ i.id ? '' : (i.id = `vac${new Date().getTime()}`);
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ this.$set(this, `events`, this.selectList.concat(arr));
|
|
|
+ } else if (type === 'edit') {
|
|
|
+ for (const i of data) {
|
|
|
+ this.$set(
|
|
|
+ this.events,
|
|
|
+ _.findIndex(this.events, item => item.id == i.id),
|
|
|
+ i
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else if (type === 'delete') {
|
|
|
+ this.$set(this, `events`, this.selectList.concat(data));
|
|
|
+ }
|
|
|
},
|
|
|
//判断是否在假期中
|
|
|
inVacation(start, end) {
|
|
|
@@ -283,32 +354,18 @@ export default {
|
|
|
for (const vac of this.vacation) {
|
|
|
let vacS = new Date(vac.start).getTime();
|
|
|
let vacE = new Date(vac.end).getTime();
|
|
|
- // console.log(`start:${new Date(start)}`);
|
|
|
- // console.log(`end:${new Date(end)}`);
|
|
|
- // console.log(`vstart:${new Date(vac.start)}`);
|
|
|
- // console.log(`vend:${new Date(vac.end)}`);
|
|
|
- //case1 事件开始时间<假期开始时间 => 事件结束时间 <= 假期开始时间 ? 事件没碰到假期,没事 : 事件碰到假期了.不行了
|
|
|
- //case2 事件开始时间>=假期开始时间 => 事件开始时间 <= 假期结束时间 ? GG return false: return true;
|
|
|
- //case2
|
|
|
- // console.log(`startTime:${startTime}`);
|
|
|
- // console.log(`vacS:${vacS}`);
|
|
|
- // console.log(startTime >= vacS);
|
|
|
+ //case1 事件开始时间<假期开始时间 => 事件结束时间 > 假期开始时间 ? 事件碰到假期了.不行了 : 事件没碰到假期,没事
|
|
|
+ //case2 事件开始时间>=假期开始时间 => 事件开始时间 < 假期结束时间 ? GG return false: return true;
|
|
|
if (startTime >= vacS) {
|
|
|
- // console.log(`in if`);
|
|
|
- // console.log(`startTime:${startTime}`);
|
|
|
- // console.log(`vacE:${vacE}`);
|
|
|
- // console.log(startTime < vacE);
|
|
|
if (startTime < vacE) {
|
|
|
res = false;
|
|
|
+ console.warn(`case2`);
|
|
|
break;
|
|
|
}
|
|
|
} else {
|
|
|
- //case1
|
|
|
- // console.log(`in else`);
|
|
|
- // console.log(`endTime:${endTime}`);
|
|
|
- // console.log(`vacS:${vacS}`);
|
|
|
- if (endTime < vacS) {
|
|
|
+ if (endTime > vacS) {
|
|
|
res = false;
|
|
|
+ console.warn(`case1`);
|
|
|
break;
|
|
|
}
|
|
|
}
|
