train-center/src/views/teacher/index.vue

<template>
  <div id="index">
    <list-frame title="教师列表页" @query="search" :total="total" :filter="filFields" :needAdd="false">
      <template #options="{item}">
        <template v-if="item.model == 'gender'">
          <el-option v-for="(item, index) in gender" :key="index" :value="item.label"></el-option>
        </template>
        <template v-if="item.model == 'status'">
          <el-option v-for="(item, index) in lists" :key="index" :value="item.label"></el-option>
        </template>
      </template>
      <!-- <data-table :fields="fields" :data="index" :opera="opera" @edit="toEdit" @select="toSelect"></data-table> -->
      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @delete="toDelete" @select="toSelect"></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('teacher');
export default {
  name: 'index',
  props: {},
  components: {
    listFrame,
    dataTable,
  },
  data: () => ({
    gender: [
      { label: '男', value: '男' },
      { label: '女', value: '女' },
    ],
    lists: [
      { label: '注册', value: 0 },
      { label: '确认身份', value: 1 },
      { label: '资料评分', value: 2 },
      { label: '面试评分', value: 3 },
      { label: '确认入库', value: 4 },
    ],
    opera: [
      {
        label: '编辑',
        icon: 'el-icon-edit',
        method: 'edit',
      },
      {
        label: '审核',
        icon: 'el-icon-s-order',
        method: 'select',
        display: item => {
          return item.status === '2' || item.status === '3';
        },
      },
    ],
    fields: [
      { label: '姓名', prop: 'name' },
      { label: '性别', prop: 'gender', options: { width: `80px` } },
      { label: '手机号', prop: 'phone' },

      { label: '学校名称', prop: 'schname' },
      { label: '邮箱', prop: 'email' },
      { label: '年龄', prop: 'age', options: { width: `80px` } },

      { label: '专业', prop: 'major' },
      {
        label: '是/否是礼仪老师',
        prop: 'islyteacher',
        format: item => {
          return item === '0' ? '否' : item === '1' ? '是' : '其他';
        },
      },
      { label: '资料评分', prop: 'file_score', options: { width: `100px` } },
      { label: '面试评分', prop: 'interview_score', options: { width: `100px` } },

      {
        label: '状态',
        prop: 'status',
        format: item => {
          return item === '0'
            ? '注册'
            : item === '1'
            ? '已确定身份'
            : item === '2'
            ? '已上传资料'
            : item === '3'
            ? '已选择面试'
            : item === '4'
            ? '确认入库'
            : '其他';
        },
      },
    ],
    list: [],
    filFields: [
      { label: '教师名称', model: 'name' },
      { label: '年龄', model: 'age' },
      {
        label: '状态',
        model: 'status',
        type: 'select',
      },
      {
        label: '性别',
        model: 'gender',
        type: 'select',
      },
    ],
    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 }) {
      console.log(`in toEdit`);
      console.log(data);
      this.$router.push({ path: '/teacher/detail', query: { id: data.id } });
    },

    toSelect({ data }) {
      console.log(`in Select`);
      console.log(data);
      this.$router.push({ path: '/teacher/verify', query: { id: data.id, status: data.status } });
    },
    async toDelete(data) {
      const res = await this.delete(data.id);
      this.$checkRes(res, '删除成功', '删除失败');
      this.search();
    },
  },
};
</script>

<style lang="less" scoped></style>