全年计划

src/views/plan/detail.vue

@@ -17,6 +17,13 @@
                   <data-table :fields="fields" :data="events" :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="savePlan">保存全年计划</el-button>
+                  </el-col>
+                </el-row>
+              </el-form-item>
             </el-form>
           </el-card>
         </el-col>
@@ -36,16 +43,16 @@
           <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="batch" required> <el-input v-model="form.batch"></el-input> </el-form-item>
-        <el-form-item label="班级数量" prop="class" required> <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" required> <el-input v-model="form.name"></el-input> </el-form-item>
-        <el-form-item label="班级类型" prop="start" required>
-          <el-radio-group v-model="form.type" prop="type">
+        <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>
@@ -81,6 +88,7 @@ export default {
         batchnum: [],
       },
     },
+    year: '',
     form: { color: '#409EFF' },
     rules: {
       title: [{ required: true, message: '请输入标题' }],
@@ -89,10 +97,7 @@ export default {
       start: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
       end: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
       term: [{ required: true, message: '请输入期数' }],
-      batch: [{ required: true, message: '请输入批次' }],
-      class: [{ required: true, message: '请输入班级数量' }],
       number: [{ required: true, message: '请输入每班人数' }],
-      name: [{ required: true, message: '请输入班级名称' }],
       type: [{ required: true, message: '请选择班级类型' }],
     },
     drawer: false,
@@ -103,10 +108,6 @@ export default {
       { label: '开始时间', prop: 'start' },
       { label: '结束时间', prop: 'end' },
       { label: '期数', prop: 'term' },
-      { label: '批次', prop: 'batch' },
-      { label: '班级数量', prop: 'class' },
-      { label: '每班人数', prop: 'number' },
-      { label: '班级名称', prop: 'name' },
       { label: '班级类型', prop: 'type', format: item => (item === '0' ? '正常班级' : '特殊班级') },
     ],
     opera: [
@@ -123,16 +124,118 @@ export default {
       },
     ],
     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: 'p1580869422726',
+            },
+          ],
+          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: 'p1580869239498',
+            },
+            {
+              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: '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() {},
+  created() {
+    if (this.isNew) this.$set(this, `year`, new Date().getFullYear());
+  },
   mounted() {},
   methods: {
     // ...mapClass(['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;
+      // 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 });
+      this.$set(this, `year`, year);
     },
     selectDate(object) {
       this.$set(this.form, `start`, JSON.parse(JSON.stringify(object.startStr)));
@@ -140,7 +243,13 @@ export default {
       this.drawer = true;
     },
     eventClick({ event }) {
-      console.log(event);
+      let arr = this.events.filter(fil => fil.id == event.id);
+      if (arr.length > 0) this.form = arr[0];
+      else {
+        console.warn(`无对应id事件`);
+        return;
+      }
+      this.drawer = true;
     },
     toEdit({ data, index }) {
       this.$set(this, `form`, JSON.parse(JSON.stringify(data)));
@@ -149,6 +258,25 @@ export default {
     toDelete({ data, index }) {
       this.events.splice(index, 1);
     },
+    savePlan() {
+      //全年计划内容
+      let data = JSON.parse(JSON.stringify(this.info));
+      data.year = this.year;
+      let termnum = [];
+      //1,获取所有期数
+      //2,按期数将events内数据分组
+      termnum = _.uniq(this.events.map(item => item.term)).map(i => {
+        let object = { term: i };
+        object.batchnum = this.events.filter(fil => fil.term === i).map(b => _.pickBy(b, (val, key) => key !== 'term'));
+        object.classnum = object.batchnum.reduce((pre, cur) => {
+          if (cur.type === '0') return pre + parseInt(cur.class);
+          else return pre + 1;
+        }, 0);
+        return object;
+      });
+      data.termnum = termnum;
+      //TODO 连接接口
+    },
     saveForm() {
       this.$refs['form'].validate(valid => {
         if (valid) {
@@ -164,17 +292,30 @@ export default {
       this.setHeight();
     },
     setEvent() {
+      //TODO 需要根据班级类型把数据分开
       let data = JSON.parse(JSON.stringify(this.form));
-      let object = { ...data, title: `第${JSON.parse(JSON.stringify(data.term))}期第${JSON.parse(JSON.stringify(data.batch))}批次` };
-      if (!object.id) {
+      let { start, end, term, type, number, color, id } = data;
+      let object = {};
+      if (data.type === '0') {
+        // 正常班级
+        let { batch, class: classes } = data;
+        object = { start, end, term, type, number, color, batch, class: classes };
+        object.title = `第${JSON.parse(JSON.stringify(term))}期第${JSON.parse(JSON.stringify(batch))}批次`;
+      } else {
+        let { name } = data;
+        object = { start, end, term, type, number, color, name, title: name };
+      }
+      if (!id) {
         object.id = `p${new Date().getTime()}`;
         this.events.push(object);
       } else {
+        object.id = id;
         this.$set(
           this.events,
           _.findIndex(this.events, item => item.id == object.id),
           object
         );
+        this.drawer = false;
       }
       if (_.findIndex(this.predefineColors, item => item == data.color) < 0) this.predefineColors.push(data.color);
     },
@@ -205,11 +346,7 @@ export default {
       return this.$route.query.id;
     },
     isNew() {
-      return this.$route.query.id ? false : true;
-    },
-    year() {
-      if (this.isNew) return new Date().getFullYear();
-      else return new Date().getFullYear();
+      return this.$route.query.id ? true : false; //false : true;
     },
     mainTitle() {
       let meta = this.$route.meta;