菜单接口对接
This commit is contained in:
Mrtangl
parent
f370ecec76
commit
50a5b7e3a3
|
|
@ -25,13 +25,13 @@
|
|||
|
||||
<div class="m-t-15">
|
||||
<el-form
|
||||
ref="form"
|
||||
ref="formRefs"
|
||||
:model="formData"
|
||||
label-width="120px"
|
||||
size="small"
|
||||
style="max-width: 460px"
|
||||
>
|
||||
<el-form-item label="菜单类型">
|
||||
<!-- <el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio
|
||||
:label="menuDataType.CATALOG"
|
||||
|
|
@ -68,55 +68,130 @@
|
|||
></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div v-if="radio == menuDataType.CATALOG">
|
||||
<el-form-item label="排序">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div v-else-if="radio == menuDataType.MENU">
|
||||
<el-form-item label="排序">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="ssss">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input
|
||||
v-model="formData.menuName"
|
||||
show-word-limit
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div v-else></div>
|
||||
<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 = {
|
||||
|
|
@ -128,15 +203,70 @@ const menuDataType = {
|
|||
const { router, route } = useAdmin()
|
||||
const id: any = route.query.id
|
||||
|
||||
const radio = ref(menuDataType.CATALOG)
|
||||
|
||||
// 切换
|
||||
const changeType = (val: string) => {
|
||||
menuDataType.value = val
|
||||
}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
:tree-props="{ children: 'children' }"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column prop="menuName" label="名称"> </el-table-column>
|
||||
<el-table-column prop="menuName" label="名称" width="180"> </el-table-column>
|
||||
<el-table-column prop="menuType" label="菜单类型">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.menuType == menuDataType.CATALOG">{{ '目录' }}</span>
|
||||
|
|
@ -27,8 +27,12 @@
|
|||
<el-table-column prop="menuSort" label="排序"> </el-table-column>
|
||||
<el-table-column prop="perms" label="权限标识"> </el-table-column>
|
||||
<el-table-column prop="paths" label="组件路径"> </el-table-column>
|
||||
<el-table-column prop="isDisable" label="状态"> </el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
||||
<el-table-column prop="isDisable" label="状态">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.isDisable == 0 ? '启用' : '关闭' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="160"> </el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<router-link
|
||||
|
|
|
|||
Loading…
Reference in New Issue