<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="角色列表"
      row-key="roleId"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" icon="CirclePlus"> 新增角色 </el-button>
        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"> 批量删除角色 </el-button>
      </template>

      <template #operation="{ row }">
        <el-button type="primary" link icon="Lock"> 权限 </el-button>
        <el-button type="primary" link icon="EditPen"> 编辑 </el-button>
        <el-button v-if="row.id !== 1" type="primary" link icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
  </div>
</template>
<script lang="tsx" setup name="Home">
import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
import RoleApi from '@/api/module/system/role'
import { ColumnProps, SearchProps } from '@/components/ProTable/interface'

// 表格配置项
const columns: ColumnProps<RoleInfo>[] = [
  { type: 'selection', width: 60, selectable: row => row.isLock == '1' },
  { prop: 'roleId', label: '编号', width: 80 },
  { prop: 'name', label: '角色名称' },
  { prop: 'code', tag: true, label: '权限标识' },
  { prop: 'remark', label: '备注' },
  { prop: 'createByName', label: '创建人' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '修改时间' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

// 表格配置项
const searchColumns: SearchProps[] = [
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'name', label: '角色名称', el: 'input' },
  { prop: 'code', label: '标识', el: 'input' }
]

// 获取table列表
const getTableList = (params: RoleQuery) => RoleApi.pageRoleApi(params)
</script>
