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

菜单接口对接

This commit is contained in:
Mrtangl 2022-04-18 14:42:34 +08:00
parent f370ecec76
commit 50a5b7e3a3
2 changed files with 176 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,13 +25,13 @@
<div class="m-t-15"> <div class="m-t-15">
<el-form <el-form
ref="form" ref="formRefs"
:model="formData" :model="formData"
label-width="120px" label-width="120px"
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="radio">
<el-radio <el-radio
:label="menuDataType.CATALOG" :label="menuDataType.CATALOG"
@ -68,55 +68,130 @@
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<div v-if="(radio == menuDataType.BUTTON) == ''">
<el-form-item label="菜单图标"> <el-form-item label="菜单图标">
<el-input show-word-limit placeholder="请输入名称"></el-input> <el-input show-word-limit placeholder="请输入名称"></el-input>
</el-form-item> </el-form-item>
</div>
<el-form-item label="菜单名称"> <el-form-item label="菜单名称">
<el-input show-word-limit placeholder="请输入名称"></el-input> <el-input show-word-limit placeholder="请输入名称"></el-input>
</el-form-item> </el-form-item>
<div v-if="(radio == menuDataType.BUTTON) == ''">
<el-form-item label="路由地址"> <el-form-item label="路由地址">
<el-input show-word-limit placeholder="请输入名称"></el-input> <el-input show-word-limit placeholder="请输入名称"></el-input>
</el-form-item> </el-form-item>
</div>
<div v-if="radio == menuDataType.CATALOG"> <div v-if="radio == menuDataType.MENU">
<el-form-item label="排序"> <el-form-item label="组件路径">
<el-input <el-input show-word-limit placeholder="请输入名称"></el-input>
show-word-limit </el-form-item>
type="number" <el-form-item label="极限字符">
placeholder="请输入名称" <el-input show-word-limit placeholder="请输入名称"></el-input>
></el-input> </el-form-item>
<el-form-item label="路由参数">
<el-input show-word-limit placeholder="请输入名称"></el-input>
</el-form-item> </el-form-item>
</div> </div>
<div v-else-if="radio == menuDataType.MENU">
<el-form-item label="排序"> <el-form-item label="排序">
<el-input <el-input show-word-limit type="number" placeholder="请输入名称"></el-input>
show-word-limit </el-form-item> -->
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>
<div v-else></div> <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> </el-form>
</div> </div>
</el-card> </el-card>
<footer-btns>
<el-button type="primary" size="small" @click="onSubmit">保存</el-button>
</footer-btns>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useAdmin } from '@/core/hooks/app' import { useAdmin } from '@/core/hooks/app'
import { onMounted, reactive, ref } from 'vue' 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' import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit, apiMenuDelete } from '@/api/auth'
const menuDataType = { const menuDataType = {
@ -128,15 +203,70 @@ const menuDataType = {
const { router, route } = useAdmin() const { router, route } = useAdmin()
const id: any = route.query.id const id: any = route.query.id
const radio = ref(menuDataType.CATALOG) const formRefs = ref<InstanceType<typeof ElForm>>()
// 切换
const changeType = (val: string) => {
menuDataType.value = val
}
// 父级菜单选择 // 父级菜单选择
const menuList = ref<any>([]) 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> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

10
admin/src/views/permission/menu/index.vue
View File

@ -13,7 +13,7 @@
:tree-props="{ children: 'children' }" :tree-props="{ children: 'children' }"
size="mini" 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="菜单类型"> <el-table-column prop="menuType" label="菜单类型">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.menuType == menuDataType.CATALOG">{{ '目录' }}</span> <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="menuSort" label="排序"> </el-table-column>
<el-table-column prop="perms" 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="paths" label="组件路径"> </el-table-column>
<el-table-column prop="isDisable" label="状态"> </el-table-column> <el-table-column prop="isDisable" label="状态">
<el-table-column prop="createTime" label="创建时间"> </el-table-column> <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="操作"> <el-table-column label="操作">
<template #default="scope"> <template #default="scope">
<router-link <router-link