refactor: 系统管理页面重构和ts类型声明优化
Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01
This commit is contained in:
郝先瑞
@@ -1,128 +0,0 @@
|
||||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'cmenu'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
|
||||
import { listSelectMenus } from '@/api/system/menu';
|
||||
import { listRoleMenuIds, updateRoleMenu } from '@/api/system/role';
|
||||
import { ElTree, ElMessage } from 'element-plus';
|
||||
import { Switch, Position } from '@element-plus/icons-vue';
|
||||
import { Option } from '@/types';
|
||||
|
||||
const emit = defineEmits(['menuClick']);
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
watch(
|
||||
() => props.role.id,
|
||||
newVal => {
|
||||
if (newVal) {
|
||||
state.checkStrictly = true;
|
||||
// 获取角色拥有的的菜单ID
|
||||
listRoleMenuIds(newVal).then(({ data }) => {
|
||||
menuRef.value.setCheckedKeys(data);
|
||||
state.checkStrictly = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
expandedKeys: [], // 展开的节点
|
||||
menuOptions: [] as Option[],
|
||||
checkStrictly: false,
|
||||
isExpandAll: true,
|
||||
refreshTree: true
|
||||
});
|
||||
|
||||
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
|
||||
toRefs(state);
|
||||
|
||||
/**
|
||||
* 加载菜单树
|
||||
*/
|
||||
async function loadMenuData() {
|
||||
await listSelectMenus().then(({ data }) => {
|
||||
state.menuOptions = data;
|
||||
});
|
||||
}
|
||||
|
||||
function handleNodeClick(node: any) {
|
||||
emit('menuClick', node);
|
||||
}
|
||||
|
||||
/**
|
||||
* 展开/收缩
|
||||
*/
|
||||
function toggleExpandAll() {
|
||||
state.refreshTree = false;
|
||||
state.isExpandAll = !state.isExpandAll;
|
||||
nextTick(() => {
|
||||
state.refreshTree = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存角色菜单
|
||||
*/
|
||||
function handleSubmit() {
|
||||
const checkedMenuIds = menuRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.value);
|
||||
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
|
||||
ElMessage.success('提交成功');
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMenuData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-button plain :icon="Switch" @click="toggleExpandAll"
|
||||
>展开/折叠</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-button type="primary" :icon="Position" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-tree
|
||||
class="menu-tree"
|
||||
ref="menuRef"
|
||||
v-if="refreshTree"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:default-expand-all="isExpandAll"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
node-key="value"
|
||||
empty-text="加载菜单中..."
|
||||
:check-strictly="checkStrictly"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-tree {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,162 +0,0 @@
|
||||
<template>
|
||||
<div class="perm-container">
|
||||
<div v-if="permissionOptions.length > 0">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-checkbox
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
>全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-button type="primary" :icon="Position" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="item in permissionOptions"
|
||||
style="margin-top: 20px"
|
||||
:key="item.id"
|
||||
>
|
||||
<el-checkbox
|
||||
border
|
||||
v-model="item.checked"
|
||||
:label="item.id"
|
||||
:key="item.id"
|
||||
@change="handleCheckedPermChange"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="text-align: center" v-else>
|
||||
<el-empty
|
||||
:description="
|
||||
!role
|
||||
? '请选择角色'
|
||||
: !menu
|
||||
? '请选择菜单'
|
||||
: '暂无数据，您可在【菜单管理】配置权限数据'
|
||||
"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, toRefs, watch } from 'vue';
|
||||
import { listPerms } from '@/api/system/perm';
|
||||
import { listRolePerms, saveRolePerms } from '@/api/system/role';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Position } from '@element-plus/icons-vue';
|
||||
import { PermQueryParam } from '@/types';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.menu.id,
|
||||
value => {
|
||||
if (value) {
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
permissionOptions: [] as Array<any>,
|
||||
isIndeterminate: true,
|
||||
checkAll: false,
|
||||
checkedPerms: []
|
||||
});
|
||||
|
||||
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
|
||||
|
||||
function handleCheckAllChange(checked: any) {
|
||||
state.isIndeterminate = false;
|
||||
if (checked) {
|
||||
state.permissionOptions.map(item => (item.checked = true));
|
||||
} else {
|
||||
// 全不选
|
||||
state.permissionOptions.map(item => (item.checked = false));
|
||||
}
|
||||
}
|
||||
|
||||
function handleCheckedPermChange() {
|
||||
const checkedCount = state.permissionOptions.filter(
|
||||
item => item.checked
|
||||
).length;
|
||||
state.checkAll = checkedCount === state.permissionOptions.length;
|
||||
state.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < state.permissionOptions.length;
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
if (!props.menu.id) {
|
||||
resetData();
|
||||
return false;
|
||||
}
|
||||
state.loading = true;
|
||||
|
||||
const params = { menuId: props.menu.id } as PermQueryParam;
|
||||
listPerms(params).then(({ data }) => {
|
||||
state.permissionOptions = data;
|
||||
listRolePerms(props.role.id, props.menu.id).then(response => {
|
||||
const checkedPermIds = response.data;
|
||||
state.permissionOptions.map((item: any) => {
|
||||
if (checkedPermIds.includes(item.id)) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
state.checkAll = false;
|
||||
}
|
||||
});
|
||||
state.loading = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const checkedPermIds = state.permissionOptions
|
||||
.filter(item => item.checked)
|
||||
.map(item => item.id);
|
||||
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
|
||||
ElMessage.success('提交成功');
|
||||
});
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
state.permissionOptions = [];
|
||||
state.isIndeterminate = true;
|
||||
state.checkAll = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.perm-container {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,277 +0,0 @@
|
||||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'role'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import {
|
||||
listRolePages,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles
|
||||
} from '@/api/system/role';
|
||||
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
|
||||
import { RoleFormData, RoleItem, RoleQueryParam } from '@/types';
|
||||
|
||||
const emit = defineEmits(['roleClick']);
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
} as RoleQueryParam,
|
||||
roleList: [] as RoleItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: '',
|
||||
visible: false
|
||||
},
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules
|
||||
} = toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
emit('roleClick', {});
|
||||
state.loading = true;
|
||||
listRolePages(state.queryParams).then(({ data }) => {
|
||||
state.roleList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length !== 1;
|
||||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
function handleRowClick(row: any) {
|
||||
emit('roleClick', row);
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
state.dialog = {
|
||||
title: '添加角色',
|
||||
visible: true
|
||||
};
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
state.dialog = {
|
||||
title: '修改角色',
|
||||
visible: true
|
||||
};
|
||||
const roleId = row.id || state.ids;
|
||||
getRoleFormDetail(roleId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
} else {
|
||||
addRole(state.formData).then(() => {
|
||||
ElMessage.success('新增成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
function cancel() {
|
||||
state.dialog.visible = false;
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
|
||||
function handleDelete(row: any) {
|
||||
const ids = [row.id || state.ids].join(',');
|
||||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
handleQuery();
|
||||
});
|
||||
})
|
||||
.catch(() => ElMessage.info('已取消删除'));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="角色名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="角色名称" prop="name" />
|
||||
<el-table-column label="角色编码" prop="code" />
|
||||
<el-table-column label="操作" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
@close="cancel"
|
||||
width="450px"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,116 +1,462 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'role',
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import {
|
||||
listPageRoles,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles,
|
||||
getRoleResourceIds,
|
||||
updateRoleResource,
|
||||
} from '@/api/system/role';
|
||||
import { getResource } from '@/api/system/menu';
|
||||
|
||||
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
|
||||
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
|
||||
import {
|
||||
RoleFormData,
|
||||
RoleItem,
|
||||
RoleQueryParam,
|
||||
} from '@/types/api/system/role';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
|
||||
const emit = defineEmits(['roleClick']);
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm);
|
||||
const resourceRef = ref(ElTree);
|
||||
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
} as RoleQueryParam,
|
||||
roleList: [] as RoleItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: '',
|
||||
visible: false,
|
||||
},
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
},
|
||||
resourceDialogVisible: false,
|
||||
menuOptions: [] as any[],
|
||||
permOptions: [] as any[],
|
||||
checkStrictly: false,
|
||||
permGroupList: [],
|
||||
checkedRole: {
|
||||
id: '',
|
||||
name: '',
|
||||
}, // 选中的角色
|
||||
});
|
||||
|
||||
const {
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules,
|
||||
resourceDialogVisible,
|
||||
menuOptions,
|
||||
permOptions,
|
||||
checkedRole,
|
||||
checkStrictly,
|
||||
} = toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
emit('roleClick', {});
|
||||
state.loading = true;
|
||||
listPageRoles(state.queryParams).then(({ data }) => {
|
||||
state.roleList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length !== 1;
|
||||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
function handleRowClick(row: any) {
|
||||
emit('roleClick', row);
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
state.dialog = {
|
||||
title: '添加角色',
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
state.dialog = {
|
||||
title: '修改角色',
|
||||
visible: true,
|
||||
};
|
||||
const roleId = row.id || state.ids;
|
||||
getRoleFormDetail(roleId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
}
|
||||
|
||||
function submitFormData() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
} else {
|
||||
addRole(state.formData).then(() => {
|
||||
cancel();
|
||||
ElMessage.success('新增成功');
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹窗关闭
|
||||
*/
|
||||
function cancel() {
|
||||
state.dialog.visible = false;
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
function handleDelete(row: any) {
|
||||
const ids = [row.id || state.ids].join(',');
|
||||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
handleQuery();
|
||||
});
|
||||
})
|
||||
.catch(() => ElMessage.info('已取消删除'));
|
||||
}
|
||||
|
||||
/**
|
||||
* 分配资源权限
|
||||
*/
|
||||
function handleResourceAssign(row: RoleItem) {
|
||||
resourceDialogVisible.value = true;
|
||||
permOptions.value.map((item) => (item.checked = false));
|
||||
|
||||
const roleId: any = row.id;
|
||||
checkedRole.value = {
|
||||
id: roleId,
|
||||
name: row.name,
|
||||
};
|
||||
//资源下拉数据
|
||||
getResource().then((response) => {
|
||||
checkStrictly.value = true; // 父子节点不互相关联
|
||||
state.menuOptions = response.data.menus;
|
||||
state.permOptions = response.data.perms;
|
||||
|
||||
// 获取角色拥有的资源数据进行勾选
|
||||
getRoleResourceIds(roleId).then((res) => {
|
||||
const checkedMenuIds = res.data.menuIds;
|
||||
const checkedPermIds = res.data.permIds;
|
||||
|
||||
nextTick(() => {
|
||||
resourceRef.value.setCheckedKeys(checkedMenuIds);
|
||||
permOptions.value.forEach((perm) => {
|
||||
if (checkedPermIds.includes(perm.value)) {
|
||||
perm.checked = true;
|
||||
} else {
|
||||
perm.checked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
checkStrictly.value = false; // 父子节点互相关联
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交资源权限
|
||||
*/
|
||||
function handleRoleResourceSubmit() {
|
||||
const checkedMenuIds: any[] = resourceRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.value);
|
||||
|
||||
const checkedPermIds = state.permOptions
|
||||
.filter((item) => item.checked)
|
||||
.map((item) => item.value);
|
||||
|
||||
const roleResourceData = {
|
||||
menuIds: checkedMenuIds,
|
||||
permIds: checkedPermIds,
|
||||
};
|
||||
|
||||
updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
|
||||
ElMessage.success('修改成功');
|
||||
state.resourceDialogVisible = false;
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
|
||||
// 取消资源分配
|
||||
function cancelResourceAssign() {
|
||||
state.resourceDialogVisible = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon color="#333" icon-class="role" />
|
||||
角色列表
|
||||
</template>
|
||||
<Role ref="role" @roleClick="handleRoleClick" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 搜索表单 -->
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon color="#333" icon-class="menu" />
|
||||
<span style="margin: 0 5px">菜单分配</span>
|
||||
<el-tag type="success" v-if="role.id">
|
||||
<svg-icon color="green" icon-class="role" />
|
||||
{{ role.name }}
|
||||
</el-tag>
|
||||
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
|
||||
</template>
|
||||
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="角色名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="角色名称" prop="name" />
|
||||
<el-table-column label="角色编码" prop="code" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleResourceAssign(scope.row)"
|
||||
>
|
||||
<svg-icon icon-class="perm" />
|
||||
<span style="margin: 0 5px">权限分配</span>
|
||||
</el-button>
|
||||
|
||||
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
|
||||
<svg-icon color="green" icon-class="role" />
|
||||
{{ role.name }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
type="warning"
|
||||
style="margin: 0 5px 0 0"
|
||||
v-else
|
||||
size="small"
|
||||
>
|
||||
请选择角色</el-tag
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-tag type="success" v-if="menu.id" size="small">
|
||||
<svg-icon icon-class="menu" />
|
||||
{{ menu.name }}
|
||||
</el-tag>
|
||||
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
width="500px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFormData">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:title="'【' + checkedRole.name + '】资源权限'"
|
||||
v-model="resourceDialogVisible"
|
||||
width="1000px"
|
||||
>
|
||||
<el-scrollbar max-height="600px">
|
||||
<el-tree
|
||||
ref="resourceRef"
|
||||
node-key="value"
|
||||
show-checkbox
|
||||
:data="menuOptions"
|
||||
:default-expand-all="true"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div v-if="data.isPerm == true" class="resource-tree-node">
|
||||
<div class="resource-tree-node__content">
|
||||
<el-checkbox
|
||||
v-for="perm in permOptions.filter(
|
||||
(perm) => perm.parentId == data.permPid
|
||||
)"
|
||||
:key="perm.value"
|
||||
:label="perm.value"
|
||||
v-model="perm.checked"
|
||||
border
|
||||
size="small"
|
||||
>{{ perm.label }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else>{{ node.label }}</span>
|
||||
</template>
|
||||
<perm ref="perm" :menu="menu" :role="role" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="handleRoleResourceSubmit"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button @click="cancelResourceAssign">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
<style lang="scss">
|
||||
.resource-tree-node {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
margin-left: -28px !important;
|
||||
|
||||
import Role from './components/Role.vue';
|
||||
import Menus from './components/Menu.vue';
|
||||
import Perm from './components/Perm.vue';
|
||||
|
||||
const state = reactive({
|
||||
role: {
|
||||
id: undefined,
|
||||
name: ''
|
||||
},
|
||||
menu: {
|
||||
id: undefined,
|
||||
name: ''
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
});
|
||||
.el-checkbox--default {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
const { role, menu } = toRefs(state);
|
||||
|
||||
function handleRoleClick(roleRow: any) {
|
||||
if (roleRow) {
|
||||
state.role = {
|
||||
id: roleRow.id,
|
||||
name: roleRow.name
|
||||
};
|
||||
} else {
|
||||
state.role = {
|
||||
id: undefined,
|
||||
name: ''
|
||||
};
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&:hover {
|
||||
background-color: var(--el-tree-node-hover-bg-color);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--el-tree-node-hover-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMenuClick(menuRow: any) {
|
||||
if (!state.role.id) {
|
||||
ElMessage.warning('请选择角色');
|
||||
return false;
|
||||
}
|
||||
if (menuRow) {
|
||||
state.menu = {
|
||||
id: menuRow.value,
|
||||
name: menuRow.label
|
||||
};
|
||||
} else {
|
||||
state.menu = {
|
||||
id: undefined,
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
.el-checkbox.el-checkbox--small {
|
||||
margin: 5px;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user