train-director/src/views/classes/name-list.vue

<template>
  <div id="name-list">
    <list-frame :title="mainTitle" @query="search" :total="total" :needFilter="false" :needAdd="false">
      <el-col :span="24" class="printingBtn">
        <!-- <el-button type="primary" size="mini" @click="toPrint()">打印名牌</el-button> -->
        <el-col :span="12">
          <el-input placeholder="请输入学生姓名" v-model="stuname" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="mini" @click="addstu()">添加学生</el-button>
          <el-button type="primary" size="mini" @click="toComputIsFine()" :disabled="this.defaultOption.classid ? false : true">设置优秀学员</el-button>
          <el-button type="primary" size="mini" @click="toExportList()">导出学生名单</el-button>
        </el-col>
      </el-col>
      <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" :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] }}
          </template>
        </template>
      </data-form>
    </el-drawer>
  </div>
</template>

<script>
import _ from 'lodash';
import listFrame from '@frame/layout/admin/list-frame';
import dataTable from '@frame/components/data-table';
import dataForm from '@frame/components/form';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('student');
const { mapActions: group } = createNamespacedHelpers('group');
export default {
  metaInfo: { title: '班级名单' },
  name: 'name-list',
  props: {},
  components: {
    listFrame,
    dataTable,
    dataForm,
  },
  data: function() {
    var _this = this;
    return {
      opera: [
        {
          label: '编辑',
          icon: 'el-icon-edit',
          method: 'edit',
        },
        {
          label: '删除',
          icon: 'el-icon-delete',
          method: 'delete',
          confirm: true,
          // display: i => {
          //   // return !_this.groupList.find(stu => {
          //   //   return stu.stuid == i.id;
          //   // });
          //   return !_this.groupList.find(stu => stu.stuid == i.id);
          // },
        },
        // {
        //   label: '管理任职',
        //   icon: 'el-icon-check',
        //   method: 'post',
        // },
      ],
      fields: [
        { label: '姓名', prop: 'name', filter: 'input' },
        { label: '性别', prop: 'gender' },
        { label: '民族', prop: 'nation' },
        { label: '学校', prop: 'school_name' },
        { label: '院系', prop: 'faculty' },
        { label: '专业', prop: 'major' },
        { label: '职务', prop: 'job' },
        { label: '手机号', prop: 'phone' },
        { label: '是否优秀', prop: 'is_fine', format: i => (i === '0' ? '否' : i === '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: {},
      // 组
      groupList: [],
      // 查询
      // 学生姓名
      stuname: '',
    };
  },
  created() {
    this.seachGroup();
  },
  methods: {
    ...mapActions(['query', 'delete', 'computedIsFine', 'toExport']),
    ...group({ groupQuery: 'query' }),
    async seachGroup() {
      let classid = this.id;
      let res = await this.groupQuery({ classid });
      if (this.$checkRes(res)) {
        let arr = res.data.map(item => item.students);
        arr = _.flattenDeep(arr);
        console.log(arr);
        this.$set(this, `groupList`, arr);
      }
    },
    async search({ skip = 0, limit = 10, ...info } = {}) {
      if (this.id) {
        if (this.stuname) info.name = this.stuname;
        const res = await this.query({ skip, limit, ...info, classid: this.id });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
          this.$set(this, `total`, res.total);
        }
      }
    },
    // 添加
    addstu() {
      this.$router.push({ path: '/student/createStu' });
    },
    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;
    },
    toClose() {
      this.drawer = false;
      this.form = {};
    },
    toreturn() {
      window.history.go(-1);
    },
    // 打印名牌
    toPrint() {
      this.$router.push({ path: '/classes/namCard', query: { id: this.id } });
    },
    // 计算优秀学员
    async toComputIsFine() {
      const res = await this.computedIsFine(this.defaultOption.classid);
      if (this.$checkRes(res, '优秀学员设置成功', res.errmsg || '优秀学员设置失败')) this.search();
    },
    // 导出学生名单
    async toExportList() {
      const msg = this.$message({ duration: 0, message: '正在导出,请稍后...' });
      const res = await this.toExport({ type: 'class', classid: this.id });
      msg.close();
      if (this.$checkRes(res)) {
        const { data } = res;
        window.open(data);
      }
    },
  },
  computed: {
    ...mapState(['user', 'defaultOption']),
    id() {
      return this.defaultOption.classid;
    },
    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();
        else this.$set(this, `list`, []);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.printingBtn {
  text-align: right;
  padding: 10px 0;
}
</style>