排班

src/router/index.js

@@ -188,6 +188,12 @@ 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'),
+      },
     ],
   },
 ];

src/views/plan/classes.vue

@@ -0,0 +1,201 @@
+<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.sync="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: [],
+    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.$nextTick(() => {
+        this.$refs.table.setSelectTable();
+      });
+      // 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/test/list.vue

@@ -4,7 +4,14 @@
       <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>
+      <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>
 </template>
@@ -18,7 +25,6 @@ export default {
   props: {},
   components: {
     listFrame,
-    dataTable,
   },
   data: () => ({
     lists: [
@@ -69,8 +75,64 @@ export default {
       },
     ],
     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() {},
+  created() {
+    let obj = {
+      id: 1,
+      date: '2016-05-03',
+      name: '王小虎',
+      address: '上海市普陀区金沙江路 1518 弄',
+    };
+    this.multipleSelection.push(obj);
+    this.$nextTick(() => {
+      this.toggleSelection(this.multipleSelection);
+    });
+  },
   computed: {},
   methods: {
     search({ skip = 0, limit = 10, ...info } = {}) {
@@ -81,6 +143,19 @@ export default {
       console.log(data);
       return data;
     },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      console.log(val);
+      this.multipleSelection = val;
+    },
   },
 };
 </script>