yxk-electronic-archives/src/views/system/log/loginLog/index.vue

<template>
  <div style="height: calc(100vh - 236px);">
    <Search :is-log-type="isLogType" @handleClearData="handleDelt" />
    <el-table
      ref="table"
      :data="crud.data"
      style="width: 100%;"
      height="calc(100vh - 396px)"
      @row-click="clickRowHandler"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="account" label="账号" min-width="150" align="center" />
      <el-table-column prop="username" label="用户名" align="center" min-width="150" />
      <el-table-column prop="fondsName" label="所属全宗" align="center" min-width="150" />
      <el-table-column prop="det" label="所属部门" align="center" min-width="180" />
      <el-table-column prop="roleNames" label="用户角色" align="center" min-width="150">
        <template slot-scope="scope">
          <div>{{ scope.row.roleNames | parseRole }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="requestIp" label="IP" align="center" min-width="180" />
      <el-table-column prop="createTime" label="操作时间" align="center" min-width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="crud.data.length !== 0" />
  </div>
</template>

<script>
import { FetchClearLoginLog } from '@/api/system/logs'
import CRUD, { presenter, crud, header } from '@crud/crud'
import pagination from '@crud/Pagination'
import Search from '@/views/system/log/search.vue'
// import { parseTime, saveAs, getBlob } from '@/utils/index'
export default {
  name: 'LoginLog',
  components: { pagination, Search },
  filters: {
    parseRole(val) {
      const regex = /name=(.*)\)/
      const match = regex.exec(val)
      let role = ''
      if (match) {
        role = match[1]
      } else {
        role = val
      }
      return role
    }
  },
  mixins: [presenter(), crud(), header()],
  cruds() {
    return CRUD({
      url: 'api/log/initLoginLog',
      sort: [],
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: false,
        group: false
      }
    })
  },
  data() {
    return {
      isLogType: 'login',
      selections: []
    }
  },
  methods: {
    handleDelt() {
      this.$confirm('此操作将清空所选数据' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.crud.delAllLoading = true
        FetchClearLoginLog().then(() => {
          this.crud.notify('清空成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.delAllLoading = false
          this.crud.refresh()
        }).catch(err => {
          this.crud.delAllLoading = false
          console.log(err)
        })
      }).catch(() => {
      })
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row) // 单击选中
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-pagination{
  margin: 24px 0 10px 0 !important
}
</style>