auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 🧩 修改路由页面

This commit is contained in:
Bunny 2024-09-28 22:28:46 +08:00
parent ed050bcab5
commit ed277c1b81
13 changed files with 117 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/api/service/types.d.ts vendored
View File

@ -1,47 +1,35 @@
import type {
Method,
AxiosError,
AxiosResponse,
AxiosRequestConfig
} from "axios";
import type { AxiosError, AxiosRequestConfig, AxiosResponse, Method } from 'axios';
// 基础后端返回内容
export interface BaseResult<T> {
code: number;
data: T;
message: string;
}
export type resultType = {
accessToken?: string;
accessToken?: string;
};
export type RequestMethods = Extract<
Method,
"get" | "post" | "put" | "delete" | "patch" | "option" | "head"
>;
export type RequestMethods = Extract<Method, 'get' | 'post' | 'put' | 'delete' | 'patch' | 'option' | 'head'>;
export interface PureHttpError extends AxiosError {
isCancelRequest?: boolean;
isCancelRequest?: boolean;
}
export interface PureHttpResponse extends AxiosResponse {
config: PureHttpRequestConfig;
config: PureHttpRequestConfig;
}
export interface PureHttpRequestConfig extends AxiosRequestConfig {
beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
beforeResponseCallback?: (response: PureHttpResponse) => void;
beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
beforeResponseCallback?: (response: PureHttpResponse) => void;
}
export default class PureHttp {
request<T>(
method: RequestMethods,
url: string,
param?: AxiosRequestConfig,
axiosConfig?: PureHttpRequestConfig
): Promise<T>;
post<T, P>(
url: string,
params?: P,
config?: PureHttpRequestConfig
): Promise<T>;
get<T, P>(
url: string,
params?: P,
config?: PureHttpRequestConfig
): Promise<T>;
request<T>(method: RequestMethods, url: string, param?: AxiosRequestConfig, axiosConfig?: PureHttpRequestConfig): Promise<T>;
post<T, P>(url: string, params?: P, config?: PureHttpRequestConfig): Promise<T>;
get<T, P>(url: string, params?: P, config?: PureHttpRequestConfig): Promise<T>;
}

2
src/api/v1/routes.ts
View File

