km-web/src/views/system/role/authUser.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="userId" :request-api="allocatedUserListApi" :init-param="initParam">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['system:role:add']" :icon="CirclePlus" @click="addUser"> 添加用户 </el-button>
        <el-button
          type="danger"
          v-auth="['system:role:import']"
          :disabled="!scope.isSelected"
          :icon="CircleClose"
          plain
          @click="cancelAuthUserAll(scope.selectedListIds)"
        >
          批量取消授权
        </el-button>
        <el-button type="warning" v-auth="['system:role:export']" :icon="Close" plain @click="closeCurrentTab"> 关闭 </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="CircleClose" v-auth="['system:role:query']" @click="cancelAuthUser(scope.row)"> 取消授权 </el-button>
      </template>
    </ProTable>
    <TableDialog ref="tableDialogRef" @submit-form="submitForm" />
  </div>
</template>

<script setup lang="tsx" name="Role">
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
import TableDialog from '@/components/TableDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CircleClose, Close, CirclePlus } from '@element-plus/icons-vue'
import {
  allocatedUserListApi,
  unallocatedUserListApi,
  authUserSelectAllApi,
  authUserCancelApi,
  authUserCancelAllApi
} from '@/api/modules/system/role'
import { useRoute } from 'vue-router'
import { useTabsStore } from '@/stores/modules/tabs'
import { getDictsApi } from '@/api/modules/system/dictData'
const tabStore = useTabsStore()
const route = useRoute()

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 如果表格需要初始化请求参数
const initParam = reactive({ roleId: route.params.roleId })

// 批量取消用户授权
const cancelAuthUserAll = async (ids: string[]) => {
  await useHandleData(authUserCancelAllApi, { userIds: ids, roleId: route.params.roleId }, '删除所选角色信息信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 取消用户授权
const cancelAuthUser = async (params: any) => {
  await useHandleData(authUserCancelApi, { userId: params.userId, roleId: route.params.roleId }, `删除【${params.userName}】角色信息`)
  proTable.value?.getTableList()
}

// 批量添加
const tableDialogRef = ref<InstanceType<typeof TableDialog> | null>(null)
const addUser = () => {
  const params = {
    title: '选择用户',
    width: 880,
    toolButton: false,
    columns: subColumns,
    initParam: { roleId: route.params.roleId },
    apiParam: val => {
      const userIds = val.map((item: any) => item.userId)
      return {
        userIds,
        roleId: route.params.roleId
      }
    },
    rowKey: 'userId',
    api: authUserSelectAllApi,
    getTableList: unallocatedUserListApi,
    backTableList: allocatedUserListApi
  }
  tableDialogRef.value?.openDialog(params)
}

// 表格弹框提交
const submitForm = () => {
  proTable.value?.getTableList()
}

const closeCurrentTab = () => {
  if (route.meta.affix) return
  tabStore.removeTabs(route.fullPath)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  {
    prop: 'userName',
    label: '用户名称',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'nickName',
    label: '角色昵称'
  },
  {
    prop: 'email',
    label: '邮箱'
  },
  {
    prop: 'phonenumber',
    label: '手机',
    search: {
      el: 'input'
    }
  },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: () => getDictsApi('sys_normal_disable'),
    fieldNames: { label: 'dictLabel', value: 'dictValue' }
  },
  {
    prop: 'createTime',
    label: '创建时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])

// 表格配置项
const subColumns: ColumnProps[] = [
  { type: 'selection', fixed: 'left', width: 60 },
  {
    label: '用户名称',
    prop: 'userName',
    search: {
      el: 'input'
    }
  },
  {
    label: '用户昵称',
    prop: 'nickName'
  },
  {
    label: '邮箱',
    prop: 'email'
  },
  {
    label: '手机',
    prop: 'phonenumber'
  },
  {
    prop: 'status',
    label: '状态',
    tag: true,
    enum: () => getDictsApi('sys_normal_disable'),
    fieldNames: { label: 'dictLabel', value: 'dictValue' }
  },
  {
    prop: 'createTime',
    label: '创建时间'
  }
]
</script>