refactor: API请求路径优化

Former-commit-id: c17689117a54b31190dea477c98f11c5d705f073
This commit is contained in:
郝先瑞
2022-06-28 23:49:38 +08:00
parent 2c7267b655
commit e650ce1897
10 changed files with 156 additions and 119 deletions

View File

@@ -1,7 +1,7 @@
import { import {
MenuFormData, MenuFormData,
MenuItem, MenuItem,
MenuQueryParam, MenuQueryParam
} from '@/types/api/system/menu'; } from '@/types/api/system/menu';
import { Option } from '@/types/common'; import { Option } from '@/types/common';
import request from '@/utils/request'; import request from '@/utils/request';
@@ -12,8 +12,8 @@ import { AxiosPromise } from 'axios';
*/ */
export function listRoutes() { export function listRoutes() {
return request({ return request({
url: '/youlai-admin/api/v1/menus/route_list', url: '/youlai-admin/api/v1/menus/routes',
method: 'get', method: 'get'
}); });
} }
@@ -28,17 +28,17 @@ export function listMenus(
return request({ return request({
url: '/youlai-admin/api/v1/menus', url: '/youlai-admin/api/v1/menus',
method: 'get', method: 'get',
params: queryParams, params: queryParams
}); });
} }
/** /**
* 获取菜单下拉树形列表 * 获取菜单下拉树形列表
*/ */
export function listSelectMenus(): AxiosPromise<Option[]> { export function listMenuOptions(): AxiosPromise<Option[]> {
return request({ return request({
url: '/youlai-admin/api/v1/menus/select_list', url: '/youlai-admin/api/v1/menus/options',
method: 'get', method: 'get'
}); });
} }
@@ -48,7 +48,7 @@ export function listSelectMenus(): AxiosPromise<Option[]> {
export function getResource(): AxiosPromise<any> { export function getResource(): AxiosPromise<any> {
return request({ return request({
url: '/youlai-admin/api/v1/menus/resources', url: '/youlai-admin/api/v1/menus/resources',
method: 'get', method: 'get'
}); });
} }
@@ -59,7 +59,7 @@ export function getResource(): AxiosPromise<any> {
export function getMenuDetail(id: number): AxiosPromise<MenuFormData> { export function getMenuDetail(id: number): AxiosPromise<MenuFormData> {
return request({ return request({
url: '/youlai-admin/api/v1/menus/' + id, url: '/youlai-admin/api/v1/menus/' + id,
method: 'get', method: 'get'
}); });
} }
@@ -72,7 +72,7 @@ export function addMenu(data: MenuFormData) {
return request({ return request({
url: '/youlai-admin/api/v1/menus', url: '/youlai-admin/api/v1/menus',
method: 'post', method: 'post',
data: data, data: data
}); });
} }
@@ -86,7 +86,7 @@ export function updateMenu(id: string, data: MenuFormData) {
return request({ return request({
url: '/youlai-admin/api/v1/menus/' + id, url: '/youlai-admin/api/v1/menus/' + id,
method: 'put', method: 'put',
data: data, data: data
}); });
} }
@@ -98,6 +98,6 @@ export function updateMenu(id: string, data: MenuFormData) {
export function deleteMenus(ids: string) { export function deleteMenus(ids: string) {
return request({ return request({
url: '/youlai-admin/api/v1/menus/' + ids, url: '/youlai-admin/api/v1/menus/' + ids,
method: 'delete', method: 'delete'
}); });
} }

View File

@@ -2,7 +2,7 @@ import {
RoleFormData, RoleFormData,
RolePageResult, RolePageResult,
RoleQueryParam, RoleQueryParam,
RoleResourceData, RoleResourceData
} from '@/types/api/system/role'; } from '@/types/api/system/role';
import { Option } from '@/types/common'; import { Option } from '@/types/common';
@@ -14,13 +14,13 @@ import { AxiosPromise } from 'axios';
* *
* @param queryParams * @param queryParams
*/ */
export function listPageRoles( export function listRolePages(
queryParams?: RoleQueryParam queryParams?: RoleQueryParam
): AxiosPromise<RolePageResult> { ): AxiosPromise<RolePageResult> {
return request({ return request({
url: '/youlai-admin/api/v1/roles', url: '/youlai-admin/api/v1/roles',
method: 'get', method: 'get',
params: queryParams, params: queryParams
}); });
} }
@@ -29,13 +29,13 @@ export function listPageRoles(
* *
* @param queryParams * @param queryParams
*/ */
export function listSelectRoles( export function listRoleOptions(
queryParams?: RoleQueryParam queryParams?: RoleQueryParam
): AxiosPromise<Option[]> { ): AxiosPromise<Option[]> {
return request({ return request({
url: '/youlai-admin/api/v1/roles/select_list', url: '/youlai-admin/api/v1/roles/options',
method: 'get', method: 'get',
params: queryParams, params: queryParams
}); });
} }
@@ -47,7 +47,7 @@ export function listSelectRoles(
export function getRoleResourceIds(roleId: string): AxiosPromise<any> { export function getRoleResourceIds(roleId: string): AxiosPromise<any> {
return request({ return request({
url: '/youlai-admin/api/v1/roles/' + roleId + '/resource_ids', url: '/youlai-admin/api/v1/roles/' + roleId + '/resource_ids',
method: 'get', method: 'get'
}); });
} }
@@ -63,7 +63,7 @@ export function updateRoleResource(
return request({ return request({
url: '/youlai-admin/api/v1/roles/' + roleId + '/resources', url: '/youlai-admin/api/v1/roles/' + roleId + '/resources',
method: 'put', method: 'put',
data: data, data: data
}); });
} }
@@ -75,7 +75,7 @@ export function updateRoleResource(
export function getRoleFormDetail(id: number): AxiosPromise<RoleFormData> { export function getRoleFormDetail(id: number): AxiosPromise<RoleFormData> {
return request({ return request({
url: '/youlai-admin/api/v1/roles/' + id, url: '/youlai-admin/api/v1/roles/' + id,
method: 'get', method: 'get'
}); });
} }
@@ -88,7 +88,7 @@ export function addRole(data: RoleFormData) {
return request({ return request({
url: '/youlai-admin/api/v1/roles', url: '/youlai-admin/api/v1/roles',
method: 'post', method: 'post',
data: data, data: data
}); });
} }
@@ -102,7 +102,7 @@ export function updateRole(id: number, data: RoleFormData) {
return request({ return request({
url: '/youlai-admin/api/v1/roles/' + id, url: '/youlai-admin/api/v1/roles/' + id,
method: 'put', method: 'put',
data: data, data: data
}); });
} }
@@ -114,6 +114,6 @@ export function updateRole(id: number, data: RoleFormData) {
export function deleteRoles(ids: string) { export function deleteRoles(ids: string) {
return request({ return request({
url: '/youlai-admin/api/v1/roles/' + ids, url: '/youlai-admin/api/v1/roles/' + ids,
method: 'delete', method: 'delete'
}); });
} }

View File

@@ -4,7 +4,7 @@ import {
UserFormData, UserFormData,
UserInfo, UserInfo,
UserPageResult, UserPageResult,
UserQueryParam, UserQueryParam
} from '@/types/api/system/user'; } from '@/types/api/system/user';
/** /**
@@ -13,7 +13,7 @@ import {
export function getUserInfo(): AxiosPromise<UserInfo> { export function getUserInfo(): AxiosPromise<UserInfo> {
return request({ return request({
url: '/youlai-admin/api/v1/users/me', url: '/youlai-admin/api/v1/users/me',
method: 'get', method: 'get'
}); });
} }
@@ -22,13 +22,13 @@ export function getUserInfo(): AxiosPromise<UserInfo> {
* *
* @param queryParams * @param queryParams
*/ */
export function listUsersPage( export function listUserPages(
queryParams: UserQueryParam queryParams: UserQueryParam
): AxiosPromise<UserPageResult> { ): AxiosPromise<UserPageResult> {
return request({ return request({
url: '/youlai-admin/api/v1/users', url: '/youlai-admin/api/v1/users/pages',
method: 'get', method: 'get',
params: queryParams, params: queryParams
}); });
} }
@@ -40,7 +40,7 @@ export function listUsersPage(
export function getUserFormData(userId: number): AxiosPromise<UserFormData> { export function getUserFormData(userId: number): AxiosPromise<UserFormData> {
return request({ return request({
url: '/youlai-admin/api/v1/users/' + userId + '/form_data', url: '/youlai-admin/api/v1/users/' + userId + '/form_data',
method: 'get', method: 'get'
}); });
} }
@@ -53,7 +53,7 @@ export function addUser(data: any) {
return request({ return request({
url: '/youlai-admin/api/v1/users', url: '/youlai-admin/api/v1/users',
method: 'post', method: 'post',
data: data, data: data
}); });
} }
@@ -67,7 +67,7 @@ export function updateUser(id: number, data: UserFormData) {
return request({ return request({
url: '/youlai-admin/api/v1/users/' + id, url: '/youlai-admin/api/v1/users/' + id,
method: 'put', method: 'put',
data: data, data: data
}); });
} }
@@ -81,7 +81,7 @@ export function updateUserPart(id: number, data: any) {
return request({ return request({
url: '/youlai-admin/api/v1/users/' + id, url: '/youlai-admin/api/v1/users/' + id,
method: 'patch', method: 'patch',
data: data, data: data
}); });
} }
@@ -93,7 +93,7 @@ export function updateUserPart(id: number, data: any) {
export function deleteUsers(ids: string) { export function deleteUsers(ids: string) {
return request({ return request({
url: '/youlai-admin/api/v1/users/' + ids, url: '/youlai-admin/api/v1/users/' + ids,
method: 'delete', method: 'delete'
}); });
} }
@@ -106,7 +106,7 @@ export function downloadTemplate() {
return request({ return request({
url: '/youlai-admin/api/v1/users/template', url: '/youlai-admin/api/v1/users/template',
method: 'get', method: 'get',
responseType: 'arraybuffer', responseType: 'arraybuffer'
}); });
} }
@@ -121,7 +121,7 @@ export function exportUser(queryParams: UserQueryParam) {
url: '/youlai-admin/api/v1/users/_export', url: '/youlai-admin/api/v1/users/_export',
method: 'get', method: 'get',
params: queryParams, params: queryParams,
responseType: 'arraybuffer', responseType: 'arraybuffer'
}); });
} }
@@ -140,7 +140,7 @@ export function importUser(deptId: number, roleIds: string, file: File) {
method: 'post', method: 'post',
data: formData, data: formData,
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data'
}, }
}); });
} }