@ -1,5 +1,5 @@
import { http } from '@/api/service/request';
import type { BaseResult } from '@/types/BaseResult';
import type { BaseResult } from '@/api/service/types';
export const getRouterAsync = () => {
return http.request<BaseResult<any>>('get', 'router/getRouterAsync');

2
src/api/v1/system.ts
View File

@ -1,5 +1,5 @@
import { http } from '@/api/service/request';
import type { BaseResult } from '@/types/BaseResult';
import type { BaseResult } from '@/api/service/types';
type ResultTable = {
/** 列表数据 */

2
src/api/v1/user.ts
View File

@ -1,5 +1,5 @@
import { http } from '@/api/service/request';
import type { BaseResult } from '@/types/BaseResult';
import type { BaseResult } from '@/api/service/types';
export interface UserResult {
/** 头像 */

1
src/enums/enums.ts
View File

@ -4,7 +4,6 @@ const menuTypeOptions: Array<OptionsType> = [
{ label: '菜单', value: 0 },
{ label: 'iframe', value: 1 },
{ label: '外链', value: 2 },
{ label: '按钮', value: 3 },
];
const showLinkOptions: Array<OptionsType> = [

6
src/types/BaseResult.ts
View File

@ -1,6 +0,0 @@
// 基础后端返回内容
export interface BaseResult<T> {
code: number;
data: T;
message: string;
}

26
src/views/menu/README.md
View File

@ -1,26 +0,0 @@
## 字段含义
| 字段 | 说明 |
|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `menuType` | 菜单类型（`0`代表菜单、`1`代表`iframe`、`2`代表外链、`3`代表按钮） |
| `parentId` | |
| `title` | 菜单名称（兼容国际化、非国际化，如果用国际化的写法就必须在根目录的`locales`文件夹下对应添加） |
| `name` | 路由名称（必须唯一并且和当前路由`component`字段对应的页面里用`defineOptions`包起来的`name`保持一致） |
| `path` | 路由路径 |
| `component` | 组件路径（传`component`组件路径，那么`path`可以随便写，如果不传，`component`组件路径会跟`path`保持一致） |
| `rank` | 菜单排序（平台规定只有`home`路由的`rank`才能为`0`，所以后端在返回`rank`的时候需要从非`0`开始 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F-rank)） |
| `redirect` | 路由重定向 |
| `icon` | 菜单图标 |
| `extraIcon` | 右侧图标 |
| `enterTransition` | 进场动画（页面加载动画） |
| `leaveTransition` | 离场动画（页面加载动画） |
| `activePath` | 菜单激活（将某个菜单激活，主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`） |
| `auths` | 权限标识（按钮级别权限设置） |
| `frameSrc` | 链接地址（需要内嵌的`iframe`链接地址） |
| `frameLoading` | 加载动画（内嵌的`iframe`页面是否开启首次加载动画） |
| `keepAlive` | 缓存页面（是否缓存该路由页面，开启后会保存该页面的整体状态，刷新后会清空状态） |
| `hiddenTag` | 标签页（当前菜单名称或自定义信息禁止添加到标签页） |
| `fixedTag` | 固定标签页（当前菜单名称是否固定显示在标签页且不可关闭） |
| `showLink` | 菜单（是否显示该菜单） |
| `showParent` | 父级菜单（是否显示父级菜单 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E8%AF%A5%E6%A8%A1%E5%BC%8F%E9%92%88%E5%AF%B9%E7%88%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E4%B8%8B%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84%E6%83%85%E5%86%B5-%E5%9C%A8%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84-meta-%E5%B1%9E%E6%80%A7%E4%B8%AD%E5%8A%A0%E4%B8%8A-showparent-true-%E5%8D%B3%E5%8F%AF)） |

103
src/views/menu/form.vue
View File

@ -21,11 +21,8 @@ const props = withDefaults(defineProps<FormProps>(), {
rank: 99,
redirect: '',
icon: '',
extraIcon: '',
enterTransition: '',
leaveTransition: '',
activePath: '',
auths: '',
frameSrc: '',
frameLoading: true,
keepAlive: false,
@ -39,11 +36,7 @@ const props = withDefaults(defineProps<FormProps>(), {
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
function getRef() {
return ruleFormRef.value;
}
defineExpose({ getRef });
defineExpose({ getRef: ruleFormRef.value });
</script>
<template>
@ -60,12 +53,7 @@ defineExpose({ getRef });
<el-cascader
v-model="newFormInline.parentId"
:options="newFormInline.higherMenuOptions"
:props="{
value: 'id',
label: 'title',
emitPath: false,
checkStrictly: true,
}"
:props="{ value: 'id', label: 'title', emitPath: false, checkStrictly: true }"
class="w-full"
clearable
filterable
@ -84,13 +72,13 @@ defineExpose({ getRef });
<el-input v-model="newFormInline.title" clearable placeholder="请输入菜单名称" />
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<re-col :sm="24" :value="12" :xs="24">
<el-form-item label="路由名称" prop="name">
<el-input v-model="newFormInline.name" clearable placeholder="请输入路由名称" />
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<re-col :sm="24" :value="12" :xs="24">
<el-form-item label="路由路径" prop="path">
<el-input v-model="newFormInline.path" clearable placeholder="请输入路由路径" />
</el-form-item>
@ -112,16 +100,11 @@ defineExpose({ getRef });
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<re-col :sm="24" :value="12" :xs="24">
<el-form-item label="菜单图标">
<IconSelect v-model="newFormInline.icon" class="w-full" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<el-form-item label="右侧图标">
<el-input v-model="newFormInline.extraIcon" clearable placeholder="菜单名称右侧的额外图标" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
<el-form-item label="进场动画">
@ -134,18 +117,6 @@ defineExpose({ getRef });
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType === 0" :sm="24" :value="12" :xs="24">
<el-form-item label="菜单激活">
<el-input v-model="newFormInline.activePath" clearable placeholder="请输入需要激活的菜单" />
</el-form-item>
</re-col>
<re-col v-if="newFormInline.menuType === 3" :sm="24" :value="12" :xs="24">
<!-- 按钮级别权限设置 -->
<el-form-item label="权限标识" prop="auths">
<el-input v-model="newFormInline.auths" clearable placeholder="请输入权限标识" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
<!-- iframe -->
<el-form-item label="链接地址">
@ -154,83 +125,35 @@ defineExpose({ getRef });
</re-col>
<re-col v-if="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
<el-form-item label="加载动画">
<Segmented
:modelValue="newFormInline.frameLoading ? 0 : 1"
:options="frameLoadingOptions"
@change="
({ option: { value } }) => {
newFormInline.frameLoading = value;
}
"
/>
<Segmented :modelValue="newFormInline.frameLoading ? 0 : 1" :options="frameLoadingOptions" @change="({ option: { value } }) => (newFormInline.frameLoading = value)" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<re-col :sm="24" :value="12" :xs="24">
<el-form-item label="菜单">
<Segmented
:modelValue="newFormInline.showLink ? 0 : 1"
:options="showLinkOptions"
@change="
({ option: { value } }) => {
newFormInline.showLink = value;
}
"
/>
<Segmented :modelValue="newFormInline.showLink ? 0 : 1" :options="showLinkOptions" @change="({ option: { value } }) => (newFormInline.showLink = value)" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
<re-col :sm="24" :value="12" :xs="24">
<el-form-item label="父级菜单">
<Segmented
:modelValue="newFormInline.showParent ? 0 : 1"
:options="showParentOptions"
@change="
({ option: { value } }) => {
newFormInline.showParent = value;
}
"
/>
<Segmented :modelValue="newFormInline.showParent ? 0 : 1" :options="showParentOptions" @change="({ option: { value } }) => (newFormInline.showParent = value)" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
<el-form-item label="缓存页面">
<Segmented
:modelValue="newFormInline.keepAlive ? 0 : 1"
:options="keepAliveOptions"
@change="
({ option: { value } }) => {
newFormInline.keepAlive = value;
}
"
/>
<Segmented :modelValue="newFormInline.keepAlive ? 0 : 1" :options="keepAliveOptions" @change="({ option: { value } }) => (newFormInline.keepAlive = value)" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
<el-form-item label="标签页">
<Segmented
:modelValue="newFormInline.hiddenTag ? 1 : 0"
:options="hiddenTagOptions"
@change="
({ option: { value } }) => {
newFormInline.hiddenTag = value;
}
"
/>
<Segmented :modelValue="newFormInline.hiddenTag ? 1 : 0" :options="hiddenTagOptions" @change="({ option: { value } }) => (newFormInline.hiddenTag = value)" />
</el-form-item>
</re-col>
<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
<el-form-item label="固定标签页">
<Segmented
:modelValue="newFormInline.fixedTag ? 0 : 1"
:options="fixedTagOptions"
@change="
({ option: { value } }) => {
newFormInline.fixedTag = value;
}
"
/>
<Segmented :modelValue="newFormInline.fixedTag ? 0 : 1" :options="fixedTagOptions" @change="({ option: { value } }) => (newFormInline.fixedTag = value)" />
</el-form-item>
</re-col>
</el-row>

19
src/views/menu/index.vue
View File

@ -3,14 +3,14 @@ import { onMounted, ref } from 'vue';
import { $t } from '@/plugins/i18n';
import { PureTableBar } from '@/components/TableBar';
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import Delete from '@iconify-icons/ep/delete';
import EditPen from '@iconify-icons/ep/edit-pen';
import Refresh from '@iconify-icons/ep/refresh';
import AddFill from '@iconify-icons/ri/add-circle-line';
import { columns, dataList, handleDelete, handleSelectionChange, loading, onSearch, openDialog, resetForm } from '@/views/menu/utils/hook';
import { dataList, handleDelete, handleSelectionChange, loading, onSearch, openDialog, resetForm } from '@/views/menu/utils/hook';
import form from '@/views/role/form.vue';
import PureTable from '@pureadmin/table';
import { columns } from '@/views/menu/utils/rule';
defineOptions({
name: 'SystemMenu',
@ -19,14 +19,6 @@ defineOptions({
const formRef = ref();
const tableRef = ref();
/**
* 全屏
*/
const onFullscreen = () => {
// 重置表格高度
tableRef.value.setAdaptive();
};
onMounted(() => {
onSearch();
});
@ -44,7 +36,7 @@ onMounted(() => {
</el-form-item>
</el-form>
<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理（仅演示，操作后不生效）" @fullscreen="onFullscreen" @refresh="onSearch">
<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理（仅演示，操作后不生效）" @fullscreen="tableRef.value.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="openDialog()"> 新增菜单</el-button>
</template>
@ -54,10 +46,7 @@ onMounted(() => {
:adaptiveConfig="{ offsetBottom: 45 }"
:columns="dynamicColumns"
:data="dataList"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)',
}"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="loading"
:size="size"
adaptive

106
src/views/menu/utils/hook.tsx
View File

@ -6,17 +6,15 @@ import { $t } from '@/plugins/i18n';
import { addDialog } from '@/components/BaseDialog';
import { h, reactive, ref } from 'vue';
import type { FormItemProps } from '../utils/types';
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import { cloneDeep, deviceDetection, isAllEmpty } from '@pureadmin/utils';
export const form = reactive({
title: '',
});
export const formRef = ref();
export const dataList = ref([]);
export const loading = ref(true);
export const getMenuType = (type, text = false) => {
switch (type) {
case 0:
@ -25,78 +23,18 @@ export const getMenuType = (type, text = false) => {
return text ? 'iframe' : 'warning';
case 2:
return text ? '外链' : 'danger';
case 3:
return text ? '按钮' : 'info';
}
};
export const columns: TableColumnList = [
{
label: '菜单名称',
prop: 'title',
align: 'left',
cellRenderer: ({ row }) => (
<>
<span class='inline-block mr-1'>
{h(useRenderIcon(row.icon), {
style: { paddingTop: '1px' },
})}
</span>
<span>{$t(row.title)}</span>
</>
),
},
{
label: '菜单类型',
prop: 'menuType',
width: 100,
cellRenderer: ({ row, props }) => (
<el-tag size={props.size} type={getMenuType(row.menuType)} effect='plain'>
{getMenuType(row.menuType, true)}
</el-tag>
),
},
{
label: '路由路径',
prop: 'path',
},
{
label: '组件路径',
prop: 'component',
formatter: ({ path, component }) => (isAllEmpty(component) ? path : component),
},
{
label: '权限标识',
prop: 'auths',
},
{
label: '排序',
prop: 'rank',
width: 100,
},
{
label: '隐藏',
prop: 'showLink',
formatter: ({ showLink }) => (showLink ? '否' : '是'),
width: 100,
},
{
label: '操作',
fixed: 'right',
width: 210,
slot: 'operation',
},
];
export function handleSelectionChange(val) {
export const handleSelectionChange = val => {
console.log('handleSelectionChange', val);
}
};
export function resetForm(formEl) {
export const resetForm = async formEl => {
if (!formEl) return;
formEl.resetFields();
onSearch();
}
await onSearch();
};
export async function onSearch() {
loading.value = true;
@ -142,11 +80,8 @@ export function openDialog(title = '新增', row?: FormItemProps) {
rank: row?.rank ?? 99,
redirect: row?.redirect ?? '',
icon: row?.icon ?? '',
extraIcon: row?.extraIcon ?? '',
enterTransition: row?.enterTransition ?? '',
leaveTransition: row?.leaveTransition ?? '',
activePath: row?.activePath ?? '',
auths: row?.auths ?? '',
frameSrc: row?.frameSrc ?? '',
frameLoading: row?.frameLoading ?? true,
keepAlive: row?.keepAlive ?? false,
@ -166,24 +101,25 @@ export function openDialog(title = '新增', row?: FormItemProps) {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as FormItemProps;
function chores() {
message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
type: 'success',
});
done(); // 关闭弹框
onSearch(); // 刷新表格数据
}
FormRef.validate(valid => {
FormRef.validate(async valid => {
if (valid) {
console.log('curData', curData);
// 表单规则校验通过
if (title === '新增') {
// 实际开发先调用新增接口，再进行下面操作
chores();
message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
type: 'success',
});
done(); // 关闭弹框
await onSearch(); // 刷新表格数据
} else {
// 实际开发先调用修改接口，再进行下面操作
chores();
message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
type: 'success',
});
done(); // 关闭弹框
await onSearch(); // 刷新表格数据
}
}
});
@ -191,9 +127,9 @@ export function openDialog(title = '新增', row?: FormItemProps) {
});
}
export function handleDelete(row) {
export const handleDelete = async row => {
message(`您删除了菜单名称为${$t(row.title)}的这条数据`, {
type: 'success',
});
onSearch();
}
await onSearch();
};

10
src/views/menu/utils/rule.ts
View File

@ -1,10 +0,0 @@
import { reactive } from 'vue';
import type { FormRules } from 'element-plus';
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
title: [{ required: true, message: '菜单名称为必填项', trigger: 'blur' }],
name: [{ required: true, message: '路由名称为必填项', trigger: 'blur' }],
path: [{ required: true, message: '路由路径为必填项', trigger: 'blur' }],
auths: [{ required: true, message: '权限标识为必填项', trigger: 'blur' }],
});

57
src/views/menu/utils/rule.tsx Normal file
View File

@ -0,0 +1,57 @@
import { h, reactive } from 'vue';
import type { FormRules } from 'element-plus';
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import { $t } from '@/plugins/i18n';
import { isAllEmpty } from '@pureadmin/utils';
import { getMenuType } from '@/views/menu/utils/hook';
export const columns: TableColumnList = [
{
label: '菜单名称',
prop: 'title',
align: 'left',
cellRenderer: ({ row }) => (
<>
<span class='inline-block mr-1'>
{h(useRenderIcon(row.icon), {
style: { paddingTop: '1px' },
})}
</span>
<span>{$t(row.title)}</span>
</>
),
},
{
label: '菜单类型',
prop: 'menuType',
width: 100,
cellRenderer: ({ row, props }) => (
<el-tag size={props.size} type={getMenuType(row.menuType)} effect='plain'>
{getMenuType(row.menuType, true)}
</el-tag>
),
},
{ label: '路由路径', prop: 'path' },
{
label: '组件路径',
prop: 'component',
formatter: ({ path, component }) => (isAllEmpty(component) ? path : component),
},
{ label: '权限标识', prop: 'auths' },
{ label: '排序', prop: 'rank', width: 100 },
{
label: '隐藏',
prop: 'showLink',
formatter: ({ showLink }) => (showLink ? '否' : '是'),
width: 100,
},
{ label: '操作', fixed: 'right', width: 210, slot: 'operation' },
];
/** 自定义表单规则校验 */
export const formRules = reactive<FormRules>({
title: [{ required: true, message: '菜单名称为必填项', trigger: 'blur' }],
name: [{ required: true, message: '路由名称为必填项', trigger: 'blur' }],
path: [{ required: true, message: '路由路径为必填项', trigger: 'blur' }],
auths: [{ required: true, message: '权限标识为必填项', trigger: 'blur' }],
});

3
src/views/menu/utils/types.ts
View File

@ -10,11 +10,8 @@ interface FormItemProps {
rank: number;
redirect: string;
icon: string;
extraIcon: string;
enterTransition: string;
leaveTransition: string;
activePath: string;
auths: string;
frameSrc: string;
frameLoading: boolean;
keepAlive: boolean;