排班完成,正在做排课

src/main.js

@@ -6,6 +6,7 @@ import '@/plugins/meta';
 import '@/plugins/axios';
 import '@/plugins/check-res';
 import '@/plugins/element';
+import '@/plugins/dateM';
 
 Vue.config.productionTip = false;
 

src/plugins/dateM.js

@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import _ from 'lodash';
+const vm = new Vue({});
+const Plugin = {
+  install(Vue, options) {
+    Vue.prototype.$fullDateString = (date, type) => {
+      let res;
+      let dStr = date.toLocaleDateString();
+      let arr = dStr.split('/');
+      let year = parseInt(arr[0]);
+      let month = parseInt(arr[1]) >= 10 ? parseInt(arr[1]) : `0${parseInt(arr[1])}`;
+      let day = parseInt(arr[2]) >= 10 ? parseInt(arr[2]) : `0${parseInt(arr[2])}`;
+      res = `${year}-${month}-${day}`;
+      if (type === 'datetime') {
+        let tStr = date.toLocaleTimeString();
+        res = `${res} ${tStr}`;
+      }
+      return res;
+    };
+  },
+};
+Vue.use(Plugin);

src/router/index.js

@@ -233,6 +233,12 @@ const routes = [
         meta: { title: '安排', sub: '班级' },
         component: () => import('@/views/plan/classes.vue'),
       },
+      {
+        path: '/plan/lesson',
+        name: 'plan_lesson',
+        meta: { title: '安排', sub: '班级' },
+        component: () => import('@/views/plan/lesson.vue'),
+      },
     ],
   },
 ];

src/views/plan/classes.vue

@@ -40,7 +40,7 @@
         :data="list"
         :opera="opera"
         :select="true"
-        :selected.sync="selected"
+        :selected="selected"
         @edit="toEdit"
         @delete="toDelete"
         @handleSelect="toSelect"
@@ -94,7 +94,14 @@ export default {
     ],
     filterFields: [{ label: '期数', model: 'term' }],
     list: [{ id: 1, name: '学生1', school: '测试学校1', gender: '男' }],
