修改中心端计划页面(将抽屉的表单提出组件,减少添加/修改计划页面的代码量)

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="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>
@@ -35,38 +35,7 @@
       </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" :isNew="formIsNew" :predefineColors="predefineColors" @save="saveForm"></event>
     </el-drawer>
     <el-dialog title="设置假期" :visible.sync="dialog">
       <vacation-form :list="vacation" @update="setVacation"></vacation-form>
@@ -79,6 +48,7 @@ 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 event from './detail/event';
 import _ from 'lodash';
 import { createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('plan');
@@ -87,7 +57,7 @@ export default {
   metaInfo: { title: '计划详情' },
   name: 'detail',
   props: {},
-  components: { detailFrame, calendar, dataTable, vacationForm },
+  components: { detailFrame, calendar, dataTable, vacationForm, event },
   data() {
     return {
       info: {
@@ -98,6 +68,7 @@ export default {
       },
 
       form: { color: '#409EFF' },
+      formIsNew: true,
       rules: {
         title: [{ required: true, message: '请输入标题' }],
       },
@@ -110,7 +81,7 @@ export default {
       },
       drawer: false,
       dialog: false,
-      events: [{ start: '2020-01-02', end: '2020-01-04', title: '1', color: 'red', editable: false }],
+      events: [],
       predefineColors: ['#409EFF'],
       collapse: '',
       fields: [
@@ -141,7 +112,8 @@ export default {
           position: 'left',
         },
       },
-      vacation: [{ start: '2020-01-02', end: '2020-01-04', title: '1', color: 'red', editable: false }],
+      selectList: [],
+      vacation: [],
     };
   },
   created() {
@@ -175,9 +147,14 @@ export default {
       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.drawer = true;
+      this.formIsNew = true;
     },
     //日历事件点击事件
     eventClick({ event }) {
@@ -188,11 +165,13 @@ 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 }) {
@@ -219,25 +198,13 @@ export default {
       //TODO 连接接口
     },
     //保存表单函数
-    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();
+    saveForm(events) {
+      this.setEvent(events);
     },
     //添加/修改函数
-    setEvent() {
+    setEvent({ data: form, isNew }) {
       //TODO 需要根据班级类型把数据分开
-      let data = JSON.parse(JSON.stringify(this.form));
+      let data = JSON.parse(JSON.stringify(form));
       let { start, end, term, type, number, color, id } = data;
       let object = {};
       if (data.type === '0') {
@@ -249,9 +216,10 @@ export default {
         let { name } = data;
         object = { start, end, term, type, number, color, name, title: name };
       }
-      if (!id) {
+      if (isNew) {
         object.id = `p${new Date().getTime()}`;
         this.events.push(object);
+        this.selectList.push(object);
       } else {
         object.id = id;
         this.$set(
@@ -259,6 +227,11 @@ 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);
@@ -267,7 +240,8 @@ export default {
     //关闭抽屉函数
     toClose() {
       this.drawer = false;
-      this.resetForm();
+      this.formIsNew = true;
+      this.setHeight();
     },
     setHeight() {
       let heights = this.$refs.card.$el.clientHeight * 0.63;
@@ -292,38 +266,38 @@ 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)}`);
+        // 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);
+        // 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);
+          // 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}`);
+          // console.log(`in else`);
+          // console.log(`endTime:${endTime}`);
+          // console.log(`vacS:${vacS}`);
           if (endTime < vacS) {
             res = false;
             break;
           }
         }
       }
-      console.log(res);
       //比较选择的时间在不在假期中,然后返回结果
+      return res;
     },
   },
   watch: {

src/views/plan/detail/event.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="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>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'event',
+  props: {
+    data: { type: Object, default: () => {} }, //数据
+    isNew: { type: Boolean, default: true }, //是不是修改
+    predefineColors: { type: Array, default: () => [] }, //颜色列表
+  },
+  components: {},
+  data: () => ({
+    form: { color: '#409EFF' },
+    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: '请选择班级类型' }],
+    },
+  }),
+  created() {},
+  methods: {
+    //保存表单函数
+    saveForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          // this.setEvent(); emit
+          this.$emit('save', { isNew: this.isNew, data: _.cloneDeep(this.form) });
+          this.resetForm();
+        } else {
+          console.warn('form validate error!!!');
+        }
+      });
+    },
+    //重置表单函数
+    resetForm() {
+      this.$refs.form.resetFields();
+    },
+  },
+  watch: {
+    data: {
+      immediate: true,
+      handler(val) {
+        if (val) this.$set(this, `form`, _.cloneDeep(this.data));
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>