中心端添加假期

src/store/index.js

@@ -11,6 +11,7 @@ import subject from './subject';
 import question from './question';
 import questionnaire from './questionnaire';
 import teacher from './teacher';
+import plan from './plan';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -26,6 +27,7 @@ export default new Vuex.Store({
     question,
     questionnaire,
     teacher,
+    plan,
   },
   state: {},
   mutations: {},

src/store/plan.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/train/trainplan`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.interface}`, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.interface}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/plan/detail.vue

@@ -29,7 +29,7 @@
         </el-col>
         <el-col :span="16" :style="`width:${widths}px`">
           <el-card ref="card">
-            <calendar @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
+            <calendar :selfBtn="selfBtn" @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
           </el-card>
         </el-col>
       </el-row>
@@ -68,6 +68,9 @@
         </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>
 
@@ -75,173 +78,105 @@
 import detailFrame from '@frame/layout/admin/detail-frame';
 import calendar from '@frame/components/calendar';
 import dataTable from '@frame/components/data-table';
+import vacationForm from './detail/vacation';
 import _ from 'lodash';
-import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('plan');
+
 export default {
   metaInfo: { title: '计划详情' },
   name: 'detail',
   props: {},
-  components: { detailFrame, calendar, dataTable },
-  data: () => ({
-    info: {
-      year: '',
-      termnum: {
-        batchnum: [],
+  components: { detailFrame, calendar, dataTable, vacationForm },
+  data() {
+    return {
+      info: {
+        year: '',
+        termnum: {
+          batchnum: [],
+        },
       },
-    },
 
-    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',
+      form: { color: '#409EFF' },
+      rules: {
+        title: [{ required: true, message: '请输入标题' }],
       },
-      {
-        label: '删除',
-        icon: 'el-icon-delete',
-        method: 'delete',
-        confirm: true,
+      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: '请选择班级类型' }],
       },
-    ],
-    heights: 250,
-    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: 'p1580869422724',
-            },
-          ],
-          classnum: 2,
-        },
+      drawer: false,
+      dialog: false,
+      events: [{ start: '2020-01-02', end: '2020-01-04', title: '1', color: 'red', editable: false }],
+      predefineColors: ['#409EFF'],
+      collapse: '',
+      fields: [
+        { label: '开始时间', prop: 'start' },
+        { label: '结束时间', prop: 'end' },
+        { label: '期数', prop: 'term' },
+        { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
+      ],
+      opera: [
         {
-          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: 'p1580869422726',
-            },
-            {
-              start: '2020-01-01',
-              end: '2020-01-09',
-              type: '1',
-              number: '56',
-              color: '#409EFF',
-              name: '第二期特殊2班',
-              title: '第二期特殊2班',
-              id: 'p1580869422725',
-            },
-          ],
-          classnum: 3,
+          label: '编辑',
+          icon: 'el-icon-edit',
+          method: 'edit',
         },
         {
-          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,
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+          confirm: true,
         },
       ],
-      title: 'test',
-      year: 2020,
-    },
-  }),
+      heights: 250,
+      selfBtn: {
+        vacation: {
+          text: '设置假期',
+          //设置假期
+          click: () => (this.dialog = true),
+          position: 'left',
+        },
+      },
+      vacation: [{ start: '2020-01-02', end: '2020-01-04', title: '1', color: 'red', editable: false }],
+    };
+  },
   created() {
     if (this.isNew) this.$set(this.info, `year`, new Date().getFullYear());
   },
   mounted() {},
   methods: {
-    // ...mapClass(['fetch', 'create', 'update']),
+    ...mapActions(['fetch', 'create', 'update']),
     //查询计划
     async search() {
-      // const res = await this.fetch(this.id);
+      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 });
+      // 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 });
     },
     //拖拽选择事件
     selectDate(object) {
-      this.$set(this.form, `start`, JSON.parse(JSON.stringify(object.startStr)));
-      this.$set(this.form, `end`, JSON.parse(JSON.stringify(object.endStr)));
+      let start = JSON.parse(JSON.stringify(object.startStr));
+      let end = JSON.parse(JSON.stringify(object.endStr));
+      let res = this.inVacation(start, end);
+      this.$set(this.form, `start`, start);
+      this.$set(this.form, `end`, end);
       this.drawer = true;
     },
     //日历事件点击事件
@@ -327,6 +262,7 @@ export default {
         this.drawer = false;
       }
       if (_.findIndex(this.predefineColors, item => item == data.color) < 0) this.predefineColors.push(data.color);
