调整菜单编辑页面
This commit is contained in:
Mrtangl
parent
772de2f102
commit
9ddaf4f5bd
|
|
@ -5,24 +5,6 @@
|
|||
</el-card>
|
||||
|
||||
<el-card class="m-t-15" shadow="never">
|
||||
<!-- <el-radio-group v-model="radio" class="m-l-60">
|
||||
<el-radio
|
||||
:label="menuDataType.CATALOG"
|
||||
@change="changeType(menuDataType.CATALOG)"
|
||||
>
|
||||
目录
|
||||
</el-radio>
|
||||
<el-radio :label="menuDataType.MENU" @change="changeType(menuDataType.MENU)">
|
||||
菜单
|
||||
</el-radio>
|
||||
<el-radio
|
||||
:label="menuDataType.BUTTON"
|
||||
@change="changeType(menuDataType.BUTTON)"
|
||||
>
|
||||
按钮
|
||||
</el-radio>
|
||||
</el-radio-group> -->
|
||||
|
||||
<div class="m-t-15">
|
||||
<el-form
|
||||
ref="formRefs"
|
||||
|
|
@ -31,8 +13,8 @@
|
|||
size="small"
|
||||
style="max-width: 460px"
|
||||
>
|
||||
<!-- <el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="formData.menuType">
|
||||
<el-radio
|
||||
:label="menuDataType.CATALOG"
|
||||
@change="changeType(menuDataType.CATALOG)"
|
||||
|
|
@ -56,51 +38,126 @@
|
|||
|
||||
<el-form-item label="父级菜单">
|
||||
<el-cascader
|
||||
v-model="formData.pid"
|
||||
style="width: 340px"
|
||||
:options="menuList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
label: 'title',
|
||||
label: 'menuName',
|
||||
value: 'id'
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="(radio == menuDataType.BUTTON) == ''">
|
||||
<div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
|
||||
<el-form-item label="菜单图标">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
<el-input
|
||||
v-model="formData.menuIcon"
|
||||
show-word-limit
|
||||
placeholder="请输入图标"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
<el-input
|
||||
v-model="formData.menuName"
|
||||
show-word-limit
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="(radio == menuDataType.BUTTON) == ''">
|
||||
<div v-if="formData.menuType == menuDataType.BUTTON">
|
||||
<el-form-item label="菜单权限字符">
|
||||
<el-input
|
||||
v-model="formData.perms"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
|
||||
<el-form-item label="路由地址">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
<el-input
|
||||
v-model="formData.paths"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-if="radio == menuDataType.MENU">
|
||||
<div v-if="formData.menuType == menuDataType.MENU">
|
||||
<el-form-item label="组件路径">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
<el-input
|
||||
v-model="formData.component"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="极限字符">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
|
||||
<el-form-item label="菜单权限字符">
|
||||
<el-input
|
||||
v-model="formData.perms"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="路由参数">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
<el-input
|
||||
v-model="formData.params"
|
||||
show-word-limit
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选中菜单">
|
||||
<el-input
|
||||
v-model="formData.selected"
|
||||
show-word-limit
|
||||
placeholder="请输入选中菜单路径"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="排序">
|
||||
<el-input show-word-limit type="number" placeholder="请输入名称"></el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="菜单排序">
|
||||
<el-input
|
||||
v-model="formData.menuSort"
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入排序"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="父级菜单">
|
||||
<div v-if="formData.menuType == menuDataType.MENU">
|
||||
<el-form-item label="是否缓存">
|
||||
<el-radio-group v-model="formData.isCache">
|
||||
<el-radio :label="1">缓存</el-radio>
|
||||
<el-radio :label="0">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
|
||||
<el-form-item label="显示状态">
|
||||
<el-radio-group v-model="formData.isShow">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="formData.isDisable">
|
||||
<el-radio :label="0">正常</el-radio>
|
||||
<el-radio :label="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- <el-form-item label="父级菜单">
|
||||
<el-cascader
|
||||
v-model="formData.pid"
|
||||
style="width: 340px"
|
||||
|
|
@ -177,7 +234,7 @@
|
|||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -211,14 +268,18 @@ const menuList = ref<any>([])
|
|||
// 表单数据
|
||||
const formData = ref({
|
||||
pid: '', // 上级ID
|
||||
menuType: '', // 菜单类型
|
||||
menuType: 'M', // 菜单类型
|
||||
menuName: '', // 菜单名称
|
||||
menuIcon: '', // 菜单图标
|
||||
menuSort: '', // 菜单排序
|
||||
perms: '', // 菜单权限字符
|
||||
paths: '', // 路由路径
|
||||
component: '', // 前端组件
|
||||
isDisable: '' // 是否禁用: 0=否， 1=是
|
||||
selected: '', // 选中路径
|
||||
params: '', // 路由参数
|
||||
isShow: 1, // 是否显示：0=否， 1=是
|
||||
isCache: 0, // 是否缓存：0=否， 1=是
|
||||
isDisable: 0 // 是否禁用: 0=否， 1=是
|
||||
})
|
||||
|
||||
// 获取详情
|
||||
|
|
@ -259,9 +320,9 @@ const onSubmit = () => {
|
|||
}
|
||||
|
||||
// 切换
|
||||
// const changeType = (val: string) => {
|
||||
// menuDataType.value = val
|
||||
// }
|
||||
const changeType = (val: string) => {
|
||||
menuDataType.value = val
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (id) getMenuDetail(id)
|
||||
|
|
|
|||
Loading…
Reference in New Issue