View File

@@ -117,7 +117,8 @@ onBeforeUnmount(() => {
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1); transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%); transform: translate(100%);
background: #fff; background: #fff;
z-index: 40000; z-index: 199;
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
@@ -129,7 +130,7 @@ onBeforeUnmount(() => {
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
.right-panel-background { .right-panel-background {
z-index: 20000; z-index: 99;
opacity: 1; opacity: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@@ -26,20 +26,20 @@
<el-divider>导航栏模式</el-divider> <el-divider>导航栏模式</el-divider>
<ul class="navbar"> <ul class="navbar">
<el-tooltip class="item" content="左侧模式" placement="bottom"> <el-tooltip content="左侧模式" placement="bottom">
<li> <li class="navbar__item navbar__item--left">
<div /> <div />
<div /> <div />
</li> </li>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" content="左侧模式" placement="bottom"> <el-tooltip content="顶部模式" placement="bottom">
<li> <li class="navbar__item navbar__item--top">
<div /> <div />
<div /> <div />
</li> </li>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" content="左侧模式" placement="bottom"> <el-tooltip content="混合模式" placement="bottom">
<li> <li class="navbar__item navbar__item--mix">
<div /> <div />
<div /> <div />
</li> </li>
@@ -132,7 +132,7 @@ watch(
height: 50px; height: 50px;
padding: 0; padding: 0;
li { &__item {
width: 18%; width: 18%;
height: 45px; height: 45px;
background: #f0f2f5; background: #f0f2f5;
@@ -142,7 +142,7 @@ watch(
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%); box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
&:nth-child(1) { &--left {
div { div {
&:nth-child(1) { &:nth-child(1) {
width: 30%; width: 30%;
@@ -161,6 +161,38 @@ watch(
} }
} }
} }
&--top {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
}
}
&--mix {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&:nth-child(2) {
width: 30%;
height: 70%;
bottom: 0;
left: 0;
background: #fff;
box-shadow: 0 0 1px #888;
position: absolute;
}
}
}
} }
} }
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div :class="{ 'has-logo': showLogo }"> <div :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar>
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"

View File

@@ -11,7 +11,11 @@
<navbar /> <navbar />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<!--主页面-->
<app-main /> <app-main />
<!-- 设置面板 -->
<RightPanel v-if="showSettings"> <RightPanel v-if="showSettings">
<settings /> <settings />
</RightPanel> </RightPanel>

View File

@@ -225,16 +225,16 @@ import { Dialog, Option } from '@/types/common';
import { import {
MenuFormData, MenuFormData,
MenuItem, MenuItem,
MenuQueryParam, MenuQueryParam
} from '@/types/api/system/menu'; } from '@/types/api/system/menu';
// API 依赖 // API 依赖
import { import {
listMenus, listMenus,
getMenuDetail, getMenuDetail,
listSelectMenus, listMenuOptions,
addMenu, addMenu,
deleteMenus, deleteMenus,
updateMenu, updateMenu
} from '@/api/system/menu'; } from '@/api/system/menu';
import SvgIcon from '@/components/SvgIcon/index.vue'; import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
visible: 1, visible: 1,
sort: 1, sort: 1,
component: 'Layout', component: 'Layout',
type: 'MENU', type: 'MENU'
} as MenuFormData, } as MenuFormData,
rules: { rules: {
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }], parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }], type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }], path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
component: [ component: [
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }, { required: true, message: '请输入组件完整路径', trigger: 'blur' }
], ]
}, },
menuOptions: [] as Option[], menuOptions: [] as Option[],
currentRow: undefined, currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
iconSelectVisible: false, iconSelectVisible: false,
cacheData: { cacheData: {
menuType: '', menuType: '',
menuPath: '', menuPath: ''
}, }
}); });
const { const {
@@ -292,7 +292,7 @@ const {
rules, rules,
menuOptions, menuOptions,
iconSelectVisible, iconSelectVisible,
cacheData, cacheData
} = toRefs(state); } = toRefs(state);
/** /**
@@ -313,7 +313,7 @@ function handleQuery() {
*/ */
async function loadMenuData() { async function loadMenuData() {
const menuOptions: any[] = []; const menuOptions: any[] = [];
await listSelectMenus().then(({ data }) => { await listMenuOptions().then(({ data }) => {
const menuOption = { value: '0', label: '顶级菜单', children: data }; const menuOption = { value: '0', label: '顶级菜单', children: data };
menuOptions.push(menuOption); menuOptions.push(menuOption);
state.menuOptions = menuOptions; state.menuOptions = menuOptions;
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
await loadMenuData(); await loadMenuData();
state.dialog = { state.dialog = {
title: '添加菜单', title: '添加菜单',
visible: true, visible: true
}; };
if (row.id) { if (row.id) {
// 行点击新增 // 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
await loadMenuData(); await loadMenuData();
state.dialog = { state.dialog = {
title: '修改菜单', title: '修改菜单',
visible: true, visible: true
}; };
const id = row.id || state.ids; const id = row.id || state.ids;
getMenuDetail(id).then(({ data }) => { getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}) })
.then(() => { .then(() => {
deleteMenus(ids).then(() => { deleteMenus(ids).then(() => {

View File

@@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'role', name: 'role'
}; };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue'; import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import { import {
listPageRoles, listRolePages,
updateRole, updateRole,
getRoleFormDetail, getRoleFormDetail,
addRole, addRole,
deleteRoles, deleteRoles,
getRoleResourceIds, getRoleResourceIds,
updateRoleResource, updateRoleResource
} from '@/api/system/role'; } from '@/api/system/role';
import { getResource } from '@/api/system/menu'; import { getResource } from '@/api/system/menu';
@@ -22,7 +22,7 @@ import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { import {
RoleFormData, RoleFormData,
RoleItem, RoleItem,
RoleQueryParam, RoleQueryParam
} from '@/types/api/system/role'; } from '@/types/api/system/role';
import SvgIcon from '@/components/SvgIcon/index.vue'; import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -41,18 +41,18 @@ const state = reactive({
multiple: true, multiple: true,
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
} as RoleQueryParam, } as RoleQueryParam,
roleList: [] as RoleItem[], roleList: [] as RoleItem[],
total: 0, total: 0,
dialog: { dialog: {
title: '', title: '',
visible: false, visible: false
}, },
formData: {} as RoleFormData, formData: {} as RoleFormData,
rules: { rules: {
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }], name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }], code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
}, },
resourceDialogVisible: false, resourceDialogVisible: false,
menuOptions: [] as any[], menuOptions: [] as any[],
@@ -61,8 +61,8 @@ const state = reactive({
permGroupList: [], permGroupList: [],
checkedRole: { checkedRole: {
id: '', id: '',
name: '', name: ''
}, // 选中的角色 } // 选中的角色
}); });
const { const {
@@ -78,13 +78,13 @@ const {
menuOptions, menuOptions,
permOptions, permOptions,
checkedRole, checkedRole,
checkStrictly, checkStrictly
} = toRefs(state); } = toRefs(state);
function handleQuery() { function handleQuery() {
emit('roleClick', {}); emit('roleClick', {});
state.loading = true; state.loading = true;
listPageRoles(state.queryParams).then(({ data }) => { listRolePages(state.queryParams).then(({ data }) => {
state.roleList = data.list; state.roleList = data.list;
state.total = data.total; state.total = data.total;
state.loading = false; state.loading = false;
@@ -109,14 +109,14 @@ function handleRowClick(row: any) {
function handleAdd() { function handleAdd() {
state.dialog = { state.dialog = {
title: '添加角色', title: '添加角色',
visible: true, visible: true
}; };
} }
function handleUpdate(row: any) { function handleUpdate(row: any) {
state.dialog = { state.dialog = {
title: '修改角色', title: '修改角色',
visible: true, visible: true
}; };
const roleId = row.id || state.ids; const roleId = row.id || state.ids;
getRoleFormDetail(roleId).then(({ data }) => { getRoleFormDetail(roleId).then(({ data }) => {
@@ -160,7 +160,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', { ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
}) })
.then(() => { .then(() => {
deleteRoles(ids).then(() => { deleteRoles(ids).then(() => {
@@ -176,27 +176,27 @@ function handleDelete(row: any) {
*/ */
function handleResourceAssign(row: RoleItem) { function handleResourceAssign(row: RoleItem) {
resourceDialogVisible.value = true; resourceDialogVisible.value = true;
permOptions.value.map((item) => (item.checked = false)); permOptions.value.map(item => (item.checked = false));
const roleId: any = row.id; const roleId: any = row.id;
checkedRole.value = { checkedRole.value = {
id: roleId, id: roleId,
name: row.name, name: row.name
}; };
//资源下拉数据 //资源下拉数据
getResource().then((response) => { getResource().then(response => {
checkStrictly.value = true; // 父子节点不互相关联 checkStrictly.value = true; // 父子节点不互相关联
state.menuOptions = response.data.menus; state.menuOptions = response.data.menus;
state.permOptions = response.data.perms; state.permOptions = response.data.perms;
// 获取角色拥有的资源数据进行勾选 // 获取角色拥有的资源数据进行勾选
getRoleResourceIds(roleId).then((res) => { getRoleResourceIds(roleId).then(res => {
const checkedMenuIds = res.data.menuIds; const checkedMenuIds = res.data.menuIds;
const checkedPermIds = res.data.permIds; const checkedPermIds = res.data.permIds;
nextTick(() => { nextTick(() => {
resourceRef.value.setCheckedKeys(checkedMenuIds); resourceRef.value.setCheckedKeys(checkedMenuIds);
permOptions.value.forEach((perm) => { permOptions.value.forEach(perm => {
if (checkedPermIds.includes(perm.value)) { if (checkedPermIds.includes(perm.value)) {
perm.checked = true; perm.checked = true;
} else { } else {
@@ -218,15 +218,15 @@ function handleRoleResourceSubmit() {
.map((node: any) => node.value); .map((node: any) => node.value);
const checkedPermIds = state.permOptions const checkedPermIds = state.permOptions
.filter((item) => item.checked) .filter(item => item.checked)
.map((item) => item.value); .map(item => item.value);
const roleResourceData = { const roleResourceData = {
menuIds: checkedMenuIds, menuIds: checkedMenuIds,
permIds: checkedPermIds, permIds: checkedPermIds
}; };
updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => { updateRoleResource(checkedRole.value.id, roleResourceData).then(res => {
ElMessage.success('修改成功'); ElMessage.success('修改成功');
state.resourceDialogVisible = false; state.resourceDialogVisible = false;
handleQuery(); handleQuery();
@@ -392,7 +392,7 @@ onMounted(() => {
<div class="resource-tree-node__content"> <div class="resource-tree-node__content">
<el-checkbox <el-checkbox
v-for="perm in permOptions.filter( v-for="perm in permOptions.filter(
(perm) => perm.parentId == data.permPid perm => perm.parentId == data.permPid
)" )"
:key="perm.value" :key="perm.value"
:label="perm.value" :label="perm.value"

View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'user', name: 'user'
}; };
</script> </script>
@@ -12,12 +12,12 @@ import {
watchEffect, watchEffect,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
toRefs, toRefs
} from 'vue'; } from 'vue';
// 导入API // 导入API
import { import {
listUsersPage, listUserPages,
getUserFormData, getUserFormData,
deleteUsers, deleteUsers,
addUser, addUser,
@@ -25,10 +25,10 @@ import {
updateUserPart, updateUserPart,
downloadTemplate, downloadTemplate,
exportUser, exportUser,
importUser, importUser
} from '@/api/system/user'; } from '@/api/system/user';
import { listSelectDepartments } from '@/api/system/dept'; import { listSelectDepartments } from '@/api/system/dept';
import { listSelectRoles } from '@/api/system/role'; import { listRoleOptions } from '@/api/system/role';
// 组件依赖 // 组件依赖
import { import {
@@ -36,7 +36,7 @@ import {
ElMessageBox, ElMessageBox,
ElTree, ElTree,
ElForm, ElForm,
UploadFile, UploadFile
} from 'element-plus'; } from 'element-plus';
import { import {
Search, Search,
@@ -47,13 +47,13 @@ import {
Lock, Lock,
Download, Download,
Top, Top,
UploadFilled, UploadFilled
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import { import {
UserItem, UserItem,
UserQueryParam, UserQueryParam,
UserFormData, UserFormData,
UserImportFormData, UserImportFormData
} from '@/types/api/system/user'; } from '@/types/api/system/user';
import { Option, Dialog } from '@/types/common'; import { Option, Dialog } from '@/types/common';
@@ -81,7 +81,7 @@ const state = reactive({
userList: [] as UserItem[], userList: [] as UserItem[],
// 弹窗属性 // 弹窗属性
dialog: { dialog: {
visible: false, visible: false
} as Dialog, } as Dialog,
deptName: undefined, deptName: undefined,
// 部门树选项 // 部门树选项
@@ -93,18 +93,18 @@ const state = reactive({
roleOptions: [] as Option[], roleOptions: [] as Option[],
// 表单参数 // 表单参数
formData: { formData: {
status: 1, status: 1
} as UserFormData, } as UserFormData,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
} as UserQueryParam, } as UserQueryParam,
// 表单校验 // 表单校验
rules: { rules: {
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
nickname: [ nickname: [
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }, { required: true, message: '用户昵称不能为空', trigger: 'blur' }
], ],
deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }], deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }], roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }],
@@ -112,25 +112,25 @@ const state = reactive({
{ {
pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
message: '请输入正确的邮箱地址', message: '请输入正确的邮箱地址',
trigger: 'blur', trigger: 'blur'
}, }
], ],
mobile: [ mobile: [
{ {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码', message: '请输入正确的手机号码',
trigger: 'blur', trigger: 'blur'
}, }
], ]
}, },
importDialog: { importDialog: {
title: '用户导出', title: '用户导出',
visible: false, visible: false
} as Dialog, } as Dialog,
importFormData: {} as UserImportFormData, importFormData: {} as UserImportFormData,
excelFile: undefined as any, excelFile: undefined as any,
excelFilelist: [] as File[], excelFilelist: [] as File[]
}); });
const { const {
@@ -147,7 +147,7 @@ const {
roleOptions, roleOptions,
importDialog, importDialog,
importFormData, importFormData,
excelFilelist, excelFilelist
} = toRefs(state); } = toRefs(state);
/** /**
@@ -158,7 +158,7 @@ watchEffect(
deptTreeRef.value.filter(state.deptName); deptTreeRef.value.filter(state.deptName);
}, },
{ {
flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发此属性控制在DOM元素更新后运行 flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发此属性控制在DOM元素更新后运行
} }
); );
@@ -184,7 +184,7 @@ function handleDeptNodeClick(data: { [key: string]: any }) {
* 加载角色数据 * 加载角色数据
*/ */
async function loadRoleOptions() { async function loadRoleOptions() {
listSelectRoles().then((response) => { listRoleOptions().then(response => {
state.roleOptions = response.data; state.roleOptions = response.data;
}); });
} }
@@ -200,7 +200,7 @@ function handleStatusChange(row: { [key: string]: any }) {
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
} }
) )
.then(() => { .then(() => {
@@ -219,7 +219,7 @@ function handleStatusChange(row: { [key: string]: any }) {
**/ **/
function handleQuery() { function handleQuery() {
state.loading = true; state.loading = true;
listUsersPage(state.queryParams).then(({ data }) => { listUserPages(state.queryParams).then(({ data }) => {
state.userList = data.list; state.userList = data.list;
state.total = data.total; state.total = data.total;
state.loading = false; state.loading = false;
@@ -252,7 +252,7 @@ function resetPassword(row: { [key: string]: any }) {
'重置密码', '重置密码',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消'
} }
) )
.then(({ value }) => { .then(({ value }) => {
@@ -261,7 +261,7 @@ function resetPassword(row: { [key: string]: any }) {
return false; return false;
} }
updateUserPart(row.id, { updateUserPart(row.id, {
password: value, password: value
}).then(() => { }).then(() => {
ElMessage.success('修改成功,新密码是:' + value); ElMessage.success('修改成功,新密码是:' + value);
}); });
@@ -277,7 +277,7 @@ async function handleAdd() {
await loadRoleOptions(); await loadRoleOptions();
state.dialog = { state.dialog = {
title: '添加用户', title: '添加用户',
visible: true, visible: true
}; };
} }
@@ -290,7 +290,7 @@ async function handleUpdate(row: { [key: string]: any }) {
await loadRoleOptions(); await loadRoleOptions();
state.dialog = { state.dialog = {
title: '修改用户', title: '修改用户',
visible: true, visible: true
}; };
getUserFormData(userId).then(({ data }) => { getUserFormData(userId).then(({ data }) => {
state.formData = data; state.formData = data;
@@ -332,7 +332,7 @@ function handleDelete(row: { [key: string]: any }) {
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning'
} }
) )
.then(function () { .then(function () {
@@ -357,7 +357,7 @@ function cancel() {
* 加载部门 * 加载部门
*/ */
async function loadDeptOptions() { async function loadDeptOptions() {
listSelectDepartments().then((response) => { listSelectDepartments().then(response => {
state.deptOptions = response.data; state.deptOptions = response.data;
}); });
} }
@@ -377,7 +377,7 @@ function loadGenderOptions() {
function handleDownloadTemplate() { function handleDownloadTemplate() {
downloadTemplate().then((response: any) => { downloadTemplate().then((response: any) => {
const blob = new Blob([response.data], { const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
}); });
const a = document.createElement('a'); const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载链接 const href = window.URL.createObjectURL(blob); // 下载链接
@@ -429,7 +429,7 @@ function submitImportForm() {
const deptId = state.importFormData.deptId; const deptId = state.importFormData.deptId;
const roleIds = state.importFormData.roleIds.join(','); const roleIds = state.importFormData.roleIds.join(',');
importUser(deptId, roleIds, state.excelFile).then((response) => { importUser(deptId, roleIds, state.excelFile).then(response => {
ElMessage.success(response.data); ElMessage.success(response.data);
closeImportDialog(); closeImportDialog();
handleQuery(); handleQuery();
@@ -454,7 +454,7 @@ function closeImportDialog() {
function handleExport() { function handleExport() {
exportUser(queryParams.value).then((response: any) => { exportUser(queryParams.value).then((response: any) => {
const blob = new Blob([response.data], { const blob = new Blob([response.data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
}); });
const a = document.createElement('a'); const a = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 下载的链接 const href = window.URL.createObjectURL(blob); // 下载的链接