修改名单,任命班长/学委(PC)

src/router/index.js

@@ -21,6 +21,24 @@ const routes = [
         meta: { title: '计划', sub: '详情' },
         component: () => import('@/views/plan/detail.vue'),
       },
+      {
+        path: '/classes/index',
+        name: 'classes_list',
+        meta: { title: '班级', sub: '管理' },
+        component: () => import('@/views/classes/index.vue'),
+      },
+      {
+        path: '/classes/name/list',
+        name: 'classes_list',
+        meta: { title: '班级', sub: '名单' },
+        component: () => import('@/views/classes/name-list.vue'),
+      },
+      {
+        path: '/student/detail',
+        name: 'student_detail',
+        meta: { title: '学生', sub: '信息' },
+        component: () => import('@/views/student/detail.vue'),
+      },
     ],
   },
 ];

src/views/classes/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="index">
+    <list-frame title="班级管理" @query="search" :total="total" :filter="filFields" @add="$router.push({ path: '/classes/detail' })">
+      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit"></data-table>
+    </list-frame>
+  </div>
+</template>
+
+<script>
+import listFrame from '@frame/layout/admin/list-frame';
+import dataTable from '@frame/components/data-table';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('classes');
+export default {
+  metaInfo: { title: '班级管理' },
+  name: 'index',
+  props: {},
+  components: {
+    listFrame,
+    dataTable,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '班级名单',
+        icon: 'el-icon-user',
+        method: 'edit',
+      },
+    ],
+    fields: [
+      { label: '班级名称', prop: 'name' },
+      { label: '人数', prop: 'number' },
+      { label: '批次', prop: 'batch' },
+    ],
+    filFields: [{ label: '期数', model: 'term' }],
+    list: [{}],
+    total: 0,
+  }),
+  created() {
+    // this.search();
+  },
+  computed: {},
+  methods: {
+    ...mapActions(['query', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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: '/classes/detail', query: { id: data.id } });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/classes/name-list.vue

@@ -0,0 +1,173 @@
+<template>
+  <div id="name-list">
+    <list-frame :title="mainTitle" @query="search" :total="total" :needFilter="false" returns="/classes/index" @add="$router.push({ path: '/student/detail' })">
+      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @delete="toDelete" @post="toPost"></data-table>
+    </list-frame>
+    <el-drawer title="任职" :visible.sync="drawer" direction="rtl" @close="toClose">
+      <data-form :data="form" :fields="formFields" :rules="rules" @save="handlePost" :isNew="false">
+        <template #radios="{item}">
+          <template v-if="item.model === 'job'">
+            <el-radio label="1">班长</el-radio>
+            <el-radio label="0">学委</el-radio>
+          </template>
+        </template>
+        <template #custom="{ item, form }">
+          <template v-if="item.model === 'gender'">
+            {{ form[item.model] === '0' ? '女' : '男' }}
+          </template>
+        </template>
+      </data-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import listFrame from '@frame/layout/admin/list-frame';
+import dataTable from '@frame/components/data-table';
+import dataForm from '@frame/components/form';
+import { createNamespacedHelpers } from 'vuex';
+// TODO接口没改,没写
+const { mapActions } = createNamespacedHelpers('student');
+export default {
+  metaInfo: { title: '班级名单' },
+  name: 'name-list',
+  props: {},
+  components: {
+    listFrame,
+    dataTable,
+    dataForm,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '编辑',
+        icon: 'el-icon-edit',
+        method: 'edit',
+      },
+      {
+        label: '删除',
+        icon: 'el-icon-delete',
+        method: 'delete',
+        confirm: true,
+      },
+      {
+        label: '管理任职',
+        icon: 'el-icon-check',
+        method: 'post',
+      },
+    ],
+    fields: [
+      { label: '姓名', prop: 'name' },
+      {
+        label: '性别',
+        prop: 'gender',
+        format: item => {
+          return item === '1' ? '男' : '女';
+        },
+      },
+      { label: '期', prop: 'term' },
+      { label: '批次', prop: 'batch' },
+      { label: '班级', prop: 'class' },
+      { label: '民族', prop: 'nation' },
+      // { label: '身份证号', prop: 'id_number' },
+      { label: '学校', prop: 'school_name' },
+      { label: '院系', prop: 'yard' },
+      { label: '专业', prop: 'major' },
+      { label: '职务', prop: 'job' },
+      // { label: '入学年份', prop: 'entry_year' },
+      // { label: '毕业年份', prop: 'finish_year' },
+      { label: '在校曾担任何种职务', prop: 'school_job' },
+      { label: '手机号', prop: 'phone' },
+      // { label: 'QQ号', prop: 'qq' },
+      // { label: '邮箱', prop: 'email' },
+      // { label: '家庭所在地', prop: 'family_place' },
+      {
+        label: '家庭是否困难',
+        prop: 'family_is_hard',
+        format: item => {
+          return item === '1' ? '是' : '否';
+        },
+      },
+      {
+        label: '是否获得过助学金',
+        prop: 'have_grant',
+        format: item => {
+          return item === '1' ? '是' : '否';
+        },
+      },
+      {
+        label: '是否优秀',
+        prop: 'is_fine',
+        format: item => {
+          return item === '1' ? '是' : '否';
+        },
+      },
+    ],
+    list: [{}],
+    total: 0,
+    form: {},
+    drawer: false,
+    formFields: [
+      { label: '姓名', model: 'name', type: 'text' },
+      { label: '性别', model: 'gender', custom: true },
+      { label: '手机号', model: 'phone', type: 'text' },
+      { label: '职务', required: true, model: 'job', type: 'radio' },
+    ],
+    rules: {},
+  }),
+  created() {},
+  methods: {
+    ...mapActions(['query', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      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: '/student/detail', query: { id: data.id } });
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
+    toPost({ data }) {
+      this.$set(this, `form`, JSON.parse(JSON.stringify(data)));
+      this.drawer = true;
+    },
+    handlePost({ data, isNew }) {
+      console.log(data);
+      //TODO修改接口,然后查询
+      this.toClose();
+    },
+    toClose() {
+      this.drawer = false;
+      this.form = {};
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      let title = main + sub;
+      return title;
+    },
+  },
+  watch: {
+    id: {
+      handler(val) {
+        if (val) this.search();
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/student/detail.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="detail">
+    <detail-frame :title="mainTitle" returns="/student/index">
+      <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew">
+        <template #radios="{item}">
+          <template v-if="item.model === 'gender'">
+            <el-radio label="1">男</el-radio>
+            <el-radio label="0">女</el-radio>
+          </template>
+          <template v-else>
+            <el-radio label="1">是</el-radio>
+            <el-radio label="0">否</el-radio>
+          </template>
+          <template v-if="item.model === 'floor'">
+            <el-radio v-for="i in 5" :key="i" :label="`${i}楼`">{{ `${i}楼` }}</el-radio>
+          </template>
+        </template>
+      </data-form>
+    </detail-frame>
+  </div>
+</template>
+
+<script>
+import detailFrame from '@frame/layout/admin/detail-frame';
+import dataForm from '@frame/components/form';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('student');
+//缺少字典表:学校表,民族表,院系表,专业表
+export default {
+  metaInfo: { title: '学生信息' },
+  name: 'detail',
+  props: {},
+  components: {
+    detailFrame,
+    dataForm,
+  },
+  data: () => ({
+    info: {},
+    fields: [
+      { label: '姓名', required: true, model: 'name' },
+      { label: '性别', required: true, model: 'gender', type: 'radio' },
+      // { label: '民族', required: true, model: 'nation', type: 'select' },
+      { label: '身份证号', required: true, model: 'id_number', options: { maxlength: 18 } },
+      // { label: '学校', required: true, model: 'school_name', type: 'select' },
+      // { label: '院系', required: true, model: 'yard', type: 'select' },
+      // { label: '专业', required: true, model: 'major', type: 'select' },
+      { label: '入学年份', required: true, model: 'entry_year', type: 'year' },
+      { label: '毕业年份', required: true, model: 'finish_year', type: 'year' },
+      { label: '在校曾担任何种职务', model: 'school_job' },
+      { label: '手机号', required: true, model: 'phone', options: { maxlength: 11, minlength: 11 } },
+      { label: 'QQ号', required: true, model: 'qq' },
+      { label: '邮箱', required: true, model: 'email' },
+      { label: '家庭所在地', required: true, model: 'family_place' },
+      { label: '家庭是否困难', required: true, model: 'family_is_hard', type: 'radio' },
+      { label: '是否获得过助学金', required: true, model: 'have_grant', type: 'radio' },
+      { label: '职务', model: 'job' },
+      //可以根据上个页面带过来,不需要添加
+      // { label: '期', required: true, model: 'term' },
+      // { label: '批次', required: true, model: 'batch' },
+      // { label: '班级', required: true, model: 'class' },
+      { label: '是否优秀', model: 'is_fine', type: 'radio' },
+    ],
+    rules: {
+      name: [{ required: true, message: '请输入姓名' }],
+      gender: [{ required: true, message: '请选择性别' }],
+      // nation: [{ required: true, message: '请选择民族' }],
+      id_number: [
+        { required: true, message: '请输入身份证号' },
+        { min: 18, max: 18, message: '请输入18位身份证号码', trigger: 'blur' },
+      ],
+      // school_name: [{ required: true, message: '请选择学校' }],
+      // yard: [{ required: true, message: '请选择院系' }],
+      // major: [{ required: true, message: '请选择专业' }],
+      entry_year: [{ required: true, message: '请选择入学年份' }],
+      finish_year: [{ required: true, message: '请选择毕业年份' }],
+      phone: [
+        { required: true, message: '请输入手机号' },
+        { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
+      ],
+      qq: [{ required: true, message: '请输入QQ号' }],
+      email: [{ required: true, message: '请输入邮箱' }],
+      family_place: [{ required: true, message: '请输入家庭所在地' }],
+      family_is_hard: [{ required: true, message: '请选择家庭是否困难' }],
+      have_grant: [{ required: true, message: '请选择是否获得过助学金' }],
+      term: [{ required: true, message: '请输入期号' }],
+      batch: [{ required: true, message: '请输入批次' }],
+      class: [{ required: true, message: '请输入班级' }],
+      is_fine: [{ required: true, message: '请选择是否优秀' }],
+    },
+  }),
+  created() {},
+
+  methods: {
+    ...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;
+    },
+    async handleSave({ isNew, data }) {
+      let res;
+      let msg;
+      if (isNew) {
+        data.openid = new Date().getTime();
+        data.nation = `汉族`;
+        data.yard = `测试学院`;
+        data.major = `测试专业`;
+        data.school_name = `测试学校`;
+        res = await this.create(data);
+        msg = `${this.keyWord}添加成功`;
+      } else {
+        res = await this.update(data);
+        msg = `${this.keyWord}修改成功`;
+      }
+      if (this.$checkRes(res, msg)) window.history.back(-1);
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    isNew() {
+      return this.$route.query.id ? false : true;
+    },
+    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;
+    },
+    //添加必传
+    classes() {
+      return this.$route.query.class;
+    },
+    term() {
+      return this.$route.query.term;
+    },
+    batch() {
+      return this.$route.query.batch;
+    },
+  },
+  watch: {
+    isNew: {
+      immediate: true,
+      handler(val) {
+        if (val) this.loading = false;
+        else this.search();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>