273 lines
9.8 KiB
Vue
273 lines
9.8 KiB
Vue
<template>
|
|
<div class="menu-edit">
|
|
<el-card shadow="never">
|
|
<el-page-header :content="id ? '编辑菜单' : '新增菜单'" @back="$router.back()" />
|
|
</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"
|
|
:model="formData"
|
|
label-width="120px"
|
|
size="small"
|
|
style="max-width: 460px"
|
|
>
|
|
<!-- <el-form-item label="菜单类型">
|
|
<el-radio-group v-model="radio">
|
|
<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>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="父级菜单">
|
|
<el-cascader
|
|
style="width: 340px"
|
|
:options="menuList"
|
|
:props="{
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
label: 'title',
|
|
value: 'id'
|
|
}"
|
|
clearable
|
|
></el-cascader>
|
|
</el-form-item>
|
|
|
|
<div v-if="(radio == menuDataType.BUTTON) == ''">
|
|
<el-form-item label="菜单图标">
|
|
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-form-item label="菜单名称">
|
|
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
|
|
<div v-if="(radio == menuDataType.BUTTON) == ''">
|
|
<el-form-item label="路由地址">
|
|
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div v-if="radio == menuDataType.MENU">
|
|
<el-form-item label="组件路径">
|
|
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="极限字符">
|
|
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="路由参数">
|
|
<el-input 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-cascader
|
|
v-model="formData.pid"
|
|
style="width: 340px"
|
|
:options="menuList"
|
|
:props="{
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
label: 'menuName',
|
|
value: 'id'
|
|
}"
|
|
clearable
|
|
></el-cascader>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="菜单类型">
|
|
<el-radio-group v-model="formData.menuType">
|
|
<el-radio :label="menuDataType.CATALOG">目录</el-radio>
|
|
<el-radio :label="menuDataType.MENU">菜单</el-radio>
|
|
<el-radio :label="menuDataType.BUTTON">按钮</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="菜单名称">
|
|
<el-input
|
|
v-model="formData.menuName"
|
|
show-word-limit
|
|
placeholder="请输入名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="菜单图标">
|
|
<el-input
|
|
v-model="formData.menuIcon"
|
|
show-word-limit
|
|
placeholder="请输入图标"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="菜单排序">
|
|
<el-input
|
|
v-model="formData.menuSort"
|
|
show-word-limit
|
|
placeholder="请输入排序"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<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
|
|
v-model="formData.paths"
|
|
show-word-limit
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="组件路径">
|
|
<el-input
|
|
v-model="formData.component"
|
|
show-word-limit
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="菜单状态">
|
|
<el-switch
|
|
v-model="formData.isDisable"
|
|
:active-value="0"
|
|
:inactive-value="1"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
<footer-btns>
|
|
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
|
|
</footer-btns>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useAdmin } from '@/core/hooks/app'
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import FooterBtns from '@/components/footer-btns/index.vue'
|
|
import type { ElForm, ElMessage } from 'element-plus'
|
|
import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit, apiMenuDelete } from '@/api/auth'
|
|
|
|
const menuDataType = {
|
|
CATALOG: 'M', // 目录
|
|
MENU: 'C', // 菜单
|
|
BUTTON: 'A' // 按钮
|
|
}
|
|
|
|
const { router, route } = useAdmin()
|
|
const id: any = route.query.id
|
|
|
|
const formRefs = ref<InstanceType<typeof ElForm>>()
|
|
|
|
// 父级菜单选择
|
|
const menuList = ref<any>([])
|
|
|
|
// 表单数据
|
|
const formData = ref({
|
|
pid: '', // 上级ID
|
|
menuType: '', // 菜单类型
|
|
menuName: '', // 菜单名称
|
|
menuIcon: '', // 菜单图标
|
|
menuSort: '', // 菜单排序
|
|
perms: '', // 菜单权限字符
|
|
paths: '', // 路由路径
|
|
component: '', // 前端组件
|
|
isDisable: '' // 是否禁用: 0=否， 1=是
|
|
})
|
|
|
|
// 获取详情
|
|
const getMenuDetail = async (id: number) => {
|
|
;(formData.value as {}) = await apiMenuDetail({ id })
|
|
getFatherMenu()
|
|
}
|
|
|
|
// 获取父级菜单选择
|
|
const getFatherMenu = async () => {
|
|
const menus = (await apiConfigGetMenu()) || []
|
|
menuList.value = [{ id: 0, menuName: '顶级' }, ...menus]
|
|
console.log(menuList.value, '---------------menuaList.value')
|
|
}
|
|
|
|
// 添加菜单
|
|
const handleMenuAdd = async () => {
|
|
await apiMenuAdd({ ...formData.value })
|
|
router.back()
|
|
}
|
|
|
|
// 编辑菜单
|
|
const handleMenuEdit = async () => {
|
|
await apiMenuEdit({ ...formData.value })
|
|
router.back()
|
|
}
|
|
|
|
// 保存
|
|
const onSubmit = () => {
|
|
formRefs.value?.validate()?.then(valid => {
|
|
if (!valid) {
|
|
return
|
|
}
|
|
|
|
if (!id) handleMenuAdd()
|
|
else handleMenuEdit()
|
|
})
|
|
}
|
|
|
|
// 切换
|
|
// const changeType = (val: string) => {
|
|
// menuDataType.value = val
|
|
// }
|
|
|
|
onMounted(() => {
|
|
if (id) getMenuDetail(id)
|
|
getFatherMenu()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|