mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Introducing new features. 增加角色管理

Browse Source
This commit is contained in:
aeizzz 2023-02-02 13:05:15 +08:00
parent a3e6a6eca3
commit 62fa196679
9 changed files with 257 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -23,7 +23,6 @@ import setIntroduction from '/@/utils/setIconfont';
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
const Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
// 定义变量内容
const { messages, locale } = useI18n();

8
src/api/admin/role.ts
View File

@ -8,3 +8,11 @@ export const list = (params?: Object) => {
params
})
}
export const pageList = (params?: Object) => {
return request({
url: '/admin/role/page',
method: "get",
params
})
}

8
src/hooks/table.ts
View File

@ -1,4 +1,4 @@
import {onMounted} from "vue";
import {defineAsyncComponent, onMounted} from "vue";
import {ElMessage} from "element-plus";
export interface BasicTableProps{
@ -130,11 +130,17 @@ export function useTable(options?: BasicTableProps) {
query()
}
const pagination = defineAsyncComponent(() => import('/@/components/Pagination/index.vue'))
const RightToolBar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
return {
RightToolBar,
getDataList,
sizeChangeHandle,
currentChangeHandle,
sortChangeHandle,
pagination
}
}

0
src/views/system/menu/dialog.vue → src/views/system/menu/form.vue
View File

12
src/views/system/menu/index.vue
View File

@ -3,16 +3,10 @@
<el-card shadow="hover">
<div class="system-menu-search mb15">
<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px" v-model="state.search.menuName"> </el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search />
</el-icon>
<el-button size="default" icon="search" type="primary" class="ml10" @click="getTableData">
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu">
<el-icon>
<ele-FolderAdd />
</el-icon>
<el-button size="default" icon="folder-add" type="success" class="ml10" @click="onOpenAddMenu">
新增菜单
</el-button>
</div>
@ -60,7 +54,7 @@ import { ElMessageBox, ElMessage } from 'element-plus';
import { pageList } from '/@/api/admin/menu'
import type { menuData } from './menu'
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义变量内容
const menuDialogRef = ref<InstanceType<typeof MenuDialog>>();

236
src/views/system/role/dialog.vue
View File

