mirage
/
edu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整菜单编辑页面

This commit is contained in:
Mrtangl 2022-04-19 11:02:05 +08:00
parent 772de2f102
commit 9ddaf4f5bd
1 changed files with 102 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
admin/src/views/permission/menu/edit.vue
View File

@ -5,24 +5,6 @@
</el-card> </el-card>
<el-card class="m-t-15" shadow="never"> <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"> <div class="m-t-15">
<el-form <el-form
ref="formRefs" ref="formRefs"
@ -31,8 +13,8 @@
size="small" size="small"
style="max-width: 460px" style="max-width: 460px"
> >
<!-- <el-form-item label="菜单类型"> <el-form-item label="菜单类型">
<el-radio-group v-model="radio"> <el-radio-group v-model="formData.menuType">
<el-radio <el-radio
:label="menuDataType.CATALOG" :label="menuDataType.CATALOG"
@change="changeType(menuDataType.CATALOG)" @change="changeType(menuDataType.CATALOG)"
@ -56,51 +38,126 @@
<el-form-item label="父级菜单"> <el-form-item label="父级菜单">
<el-cascader <el-cascader
v-model="formData.pid"
style="width: 340px" style="width: 340px"
:options="menuList" :options="menuList"
:props="{ :props="{
checkStrictly: true, checkStrictly: true,
emitPath: false, emitPath: false,
label: 'title', label: 'menuName',
value: 'id' value: 'id'
}" }"
clearable clearable
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<div v-if="(radio == menuDataType.BUTTON) == ''"> <div v-if="(formData.menuType == menuDataType.BUTTON) == ''">
<el-form-item label="菜单图标"> <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> </el-form-item>
</div> </div>
<el-form-item label="菜单名称"> <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> </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-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> </el-form-item>
</div> </div>
<div v-if="radio == menuDataType.MENU"> <div v-if="formData.menuType == menuDataType.MENU">
<el-form-item label="组件路径"> <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>
<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>
<el-form-item label="路由参数"> <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> </el-form-item>
</div> </div>
<el-form-item label="排序"> <el-form-item label="菜单排序">
<el-input show-word-limit type="number" placeholder="请输入名称"></el-input> <el-input
</el-form-item> --> 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 <el-cascader
v-model="formData.pid" v-model="formData.pid"
style="width: 340px" style="width: 340px"
@ -177,7 +234,7 @@
:active-value="0" :active-value="0"
:inactive-value="1" :inactive-value="1"
/> />
</el-form-item> </el-form-item> -->
</el-form> </el-form>
</div> </div>
</el-card> </el-card>
@ -211,14 +268,18 @@ const menuList = ref<any>([])
// 表单数据 // 表单数据
const formData = ref({ const formData = ref({
pid: '', // 上级ID pid: '', // 上级ID
menuType: '', // 菜单类型 menuType: 'M', // 菜单类型
menuName: '', // 菜单名称 menuName: '', // 菜单名称
menuIcon: '', // 菜单图标 menuIcon: '', // 菜单图标
menuSort: '', // 菜单排序 menuSort: '', // 菜单排序
perms: '', // 菜单权限字符 perms: '', // 菜单权限字符
paths: '', // 路由路径 paths: '', // 路由路径
component: '', // 前端组件 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) => { const changeType = (val: string) => {
// menuDataType.value = val menuDataType.value = val
// } }
onMounted(() => { onMounted(() => {
if (id) getMenuDetail(id) if (id) getMenuDetail(id)