-    selected: [],
+    selected: [
+      { id: 2, name: '学生2', school: '测试学校2', gender: '女' },
+      { id: 3, name: '学生3', school: '测试学校3', gender: '男' },
+      { id: 4, name: '学生4', school: '测试学校4', gender: '女' },
+      { id: 17, name: '学生17', school: '测试学校17', gender: '女' },
+      { id: 18, name: '学生18', school: '测试学校18', gender: '男' },
+      { id: 19, name: '学生19', school: '测试学校19', gender: '女' },
+    ],
     selectedTest: [
       { id: 1, name: '学生1', school: '测试学校1', gender: '男' },
       { id: 2 },
@@ -142,9 +149,7 @@ export default {
     async search({ skip = 0, limit = 10, ...info } = {}) {
       if (skip === 0) this.$set(this, `list`, this.testData1);
       else this.$set(this, `list`, this.testData2);
-      this.$nextTick(() => {
-        this.$refs.table.setSelectTable();
-      });
+      // this.$refs.table.init;
       // const res = await this.query({ skip, limit, ...info });
       // if (this.$checkRes(res)) {
       //   this.$set(this, `list`, res.data);

src/views/plan/lesson-plan.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="lesson-plan">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item v-for="(item, index) in classList" :key="`coli${index}`" :name="`${index}`">
+        <template slot="title">
+          <span style="font-size:24px">{{ item.term }}期{{ item.batch }}批{{ index + 1 }}班</span>
+        </template>
+        <data-table style="padding:10px" ref="table" :fields="fields" :data="item.setting" :opera="opera" @edit="toEdit"></data-table>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import dataTable from '@frame/components/data-table';
+export default {
+  name: 'lesson-plan',
+  props: {
+    start: { type: String, required: true },
+    end: { type: String, required: true },
+    classes: { type: Array, default: () => [] },
+  },
+  components: { dataTable },
+  data: () => ({
+    activeName: '0',
+    dateList: [],
+    classList: [],
+    fields: [
+      { label: '日期', prop: 'date' },
+      { label: '星期', prop: 'week' },
+      { label: '课程', prop: 'lesson' },
+      { label: '任课教师', prop: 'teacher' },
+    ],
+    opera: [
+      {
+        label: '安排课程及教师',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+    ],
+  }),
+  created() {
+    this.setDateList();
+    this.setClasses();
+  },
+  methods: {
+    setDateList() {
+      let start = new Date(this.start);
+      let end = new Date(this.end);
+      let day = (end.getTime() - start.getTime()) / (1 * 24 * 60 * 60 * 1000);
+      let arr = [];
+      for (let index = 0; index <= day; index++) {
+        let s = new Date(JSON.parse(JSON.stringify(start)));
+        let i = s.setDate(s.getDate() + index);
+        i = this.$fullDateString(new Date(i));
+        let object = {
+          date: i,
+          week: new Date(i).getDay() === 0 ? 7 : new Date(i).getDay(),
+        };
+        arr.push(object);
+      }
+      this.$set(this, `dateList`, arr);
+    },
+    setClasses() {
+      let classes = JSON.parse(JSON.stringify(this.classes));
+      classes.map(i => {
+        // i.dateList = JSON.parse(JSON.stringify(this.dateList));
+        i.setting = JSON.parse(JSON.stringify(this.dateList));
+        return i;
+      });
+      this.$set(this, `classList`, classes);
+    },
+    toEdit({ data }) {
+      //班级信息
+      let sClass = JSON.parse(JSON.stringify(this.classes[this.activeName]));
+      //点击的日期,星期
+      let arrange = data;
+      //TODO 将信息整合然后使用drawer或者dialog,显示班级信息,点击的日期信息;让用户选择课程=>根据选择的课程查询可以教课的老师,根据老师的评分排序(不一定谁做)
+    },
+  },
+  computed: {
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      return `${main}${sub}`;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/plan/lesson.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="lesson">
+    <transition name="el-zoom-in-center">
+      <list-frame v-if="view === 'list'" :title="mainTitle" @query="search" :total="total" :filter="filterFields" :needAdd="false">
+        <data-table ref="table" :fields="fields" :data="list" :opera="opera" @date="toDate"></data-table>
+      </list-frame>
+      <detail-frame v-else :title="detailTitle" :returns="returnList">
+        <lesson-plan start="2020-01-01" end="2020-01-07" :classes="classes"></lesson-plan>
+      </detail-frame>
+    </transition>
+  </div>
+</template>
+
+<script>
+import lessonPlan from './lesson-plan';
+import listFrame from '@frame/layout/admin/list-frame';
+import detailFrame from '@frame/layout/admin/detail-frame';
+import dataTable from '@frame/components/data-table';
+export default {
+  metaInfo: { title: '安排课程' },
+  name: 'lesson',
+  props: {},
+  components: { listFrame, dataTable, detailFrame, lessonPlan },
+  data: () => ({
+    view: 'list',
+    detailTitle: '',
+    opera: [
+      {
+        label: '排课',
+        icon: 'el-icon-date',
+        method: 'date',
+      },
+    ],
+    fields: [
+      { label: '期次', prop: 'term' },
+      { label: '批数', prop: 'batch' },
+    ],
+    filterFields: [{ label: '期数', model: 'term' }], //期数应该改成下拉,从计划里拿出来的
+    list: [{ term: 1, batch: 1 }],
+    total: 0,
+    classes: [
+      {
+        id: 1,
+        term: 336,
+        batch: 1,
+        name: '1班',
+      },
+      {
+        id: 2,
+        term: 336,
+        batch: 1,
+        name: '2班',
+      },
+      {
+        id: 3,
+        term: 336,
+        batch: 1,
+        name: '3班',
+      },
+    ],
+  }),
+  created() {},
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {},
+    toDate({ data }) {
+      this.view = 'lesson';
+      this.$set(this, `detailTitle`, `第${data.term}期 第${data.batch}批次`);
+    },
+    returnList() {
+      this.view = 'list';
+    },
+  },
+  computed: {
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      return `${main}${sub}`;
+    },
+    keyWord() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      return main;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/test/list.vue

@@ -1,148 +1,33 @@
 <template>
-  <div id="list">
-    <list-frame title="测试列表页" @query="search" :total="total" :filter="filFields">
-      <template #options>
-        <el-option v-for="(item, index) in lists" :key="index" :label="item.label" :value="item.value"></el-option>
-      </template>
-      <el-table ref="multipleTable" row-key="id" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
-        <el-table-column label="日期" width="120">
-          <template slot-scope="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
-        <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
-      </el-table>
-    </list-frame>
-  </div>
+  <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
+    <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
+    <el-table-column label="日期" width="120" prop="school"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+    <el-table-column prop="gender" label="地址" show-overflow-tooltip> </el-table-column>
+  </el-table>
 </template>
 
 <script>
-import listFrame from '@frame/layout/admin/list-frame';
-import dataTable from '@frame/components/data-table';
 export default {
-  metaInfo: { title: '测试列表页' },
-  name: 'list',
-  props: {},
-  components: {
-    listFrame,
-  },
-  data: () => ({
-    lists: [
-      { label: '男', value: 1 },
-      { label: '女', value: 0 },
-    ],
-    opera: [
-      {
-        label: '编辑',
-        icon: 'el-icon-edit',
-        method: 'edit',
-      },
-    ],
-    fields: [
-      { label: '姓名', prop: 'name' },
-      {
-        label: '性别',
-        prop: 'gender',
-        format: item => {
-          return item === '1' ? '男' : '女';
-        },
-      },
-    ],
-    list: [
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-      { name: 'test1', gender: '1' },
-      { name: 'test2', gender: '0' },
-    ],
-    filFields: [
-      { label: '姓名', model: 'name' },
-      {
-        label: '性别',
-        model: 'gender',
-        type: 'select',
-      },
-    ],
-    total: 0,
-    tableData: [
-      {
-        id: 1,
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 2,
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 3,
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 4,
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 5,
-        date: '2016-05-08',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 6,
-        date: '2016-05-06',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-      {
-        id: 7,
-        date: '2016-05-07',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄',
-      },
-    ],
-    multipleSelection: [],
-  }),
-  created() {
-    let obj = {
-      id: 1,
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄',
+  data() {
+    return {
+      tableData: [
+        { id: 1, name: '学生1', school: '测试学校1', gender: '男' },
+        { id: 2, name: '学生2', school: '测试学校2', gender: '女' },
+        { id: 3, name: '学生3', school: '测试学校3', gender: '男' },
+        { id: 4, name: '学生4', school: '测试学校4', gender: '女' },
+        { id: 5, name: '学生5', school: '测试学校5', gender: '男' },
+        { id: 6, name: '学生6', school: '测试学校6', gender: '男' },
+        { id: 7, name: '学生7', school: '测试学校7', gender: '女' },
+        { id: 8, name: '学生8', school: '测试学校8', gender: '男' },
+        { id: 9, name: '学生9', school: '测试学校9', gender: '女' },
+        { id: 10, name: '学生10', school: '测试学校10', gender: '男' },
+      ],
+      multipleSelection: [],
     };
-    this.multipleSelection.push(obj);
-    this.$nextTick(() => {
-      this.toggleSelection(this.multipleSelection);
-    });
   },
-  computed: {},
+
   methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {
-      console.log(`in search`);
-    },
-    toEdit({ data }) {
-      console.log(`in toEdit`);
-      console.log(data);
-      return data;
-    },
     toggleSelection(rows) {
       if (rows) {
         rows.forEach(row => {
@@ -153,11 +38,19 @@ export default {
       }
     },
     handleSelectionChange(val) {
-      console.log(val);
       this.multipleSelection = val;
     },
+    initSelection(ids) {
+      this.$refs.multipleTable.clearSelection();
+      if (ids) {
+        ids.forEach(id => {
+          this.$refs.multipleTable.toggleRowSelection(this.tableData.find(p => p.id === id));
+        });
+      }
+    },
+  },
+  mounted() {
+    this.initSelection([2, 3, 5]);
   },
 };
 </script>
-
-<style lang="less" scoped></style>

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
     //api地址前缀
     proxy: {
       '/api': {
-        target: 'http://10.16.9.108:8001',
+        target: 'http://free.liaoningdoupo.com', ///api/train
         changeOrigin: true,
         ws: true,
       },