合并

src/router/index.js

@@ -124,13 +124,18 @@ const routes = [
         meta: { title: '作业题', sub: '管理' },
         component: () => import('@/views/work/look.vue'),
       },
-
       {
         path: '/work/lookdetail',
         name: 'work_lookdetail',
         meta: { title: '作业题', sub: '详情' },
         component: () => import('@/views/work/lookdetail.vue'),
       },
+      {
+        path: '/timeTable/index',
+        name: 'timeTable_index',
+        meta: { title: '课程表', sub: '管理' },
+        component: () => import('@/views/timeTable/index.vue'),
+      },
       {
         path: '/subject/index',
         name: 'subject_index',

src/store/index.js

@@ -13,6 +13,7 @@ import questionnaire from './questionnaire';
 import teacher from './teacher';
 import trainplan from './trainplan';
 
+import plan from './plan';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -29,6 +30,7 @@ export default new Vuex.Store({
     questionnaire,
     teacher,
     trainplan,
+    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

@@ -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>
@@ -29,45 +29,17 @@
         </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>
     </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>
+    </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 { mapActions, mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapClass } = createNamespacedHelpers('trainplan');
@@ -82,72 +56,65 @@ export default {
   metaInfo: { title: '计划详情' },
   name: 'detail',
   props: {},
-  components: { detailFrame, calendar, dataTable },
-  data: () => ({
-    info: {
-      year: '',
-      termnum: {
-        batchnum: [],
+  components: { detailFrame, calendar, dataTable, vacationForm, event },
+  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' },
+      formIsNew: true,
+      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: [
+      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: [
         {
-          term: '1',
-          batchnum: [],
-          classnum: 2,
+          label: '编辑',
+          icon: 'el-icon-edit',
+          method: 'edit',
         },
         {
-          term: '2',
-          batchnum: [],
-          classnum: 3,
-        },
-        {
-          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());
   },
@@ -156,34 +123,41 @@ export default {
     ...mapClass(['fetch', 'create', 'update']),
     // ...mapClass(['fetch', 'create', 'update']),
     //查询计划
+
+    ...mapActions(['fetch', 'create', 'update']),
+    //查询计划
     async search() {
       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;
-        })
-      );
-      console.log(events);
-      let { termnum, year, title } = this.axiosData;
-
-      this.$set(this, `events`, events);
-
-      this.$set(this, `info`, { title, year });
+      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 });
     },
     //拖拽选择事件
     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);
+      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 }) {
@@ -194,11 +168,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 }) {
@@ -239,25 +215,13 @@ 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();
+    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') {
@@ -269,9 +233,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(
@@ -279,19 +244,78 @@ 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.resetForm();
+      this.formIsNew = true;
+      this.setHeight();
     },
     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: {

src/views/plan/index.vue

@@ -11,6 +11,7 @@ import listFrame from '@frame/layout/admin/list-frame';
 import dataTable from '@frame/components/data-table';
 import { createNamespacedHelpers } from 'vuex';
 const { mapActions } = createNamespacedHelpers('trainplan');
+
 export default {
   metaInfo: { title: '计划管理' },
   name: 'index',

src/views/plan/parts/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>

src/views/plan/parts/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/timeTable/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div id="index">
+    <list-frame title="课程表列表" :total="total" :needFilter="false" :needAdd="false">
+      <el-row>
+        <el-col :span="24" class="timeTable" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="top">
+            <el-col :span="24" class="title"> 2020年第（{{ item.term }}）期高校大学生就业能力拓展训练课程表（{{ item.class }}） </el-col>
+            <el-col :span="24" class="date">
+              （2月-12日—2月-18日）
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="info">
+            <table border="1" class="table">
+              <tr>
+                <th colspan="2" class="th">
+                  <p style="text-align:left;padding:0 10px;color:#000;">星期</p>
+                  <p style="text-align:center;padding:0 10px;color:#000;">课程</p>
+                  <p style="text-align:right;padding:0 10px;color:#000;">时间</p>
+                </th>
+                <th class="th">
+                  <p>周三</p>
+                  <p>（2月12日）</p>
+                </th>
+                <th class="th">
+                  <p>周四</p>
+                  <p>（2月13日）</p>
+                </th>
+                <th class="th">
+                  <p>周五</p>
+                  <p>（2月14日）</p>
+                </th>
+                <th class="th">
+                  <p>周六</p>
+                  <p>（2月15日）</p>
+                </th>
+                <th class="th">
+                  <p>周日</p>
+                  <p>（2月16日）</p>
+                </th>
+                <th class="th">
+                  <p>周一</p>
+                  <p>（2月17日）</p>
+                </th>
+                <th class="th beizhu">备注</th>
+              </tr>
+              <tr>
+                <td rowspan="2">上午</td>
+                <td>8:30-11:30</td>
+                <td>--</td>
+                <td v-for="(tag, index) in item.lessons" :key="index">
+                  <p>{{ tag.name }}</p>
+                  <p class="teacherName">{{ tag.teacherName }}</p>
+                </td>
+                <td rowspan="5">
+                  <p>
+                    上课地点：<span>{{ item.address }}</span>
+                  </p>
+                  <p>
+                    班主任：<span class="teacherName">{{ item.banzhuren }}</span>
+                  </p>
+                  <p>
+                    礼仪课：<span class="teacherName">{{ item.liyike }}</span>
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <td>11:30-13:30</td>
+                <td>--</td>
+                <td colspan="5">午餐+休息</td>
+              </tr>
+              <tr class="fourth">
+                <td rowspan="3">下午</td>
+                <td>13:30-16:30</td>
+                <td>
+                  13:30开始报到 <br />（教育宾馆大厅）<br />
+                  15:30开班仪式 <br />（教育宾馆六楼）
+                </td>
+                <td v-for="(tag, index) in item.lessons" :key="index">
+                  <p>{{ tag.name }}</p>
+                  <p class="teacherName">{{ tag.teacherName }}</p>
+                </td>
+              </tr>
+              <tr>
+                <td>16:30-17:30</td>
+                <td colspan="5">晚餐</td>
+                <td>--</td>
+              </tr>
+              <tr>
+                <td>17:30-19:45</td>
+                <td>团队组建</td>
+                <td>拓展交流</td>
+                <td>课程作业<br />小组展示</td>
+                <td>课程作业</td>
+                <td>礼仪课<br />小组面试</td>
+                <td>结业仪式</td>
+              </tr>
+            </table>
+          </el-col>
+        </el-col>
+      </el-row>
+    </list-frame>
+  </div>
+</template>
+
+<script>
+import listFrame from '@frame/layout/admin/list-frame';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    listFrame,
+  },
+  data: () => ({
+    list: [
+      {
+        term: '1',
+        class: '一班',
+        address: '教学楼四楼',
+        banzhuren: '栾莹',
+        liyike: '史永姣',
+        lessons: [
+          {
+            name: '拓展训练',
+            teacherName: '测试人',
+          },
+          {
+            name: '职业探索',
+            teacherName: '测试人',
+          },
+          {
+            name: '优势挖掘',
+            teacherName: '测试人',
+          },
+          {
+            name: '简历制作',
+            teacherName: '测试人',
+          },
+          {
+            name: '模拟面试',
+            teacherName: '测试人',
+          },
+        ],
+      },
+    ],
+    total: 0,
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.top .title {
+  text-align: center;
+  font-size: 30px;
+}
+.top .date {
+  text-align: center;
+  font-size: 25px;
+  color: #ff0000;
+  padding: 10px 0;
+}
+.th {
+  width: 120px !important;
+  height: 40px !important;
+}
+.th p {
+  color: #ff0000;
+}
+.th .beizhu {
+  color: #000;
+}
+.table tr td {
+  text-align: center;
+  padding: 15px 5px;
+  font-size: 15px;
+  color: #000;
+}
+.teacherName {
+  color: #ff0000;
+}
+.fourth td:nth-child(8n) p {
+  display: none;
+}
+</style>