@ -1,236 +0,0 @@
<template>
<div class="system-role-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色名称">
<el-input v-model="state.ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色标识">
<template #label>
<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
<span>角色标识</span>
</el-tooltip>
</template>
<el-input v-model="state.ruleForm.roleSign" placeholder="请输入角色标识" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="state.ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色状态">
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="角色描述">
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="菜单权限">
<el-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref } from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
ruleForm: {
roleName: '', // 角色名称
roleSign: '', // 角色标识
sort: 0, // 排序
status: true, // 角色状态
describe: '', // 角色描述
},
menuData: [] as TreeType[],
menuProps: {
children: 'children',
label: 'label',
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
});
// 打开弹窗
const openDialog = (type: string, row: RowRoleType) => {
if (type === 'edit') {
state.ruleForm = row;
state.dialog.title = '修改角色';
state.dialog.submitTxt = '修 改';
} else {
state.dialog.title = '新增角色';
state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用
// nextTick(() => {
// roleDialogFormRef.value.resetFields();
// });
}
state.dialog.isShowDialog = true;
getMenuData();
};
// 关闭弹窗
const closeDialog = () => {
state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
closeDialog();
emit('refresh');
// if (state.dialog.type === 'add') { }
};
// 获取菜单结构数据
const getMenuData = () => {
state.menuData = [
{
id: 1,
label: '系统管理',
children: [
{
id: 11,
label: '菜单管理',
children: [
{
id: 111,
label: '菜单新增',
},
{
id: 112,
label: '菜单修改',
},
{
id: 113,
label: '菜单删除',
},
{
id: 114,
label: '菜单查询',
},
],
},
{
id: 12,
label: '角色管理',
children: [
{
id: 121,
label: '角色新增',
},
{
id: 122,
label: '角色修改',
},
{
id: 123,
label: '角色删除',
},
{
id: 124,
label: '角色查询',
},
],
},
{
id: 13,
label: '用户管理',
children: [
{
id: 131,
label: '用户新增',
},
{
id: 132,
label: '用户修改',
},
{
id: 133,
label: '用户删除',
},
{
id: 134,
label: '用户查询',
},
],
},
],
},
{
id: 2,
label: '权限管理',
children: [
{
id: 21,
label: '前端控制',
children: [
{
id: 211,
label: '页面权限',
},
{
id: 212,
label: '页面权限',
},
],
},
{
id: 22,
label: '后端控制',
children: [
{
id: 221,
label: '页面权限',
},
],
},
],
},
];
};
// 暴露变量
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.system-role-dialog-container {
.menu-data-tree {
width: 100%;
border: 1px solid var(--el-border-color);
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>

164
src/views/system/role/form.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<div class="system-role-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色名称">
<el-input v-model="state.ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="角色标识">
<el-input v-model="state.ruleForm.roleCode" placeholder="请输入角色标识" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="角色描述">
<el-input v-model="state.ruleForm.roleDesc" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="菜单权限">
<el-select v-model="state.dsType" placeholder="请选择" clearable class="w100">
<el-option
v-for="item in dictType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item>
<el-tree
show-checkbox
:check-strictly="false"
:data="state.deptData"
:props="state.deptProps"
:default-checked-keys="state.checkedDsScope"
node-key="id"
highlight-current
default-expand-all
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="systemRoleDialog">
import {nextTick, reactive, ref} from 'vue';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
import { depttree } from '/@/api/admin/dept'
import { pageList } from '/@/api/admin/menu'
// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
ruleForm: {
roleName: '',
roleCode: '',
roleDesc: '',
dsType: ''
},
deptData: [],
checkedDsScope: [],
deptProps: {
children: 'children',
label: 'name',
value: 'value'
},
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
});
const dictType = ref([{
label: '全部',
value: '0'
}, {
label: '自定义',
value: '1'
}, {
label: '本级及子级',
value: '2'
}, {
label: '本级',
value: '3'
}])
// 打开弹窗
const openDialog = (type: string, row: any) => {
if (type === 'edit') {
state.ruleForm = Object.assign({},state.ruleForm,row);
if (row.dsScope) {
state.checkedDsScope = (row.dsScope).split(',')
} else {
state.checkedDsScope = []
}
state.dialog.title = '修改角色';
state.dialog.submitTxt = '修 改';
} else {
state.dialog.title = '新增角色';
state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用
nextTick(() => {
roleDialogFormRef.value.resetFields();
});
}
state.dialog.isShowDialog = true;
getDeptData();
};
// 关闭弹窗
const closeDialog = () => {
state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 提交
const onSubmit = () => {
closeDialog();
emit('refresh');
// if (state.dialog.type === 'add') { }
};
// 获取菜单结构数据
const getDeptData = () => {
depttree().then(res => {
state.deptData = res.data
})
};
// 暴露变量
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
.system-role-dialog-container {
.menu-data-tree {
width: 100%;
border: 1px solid var(--el-border-color);
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
padding: 5px;
}
}
</style>

171
src/views/system/role/index.vue
View File

@ -1,110 +1,94 @@
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15">
<el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
<el-button size="default" type="primary" class="ml10">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增角色
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-row v-show="showSearch">
<div class="mb15">
<el-input size="default" placeholder="请输入角色名称" style="max-width: 180px" v-model="state.queryForm.roleName"> </el-input>
<el-button size="default" icon="search" type="primary" class="ml10" @click="getDataList">
查询
</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px">
<div class="mb15" style="width: 100%">
<el-button size="default" icon="folder-add" type="success" class="ml10" @click="roleDialogRef.openDialog('add')">
新增用户
</el-button>
<right-tool-bar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
</div>
</el-row>
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleSign" label="角色标识" show-overflow-tooltip></el-table-column>
<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
<el-table-column prop="roleDesc" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column label="数据权限" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dictType" :value="scope.row.dsType"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
<el-button size="small" text type="primary" @click="roleDialogRef.openDialog('edit', scope.row);">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
<pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
v-bind="state.pagination"
/>
</div>
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
<RoleDialog ref="roleDialogRef" @refresh="getDataList()" />
</div>
</template>
<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import {defineAsyncComponent, reactive, ref, Ref} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {BasicTableProps, useTable} from "/@/hooks/table";
import { pageList } from "/@/api/admin/role";
// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const RoleDialog = defineAsyncComponent(() => import('./form.vue'));
const DictTag = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
// 定义变量内容
const roleDialogRef = ref();
const state = reactive<SysRoleState>({
tableData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
const showSearch : Ref<Boolean> = ref(true)
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {
roleName: ''
},
pageList: pageList // H
});
// 初始化表格数据
const getTableData = () => {
state.tableData.loading = true;
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '普通用户',
roleSign: i === 0 ? 'admin' : 'common',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
createTime: new Date().toLocaleString(),
});
}
state.tableData.data = data;
state.tableData.total = state.tableData.data.length;
setTimeout(() => {
state.tableData.loading = false;
}, 500);
};
// 打开新增角色弹窗
const onOpenAddRole = (type: string) => {
roleDialogRef.value.openDialog(type);
};
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
roleDialogRef.value.openDialog(type, row);
};
const dictType = ref([{
label: '全部',
value: '0'
}, {
label: '自定义',
value: '1'
}, {
label: '本级及子级',
value: '2'
}, {
label: '本级',
value: '3'
}])
// table hook
const {
RightToolBar,
pagination,
getDataList,
currentChangeHandle,
sizeChangeHandle
} = useTable(state)
// 删除角色
const onRowDel = (row: RowRoleType) => {
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
@ -113,25 +97,12 @@ const onRowDel = (row: RowRoleType) => {
type: 'warning',
})
.then(() => {
getTableData();
getDataList();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
getTableData();
};
// 页面加载时
onMounted(() => {
getTableData();
});
</script>
<style scoped lang="scss">

8
src/views/system/user/index.vue
View File

@ -51,10 +51,10 @@
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="userDialogRef.openDialog('edit', scope.row)"
<el-button size="small" text type="primary" @click="userDialogRef.openDialog('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -83,9 +83,7 @@ import { useDict } from '/@/hooks/dict'
// 引入组件
const UserDialog = defineAsyncComponent(() => import('./form.vue'));
const pagination = defineAsyncComponent(() => import('/@/components/Pagination/index.vue'))
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
const RightToolBar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
const DictTag = defineAsyncComponent(() => import("/@/components/DictTag/index.vue"))
// @ts-ignore
const { lock_flag } = toRefs(useDict('lock_flag'))
@ -116,6 +114,8 @@ const deptData = reactive({
// table hook
const {
RightToolBar,
pagination,
getDataList,
currentChangeHandle,
sizeChangeHandle