|
|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <div id="detail">
|
|
|
+ <detail-frame :title="mainTitle" returns="/plan/index">
|
|
|
+ <el-row :gutter="10" type="flex">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card header="全年计划信息">
|
|
|
+ <el-form :model="info" label-width="60px" size="small" @submit.native.prevent>
|
|
|
+ <el-form-item label="年份">
|
|
|
+ {{ info.year }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ {{ info.title }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="info.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-collapse v-model="collapse" accordion>
|
|
|
+ <el-collapse-item title="上报可行时间列表" name="1">
|
|
|
+ <data-table :fields="fields" :data="selected" :opera="opera" @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-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" :style="`width:${widths}px`">
|
|
|
+ <el-card ref="card">
|
|
|
+ <calendar :useDraft="false" @eventClick="eventClick" :events="events"></calendar>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </detail-frame>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
+import calendar from '@frame/components/calendar';
|
|
|
+import dataTable from '@frame/components/data-table';
|
|
|
+import _ from 'lodash';
|
|
|
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ metaInfo: { title: '计划详情' },
|
|
|
+ name: 'detail',
|
|
|
+ props: {},
|
|
|
+ components: { detailFrame, calendar, dataTable },
|
|
|
+ data: () => ({
|
|
|
+ info: {
|
|
|
+ year: '',
|
|
|
+ termnum: {
|
|
|
+ batchnum: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ form: {},
|
|
|
+ events: [],
|
|
|
+ collapse: '1',
|
|
|
+ fields: [
|
|
|
+ { label: '期数', prop: 'term' },
|
|
|
+ { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
|
|
|
+ ],
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ icon: 'el-icon-delete',
|
|
|
+ method: 'delete',
|
|
|
+ confirm: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ heights: 250,
|
|
|
+ selected: [],
|
|
|
+ axiosData: {
|
|
|
+ termnum: [
|
|
|
+ {
|
|
|
+ term: '1',
|
|
|
+ batchnum: [
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '0',
|
|
|
+ number: '56',
|
|
|
+ color: '#0BEB95',
|
|
|
+ batch: '1',
|
|
|
+ class: '1',
|
|
|
+ title: '第1期第1批次',
|
|
|
+ id: 'p1580869239498',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '1',
|
|
|
+ number: '56',
|
|
|
+ color: '#409EFF',
|
|
|
+ name: '第一期特殊1班',
|
|
|
+ title: '第一期特殊1班',
|
|
|
+ id: 'p1580869422722',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ classnum: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ term: '2',
|
|
|
+ batchnum: [
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '0',
|
|
|
+ number: '56',
|
|
|
+ color: '#0BEB95',
|
|
|
+ batch: '1',
|
|
|
+ class: '1',
|
|
|
+ title: '第2期第1批次',
|
|
|
+ id: 'p1580869239490',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '1',
|
|
|
+ number: '56',
|
|
|
+ color: '#409EFF',
|
|
|
+ name: '第二期特殊1班',
|
|
|
+ title: '第二期特殊1班',
|
|
|
+ id: 'p1580869422723',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '1',
|
|
|
+ number: '56',
|
|
|
+ color: '#409EFF',
|
|
|
+ name: '第二期特殊2班',
|
|
|
+ title: '第二期特殊2班',
|
|
|
+ id: 'p1580869422726',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ classnum: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ term: '3',
|
|
|
+ batchnum: [
|
|
|
+ {
|
|
|
+ start: '2020-01-01',
|
|
|
+ end: '2020-01-09',
|
|
|
+ type: '0',
|
|
|
+ number: '56',
|
|
|
+ color: '#ff4444',
|
|
|
+ batch: '1',
|
|
|
+ class: '1',
|
|
|
+ title: '第3期第1批次',
|
|
|
+ id: 'p1580869239499',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ classnum: 1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ title: 'test',
|
|
|
+ year: 2020,
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ if (this.isNew) this.$set(this.info, `year`, new Date().getFullYear());
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // ...mapClass(['fetch', 'create', 'update']),
|
|
|
+ //查询计划
|
|
|
+ async search() {
|
|
|
+ // const res = await this.fetch(this.id);
|
|
|
+ // 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 });
|
|
|
+ },
|
|
|
+ //日历事件点击事件
|
|
|
+ eventClick({ event }) {
|
|
|
+ let arr = this.events.filter(fil => fil.id == event.id);
|
|
|
+ let object = {};
|
|
|
+ if (arr.length > 0) object = arr[0];
|
|
|
+ else {
|
|
|
+ console.warn(`无对应id事件`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let { term, type, name } = object;
|
|
|
+ //查重,先查期数一致,再查类型
|
|
|
+ //期数没有,则加入;期数有,则看类型,如果是普通班级,则不加入;如果是特殊班级,则查该期是否有特殊班级的id,没有就加入
|
|
|
+ let data = { term, type, name };
|
|
|
+ let re = () => {
|
|
|
+ this.$notify({
|
|
|
+ title: '重复添加该期',
|
|
|
+ });
|
|
|
+ };
|
|
|
+ let push = data => {
|
|
|
+ this.selected.push(data);
|
|
|
+ this.$notify({
|
|
|
+ title: '已添加',
|
|
|
+ });
|
|
|
+ };
|
|
|
+ if (_.findIndex(this.selected, i => i.term === term) >= 0) {
|
|
|
+ //重复加入
|
|
|
+ if (type === '0') re();
|
|
|
+ else {
|
|
|
+ // TODO此处需要根据实际有没有id可以区分开每期特殊班和特殊班,目前用name来区分
|
|
|
+ let res = _.findIndex(this.selected, i => {
|
|
|
+ if (i.name) return i.name === name;
|
|
|
+ else return false;
|
|
|
+ });
|
|
|
+ //特殊班重复加入
|
|
|
+ if (res > 0) re();
|
|
|
+ else push(data); //加入
|
|
|
+ }
|
|
|
+ } else push(data);
|
|
|
+ },
|
|
|
+ //列表删除事件
|
|
|
+ toDelete({ data, index }) {
|
|
|
+ this.selected.splice(index, 1);
|
|
|
+ },
|
|
|
+ //保存计划事件
|
|
|
+ savePlan() {
|
|
|
+ // 获取已选择的时间
|
|
|
+ let data = JSON.parse(JSON.stringify(this.selected));
|
|
|
+ //TODO整理数据
|
|
|
+ //TODO 连接接口
|
|
|
+ },
|
|
|
+ setHeight() {
|
|
|
+ let heights = this.$refs.card.$el.clientHeight * 0.63;
|
|
|
+ this.$set(this, `heights`, heights);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isNew: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ if (val) this.loading = false;
|
|
|
+ else this.search();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ widths() {
|
|
|
+ let width = (document.body.clientWidth - 200) * 0.5;
|
|
|
+ return width > 400 ? width : 400;
|
|
|
+ },
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ isNew() {
|
|
|
+ return this.$route.query.id ? true : false; //false : true;
|
|
|
+ },
|
|
|
+ mainTitle() {
|
|
|
+ let meta = this.$route.meta;
|
|
|
+ let main = meta.title || '';
|
|
|
+ let sub = meta.sub || '';
|
|
|
+ return `${main}${sub}`;
|
|
|
+ },
|
|
|
+ keyWord() {
|
|
|
+ let meta = this.$route.meta;
|
|
|
+ let main = meta.title || '';
|
|
|
+ return main;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-divider--horizontal {
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+</style>
|
