6.30 提交 角色菜单
This commit is contained in:
parent
4db41129a5
commit
616519e0f0
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -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']
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
})
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import request from '../../utils/request'
|
||||
|
||||
const url = '/api/v1/menu';
|
||||
const url = '/admin/menu';
|
||||
|
||||
export function getMenu(params) {
|
||||
return request({
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import request from '../../utils/request';
|
||||
|
||||
const url = '/api/v1/sys-user';
|
||||
const url = '/admin/user';
|
||||
|
||||
|
||||
export function getUser(params) {
|
||||
|
||||
@ -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
22
src/components/upload.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -44,6 +44,11 @@ const routes = [
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
name: 'upload',
|
||||
component: () => import('../views/upload/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
@ -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 {
|
||||
|
||||
@ -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={
|
||||
|
||||
13
src/views/upload/index.vue
Normal file
13
src/views/upload/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<upload></upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user