91 lines
3.7 KiB
Vue
91 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
||
import { useMenuOa } from './useMenuOa'
|
||
import oaMenuForm from './oa-menu-form.vue'
|
||
import oaMenuFormEdit from './oa-menu-form-edit.vue'
|
||
|
||
const menuRef = shallowRef()
|
||
|
||
const {
|
||
menuList,
|
||
menuIndex,
|
||
handleAddSubMenu,
|
||
handleEditSubMenu,
|
||
handleDelMenu,
|
||
handleDelSubMenu
|
||
} = useMenuOa(menuRef)
|
||
</script>
|
||
|
||
<template>
|
||
<!-- Attr -->
|
||
<template v-for="(attrItem, attrIndex) in menuList" :key="attrIndex">
|
||
<div class="flex-1 oa-attr min-w-0" v-show="attrIndex === menuIndex">
|
||
<div class="text-base oa-attr-title">菜单配置</div>
|
||
|
||
<del-wrap @close="handleDelMenu(menuIndex)">
|
||
<div class="flex items-center w-full p-4 mt-4 rounded bg-fill-light">
|
||
<oa-menu-form
|
||
ref="menuRef"
|
||
modular="master"
|
||
v-model:name="attrItem.name"
|
||
v-model:menuType="attrItem.has_menu"
|
||
v-model:visitType="attrItem.type"
|
||
v-model:url="attrItem.url"
|
||
v-model:appId="attrItem.appid"
|
||
v-model:pagePath="attrItem.pagepath"
|
||
>
|
||
<div class="flex-1">
|
||
<!-- 编辑子菜单 -->
|
||
<ul>
|
||
<li
|
||
class="flex"
|
||
v-for="(subItem, subIndex) in attrItem.sub_button"
|
||
:key="subIndex"
|
||
style="padding: 8px"
|
||
>
|
||
<span class="mr-auto">{{ subItem.name }}</span>
|
||
<!-- 编辑子菜单 -->
|
||
<oa-menu-form-edit
|
||
modular="edit"
|
||
:subItem="subItem"
|
||
@edit="handleEditSubMenu($event, subIndex)"
|
||
>
|
||
<el-button link>
|
||
<el-icon><EditPen /></el-icon>
|
||
</el-button>
|
||
</oa-menu-form-edit>
|
||
|
||
<!-- 删除子菜单 -->
|
||
<popup @confirm="handleDelSubMenu(menuIndex, subIndex)">
|
||
是否删除当前子菜单？
|
||
<template #trigger>
|
||
<el-button link>
|
||
<el-icon class="ml-5"><Delete /></el-icon>
|
||
</el-button>
|
||
</template>
|
||
</popup>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- 新增子菜单 -->
|
||
<oa-menu-form-edit modular="add" @add="handleAddSubMenu">
|
||
<el-button
|
||
type="primary"
|
||
link
|
||
:disabled="attrItem.sub_button.length >= 5"
|
||
>
|
||
添加子菜单({{ attrItem.sub_button.length }}/5)
|
||
</el-button>
|
||
</oa-menu-form-edit>
|
||
</div>
|
||
</oa-menu-form>
|
||
</div>
|
||
</del-wrap>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.oa-attr {
|
||
}
|
||
</style>
|