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

<template>
  <div id="index">
    <list-frame :title="mainTitle" @query="search" :total="total" :needFilter="false" :needAdd="false">
      <data-table :fields="fields" :data="list" :opera="opera" @check="toCheck" @delete="toDelete"></data-table>
    </list-frame>
    <el-dialog :visible.sync="dialog" title="审核授课信息" @close="toClose" width="50%">
      <data-form :data="form" :fields="formFields" :rules="{}" @save="turnSave">
        <template #options="{item}">
          <template v-if="item.model === 'subid'">
            <el-option v-for="(i, index) in subjectList" :key="index" :label="i.name" :value="i._id"></el-option>
          </template>
        </template>
        <template #radios="{item}">
          <template v-if="item.model === 'status'">
            <el-radio label="0">待审核</el-radio>
            <el-radio label="1">审核通过</el-radio>
            <el-radio label="2">审核拒绝</el-radio>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </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 { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: liveroom } = createNamespacedHelpers('liveroom');
const { mapActions: subject } = createNamespacedHelpers('subject');
export default {
  metaInfo: { title: '在线课堂' },
  name: 'index',
  props: {},
  components: {
    listFrame,
    dataTable,
    dataForm,
  },
  data: function() {
    return {
      opera: [
        {
          label: '确定',
          icon: 'el-icon-check',
          method: 'check',
          display: item => {
            return item.status === '0' ? true : false;
          },
        },
        {
          label: '删除',
          icon: 'el-icon-delete',
          method: 'delete',
          confirm: true,
        },
      ],
      fields: [
        { label: '房间号', prop: 'number' },
        { label: '教师', prop: 'teacher' },
        { label: '科目名称', prop: 'subname' },
        { label: '申请说明', prop: 'reason' },
        { label: '状态', prop: 'status', format: i => (i === '0' ? '待审核' : i === '1' ? '审核通过' : '审核拒绝') },
      ],
      list: [],
      total: 0,
      // 审核
      dialog: false,
      form: {},
      formFields: [
        { label: '房间号', required: true, model: 'number' },
        { label: '科目', required: true, model: 'subid', type: 'select' },
        { label: '说明', required: true, model: 'reason', type: 'textarea' },
        { label: '状态', required: true, model: 'status', type: 'radio' },
      ],
      // 科目
      subjectList: [],
    };
  },
  created() {
    this.getOtherList();
    this.search();
  },
  methods: {
    ...subject({ getSubjectList: 'query' }),
    ...liveroom(['query', 'delete', 'fetch', 'update']),
    // 查询科目
    async getOtherList() {
      let res;
      res = await this.getSubjectList();
      if (this.$checkRes(res)) this.$set(this, `subjectList`, res.data);
    },
    async search({ skip, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) this.$set(this, `list`, res.data);
      this.$set(this, `total`, res.total);
    },
    // 确定
    toCheck({ data }) {
      this.$set(this, `form`, data);
      this.dialog = true;
    },
    // 提交
    async turnSave({ data }) {
      let subject = this.subjectList.find(f => f.id == data.subid);
      if (subject) {
        data.subname = subject.name;
      }
      let res = await this.update(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '修改信息成功',
          type: 'success',
        });
        this.dialog = false;
        this.search();
      }
    },
    // 删除
    async toDelete({ data }) {
      let res = await this.delete(data.id);
      if (this.$checkRes(res)) {
        this.$message({
          message: '刪除信息成功',
          type: 'success',
        });
        this.search();
      }
    },
    // 关闭
    toClose() {
      this.form = {};
      this.dialog = false;
    },
  },
  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>