6.30 提交 角色菜单

This commit is contained in:
zoujiandong 2023-06-30 14:58:22 +08:00
parent 4db41129a5
commit 616519e0f0
15 changed files with 595 additions and 398 deletions

1
components.d.ts vendored
View File

@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
DeleteModal: typeof import('./src/components/DeleteModal.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Upload: typeof import('./src/components/upload.vue')['default']
}
}

View File

@ -24,7 +24,7 @@ export function getAppConfig() {
// 根据角色获取菜单
export function getUserMenuRole() {
return request({
url:'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu',//'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu',
url:'/admin/role/menu',//'https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu', //
method: 'get'
})
}

View File

@ -1,6 +1,6 @@
import request from '../../utils/request'
const url = '/api/v1/menu';
const url = '/admin/menu';
export function getMenu(params) {
return request({

View File

@ -1,6 +1,6 @@
import request from '../../utils/request';
const url = '/admin/role/list';
const url = '/admin/role';
export function getRole(params) {
return request({
url,
@ -41,10 +41,23 @@ export function updateRoleScoped(data) {
})
}
export function getRoleMenuTree(params, roleId) {
export function getRoleMenuTree() {
return request({
url:`/api/v1/roleMenuTreeselect/${roleId}`,
method: 'get',
params
url:'/admin/menu',//"https://www.fastmock.site/mock/ebb1956b65d6078940cacb295a06be27/mock/menu", //'/admin/menu',
method: 'get'
})
}
}
export function roleDetail(id) {
return request({
url: `${url}/${id}`,
method: 'get'
})
}
export function roleStatus(data,id) {
return request({
url: `/admin/role/status/${id}`,
method: 'put',
data
})
}

View File

@ -1,6 +1,6 @@
import request from '../../utils/request';
const url = '/api/v1/sys-user';
const url = '/admin/user';
export function getUser(params) {

View File

@ -1,8 +1,9 @@
<template>
<a-modal v-model:visible="deleteVisible" :title="data.length > 1 ? '批量删除' : '删除'" title-align="start" @close="handleClose" width="400px">
<a-form :model="data" :rules="rules" ref="modalFormRef" size="medium" label-align="left" auto-label-width>
<a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length > 1">您正在批量删除请确认删除数据是否正确</a-alert>
<a-form-item label="摘要" label-col-flex="100px">
<a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length > 1">您正在批量删除请确认删除数据是否正确</a-alert>
<a-alert type="warning" style="margin-bottom: 16px;" v-if="data.length == 1">您确定删除该条数据</a-alert>
<!-- <a-form-item label="摘要" label-col-flex="100px">
<a-tag color="gray" style="padding: 0 0px; margin-right: 5px">
<template #icon>
<a-tag color="arcoblue">数量</a-tag>
@ -12,7 +13,7 @@
</a-form-item>
<a-form-item field="deleteConfirmation" label="删除确认" label-col-flex="100px">
<a-input v-model.trim="data.deleteConfirmation" placeholder="请输入 DELETE 以确认删除"></a-input>
</a-form-item>
</a-form-item> -->
</a-form>
<template #footer>
<a-button @click="handleClose"><template #icon><icon-close /></template>取消</a-button>
@ -30,7 +31,10 @@ const { proxy } = getCurrentInstance();
const props = defineProps({
//
data: {
type: Array,
type: Object,
},
delType:{
type: String,
},
//
visible: {
@ -43,7 +47,7 @@ const props = defineProps({
},
});
const { data, visible, apiDelete } = toRefs(props);
const { data, visible, apiDelete,delType} = toRefs(props);
const emits = defineEmits(['deleteVisibleChange']);
@ -88,11 +92,18 @@ watch(() => props.visible,(value) => {
const handleConfirm = () => {
proxy.$refs.modalFormRef.validate((valid) => {
if (!valid) {
console.log(delType.value)
// Akiraka 20230210
props.apiDelete({ ids: data.value }).then(response => {
props.apiDelete({ [delType.value]: data.value }).then(response => {
// Akiraka 20230210
if(response.code==200){
Message.success("数据删除成功");
}else{
proxy.$notification.error(response.message);
}
deleteVisible.value = false;
Message.success("数据删除成功");
console.log(response)
})
}
})

22
src/components/upload.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<a-upload action="/" :auto-upload="false" accept="image/png, image/jpeg" @before-upload="beforeUpload" @change="onChange" :fileList="file ? [file] : []" :show-file-list="false"/>
</template>
<script setup>
import { ref,getCurrentInstance,} from 'vue';
const { proxy } = getCurrentInstance();
const file = ref();
const beforeUpload = (file) => {
return new Promise((resolve, reject) => {
if(file.size>=10*1024*1024){
proxy.$notification.error("图片大小不能超过10M");
reject('cancel')
}else{
resolve(true)
}
});
};
const onChange = (_, currentFile) => {
console.log(currentFile);
};
</script>

View File

@ -7,13 +7,13 @@
<template #icon>
<component :is="menu.icon" v-if="menu.icon"/>
</template>
<template #title>{{ menu.title }}1</template>
<template #title>{{ menu.menu_name }}</template>
<sub-menu :menuList="menu.children" />
</a-sub-menu>
<a-menu-item
v-if="menu.parent_id!=0 && isRouteParams(menu.path)"
:key="menu.path"
>{{ menu.title }}2</a-menu-item>
>{{ menu.menu_name }}</a-menu-item>
</template>
</template>
<script setup>

View File

@ -44,6 +44,11 @@ const routes = [
},
]
},
{
path: '/upload',
name: 'upload',
component: () => import('../views/upload/index.vue'),
},
{
path: '/login',
name: 'login',

View File

@ -19,22 +19,22 @@ export const usePermissionStore = defineStore('permisson', {
this.menuList = menus;
},
GenerateRoutes(routeList) {
try {
const routes = [];
routeList.forEach((item) => {
const route = {};
const route = {};
route.path = item.path;
route.name = item.menu_name;
route.name = item.menu_title;
if (item.parent_id==0) {
route.component = modules[`../views/index.vue`];
} else{
route.component = modules[`../views${item.component}.vue`] || modules['../views/error-page/888.vue'];
}
route.meta = {
title: item.title,
title: item.menu_name,
permission: item.permission,
};
if (item.children) {
route.children = this.GenerateRoutes(item.children);
@ -44,6 +44,9 @@ export const usePermissionStore = defineStore('permisson', {
});
return routes;
} catch (error) {
}
},
async getMenuRole() {
const res = await getUserMenuRole();

View File

@ -1,13 +1,13 @@
<template>
<div class="app-container">
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
<a-form-item field="title" label="菜单名称">
<a-input v-model="queryForm.title" placeholder="请输入菜单名称" @press-enter="handleQuery"/>
<!-- <a-form :model="queryForm" ref="queryFormRef" layout="inline">
<a-form-item field="menu_title" label="菜单名称">
<a-input v-model="queryForm.menu_title" placeholder="请输入菜单名称" @press-enter="handleQuery"/>
</a-form-item>
<a-form-item field="visible" label="状态">
<a-select v-model="queryForm.visible" placeholder="请选择菜单状态">
<a-option value="1">显示</a-option>
<a-option value="0">隐藏</a-option>
<a-form-item field="menu_status" label="状态">
<a-select v-model="queryForm.menu_status" placeholder="请选择菜单状态">
<a-option :value="1">显示</a-option>
<a-option :value="0">隐藏</a-option>
</a-select>
</a-form-item>
<a-form-item>
@ -18,7 +18,7 @@
</a-form-item>
</a-form>
<a-divider />
<a-divider /> -->
<!-- 动作 -->
<div class="action">
@ -28,49 +28,49 @@
</div>
<!-- 菜单管理列表 -->
<a-table :columns="columns" :data="tableData" row-key="menuId" :pagination="false">
<a-table :columns="columns" :data="tableData" row-key="menu_id" :pagination="false">
<template #icon="{ record }">
<component :is="record.icon" :style="{ fontSize: '18px' }"></component>
</template>
<template #menutype="{ record }">
<a-tag color="purple" v-if="record.menuType === 'M'">目录</a-tag>
<a-tag color="orange" v-else-if="record.menuType === 'C'">菜单</a-tag>
<a-tag color="blue" v-else-if="record.menuType === 'F'">按钮</a-tag>
<template #menu_type="{ record }">
<a-tag color="purple" v-if="record.menu_type == 1">模块</a-tag>
<a-tag color="orange" v-else-if="record.menu_type ==2">菜单</a-tag>
<a-tag color="blue" v-else-if="record.menu_type ==3">按钮</a-tag>
</template>
<template #isFrame="{ record }">
<!-- <template #isFrame="{ record }">
<a-tag v-if="record.isFrame == '1'" color="green">内部</a-tag>
<a-tag v-else color="red">外部</a-tag>
</template>
<template #visible="{ record }">
<a-tag v-if="record.visible == '0'" color="green">显示</a-tag>
</template> -->
<template #menu_status="{ record }">
<a-tag v-if="record.menu_status == '0'" color="green">显示</a-tag>
<a-tag v-else color="red">隐藏</a-tag>
</template>
<template #action="{ record }">
<a-button v-has="'admin:sysMenu:add'" type="text" @click="handleAddMenu(record.menuId)">新增</a-button>
<a-button v-has="'admin:sysMenu:edit'" type="text" @click="handleUpdate(record)">修改</a-button>
<a-button v-has="'admin:sysMenu:remove'" type="text" @click="() => { deleteVisible = true; deleteData = [record.menuId]; }">删除</a-button>
<a-button type="text" @click="handleAddMenu(record.menuId)">新增</a-button>
<a-button type="text" @click="handleUpdate(record)">修改</a-button>
<a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.menu_id]; }">删除</a-button>
</template>
</a-table>
<!-- 菜单管理新增与提交弹窗 -->
<a-modal v-model:visible="modalVisible" :title="modalTitle" title-align="start" :width="800" modal-class="menu-modal" @before-ok="handleSubmit" @close="() => {$refs.modalFormRef.resetFields(); modalForm.menuId = null;}">
<a-form :model="modalForm" :rules="modalRules" ref="modalFormRef" auto-label-width label-align="left">
<a-form-item field="menuType" label="菜单类型">
<a-radio-group v-model="modalForm.menuType">
<a-radio value="M">目录</a-radio>
<a-radio value="C">菜单</a-radio>
<a-radio value="F">按钮</a-radio>
<a-form-item field="menu_type" label="菜单类型">
<a-radio-group v-model="modalForm.menu_type">
<a-radio :value='1'>模块</a-radio>
<a-radio :value='2'>菜单</a-radio>
<a-radio :value='3'>按钮</a-radio>
</a-radio-group>
</a-form-item>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="parentId" label="上级菜单">
<a-tree-select v-model="modalForm.parentId" :data="tableData" :field-names="{ key: 'menuId', icon: '_' }" :allow-search="true" :filter-tree-node="filterTreeNode" placeholder="请选择上级菜单"/>
<a-form-item field="parent_id" label="上级菜单">
<a-tree-select v-model="modalForm.parent_id" :data="tableData" :field-names="{ key: 'menu_id', icon: '_' ,title:'menu_name'}" :allow-search="true" :filter-tree-node="filterTreeNode" placeholder="请选择上级菜单"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="title" label="菜单标题">
<a-input v-model="modalForm.title" placeholder="请输入菜单标题" />
<a-form-item field="menu_name" label="菜单标题">
<a-input v-model="modalForm.menu_name" placeholder="请输入菜单标题" />
</a-form-item>
</a-col>
</a-row>
@ -85,49 +85,50 @@
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="sort" label="显示排序">
<a-input-number v-model="modalForm.sort" mode="button" />
<a-form-item field="order_num" label="显示排序">
<a-input-number v-model="modalForm.order_num" mode="button" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12" v-if="modalForm.menuType !== 'F'">
<a-form-item field="menuName" label="路由名称">
<a-input v-model="modalForm.menuName" placeholder="请输入路由名称" />
<a-col :span="12" v-if="modalForm.menu_type !== 3 && modalForm.menu_type">
<a-form-item field="menu_title" label="路由名称">
<a-input v-model="modalForm.menu_title" placeholder="请输入路由名称" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="modalForm.menuType !== 'F'">
</a-col>
<a-col :span="12" v-if="modalForm.menu_type !== 3 && modalForm.menu_type">
<a-form-item field="component" label="组件名称">
<a-input v-model="modalForm.component" placeholder="请输入组件名称"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12" v-if="modalForm.menuType !== 'F'">
<a-row :gutter="24">
<a-col :span="12" v-if="modalForm.menu_type !== 3">
<a-form-item field="path" label="路由地址">
<a-input v-model="modalForm.path" placeholder="请输入路由地址" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="modalForm.menuType === 'C' || modalForm.menuType === 'F'">
<!-- <a-col :span="12" v-if="modalForm.menuType === 'C' || modalForm.menuType === 'F'">
<a-form-item field="permission" label="权限标识">
<a-input v-model="modalForm.permission" placeholder="请输入权限标识"/>
</a-form-item>
</a-col>
</a-col> -->
</a-row>
<a-form-item field="isFrame" label="是否外链" v-if="modalForm.menuType !== 'F'">
<!-- <a-form-item field="isFrame" label="是否外链" v-if="modalForm.menuType !== 'F'">
<a-radio-group v-model="modalForm.isFrame">
<a-radio value="0"></a-radio>
<a-radio value="1"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item field="visible" label="菜单状态" v-if="modalForm.menuType !== 'F'">
<a-radio-group v-model="modalForm.visible">
<a-radio value="0">显示</a-radio>
<a-radio value="1">隐藏</a-radio>
</a-form-item> -->
<a-form-item field="menu_status" label="菜单状态" v-if="modalForm.menuType !== 'F'">
<a-radio-group v-model="modalForm.menu_status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item field="apis" label="API权限" v-if="modalForm.menuType !== 'M'">
<a-transfer v-model:model-value="modalForm.apis" :data="transferData" :title="['未授权', '已授权']" show-search />
<a-form-item field="api_ids" label="API权限" v-if="modalForm.menu_type !== 1 && modalForm.menu_type">
<a-transfer v-model:model-value="modalForm.api_ids" :data="transferData" :title="['未授权', '已授权']" show-search />
</a-form-item>
</a-form>
</a-modal>
@ -136,6 +137,7 @@
<DeleteModal
:data="deleteData"
:visible="deleteVisible"
:delType="'menu_ids'"
:apiDelete="removeMenu"
@deleteVisibleChange="() => deleteVisible = false"
/>
@ -190,15 +192,13 @@ function useQueryData() {
//
const modalForm = reactive({
menuType: 'M',
sort: 0,
isFrame: '1',
visible: '0',
menu_type: '',
menu_status: 0,
});
//
const modalRules = {
title: [{ required: true, message: '请输入菜单名称' }],
menu_name: [{ required: true, message: '请输入菜单名称' }],
path: [{ required: true, message: '请输入菜单路由地址' }],
component: [
{ required: true, message: '请输入菜单路由地址' },
@ -209,7 +209,7 @@ const modalRules = {
// 20220715
watchEffect(() => {
// Layout
if (modalForm.menuType == "M") {
if (modalForm.menu_type == 1) {
modalForm.component = "Layout"
} else {
// Layout
@ -225,14 +225,14 @@ watchEffect(() => {
// Table
const columns = [
{ title: '菜单名称', dataIndex: 'title',width: "220" },
{ title: '菜单名称', dataIndex: 'menu_name',width: "220" },
// { title: '', dataIndex: 'icon', slotName: 'icon' },
{ title: '路由地址', dataIndex: 'path', width: "400" },
{ title: '组件地址', dataIndex: 'component', width: "300" },
{ title: '排序', dataIndex: 'sort', width: "80" },
{ title: '类型', dataIndex: 'menuType', slotName: 'menutype', width: "100" },
{ title: '是否外联', dataIndex: 'isFrame', slotName: 'isFrame', width: "100" },
{ title: '显示状态', dataIndex: 'visible', slotName: 'visible', width: "100" },
// { title: '', dataIndex: 'sort', width: "80" },
// { title: '', dataIndex: 'menuType', slotName: 'menutype', width: "100" },
// { title: '', dataIndex: 'isFrame', slotName: 'isFrame', width: "100" },
{ title: '显示状态', dataIndex: 'menu_status', slotName: 'menu_status', width: "100" },
{ title: '操作', slotName: 'action' ,width: "220", fixed: "right" },
];
const tableData = ref([]);
@ -259,7 +259,7 @@ const filterTreeNode = (searchVal, nodeData) => {
//
const handleUpdate = async (record) => {
const res = await getMenuDetails(record.menuId);
const res = await getMenuDetails(record.menu_id);
Object.assign(modalForm, res.data);
modalTitle.value = '修改菜单';
@ -270,13 +270,21 @@ const handleUpdate = async (record) => {
const handleSubmit = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) {
if (!modalForm.menuId) {
if (!modalForm.menu_id) {
console.log("dasdasd",modalForm)
const { success } = await addMenu(modalForm);
if (success) proxy.$message.success('新增成功');
const {code,message} = await addMenu(modalForm);
if (code==200) {
proxy.$message.success('新增成功');
}else{
proxy.$message.error(message);
}
} else {
const { success } = await updateMenu(modalForm, modalForm.menuId);
if (success) proxy.$message.success('修改成功');
const { code,message } = await updateMenu(modalForm, modalForm.menu_id);
if (code==200) {
proxy.$message.success('修改成功');
}else{
proxy.$message.error(message);
}
}
getSysMenuInfo(pager);
done();
@ -290,8 +298,9 @@ const handleSubmit = (done) => {
//
const getSysMenuInfo = async (params = {}) => {
const { code, data, msg } = await getMenu(params);
console.log(data);
if ( code == 200 ) {
tableData.value = data;
tableData.value = data;
} else {
proxy.$notification.error(msg)
}
@ -324,13 +333,13 @@ const parseIconName = computed(() => {
onMounted(() => {
getSysMenuInfo();
getSysApiInfo();
//getSysApiInfo();
});
</script>
<style lang="scss">
// select trigger
/* 覆盖默认 select trigger 样式 */
.iconselect-trigger .arco-select-dropdown-list {
display: flex;
flex-wrap: wrap;
@ -340,7 +349,7 @@ onMounted(() => {
width: auto;
}
// 穿
/* 覆盖默认穿梭框样式 */
.menu-modal {
.arco-transfer-view {
height: 350px;

View File

@ -1,22 +1,24 @@
<template>
<div class="app-container">
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
<a-form-item field="roleName" label="角色名称">
<a-input v-model="queryForm.roleName" placeholder="请输入角色名称" @press-enter="handleQuery" />
<a-form-item field="role_name" label="角色名称">
<a-input v-model="queryForm.role_name" placeholder="请输入角色名称" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="roleKey" label="权限字符">
<!-- <a-form-item field="roleKey" label="权限字符">
<a-input v-model="queryForm.roleKey" placeholder="请输入权限字符" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="status" label="状态">
<a-select v-model="queryForm.status" placeholder="请选择角色状态">
</a-form-item> -->
<!-- <a-form-item field="status" label="状态">
<a-select v-model="queryForm.role_status" placeholder="请选择角色状态">
<a-option :value="2">正常</a-option>
<a-option :value="1">停用</a-option>
</a-select>
</a-form-item>
</a-form-item> -->
<a-form-item>
<a-space>
<a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
<a-button type="primary" @click="handleQuery">
<icon-search /> 搜索</a-button>
<a-button @click="handleResetQuery">
<icon-loop /> 重置</a-button>
</a-space>
</a-form-item>
</a-form>
@ -25,52 +27,58 @@
<div class="action">
<a-space>
<a-button v-has="'admin:sysRole:add'" type="primary" @click="handleAdd"><icon-plus /> 新增</a-button>
<a-button v-has="'admin:sysRole:remove'" type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button>
<a-button type="primary" status="warning" disabled><icon-download /> 导出</a-button>
<a-button type="primary" @click="handleAdd">
<icon-plus /> 新增</a-button>
<a-button type="primary" status="danger" @click="() => { deleteVisible = true; }">
<icon-delete /> 批量删除</a-button>
<!-- <a-button type="primary" status="warning" disabled>
<icon-download /> 导出</a-button> -->
</a-space>
</div>
<a-table
:columns="columns"
:data="tableData"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }"
row-key="roleId"
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
@selection-change="(selection) => {deleteData = selection;}"
@select="handleSelect"
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
>
<a-table :columns="columns" :data="tableData"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
row-key="role_id" :row-selection="{ type: 'checkbox', showCheckedAll: true }"
@selection-change="(selection) => {deleteData = selection;}" @select="handleSelect"
@page-change="handlePageChange" @page-size-change="handlePageSizeChange">
<template #role_id="{record,rowIndex}">
<div>{{(rowIndex+1)+(pager.page-1)*10}}</div>
</template>
<template #status="{ record }">
<a-tag v-if="record.status == 2" color="green">正常</a-tag>
<a-tag v-else color="red">停用</a-tag>
<a-space direction="vertical" size="large">
<a-switch v-model="record.role_status" :checked-value="1" :unchecked-value="2"
@change="handleChangeSwitch($event,record.role_id)" :disabled="record.is_admin==1" />
</a-space>
<!-- <a-tag v-if="record.status == 2" color="green">正常</a-tag>
<a-tag v-else color="red">停用</a-tag> -->
</template>
<template #is_admin="{ record }">
<a-tag v-if="record.is_admin == 0" color="green"></a-tag>
<a-tag v-else color="red"></a-tag>
</template>
<template #createdAt="{ record }">
{{ parseTime(record.createdAt) }}
</template>
<template #action="{ record }">
<a-space>
<a-button v-has="'admin:sysRole:edit'" type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button>
<a-button v-has="'admin:sysRole:update'" type="text" @click="handleDataScope(record)"><icon-check-circle /> 数据权限 </a-button>
<a-button v-has="'admin:sysRole:remove'" type="text" @click="() => { deleteVisible = true; deleteData = [record.roleId]; }"><icon-check-circle /> 删除 </a-button>
<a-button type="text" @click="handleUpdate(record)">
<icon-edit /> 修改</a-button>
<!-- <a-button type="text" @click="handleDataScope(record)">
<icon-check-circle /> 数据权限 </a-button> -->
<a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.role_id]; }">
<icon-check-circle /> 删除 </a-button>
</a-space>
</template>
</a-table>
<!-- Role Modal -->
<a-modal
v-model:visible="modalVisible"
:title="title"
title-align="start"
@before-ok="handleBeforeOk"
@close="handleCancel"
>
<a-modal v-model:visible="modalVisible" :title="title" title-align="start" @before-ok="handleBeforeOk"
@close="handleCancel">
<a-form :model="modalForm" :rules="rules" ref="modalFormRef">
<a-form-item field="roleName" label="角色名称">
<a-input v-model="modalForm.roleName" placeholder="请输入角色名称" />
<a-form-item field="role_name" label="角色名称">
<a-input v-model="modalForm.role_name" placeholder="请输入角色名称" />
</a-form-item>
<a-form-item field="roleKey" label="权限字符">
<!-- <a-form-item field="roleKey" label="权限字符">
<a-input v-model="modalForm.roleKey" placeholder="请输入权限字符" />
</a-form-item>
<a-form-item field="roleSort" label="角色排序">
@ -80,13 +88,20 @@
:default-value="0"
:style="{ width: '150px' }"
/>
</a-form-item>
<a-form-item field="status" label="状态">
<a-radio-group v-model="modalForm.status">
<a-radio value="2">正常</a-radio>
<a-radio value="1">停用</a-radio>
</a-form-item> -->
<!-- <a-form-item field="status" label="状态">
<a-radio-group v-model="modalForm.role_status">
<a-radio :value="2">正常</a-radio>
<a-radio :value="1">停用</a-radio>
</a-radio-group>
</a-form-item> -->
<a-form-item field="is_admin" label="是否是管理员">
<a-radio-group v-model="modalForm.is_admin">
<a-radio :value="0"></a-radio>
<a-radio :value="1"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="权限设置">
<a-tree
v-model:checked-keys="checkedKeys"
@ -94,99 +109,114 @@
:check-strictly="false"
:data="treeData"
:default-expand-all="false"
:field-names="{ key: 'id', title: 'label' }"
:field-names="{ key: 'menu_id', title: 'menu_name',icon: '_' }"
/>
</a-form-item>
<!--
<a-form-item field="remark" label="备注">
<a-textarea v-model="modalForm.remark" placeholder="请输入备注内容" />
</a-form-item>
-->
</a-form>
</a-modal>
<!-- DataScope Modal -->
<a-modal
v-model:visible="scopedModalVisible"
:title="title"
title-align="start"
@before-ok="handleScopeBeforeOk"
@close="handleCancel"
>
<!-- <a-modal v-model:visible="scopedModalVisible" :title="title" title-align="start" @before-ok="handleScopeBeforeOk"
@close="handleCancel">
<a-form :model="scopeForm">
<a-form-item field="roleName" label="角色名称">
<a-input v-model="scopeForm.roleName" disabled />
<a-form-item field="role_name" label="角色名称">
<a-input v-model="scopeForm.role_name" disabled />
</a-form-item>
<a-form-item field="roleKey" label="权限字符">
<a-input v-model="scopeForm.roleKey" disabled />
</a-form-item>
<a-form-item field="dataScope" label="权限范围">
<a-select v-model="scopeForm.dataScope" placeholder="请选择权限范围">
<a-option
v-for="item in dataScopeOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
<a-option v-for="item in dataScopeOptions" :key="item.value" :value="item.value" :label="item.label" />
</a-select>
</a-form-item>
</a-form>
</a-modal>
</a-modal> -->
<!-- Akiraka 20230223 删除与批量删除 开始 -->
<DeleteModal
:data="deleteData"
:visible="deleteVisible"
:apiDelete="removeRole"
@deleteVisibleChange="() => deleteVisible = false"
/>
<DeleteModal :data="deleteData" :visible="deleteVisible" :delType="'role_ids'" :apiDelete="removeRole"
@deleteVisibleChange="() => deleteVisible = false" />
<!-- Akiraka 20230223 删除与批量删除 结束 -->
</div>
</template>
<script setup>
import { onMounted, reactive, ref, getCurrentInstance, nextTick, watch } from 'vue';
import { getRole, addRole, updateRole, removeRole, updateRoleScoped, getRoleMenuTree } from '@/api/admin/role';
import {
onMounted,
reactive,
ref,
getCurrentInstance,
nextTick,
watch
} from 'vue';
import {
getRole,
addRole,
updateRole,
removeRole,
updateRoleScoped,
getRoleMenuTree,
roleDetail,
roleStatus
} from '@/api/admin/role';
// Akiraka 20230210
const deleteData = ref([])
// Akiraka 20230210
const deleteVisible = ref(false)
// Akiraka 20230210
watch(() => deleteVisible.value ,(value) => {
if ( value == false ) {
getRoleInfo({ ...pager, ...queryForm });
}
})
// Akiraka 20230210
const deleteData = ref([])
// Akiraka 20230210
const deleteVisible = ref(false)
// Akiraka 20230210
watch(() => deleteVisible.value, (value) => {
if (value == false) {
getRoleInfo({
...pager,
...queryForm
});
}
})
const { proxy } = getCurrentInstance();
const {
proxy
} = getCurrentInstance();
const currentPage = ref(1);
// Pager
const pager = {
count: 0,
pageIndex: 1,
pageSize: 10,
};
const currentPage = ref(1);
// Pager
const pager = {
total: 1,
page: 1,
page_size: 10,
};
// Batch Delete List
const batchDeleteList = ref([]);
// Batch Delete List
const batchDeleteList = ref([]);
// Form
const queryForm = reactive({});
const modalForm = reactive({
sort: 0,
status: '2',
});
const scopeForm = reactive({});
// Form
const queryForm = reactive({});
const modalForm = reactive({
sort: 0,
role_status: '',
is_admin: ''
});
const scopeForm = reactive({});
// rules
const rules = {
roleName: [{ required: true, message: '请输入角色名称' }],
roleKey: [{ required: true, message: '请输入权限字符' }],
};
// rules
const rules = {
role_name: [{
required: true,
message: '请输入角色名称'
}],
roleKey: [{
required: true,
message: '请输入权限字符'
}],
};
// ScopeOption
const dataScopeOptions = [
{
// ScopeOption
const dataScopeOptions = [{
value: '1',
label: '全部数据权限',
},
@ -206,181 +236,267 @@ const dataScopeOptions = [
value: '5',
label: '仅本人数据权限',
},
];
];
// Table Columns
const columns = [
{ title: '编号', dataIndex: 'roleId' },
{ title: '角色名称', dataIndex: 'roleName' },
{ title: '权限字符', dataIndex: 'roleKey' },
{ title: '排序', dataIndex: 'roleSort' },
{ title: '状态', dataIndex: 'status', slotName: 'status' },
{ title: '创建时间', dataIndex: 'createdAt', slotName: 'createdAt' },
{ title: '操作', slotName: 'action', width: 250 },
];
// Table Columns
const columns = [{
title: '编号',
dataIndex: 'role_id',
slotName: 'role_id'
},
{
title: '角色名称',
dataIndex: 'role_name'
},
{
title: '状态',
dataIndex: 'role_status',
slotName: 'status'
},
{
title: '是否是管理员',
dataIndex: 'is_admin',
slotName: 'is_admin'
},
{
title: '创建时间',
dataIndex: 'created_at',
slotName: 'created_at'
},
{
title: '操作',
slotName: 'action',
width: 250
},
];
// Table Data;
const tableData = ref([]);
// Table Data;
const tableData = ref([]);
// Tree Data;
const checkedKeys = ref([]);
const treeData = ref([]);
// Tree Data;
const checkedKeys = ref([]);
const treeData = ref([]);
// Modal
const modalVisible = ref(false);
const scopedModalVisible = ref(false);
const title = ref('默认标题');
// Modal
const modalVisible = ref(false);
const scopedModalVisible = ref(false);
const title = ref('默认标题');
// Table Select
const handleSelect = (rowKey) => {
batchDeleteList.value = rowKey;
};
// Table Select
const handleSelect = (rowKeys,rowkey,record) => {
console.log(rowKeys,rowkey);
batchDeleteList.value = rowKeys;
};
//
const handleQuery = async () => {
const res = await getRole({ ...pager, ...queryForm });
const { count, list, pageIndex, pageSize } = res.data;
//
const handleQuery = async () => {
const res = await getRole({
...pager,
...queryForm
});
const {
total,
data,
page,
page_size
} = res.data;
tableData.value =data;
Object.assign(pager, {
total,
page,
page_size
});
};
tableData.value = list;
Object.assign(pager, { count, pageIndex, pageSize });
};
//
const handleResetQuery = () => {
proxy.$refs.queryFormRef.resetFields();
getRoleInfo(queryForm);
};
//
const handleResetQuery = () => {
proxy.$refs.queryFormRef.resetFields();
getRoleInfo(queryForm);
};
//
const handleAdd = () => {
modalVisible.value = true;
title.value = '创建角色';
modalForm.is_admin='';
modalForm.role_status='';
};
//
const handleAdd = () => {
modalVisible.value = true;
title.value = '创建角色';
};
//
const handleUpdate = async (record) => {
modalVisible.value = true;
title.value = '修改角色';
await nextTick();
Object.assign(modalForm, record);
// checkedKeys id
const menuIdsChecked = [];
record.sysMenu.forEach((item) => {
menuIdsChecked.push(item.menuId);
});
checkedKeys.value = menuIdsChecked;
};
//
const handleDataScope = async (record) => {
scopedModalVisible.value = true;
title.value = '分配数据权限';
const { roleKey, roleName, dataScope, roleId } = record;
await nextTick();
Object.assign(scopeForm, { roleKey, roleName, dataScope, roleId });
};
/**
* 分页改变
* @param {Number} [page]
*/
const handlePageChange = (page) => {
pager.pageIndex = page;
//
currentPage.value = page;
getRoleInfo({ ...pager, ...queryForm });
};
//
const handlePageSizeChange = (pageSize) => {
pager.pageSize = pageSize;
getRoleInfo({ ...pager, ...queryForm });
};
//
// 使 done()
const handleBeforeOk = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => {
// valid
if (!valid) {
modalForm.menuIds = checkedKeys.value;
let res;
if (modalForm.roleId) {
const { code, msg } = await updateRole(modalForm, modalForm.roleId);
if (code == 200 ) {
proxy.$notification.success('更新成功');
} else {
proxy.$notification.error(msg);
}
} else {
const { code, msg } = await addRole(modalForm);
if (code == 200 ) {
proxy.$notification.success('新增成功');
} else {
proxy.$notification.error(msg);
}
}
getRoleInfo();
done();
//
const handleUpdate = async (record) => {
modalVisible.value = true;
title.value = '修改角色';
const { code, data, message } = await roleDetail(record.role_id);
if (code == 200) {
Object.assign(modalForm, data);
checkedKeys.value = data.menu_ids;
} else {
proxy.$message.error('数据校验失败');
done(false);
proxy.$notification.error(message);
}
});
};
//await nextTick();
//Object.assign(modalForm, record);
//
const handleScopeBeforeOk = async (done) => {
const res = await updateRoleScoped(scopeForm);
proxy.$message.success(res.msg);
done();
// checkedKeys id
// const menuIdsChecked = [];
// record.sysMenu.forEach((item) => {
// menuIdsChecked.push(new String(item.menu_id));
// });
// checkedKeys.value = menuIdsChecked;
};
getRoleInfo();
};
//
const handleDataScope = async (record) => {
scopedModalVisible.value = true;
title.value = '分配数据权限';
//
const handleCancel = () => {
modalVisible.value = false;
modalForm.roleId = null;
scopeForm.roleId = null;
checkedKeys.value = [];
proxy.$refs.modalFormRef.resetFields();
};
const {
roleKey,
role_name,
dataScope,
roleId
} = record;
await nextTick();
Object.assign(scopeForm, {
roleKey,
role_name,
dataScope,
roleId
});
};
/**
* 分页改变
* @param {Number} [page]
*/
const handlePageChange = (page) => {
pager.page = page;
//
currentPage.value = page;
getRoleInfo({
...pager,
...queryForm
});
};
//
const handlePageSizeChange = (page_size) => {
pager.page_size = page_size;
getRoleInfo({
...pager,
...queryForm
});
};
//
// 使 done()
const handleBeforeOk = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => {
// valid
if (!valid) {
console.log(checkedKeys.value);
modalForm.menu_ids = checkedKeys.value;
let res;
if (modalForm.role_id) {
const {
code,
message
} = await updateRole(modalForm, modalForm.role_id);
if (code == 200) {
proxy.$notification.success('更新成功');
} else {
proxy.$notification.error(message);
}
} else {
//modalForm.is_admin = modalForm.is_admin ? Number(modalForm.is_admin) : ''
console.log(modalForm);
const {
code,
message
} = await addRole(modalForm);
if (code == 200) {
proxy.$notification.success('新增成功');
} else {
proxy.$notification.error(message);
}
}
getRoleInfo();
done();
} else {
proxy.$message.error('数据校验失败');
done(false);
}
});
};
//
const handleScopeBeforeOk = async (done) => {
const res = await updateRoleScoped(scopeForm);
proxy.$message.success(res.msg);
done();
getRoleInfo();
};
//
const handleCancel = () => {
modalVisible.value = false;
modalForm.role_id = null;
scopeForm.role_id = null;
checkedKeys.value = [];
proxy.$refs.modalFormRef.resetFields();
};
//
const handleChangeSwitch = async (value, id) => {
const { code, data, message } = await roleStatus({ role_status: value },id);
if (code == 200) {
value==1?proxy.$notification.success('启用成功'):proxy.$notification.success('禁用成功');
} else {
proxy.$notification.error(message);
}
//
const getRoleInfo = async (params = {
page:1,
role_name:'',
page_size:10
}) => {
const { data, code, msg } = await getRole(params);
if ( code == 200 ) {
tableData.value = data.list;
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
} else {
proxy.$notification.error(msg);
}
};
//
const getRoleInfo = async (params = {
page: 1,
role_name: '',
page_size: 10
}) => {
const {
data,
code,
message
} = await getRole(params);
if (code == 200) {
tableData.value = data.data;
Object.assign(pager, {
total: data.total,
page: data.page,
page_size: data.page_size
});
} else {
proxy.$notification.error(message);
}
};
//
const getRoleMenuTreeInfo = async () => {
const res = await getRoleMenuTree({}, 0);
treeData.value = res.data.menus;
checkedKeys.value = res.data.checkedKeys;
};
//
const getRoleMenuTreeInfo = async () => {
const res = await getRoleMenuTree();
treeData.value = res.data;
console.log(res.data)
};
onMounted(() => {
getRoleInfo();
getRoleMenuTreeInfo();
});
onMounted(() => {
getRoleInfo();
getRoleMenuTreeInfo();
});
</script>
<style setup>
.action {
margin-bottom: 12px;
}
</style>
.action {
margin-bottom: 12px;
}
</style>

View File

@ -6,26 +6,26 @@
<a-input v-model="queryForm.deptName" placeholder="请输入部门名称" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="username" label="用户名称">
<a-input v-model="queryForm.username" placeholder="请输入用户名称" @press-enter="handleQuery" />
<a-input v-model="queryForm.nick_name" placeholder="请输入用户名称" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="phone" label="手机号码">
<a-input v-model="queryForm.phone" placeholder="请输入用户手机号" @press-enter="handleQuery" />
</a-form-item>
<a-form-item field="status" label="用户状态">
<a-form-item field="role_status" label="用户状态">
<a-select
v-model="queryForm.status"
v-model="queryForm.role_status"
placeholder="请选择用户状态"
:style="{ width: '205px' }"
>
<a-option value="2">正常</a-option>
<a-option value="1">停用</a-option>
<a-option :value="2">正常</a-option>
<a-option :value="1">停用</a-option>
</a-select>
</a-form-item>
<a-divider direction="vertical" :style="{ height: '30px' }" />
<a-form-item class="form-action">
<a-space size="medium">
<a-button v-has="'admin:sysUser:query'" type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
<a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
</a-space>
</a-form-item>
@ -43,8 +43,8 @@
<a-col :span="20">
<!-- Action -->
<a-space class="action">
<a-button v-has="'admin:sysUser:add'" type="primary" @click="handleAdd" data-test="newUser"><icon-plus /> 新增</a-button>
<a-button v-has="'admin:sysUser:remove'" type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button>
<a-button type="primary" @click="handleAdd" data-test="newUser"><icon-plus /> 新增</a-button>
<a-button type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button>
</a-space>
<!-- Table -->
@ -53,30 +53,33 @@
:data="tableData"
:bordered="false"
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }"
row-key="userId"
:pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.total, current: currentPage }"
row-key="user_id"
@selection-change="(selection) => {deleteData = selection;}"
@page-change="handlePageChange"
@page-size-change="handlePageSizeChange"
>
<template #role_name="{ record }">
{{ record.role.role_name}}
</template>
<template #dept="{ record }">
{{ record.dept.deptName }}
{{ record.dept.dept_name }}
</template>
<template #status="{ record }">
<template #role_status="{ record }">
<a-switch
v-model="record.status"
checked-value="2"
unchecked-value="1"
v-model="record.role_status"
:checked-value="2"
:unchecked-value="1"
@change="handleSwitchChange(record)"
/>
</template>
<template #createdAt="{ record }">
{{ parseTime(record.createdAt) }}
<template #created_at="{ record }">
{{ parseTime(record.created_at) }}
</template>
<template #action="{ record }">
<a-button v-has="'admin:sysUser:edit'" type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button>
<a-button v-has="'admin:sysUser:edit'" type="text" @click="() => { deleteVisible = true; deleteData = [record.userId]; }"><icon-delete /> 删除</a-button>
<a-button v-has="'admin:sysUser:resetPassword'" type="text" @click="handleReset(record.userId)"><icon-refresh /> 重置</a-button>
<a-button type="text" @click="handleUpdate(record)"><icon-edit /> 修改</a-button>
<a-button type="text" @click="() => { deleteVisible = true; deleteData = [record.user_id]; }"><icon-delete /> 删除</a-button>
<a-button type="text" @click="handleReset(record.user_id)"><icon-refresh /> 重置</a-button>
</template>
</a-table>
</a-col>
@ -136,7 +139,7 @@
/>
</a-form-item>
</a-col>
<a-col v-if="!modalForm.userId" :span="12">
<a-col v-if="!modalForm.user_id" :span="12">
<a-form-item field="password" label="用户密码">
<a-input-password
v-model="modalForm.password"
@ -259,9 +262,9 @@ const { currentPage, getSysPostInfo, getSysRoleInfo, getSysDeptTreeInfo, getSysU
// Pager
const pager = reactive({
count: 0,
pageIndex: 1,
pageSize: 10
total: 0,
page: 1,
page_size: 10
});
// Reset Pwd
@ -342,9 +345,9 @@ function useResetPwd() {
const resetParams = {};
//
const handleReset = (userId) => {
const handleReset = (user_id) => {
resetPwdVisible.value = true;
resetParams.userId = userId;
resetParams.user_id = user_id;
};
//
@ -378,12 +381,12 @@ function useApiInfo() {
* @param {*} [params]
*/
const getSysUserInfo = async (params = {}) => {
const { data, code, msg } = await getUser(params);
const { data, code, message } = await getUser(params);
if ( code == 200 ) {
tableData.value = data.list;
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
tableData.value = data.data;
Object.assign(pager, { count: data.total, pageIndex: data.page, page_size: data.page_size });
} else {
proxy.$notification.error(msg);
proxy.$notification.error(message);
}
};
@ -424,19 +427,20 @@ function useTableList() {
const columns = [
{
title: '编号',
dataIndex: 'userId',
dataIndex: 'user_id',
},
{
title: '登录名',
dataIndex: 'username',
title: '角色',
dataIndex: 'role_name',
slotName: 'role_name',
},
{
title: '昵称',
dataIndex: 'nickName',
dataIndex: 'nick_name',
},
{
title: '部门',
dataIndex: 'deptName',
dataIndex: 'dept_name',
slotName: 'dept',
},
{
@ -445,13 +449,13 @@ function useTableList() {
},
{
title: '状态',
dataIndex: 'status',
slotName: 'status',
dataIndex: 'role_status',
slotName: 'role_status',
},
{
title: '创建时间',
dataIndex: 'createdAt',
slotName: 'createdAt',
dataIndex: 'created_at',
slotName: 'created_at',
},
{
title: '操作',
@ -467,7 +471,7 @@ function useTableList() {
* @param {Number} [page]
*/
const handlePageChange = (page) => {
pager.pageIndex = page;
pager.page = page;
//
currentPage.value = page;
@ -475,8 +479,8 @@ function useTableList() {
};
//
const handlePageSizeChange = (pageSize) => {
pager.pageSize = pageSize;
const handlePageSizeChange = (page_size) => {
pager.page_size = page_size;
getSysUserInfo({ ...pager, ...queryForm });
};
@ -489,7 +493,7 @@ function useTableList() {
} 用户`,
hideCancel: false,
onOk: async () => {
const params = { userId: record.userId, status: record.status };
const params = { user_id: record.user_id, status: record.status };
const res = await updateUserStatus(params);
proxy.$message.success(res.msg);
},
@ -535,7 +539,7 @@ function useModalOperate() {
const handleModalCancel = (formEl) => {
modalVisible.value = false;
resetForm(formEl);
modalForm.userId = null;
modalForm.user_id = null;
};
//
@ -563,7 +567,7 @@ function useModalOperate() {
const handleBeforeOk = (done) => {
proxy.$refs.modalFormRef.validate(async (valid) => {
if (!valid) {
if (!modalForm.userId) {
if (!modalForm.user_id) {
const { code, msg } = await addUser(modalForm);
if (code == 200 ) {
proxy.$notification.success('新增成功');
@ -571,7 +575,7 @@ function useModalOperate() {
proxy.$notification.error(msg);
}
} else {
const { code, msg } = await updateUser(modalForm, modalForm.userId);
const { code, msg } = await updateUser(modalForm, modalForm.user_id);
if (code == 200 ) {
proxy.$notification.success('更新成功');
} else {

View File

@ -125,7 +125,7 @@ const handleLogin = () => {
proxy.$refs.loginFormRef.validate(async (valid) => {
if (!valid) {
try {
const { code, data, msg } = await login(loginForm);
const { code, data, message } = await login(loginForm);
if ( code == 200 ) {
const {avatar,nick_name,token,user_id}=data;
const userInfo={

View File

@ -0,0 +1,13 @@
<template>
<div>
<upload></upload>
</div>
</template>
<script>
</script>
<style scoped>
</style>