更新

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

@@ -227,6 +227,18 @@ const routes = [
         meta: { title: '计划', sub: '详情' },
         component: () => import('@/views/plan/detail.vue'),
       },
+      {
+        path: '/plan/classes',
+        name: 'plan_classes',
+        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

@@ -0,0 +1,206 @@
+<template>
+  <div id="plan">
+    <!-- 根据计划,获取所有期数及期数下批次,然后提供选择期数;查询出该期数下学校上报的学生,选择学生手动分班 -->
+    <list-frame :title="mainTitle" @query="search" :total="total" :filter="filterFields" :needAdd="false">
+      <el-card>
+        <el-row type="flex" justify="space-around" :gutter="10" align="middle" style="padding:10px 0;">
+          <el-col :span="7">已选择学生:{{ selected.length }}人</el-col>
+          <el-col :span="7">男性:{{ selectInfo.male }}人</el-col>
+          <el-col :span="7">女性:{{ selectInfo.female }}人</el-col>
+        </el-row>
+        <!-- TODO 根据期数,查询下面的批次选择;根据批次的选择,提供班级的选择;然后将选择的期数,批次,班级及学生上报即可 -->
+        <el-row>
+          <el-form :inline="true" size="mini">
+            <el-form-item label="批次">
+              <el-select v-model="selectInfo.batch" placeholder="请先选择期数">
+                <el-option v-for="i in 3" :key="i" :label="`第${i}批`" :value="i"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="班级">
+              <el-select v-model="selectInfo.class" placeholder="请先选择批次">
+                <el-option v-for="i in 3" :key="i" :label="`${i}班`" :value="i"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="班主任">
+              <el-select v-model="selectInfo.director" placeholder="请选择班主任" filterable>
+                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
+                  <el-option v-for="item in group.options" :key="item.id" :label="item.label" :value="item.id"> </el-option>
+                </el-option-group>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="toSetClass">确认分班</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+      <data-table
+        ref="table"
+        :fields="fields"
+        :data="list"
+        :opera="opera"
+        :select="true"
+        :selected="selected"
+        @edit="toEdit"
+        @delete="toDelete"
+        @handleSelect="toSelect"
+      ></data-table>
+    </list-frame>
+  </div>
+</template>
+
+<script>
+import listFrame from '@frame/layout/admin/list-frame';
+import dataTable from '@frame/components/data-table';
+export default {
+  metaInfo: { title: '安排班级' },
+  name: 'plan',
+  props: {},
+  components: { listFrame, dataTable },
+  data: () => ({
+    opera: [],
+    options: [
+      {
+        label: '信息部',
+        options: [
+          {
+            id: '1',
+            label: '测试班主任1',
+          },
+          {
+            id: '2',
+            label: '测试班主任2',
+          },
+        ],
+      },
+      {
+        label: '其他部门',
+        options: [
+          {
+            id: '3',
+            label: '测试班主任3',
+          },
+          {
+            id: '4',
+            label: '测试班主任4',
+          },
+        ],
+      },
+    ],
+    fields: [
+      { label: '学生姓名', prop: 'name' },
+      { label: '学校', prop: 'school' },
+      { label: '性别', prop: 'gender' },
+    ],
+    filterFields: [{ label: '期数', model: 'term' }],
+    list: [{ id: 1, name: '学生1', school: '测试学校1', gender: '男' }],
+    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 },
+      { id: 5 },
+      { id: 7 },
+      { id: 10 },
+      { id: 11 },
+      { id: 13 },
+      { id: 15 },
+    ],
+    total: 20,
+    testData1: [
+      { 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: '男' },
+    ],
+    testData2: [
+      { id: 11, name: '学生11', school: '测试学校11', gender: '男' },
+      { id: 12, name: '学生12', school: '测试学校12', gender: '女' },
+      { id: 13, name: '学生13', school: '测试学校13', gender: '男' },
+      { id: 14, name: '学生14', school: '测试学校14', gender: '女' },
+      { id: 15, name: '学生15', school: '测试学校15', gender: '男' },
+      { id: 16, name: '学生16', school: '测试学校16', gender: '男' },
+      { id: 17, name: '学生17', school: '测试学校17', gender: '女' },
+      { id: 18, name: '学生18', school: '测试学校18', gender: '男' },
+      { id: 19, name: '学生19', school: '测试学校19', gender: '女' },
+      { id: 20, name: '学生20', school: '测试学校20', gender: '男' },
+    ],
+    selectInfo: {
+      male: 0,
+      female: 0,
+    },
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      if (skip === 0) this.$set(this, `list`, this.testData1);
+      else this.$set(this, `list`, this.testData2);
+      // this.$refs.table.init;
+      // const res = await this.query({ skip, limit, ...info });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `list`, res.data);
+      //   this.$set(this, `total`, res.total);
+      // }
+    },
+    toEdit({ data }) {
+      this.$router.push({ path: '/dept/detail', query: { id: data.id } });
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
+    toSelect(selecteds) {
+      this.$set(this, `selected`, selecteds);
+      let male = 0,
+        female = 0;
+      for (const i of selecteds) {
+        if (i.gender === '1' || i.gender === '男') male++;
+        else female++;
+      }
+      this.$set(this.selectInfo, `male`, male);
+      this.$set(this.selectInfo, `female`, female);
+    },
+    toSetClass() {
+      //TODO 整理数据生成班级;将学生列表重新查询=>为了将已经有班级的学生剔除,以便继续分班(重新查询)
+
+      //重置信息
+      this.selectInfo = {
+        male: 0,
+        female: 0,
+      };
+      this.selected = [];
+      this.$refs.table.selectReset();
+    },
+  },
+  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/index.vue

@@ -32,6 +32,12 @@ export default {
         method: 'delete',
         confirm: true,
       },
+      //TODO 需要判断
+      // {
+      //   label: '安排班级',
+      //   icon: 'el-icon-school',
+      //   methods: 'classes',
+      // },
     ],
     fields: [
       { label: '计划标题', prop: 'name' },

src/views/plan/lesson-plan.vue

@@ -0,0 +1,160 @@
+<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-form :inline="true" size="mini" style="padding:0 10px" label-width="150px">
+          <el-form-item label="礼仪课教师">
+            <el-select v-model="item.lyteacher" placeholder="请选择礼仪课教师">
+              <el-option v-for="(tea, index) in lyTeacherList" :key="`lytea${index}`" :label="tea.name" :value="tea.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="开班地点">
+            <el-select v-model="item.kb" placeholder="请选择开班地点">
+              <el-option v-for="(place, index) in placeList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="教室地点">
+            <el-select v-model="item.room" placeholder="请选择教室地点">
+              <el-option v-for="(place, index) in placeList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="拓展训练地点">
+            <el-select v-model="item.pra" placeholder="请选择拓展训练地点">
+              <el-option v-for="(place, index) in placeList" :key="`lytea${index}`" :label="place.name" :value="place.id"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
+    <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl">
+      <el-tabs>
+        <el-tab-pane style="padding:10px">
+          <template #label>
+            <span style="zoom:1.3">{{ form.term }}期{{ form.batch }}批{{ form.name }}</span>
+          </template>
+          <data-form :data="form" :fields="formFields" :rules="rules" @save="handleSave" :isNew="false">
+            <template #options="{item}">
+              <template v-if="item.model === 'lesson'">
+                <el-option v-for="(item, index) in lessonList" :key="`lesson${index}`" :label="item.name" :value="item.id"></el-option>
+              </template>
+              <template v-if="item.model === 'teacher'">
+                <el-option v-for="(item, index) in teacherList" :key="`teacher${index}`" :label="item.name" :value="item.id"></el-option>
+              </template>
+            </template>
+          </data-form>
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import dataTable from '@frame/components/data-table';
+import dataForm from '@frame/components/form';
+export default {
+  name: 'lesson-plan',
+  props: {
+    start: { type: String, required: true },
+    end: { type: String, required: true },
+    classes: { type: Array, default: () => [] },
+  },
+  components: { dataTable, dataForm },
+  data: () => ({
+    activeName: '0',
+    drawer: false,
+    dateList: [],
+    classList: [],
+    fields: [
+      { label: '日期', prop: 'date' },
+      { label: '星期', prop: 'week' },
+      { label: '课程', prop: 'lesson' },
+      { label: '任课教师', prop: 'teacher' },
+    ],
+    opera: [
+      {
+        label: '安排课程及教师',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+    ],
+    formFields: [
+      { label: '时间', model: 'date', type: 'text' },
+      { label: '星期', model: 'week', type: 'text' },
+      { label: '课程', model: 'lesson', type: 'select' },
+      { label: '教师', model: 'teacher', type: 'select' },
+    ],
+    rules: {},
+    form: {},
+    lessonList: [],
+    teacherList: [],
+    lyTeacherList: [],
+    placeList: [],
+  }),
+  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 让用户选择课程=>根据选择的课程查询可以教课的老师,根据老师的评分排序(不一定谁做)
+      // 1先查询课程列表
+      // 2先查询arr中,是否有选择的课程,有则查询教师列表
+      this.$set(this, `form`, { ...sClass, ...arrange });
+      this.drawer = true;
+    },
+    handleSave({ data, isNew }) {
+      console.log(data);
+    },
+  },
+  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,88 +1,56 @@
 <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>
-      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit"></data-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,
-    dataTable,
+  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: [],
+    };
   },
-  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,
-  }),
-  created() {},
-  computed: {},
+
   methods: {
-    search({ skip = 0, limit = 10, ...info } = {}) {
-      console.log(`in search`);
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     },
-    toEdit({ data }) {
-      console.log(`in toEdit`);
-      console.log(data);
-      return data;
+    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/train': {
-        target: 'http://free.liaoningdoupo.com',
+        target: 'http://free.liaoningdoupo.com', ///api/train
         changeOrigin: true,
         ws: true,
       },