+      this.toClose();
     },
     //关闭抽屉函数
     toClose() {
@@ -337,6 +273,58 @@ export default {
       let heights = this.$refs.card.$el.clientHeight * 0.63;
       this.$set(this, `heights`, heights);
     },
+    //更新假期列表
+    setVacation(data) {
+      console.log(data);
+      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));
+    },
+    //判断是否在假期中
+    inVacation(start, end) {
+      let startTime = new Date(start).getTime();
+      let endTime = new Date(end).getTime();
+      let res = true;
+      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);
+        if (startTime >= vacS) {
+          console.log(`in if`);
+          console.log(`startTime:${startTime}`);
+          console.log(`vacE:${vacE}`);
+          console.log(startTime < vacE);
+          if (startTime < vacE) {
+            res = false;
+            break;
+          }
+        } else {
+          //case1
+          console.log(`in else`);
+          console.log(`endTime:${endTime}`);
+          console.log(`vacS:${vacS}`);
+          if (endTime < vacS) {
+            res = false;
+            break;
+          }
+        }
+      }
+      console.log(res);
+      //比较选择的时间在不在假期中,然后返回结果
+    },
   },
   watch: {
     isNew: {
@@ -356,7 +344,7 @@ export default {
       return this.$route.query.id;
     },
     isNew() {
-      return this.$route.query.id ? true : false; //false : true;
+      return this.$route.query.id ? false : true;
     },
     mainTitle() {
       let meta = this.$route.meta;

src/views/plan/detail/vacation.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="vacation">
+    <el-row>
+      <el-col :span="24">
+        <data-form :data="form" :fields="formFields" :rules="rules" @save="handleSave" :isNew="isNew"> </data-form>
+      </el-col>
+      <el-col :span="24">
+        <data-table :fields="fields" :data="data" :opera="opera" @edit="toEdit" @delete="toDelete" :height="300"></data-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataTable from '@frame/components/data-table';
+import dataForm from '@frame/components/form';
+import _ from 'lodash';
+export default {
+  name: 'vacation',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: { dataTable, dataForm },
+  data: () => ({
+    data: [],
+    form: {},
+    isNew: true,
+    formFields: [
+      { label: '标题', required: true, model: 'title' },
+      { label: '开始时间', required: true, model: 'start', type: 'date' },
+      { label: '结束时间', required: true, model: 'end', type: 'date' },
+    ],
+    rules: {
+      title: [{ required: true, message: '请输入标题' }],
+      start: [{ required: true, message: '请选择开始时间' }],
+      end: [{ required: true, message: '请选择结束时间' }],
+    },
+    fields: [
+      { label: '标题', prop: 'title' },
+      { label: '开始时间', prop: 'start' },
+      { label: '结束时间', prop: 'end' },
+    ],
+    opera: [
+      {
+        label: '编辑',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+    ],
+  }),
+  created() {},
+  methods: {
+    toEdit({ data, index }) {
+      console.log(data, index);
+      this.form = JSON.parse(JSON.stringify(data));
+      this.isNew = false;
+    },
+    toDelete({ data, index }) {},
+    handleSave({ data, isNew }) {
+      console.log(data, isNew);
+      //添加,删除,修改,都只是操作本组件的数组,然后将本组件的数组=>传回父组件=>父组件更新=>子组件更新
+      if (isNew) {
+        let arr = JSON.parse(JSON.stringify(this.data));
+        arr.push(data);
+        this.$emit(`update`, arr);
+      } else console.log(`in update`);
+      this.isNew = true;
+    },
+  },
+  watch: {
+    list: {
+      immediate: true,
+      handler(val) {
+        let mid = _.cloneDeep(val);
+        this.$set(this, `data`, mid);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/plan/index.vue

@@ -10,7 +10,7 @@
 import listFrame from '@frame/layout/admin/list-frame';
 import dataTable from '@frame/components/data-table';
 import { createNamespacedHelpers } from 'vuex';
-const { mapActions } = createNamespacedHelpers('dept');
+const { mapActions } = createNamespacedHelpers('plan');
 export default {
   metaInfo: { title: '计划管理' },
   name: 'index',
@@ -48,7 +48,7 @@ export default {
     total: 0,
   }),
   created() {
-    // this.search();
+    this.search();
   },
   methods: {
     ...mapActions(['query', 'delete']),
@@ -60,7 +60,7 @@ export default {
       }
     },
     toEdit({ data }) {
-      this.$router.push({ path: '/dept/detail', query: { id: data.id } });
+      this.$router.push({ path: '/plan/detail', query: { id: data.id } });
     },
     async toDelete({ data }) {
       const res = await this.delete(data.id);