LSSE-front/src/views/isystem/roleList.vue

<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :xl="8" :lg="8">
              <a-form-item label="关键字">
                <a-input placeholder="请输入" v-model="queryParam.filter" />
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="8">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
              </span>
            </a-col>
            <a-col :xl="8" :lg="8">
              <!-- <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button> -->
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        bordered
        rowKey="id"
        size="small"
        :columns="columns"
        :dataSource="loadData"
        :pagination="paginationProps"
        :loading="loadingTable"
        @change="handleTableChange"
      >
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="status" slot-scope="text">
          <a-tag :color="text | statusColorFilter">{{ text | statusFilter }}</a-tag>
        </template>
        <span slot="createTime" slot-scope="text">{{ moment(text).format('YYYY-MM-DD') }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"> <a-icon type="form" /></a>
          <!-- <a-divider type="vertical" />
          <template v-if="record.status === 0">
            <a href="javascript:;" @click="handleChangeStatus(record, 1)"><a-icon type="lock" /></a>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.status === 1">
            <a href="javascript:;" @click="handleChangeStatus(record, 0)"><a-icon type="unlock" /></a>
            <a-divider type="vertical" />
          </template>
          <a-popconfirm title="确定要删除该角色吗？" ok-text="确定" cancel-text="取消" @confirm="remove(record)">
            <a href="javascript:;"><a-icon type="delete" /></a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handlePermission(record)"><a-icon type="setting" /></a> -->
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handlePermission(record)"><a-icon type="setting" /></a>
        </span>
      </a-table>
      <role-form :visible="roleVisible" :id="currentRoleId" @cancel="roleFormHandleCancel" @ok="roleFormHandleOk" />
      <role-permission-setting
        :visible="rolePermissionVisible"
        :id="currentRoleId"
        @cancel="rolePermissionHandleCancel"
        @ok="rolePermissionHandleOk"
      />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { changeStatus, getList, remove } from '@/api/system/role'
import moment from 'moment'
import RoleForm from './modules/RoleForm.vue'
import RolePermissionSetting from './modules/RolePermissionSetting.vue'
import { getAction } from '@/api/manage'

const STATUS = {
  0: { title: '启用', color: '#87d068' },
  1: { title: '禁用', color: '#f50' }
}
const columns = [
  {
    title: '#',
    dataIndex: 'id',
    align: 'center',
    scopedSlots: { customRender: 'index' },
    width: 80
  },
  {
    title: '角色名称',
    align: 'left',
    dataIndex: 'name'
  },
  // {
  //   title: '排序码',
  //   dataIndex: 'sortCode',
  //   align: 'center',
  //   width: 80
  // },
  // {
  //   title: '删除',
  //   dataIndex: 'deleteMark',
  //   align: 'center',
  //   width: 80
  // },
  // {
  //   title: '状态',
  //   dataIndex: 'status',
  //   align: 'center',
  //   scopedSlots: { customRender: 'status' },
  //   width: 80
  // },
  // {
  //   title: '创建时间',
  //   dataIndex: 'createTime',
  //   align: 'center',
  //   scopedSlots: { customRender: 'createTime' },
  //   width: 120
  // },
  {
    title: '操作',
    width: 80,
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
    fixed: 'right'
  }
]

export default {
  name: 'RoleList',
  components: { RoleForm, RolePermissionSetting },
  data () {
    return {
      moment,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      queryParam: {}, // 查询参数
      columns, // 表头
      loadData: [], // 加载数据方法 必须为 Promise 对象
      selectedRowKeys: [],
      selectedRows: [],
      loadingTable: false,
      paginationProps: {
        defaultPageSize: 20,
        showSizeChanger: true,
        showQuickJumper: true,
        // pageSizeOptions: [10, 20, 50, 100, 500],
        showTotal: total => {
          return `共 ${total} 条`
        },
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      roleVisible: false,
      currentRoleId: '',
      rolePermissionVisible: false
    }
  },
  filters: {
    statusColorFilter (key) {
      return STATUS[key].color
    },
    statusFilter (key) {
      return STATUS[key].title
    }
  },
  created () {
    this.getList()
  },
  methods: {
    resetList () {
      this.queryParam = {}
      this.getList()
    },
    getList (parameter = {}) {
      const pageParams = { ...parameter, ...this.queryParam }
      this.loadingTable = true
      getAction('/cssystem/role/getList', pageParams).then(res => {
        // const pagination = { ...this.paginationProps }
        // pagination.total = res.data.totalCount
        this.loadData = res.data
        // this.paginationProps = pagination
        this.loadingTable = false
      })
    },
    handleAdd () {
      this.currentRoleId = ''
      this.roleVisible = true
    },
    roleFormHandleCancel () {
      this.roleVisible = false
    },
    roleFormHandleOk () {
      this.roleVisible = false
      this.getList()
    },
    remove (record) {
      const params = { roleId: record.id }
      remove(params).then(res => {
        if (res) {
          this.$message.success('删除角色成功')
          this.getList()
        } else {
          this.$message.error('删除角色失败')
        }
      })
    },
    handleTableChange (pagination, filters, sorter) {
      const parameter = {}
      if (sorter) {
        if (sorter.order === 'ascend') {
          parameter.SortName = sorter.field + ' asc'
        }
        if (sorter.order === 'descend') {
          parameter.SortName = sorter.field + ' desc'
        }
      }
      parameter.pageSize = pagination.pageSize
      parameter.pageNum = pagination.current
      this.getList(parameter)
    },
    handleEdit (record) {
      this.roleVisible = true
      this.currentRoleId = record.id
      console.log('record', record)
    },
    handleChangeStatus (record, status) {
      const params = { roleId: record.id, status: status }
      changeStatus(params).then(res => {
        if (res) {
          this.$message.success('操作成功')
          this.getList()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    handlePermission (record) {
      this.currentRoleId = record.id
      this.rolePermissionVisible = true
    },
    rolePermissionHandleCancel () {
      this.rolePermissionVisible = false
    },
    rolePermissionHandleOk () {
      this.rolePermissionVisible = false
    }
  }
}
</script>

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