train-school/src/views/leave/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" @edit="toEdit" @check="toCheck"></data-table>
    </list-frame>
    <el-dialog title="请假审批" :visible.sync="dialog" width="30%" center @close="toClose">
      <el-form label-width="120px">
        <el-form-item label="姓名">{{ operaObject.name }}</el-form-item>
        <el-form-item label="原因">{{ operaObject.reason }}</el-form-item>
        <el-form-item label="时间">{{ operaObject.time }}</el-form-item>
        <el-form-item>
          <el-row type="flex" justify="middle" align="center">
            <el-col :span="7">
              <el-button type="primary" size="mini" @click="setCheck('0')">通过</el-button>
            </el-col>
            <el-col :span="7">
              <el-button type="danger" size="mini" @click="setCheck('1')">拒绝</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </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('dept');
export default {
  metaInfo: { title: '请假管理' },
  name: 'index',
  props: {},
  components: { listFrame, dataTable },
  data: () => ({
    opera: [
      {
        label: '查看学生详情',
        icon: 'el-icon-document',
        method: 'edit',
      },
      {
        label: '请假审核',
        icon: 'el-icon-s-check',
        method: 'check',
      },
    ],
    fields: [
      { label: '学生姓名', prop: 'name' },
      { label: '时间', prop: 'time' },
      { label: '理由', prop: 'reason' },
    ],
    list: [{ name: '测试学生1', time: '2020-05-01 - 2020-05-01', reason: '发烧' }],
    total: 0,
    dialog: false,
    operaObject: {},
  }),
  created() {},
  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;
    },
  },
  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: '/stud/detail', query: { id: data.id } });
    },

    toCheck({ data }) {
      this.$set(this, `operaObject`, data);
      this.dialog = true;
    },
    async setCheck(status) {
      //TODO 请假审核
      this.toClose();
    },
    toClose() {
      this.dialog = false;
      this.operaObject = {};
    },
  },
};
</script>

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