152 lines
4.1 KiB
Vue
152 lines
4.1 KiB
Vue
<template>
|
|
<!-- 面包屑 -->
|
|
<el-breadcrumb>
|
|
<el-breadcrumb-item>角色管理</el-breadcrumb-item>
|
|
<el-breadcrumb-item to="/role/list">角色列表</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<!-- 搜索 -->
|
|
<el-form inline :model="params">
|
|
<el-form-item label="角色">
|
|
<el-input v-model="params.role" placeholder="请输入角色信息"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select
|
|
v-model="params.role_status"
|
|
clearable
|
|
placeholder="请选择状态"
|
|
>
|
|
<el-option label="启用" value="1"></el-option>
|
|
<el-option label="停用" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="tableRef.reload()">搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button type="primary" @click="addRoleDialogVisible = true">
|
|
添加
|
|
</el-button>
|
|
<!-- 下拉操作 -->
|
|
<el-dropdown v-if="selectionData.length">
|
|
<el-button type="primary">
|
|
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handleDelete(selectionData)"
|
|
>批量删除</el-dropdown-item
|
|
>
|
|
<el-dropdown-item @click="changStatus(1)">启用角色</el-dropdown-item>
|
|
<el-dropdown-item @click="changStatus(2)">禁用角色</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<!-- 数据表格 -->
|
|
<DataTable
|
|
ref="tableRef"
|
|
style="width: 100%"
|
|
:onSelectionChange="data => (selectionData = data)"
|
|
:column="column"
|
|
:params="params"
|
|
:request="params => getRoleList(params)"
|
|
>
|
|
<template #chaoz="scope">
|
|
<el-button
|
|
size="small"
|
|
@click="(oauthDialogVisible = true), (currentData = scope.row)"
|
|
>
|
|
授权
|
|
</el-button>
|
|
<el-button size="small" @click="editRoleDialogVisible = scope.row">
|
|
编辑
|
|
</el-button>
|
|
<el-button size="small" type="danger" @click="handleDelete([scope.row])">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</DataTable>
|
|
<!-- 添加角色 -->
|
|
<AddRoleDialog
|
|
v-model="addRoleDialogVisible"
|
|
:done="() => tableRef.reload()"
|
|
></AddRoleDialog>
|
|
<!-- 编辑角色 -->
|
|
<EditRoleDialog
|
|
v-model="editRoleDialogVisible"
|
|
:done="() => tableRef.reload()"
|
|
></EditRoleDialog>
|
|
<!-- 授权 -->
|
|
<OauthDialog v-model="oauthDialogVisible" :data="currentData"></OauthDialog>
|
|
</template>
|
|
<script setup>
|
|
import { ArrowDown } from '@element-plus/icons-vue';
|
|
import { ref, reactive } from 'vue';
|
|
import { getRoleList, deleteRole, updateRoleStatus } from '~/service/role';
|
|
import AddRoleDialog from './components/AddRoleDialog.vue';
|
|
import EditRoleDialog from './components/EditRoleDialog.vue';
|
|
import OauthDialog from './components/OauthDialog.vue';
|
|
|
|
const tableRef = ref();
|
|
const selectionData = ref([]);
|
|
// 查询参数
|
|
const params = reactive({
|
|
role: '',
|
|
role_status: ''
|
|
});
|
|
const column = [
|
|
{
|
|
fixed: true,
|
|
type: 'selection'
|
|
},
|
|
{
|
|
prop: 'role_name',
|
|
label: '名称',
|
|
width: '150'
|
|
},
|
|
{
|
|
prop: 'role_status_text',
|
|
label: '状态',
|
|
width: '150'
|
|
},
|
|
{
|
|
label: '操作',
|
|
prop: 'chaoz',
|
|
width: '450'
|
|
}
|
|
];
|
|
|
|
const addRoleDialogVisible = ref(false);
|
|
const editRoleDialogVisible = ref({});
|
|
|
|
const currentData = ref({});
|
|
const bindUserDialogVisible = ref(false);
|
|
const viewUserDialogVisible = ref(false);
|
|
const oauthDialogVisible = ref(false);
|
|
|
|
// 删除数据
|
|
const handleDelete = data => {
|
|
ElMessageBox.confirm(`您确定要删除该角色吗？`).then(async () => {
|
|
const { code } = await deleteRole({
|
|
role_guid: data.map(v => v.role_guid).join()
|
|
});
|
|
if (code == 0) {
|
|
tableRef.value.reload();
|
|
}
|
|
});
|
|
};
|
|
// 修改状态
|
|
const changStatus = async status => {
|
|
if (selectionData.value.length == 0) {
|
|
ElMessage.warning('请选择数据');
|
|
return;
|
|
}
|
|
const { code } = await updateRoleStatus({
|
|
role_guid: selectionData.value.map(v => v.role_guid).join(),
|
|
role_status: status
|
|
});
|
|
if (code == 0) {
|
|
tableRef.value.reload();
|
|
}
|
|
};
|
|
</script>
|