修改

src/views/plan/detail.vue

@@ -4,7 +4,7 @@
       <el-row :gutter="10" type="flex">
         <el-col :span="12">
           <el-card header="全年计划信息">
-            <el-form ref="planForm" :model="info" :rules="rules" :isNew="isNew" label-width="60px" size="small" @submit.native.prevent>
+            <el-form :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="events" :opera="opera" @edit="toEdit" @delete="toDelete" :height="heights"></data-table>
+                  <data-table :fields="fields" :data="selectList" :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="toSavePlan">保存全年计划</el-button>
+                    <el-button type="primary" @click="savePlan">保存全年计划</el-button>
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -28,46 +28,18 @@
           </el-card>
         </el-col>
         <el-col :span="16" :style="`width:${widths}px`">
-          <el-card ref="card">
-            <calendar @draft="selectDate" @eventClick="eventClick" :events="events"></calendar>
+          <el-card ref="card" v-if="info.year">
+            <calendar :year="`${info.year}`" :selfBtn="selfBtn" @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">
-      <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>
+      <event :data="form" :year="info.year" :vacation="vacation" :isNew="formIsNew" :predefineColors="predefineColors" @save="setEvent"></event>
     </el-drawer>
+    <el-dialog title="设置假期" :visible.sync="dialog">
+      <vacation-form :list="vacation" @update="setVacation"></vacation-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -75,6 +47,8 @@
 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 { createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('trainplan');
@@ -82,73 +56,59 @@ export default {
   metaInfo: { title: '计划详情' },
   name: 'detail',
   props: {},
-  components: { detailFrame, calendar, dataTable },
-  data: () => ({
-    termnum: [],
-    info: {
-      year: '',
-      termnum: {
-        batchnum: [],
+  components: { detailFrame, calendar, dataTable, event, vacationForm },
+  data() {
+    return {
+      info: {},
+      form: { color: '#409EFF' },
+      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',
-      },
-      {
-        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: [],
-          classnum: 2,
-        },
+      drawer: false,
+      dialog: false,
+      formIsNew: true,
+      events: [],
+      predefineColors: ['#409EFF'],
+      collapse: '',
+      fields: [
+        { label: '开始时间', prop: 'start' },
+        { label: '结束时间', prop: 'end' },
+        { label: '期数', prop: 'term' },
+        { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
+      ],
+      opera: [
         {
-          term: '2',
-          batchnum: [],
-          classnum: 3,
+          label: '编辑',
+          icon: 'el-icon-edit',
+          method: 'edit',
         },
         {
-          term: '3',
-          batchnum: [],
-          classnum: 1,
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+          confirm: true,
         },
       ],
-      title: '',
-      year: 2020,
-    },
-  }),
+      heights: 250,
+      selfBtn: {
+        vacation: {
+          text: '设置假期',
+          //设置假期
+          click: () => (this.dialog = true),
+          position: 'left',
+        },
+      },
+      selectList: [],
+      vacation: [],
+    };
+  },
   created() {
     if (this.isNew) this.$set(this.info, `year`, new Date().getFullYear());
   },
@@ -197,10 +157,12 @@ export default {
         return;
       }
       this.drawer = true;
+      this.formIsNew = false;
     },
     //列表编辑事件
     toEdit({ data, index }) {
       this.$set(this, `form`, JSON.parse(JSON.stringify(data)));
+      this.formIsNew = false;
       this.drawer = true;
     },
     //列表删除事件
@@ -219,12 +181,8 @@ export default {
     },
     //保存计划事件
     savePlan() {
-      //全年计划内容
-
       let data = JSON.parse(JSON.stringify(this.info));
-
       data.year = this.info.year;
-      console.log(data.year);
       let termnum = [];
       //1,获取所有期数
       //2,按期数将selectList内数据分组
@@ -266,26 +224,16 @@ export default {
       }
       if (this.$checkRes(res, msg)) this.$router.push({ path: '/plan/index' });
     },
-    //保存表单函数
-    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() {
+    setEvent({ data: form, isNew }) {
       //TODO 需要根据班级类型把数据分开
-      let data = JSON.parse(JSON.stringify(this.form));
+      console.log(isNew);
+      let data = JSON.parse(JSON.stringify(form));
       let { start, end, term, type, number, color, id } = data;
       let object = {};
       if (data.type === '0') {
@@ -297,9 +245,10 @@ export default {
         let { name } = data;
         object = { start, end, term, type, number, color, name, title: name };
       }
-      if (this.isNew) {
+      if (isNew) {
         object.id = `eve${new Date().getTime()}`;
         this.events.push(object);
+        this.selectList.push(object);
       } else {
         object.id = id;
         this.$set(
@@ -307,9 +256,14 @@ export default {
           _.findIndex(this.events, item => item.id == object.id),
           object
         );
-        this.drawer = false;
+        this.$set(
+          this.selectList,
+          _.findIndex(this.selectList, item => item.id == object.id),
+          object
+        );
       }
       if (_.findIndex(this.predefineColors, item => item == data.color) < 0) this.predefineColors.push(data.color);
+      this.toClose();
     },
     //关闭抽屉函数
     toClose() {

src/views/plan/parts/event.vue

@@ -68,9 +68,9 @@ export default {
     saveForm() {
       this.$refs['form'].validate(valid => {
         if (valid) {
-          // this.setEvent(); emit
-          this.$emit('save', { isNew: this.isNew, data: _.cloneDeep(this.form) });
+          let data = JSON.parse(JSON.stringify(this.form));
           this.resetForm();
+          this.$emit('save', { isNew: this.isNew, data });
         } else {
           console.warn('form validate error!!!');
         }