更新

src/views/plan/detail.vue

@@ -14,7 +14,7 @@
 
               <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>
@@ -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,8 +75,6 @@
 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');
@@ -56,65 +82,73 @@ 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());
   },
@@ -123,41 +157,33 @@ export default {
     ...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);
+
+      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 = this.axiosData;
+
+      console.log(termnum);
+      this.$set(this, `events`, events);
+      this.$set(this, `termnum`, termnum);
     },
     //拖拽选择事件
     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,13 +194,11 @@ 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 }) {
@@ -215,13 +239,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 +269,9 @@ export default {
         let { name } = data;
         object = { start, end, term, type, number, color, name, title: name };
       }
-      if (isNew) {
+      if (!id) {
         object.id = `p${new Date().getTime()}`;
         this.events.push(object);
-        this.selectList.push(object);
       } else {
         object.id = id;
         this.$set(
@@ -244,78 +279,19 @@ 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.formIsNew = true;
-      this.setHeight();
+      this.resetForm();
     },
     setHeight() {
       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;
-          }
-        }
-      }
-      //比较选择的时间在不在假期中,然后返回结果
-      return res;
-    },
   },
   watch: {
     isNew: {