fix: menu form 布局
xingyu
parent
a97db2754a
commit
b447e4d02e
|
|
@ -98,7 +98,13 @@
|
||||||
<!-- 添加或修改菜单对话框 -->
|
<!-- 添加或修改菜单对话框 -->
|
||||||
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
|
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
|
||||||
<!-- 对话框(添加 / 修改) -->
|
<!-- 对话框(添加 / 修改) -->
|
||||||
<el-form ref="formRef" :model="menuForm" :rules="rules" label-width="auto" label-position="top">
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="menuForm"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="120px"
|
||||||
|
label-position="left"
|
||||||
|
>
|
||||||
<el-form-item label="上级菜单">
|
<el-form-item label="上级菜单">
|
||||||
<el-tree-select
|
<el-tree-select
|
||||||
node-key="id"
|
node-key="id"
|
||||||
|
|
@ -109,9 +115,11 @@
|
||||||
check-strictly
|
check-strictly
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="菜单名称" prop="name" span="12">
|
<el-col :span="8">
|
||||||
<el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
|
<el-form-item label="菜单名称" prop="name">
|
||||||
</el-form-item>
|
<el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
<el-form-item label="菜单类型" prop="type">
|
<el-form-item label="菜单类型" prop="type">
|
||||||
<el-radio-group v-model="menuForm.type">
|
<el-radio-group v-model="menuForm.type">
|
||||||
<el-radio-button
|
<el-radio-button
|
||||||
|
|
@ -127,74 +135,88 @@
|
||||||
<el-form-item label="菜单图标">
|
<el-form-item label="菜单图标">
|
||||||
<IconSelect v-model="menuForm.icon" clearable />
|
<IconSelect v-model="menuForm.icon" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="路由地址" prop="path">
|
<el-col :span="8">
|
||||||
<template #label>
|
<el-form-item label="路由地址" prop="path">
|
||||||
<Tooltip
|
<template #label>
|
||||||
titel="路由地址"
|
<Tooltip
|
||||||
message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
|
titel="路由地址"
|
||||||
/>
|
message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
|
||||||
</template>
|
/>
|
||||||
<el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
|
</template>
|
||||||
</el-form-item>
|
<el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="menuForm.type === 2">
|
<template v-if="menuForm.type === 2">
|
||||||
<el-form-item label="路由地址" prop="component">
|
<el-col :span="8">
|
||||||
<el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
|
<el-form-item label="路由地址" prop="component">
|
||||||
</el-form-item>
|
<el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="menuForm.type !== 1">
|
<template v-if="menuForm.type !== 1">
|
||||||
<el-form-item label="权限标识" prop="permission">
|
<el-col :span="8">
|
||||||
<template #label>
|
<el-form-item label="权限标识" prop="permission">
|
||||||
<Tooltip
|
<template #label>
|
||||||
titel="权限标识"
|
<Tooltip
|
||||||
message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
|
titel="权限标识"
|
||||||
/>
|
message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
|
||||||
</template>
|
/>
|
||||||
<el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
|
</template>
|
||||||
</el-form-item>
|
<el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
<el-form-item label="显示排序" prop="sort">
|
<el-col :span="8">
|
||||||
<el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
|
<el-form-item label="显示排序" prop="sort">
|
||||||
</el-form-item>
|
<el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
|
||||||
<el-form-item label="菜单状态" prop="status">
|
</el-form-item>
|
||||||
<el-radio-group v-model="menuForm.status">
|
</el-col>
|
||||||
<el-radio
|
<el-col :span="8">
|
||||||
border
|
<el-form-item label="菜单状态" prop="status">
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
<el-radio-group v-model="menuForm.status">
|
||||||
:key="dict.value"
|
<el-radio
|
||||||
:label="dict.value"
|
border
|
||||||
>
|
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||||
{{ dict.label }}
|
:key="dict.value"
|
||||||
</el-radio>
|
:label="dict.value"
|
||||||
</el-radio-group>
|
>
|
||||||
</el-form-item>
|
{{ dict.label }}
|
||||||
<template v-if="menuForm.type !== 3">
|
</el-radio>
|
||||||
<el-form-item label="显示状态" prop="status">
|
|
||||||
<template #label>
|
|
||||||
<Tooltip
|
|
||||||
titel="显示状态"
|
|
||||||
message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<el-radio-group v-model="menuForm.visible">
|
|
||||||
<el-radio border key="true" :label="true">显示</el-radio>
|
|
||||||
<el-radio border key="false" :label="false">隐藏</el-radio>
|
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<template v-if="menuForm.type !== 3">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="显示状态" prop="status">
|
||||||
|
<template #label>
|
||||||
|
<Tooltip
|
||||||
|
titel="显示状态"
|
||||||
|
message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<el-radio-group v-model="menuForm.visible">
|
||||||
|
<el-radio border key="true" :label="true">显示</el-radio>
|
||||||
|
<el-radio border key="false" :label="false">隐藏</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="menuForm.type === 2">
|
<template v-if="menuForm.type === 2">
|
||||||
<el-form-item label="缓存状态" prop="keepAlive">
|
<el-col :span="8">
|
||||||
<template #label>
|
<el-form-item label="缓存状态" prop="keepAlive">
|
||||||
<Tooltip
|
<template #label>
|
||||||
titel="缓存状态"
|
<Tooltip
|
||||||
message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
|
titel="缓存状态"
|
||||||
/>
|
message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
|
||||||
</template>
|
/>
|
||||||
<el-radio-group v-model="menuForm.keepAlive">
|
</template>
|
||||||
<el-radio border key="true" :label="true">缓存</el-radio>
|
<el-radio-group v-model="menuForm.keepAlive">
|
||||||
<el-radio border key="false" :label="false">不缓存</el-radio>
|
<el-radio border key="true" :label="true">缓存</el-radio>
|
||||||
</el-radio-group>
|
<el-radio border key="false" :label="false">不缓存</el-radio>
|
||||||
</el-form-item>
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
</template>
|
</template>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|
@ -218,6 +240,7 @@ import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||||||
import { useMessage } from '@/hooks/web/useMessage'
|
import { useMessage } from '@/hooks/web/useMessage'
|
||||||
import {
|
import {
|
||||||
|
ElCol,
|
||||||
ElForm,
|
ElForm,
|
||||||
ElFormItem,
|
ElFormItem,
|
||||||
ElInput,
|
ElInput,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue