fs-admin/src/views/system/Role.vue

<script setup lang="ts">
import type { BasicForm, ICRUD } from '@/types/form'
import { getUserList } from '@/api/user'
import { createRole, getRoleList, delRole, createRoleUser, getRoleUserList, delRoleUser } from '@/api/role'

const CRUD: ICRUD = {
  create(data: any) {
    return createRole(data)
  },
  update(data: any) {
    return createRole(data)
  },
  getList(data: any) {
    return getRoleList({
      name: '',
      ...data
    })
  },
  delete(data: any) {
    return delRole({ ids: data.id })
  },
  deleteBatch(data: any) {
    return delRole(data)
  }
}

const formConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '角色名称',
      value: '',
      name: 'name',
      type: 'input',
      rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      search: true
    },
    {
      label: '英文名称',
      value: '',
      name: 'enname',
      type: 'input',
      rules: [{ required: true, message: '请输入角色英文名称', trigger: 'blur' }]
    }
  ]
})

const curRole = ref<any>(null)
// const handleRole = (row: any) => {
//   curRole.value = row
// }
const handleUser = (row: any) => {
  curRole.value = row
  userRef.value?.refresh()
}

// 用户table
const UserCRUD: ICRUD = {
  create(data: any) {
    return createRoleUser(data)
  },
  update(data: any) {
    return createRoleUser(data)
  },
  getList(data: any) {
    return getRoleUserList({ id: curRole.value.id, ...data }).then((res: any) => {
      slectedUser.value = res.rows.map((item: any) => item.id)
      return res
    })
  },
  delete(data: any) {
    return delRoleUser({ roleId: curRole.value.id, userId: data.id })
  }
}
const userFormConfig = reactive<BasicForm>({
  span: 24,
  formItems: []
})

const dialogVisible = ref(false)
const slectedUser = ref<any>([])
const userList = ref<any>([])
const userRef = ref<any>(null)

const handleAddUser = () => {
  dialogVisible.value = true
  getUserList({
    pageSize: -1
  }).then((res: any) => {
    userList.value = res.rows
  })
}
const closeDialog = () => {
  dialogVisible.value = false
}
const handleSubmit = () => {
  createRoleUser({
    role: { id: curRole.value.id },
    ids: slectedUser.value
  }).then(() => {
    userRef.value.refresh()
    dialogVisible.value = false
  })
}
</script>

<template>
  <el-row :gutter="16" class="h-full">
    <el-col :span="curRole ? 12 : 24" class="h-full">
      <pro-table :crud="CRUD" :formConfig="formConfig" :tableConfig="{ operateWidth: 220 }">
        <vxe-column field="name" title="角色名称"></vxe-column>
        <vxe-column field="enname" title="英文名称"></vxe-column>
        <template #operateBefore="{ row }">
          <!-- <el-button type="primary" size="small" @click="handleRole(row)">角色授权</el-button> -->
          <el-button type="primary" size="small" @click="handleUser(row)">分配用户</el-button>
        </template>
      </pro-table>
    </el-col>
    <el-col :span="12" v-if="curRole">
      <el-card class="h-full" shadow="never" :body-style="{ height: '100%', padding: 0 }">
        <template #header>
          <div class="flex justify-between">
            <div>分配用户</div>
            <el-button icon="back" link @click="curRole = null">关闭</el-button>
          </div>
        </template>
        <pro-table
          ref="userRef"
          height="calc(100% - 53px)"
          :crud="UserCRUD"
          :formConfig="userFormConfig"
          :showToolbar="false"
          :tableConfig="{ operateWidth: 100, showEdit: false }"
          :selection="false"
        >
          <template #header>
            <div class="mb-20px">
              <el-button type="primary" @click="handleAddUser">添加用户</el-button>
            </div>
          </template>
          <vxe-column field="name" title="登录名"></vxe-column>
          <vxe-column field="name" title="姓名"></vxe-column>
          <vxe-column field="phone" title="手机号"></vxe-column>
        </pro-table>
      </el-card>
    </el-col>
  </el-row>
  <el-dialog v-model="dialogVisible" title="添加用户" @close="closeDialog">
    <el-transfer
      v-model="slectedUser"
      :data="userList"
      :titles="['用户列表', '已选用户']"
      :props="{ key: 'id', label: 'name' }"
    />
    <template #footer>
      <el-button icon="Close" @click="closeDialog">取消</el-button>
      <el-button icon="Check" type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </el-dialog>
</template>

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