dy-admin-manager/src/views/workBenchManager/journal/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>系统日志
    </h2>
    <div class="m-core">
      <location-hash v-model="searchForm.group" @change="onTabClick">
        <el-tabs v-model="activeIndex" @tab-click="onTabClick">
          <el-tab-pane label="系统通知" v-if="permissionList.journalItem" name="SYSTEM" value="SYSTEM"></el-tab-pane>
          <el-tab-pane label="学生申诉" v-if="permissionList.studentComplain" name="STUDENT" value="STUDENT"></el-tab-pane>
          <!-- <el-tab-pane label="退团退课" value="MUSICGROUP"></el-tab-pane> -->
          <el-tab-pane label="请假处理" v-if="permissionList.leaveOperation" name="LEAVE" value="LEAVE"></el-tab-pane>
          <el-tab-pane label="VIP申请审核" v-if="permissionList.vipApply" name="VIPAPPLY" value="VIPAPPLY"></el-tab-pane>
        </el-tabs>
      </location-hash>
      <el-form :inline="true"
                ref="searchForm"
               :model="searchForm">
        <el-form-item prop="readStatus">
          <el-select v-model.trim="searchForm.readStatus"
                     clearable
                     placeholder="日志状态">
            <el-option label="已读" :value="1"></el-option>
            <el-option label="未读" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-date-picker :clearable="false"
                          v-model="searchForm.month"
                          type="date"
                          placeholder="选择年月"></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="danger" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table style="width: 100%"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data="tableList">
          <el-table-column label="申请人" prop="userId" width="100px">
            <template slot-scope="scope">
              <el-badge :is-dot="!scope.row.readStatus" style="vertical-align: sub;"></el-badge>
              {{ scope.row.userId }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请时间" prop="createOn"></el-table-column>
          <el-table-column align="center" label="内容" prop="content"></el-table-column>
          <el-table-column align="center"
                           label="操作"
                           fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="onLook(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>

    <el-dialog :title="dialogTitle"
               :visible.sync="dialogSystem"
               width="400px">
      <el-row>
        <el-col :span="24">{{ dialogDetail.content }}</el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="dialogSystem = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle"
               :visible.sync="dialogStudent"
               width="500px">
      <student-model v-if="dialogStudent"
               :dialogDetail="dialogDetail"
               @close="dialogStudent = false" />
    </el-dialog>
    <!-- 请假 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogLeave"
               width="800px">
      <leave-model v-if="dialogLeave"
               :dialogDetail="dialogDetail"
               @close="dialogLeave = false" />
    </el-dialog>
    <!-- 请假 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVipApply"
               width="500px">
      <vip-apply-model v-if="dialogVipApply"
               :dialogDetail="dialogDetail"
               @close="dialogVipApply = false" />
    </el-dialog>
  </div>
</template>
<script>
import cleanDeep from 'clean-deep';
import pagination from "@/components/Pagination/index";
import { queryCountOfUnread, sysMessageList, setRead } from '@/api/journal'
import { journalType } from '@/constant'
import StudentModel from './model/student'
import LeaveModel from './model/leave'
import vipApplyModel from './model/vipApply'
import { permission } from '@/utils/directivePage'
export default {
  components: { pagination, StudentModel, LeaveModel, vipApplyModel },
  name: 'journal',
  data () {
    const query = this.$route.query
    return {
      permissionList: {
        journalItem: permission('/journalItem'),
        studentComplain: permission('/studentComplain'),
        musicGroupCourse: permission('/musicGroupCourse'),
        leaveOperation: permission('/leaveOperation'),
        vipApply: permission('/vipApply')
      },
      dialogSystem: false,
      dialogStudent: false,
      dialogLeave: false,
      dialogVipApply: false,
      dialogTitle: null,
      dialogDetail: {},
      activeIndex: query.opt || 'SYSTEM',
      searchForm: {
        search: null,
        group: query.opt || 'SYSTEM',
        readStatus: 0
      },
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  mounted() {
    this.getList()
    console.log(this.searchForm.group)
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1
      this.getList()
    },
    onTabClick(elm) {
      // 判断 group 是否一致
      const searchForm = this.searchForm
      console.log(searchForm)
      this.activeIndex = searchForm.group
      if(elm.$attrs.value == searchForm.group) {
        return
      }
      searchForm.group = elm.$attrs.value
      this.getList()
    },
    async getList() {
      const pageInfo = this.pageInfo
      const params = Object.assign({}, this.searchForm)
      params.rows = pageInfo.limit
      params.page = pageInfo.page
      await sysMessageList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          pageInfo.total = res.data.total
        }
      })
    },
    async onLook(row) {
      // 把当前消息变成已读
      if(row.readStatus != 1) {
        await setRead({ id: row.id })
        row.readStatus = 1 // 手动把消息变一下状态
      }
      this.dialogTitle = journalType[row.group]
      this.dialogDetail = row
      switch(row.group) {
        case 'SYSTEM':
          this.dialogSystem = true
          break;
        case 'STUDENT':
          this.dialogStudent = true
          break;
        case 'LEAVE':
          this.dialogLeave = true
          break;
        case 'VIPAPPLY':
          this.dialogVipApply = true
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>