【后台管理】-- 渠道-菜单管理（未完成
This commit is contained in:
linjinyuan
parent
e5560889fc
commit
b47fc4219e
|
|
@ -1,14 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="menu-oa">
|
<div class="menu-oa">
|
||||||
<el-card class="!border-none" shadow="never">
|
<el-card class="!border-none" shadow="never">
|
||||||
<el-alert type="warning" title="配置微信公众号菜单，点击确认，保存菜单并发布至微信公众号" :closable="false" show-icon />
|
<el-alert
|
||||||
|
type="warning"
|
||||||
|
title="配置微信公众号菜单，点击确认，保存菜单并发布至微信公众号"
|
||||||
|
:closable="false"
|
||||||
|
show-icon
|
||||||
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<el-card class="!border-none mt-4" shadow="never">
|
<el-card class="!border-none mt-4" shadow="never">
|
||||||
|
<div class="flex flex-1">
|
||||||
|
<!-- Phone -->
|
||||||
|
<oa-phone></oa-phone>
|
||||||
|
|
||||||
<!-- Phone -->
|
<!-- Attr -->
|
||||||
<oa-phone></oa-phone>
|
<oa-attr></oa-attr>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
<footer-btns v-perms="['channel:h5:save']">
|
<footer-btns v-perms="['channel:h5:save']">
|
||||||
|
|
@ -18,10 +26,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import OaPhone from "./menu_component/oa-phone.vue"
|
import OaPhone from "./menu_com/oa-phone.vue";
|
||||||
|
import OaAttr from "./menu_com/oa-attr.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.menu-oa {}
|
.menu-oa {
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useMenuOa } from "./useMenuOa";
|
||||||
|
|
||||||
|
const { menuList, menuIndex, handleAddMenu } = useMenuOa();
|
||||||
|
const curMenu = computed(() => menuList.value[menuIndex.value] || {});
|
||||||
|
console.log(curMenu);
|
||||||
|
const rules = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- Attr -->
|
||||||
|
<div class="flex-1 oa-attr">
|
||||||
|
<div class="text-base oa-attr-title">菜单配置</div>
|
||||||
|
|
||||||
|
<del-wrap class="w-2/4">
|
||||||
|
<div
|
||||||
|
class="flex items-center w-full p-4 mt-4 rounded bg-fill-light"
|
||||||
|
>
|
||||||
|
<el-form ref="ruleFormRef" :model="curMenu" label-width="120px">
|
||||||
|
<!-- 菜单名称 -->
|
||||||
|
<el-form-item label="菜单名称" prop="name">
|
||||||
|
<el-input v-model="curMenu.name" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 菜单类型 -->
|
||||||
|
<el-form-item label="主菜单类型" prop="name">
|
||||||
|
<el-radio-group v-model="curMenu.type">
|
||||||
|
<el-radio :label="1">不配置子菜单</el-radio>
|
||||||
|
<el-radio :label="2">配置子菜单</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 跳转链接 -->
|
||||||
|
<el-form-item label="跳转链接" prop="name">
|
||||||
|
<el-radio-group v-model="curMenu.jump_link">
|
||||||
|
<el-radio :label="1">网页</el-radio>
|
||||||
|
<el-radio :label="2">小程序</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 网址 -->
|
||||||
|
<el-form-item label="网址" prop="name">
|
||||||
|
<el-input v-model="curMenu.url" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- AppId -->
|
||||||
|
<el-form-item label="AppId" prop="name">
|
||||||
|
<el-input v-model="curMenu.app_id" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 路径 -->
|
||||||
|
<el-form-item label="路径" prop="name">
|
||||||
|
<el-input v-model="curMenu.pages" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</del-wrap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.oa-attr {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useMenuOa } from "./useMenuOa";
|
||||||
|
import useSettingStore from "@/stores/modules/setting";
|
||||||
|
|
||||||
|
// 菜单颜色（这里采用全局颜色）
|
||||||
|
const settingStore = useSettingStore();
|
||||||
|
const themeColor = computed(() => settingStore.theme || "#4A5DFF");
|
||||||
|
|
||||||
|
const { menuList, menuIndex, handleAddMenu } = useMenuOa();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- Phone -->
|
||||||
|
<div class="oa-phone mr-[35px]">
|
||||||
|
<div class="oa-phone-content"></div>
|
||||||
|
|
||||||
|
<div class="flex oa-phone-menu">
|
||||||
|
<div class="flex items-center justify-center oa-phone-menu-switch">
|
||||||
|
<el-icon>
|
||||||
|
<Grid />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-for="(menuItem, index) in menuList">
|
||||||
|
<div class="relative flex-1" @click="menuIndex = index">
|
||||||
|
<!-- 一级菜单 -->
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center flex-1 text-sm oa-phone-menu-item"
|
||||||
|
:class="{ 'active-menu': menuIndex === index }"
|
||||||
|
>
|
||||||
|
{{ menuItem.name }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 二级菜单 -->
|
||||||
|
<div class="oa-phone-menu-subitem">
|
||||||
|
<template
|
||||||
|
v-for="(subItem, index2) in menuItem.children"
|
||||||
|
>
|
||||||
|
<div class="oa-phone-menu-subitem-title">
|
||||||
|
{{ subItem.name }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 新增菜单 -->
|
||||||
|
<template v-if="menuList.length <= 2">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center flex-1 h-full"
|
||||||
|
@click="handleAddMenu"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.oa-phone {
|
||||||
|
width: 260px;
|
||||||
|
height: 461px;
|
||||||
|
border: 1px solid #e5e5ea;
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
height: 420px;
|
||||||
|
border-bottom: 1px solid #e5e5ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu {
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&-switch {
|
||||||
|
width: 40px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #e5e5ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 一级菜单
|
||||||
|
&-item {
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #e5e5ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item:nth-child(4) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-menu::after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 41px;
|
||||||
|
top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid v-bind(themeColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 二级菜单
|
||||||
|
&-subitem {
|
||||||
|
width: 98%;
|
||||||
|
left: 2px;
|
||||||
|
bottom: calc(100% + 10px);
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #e5e5ea;
|
||||||
|
border-top: none;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #e5e5ea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { ref } from "vue"
|
||||||
|
import feedback from '@/utils/feedback'
|
||||||
|
|
||||||
|
// 菜单数据
|
||||||
|
const menuList = ref<any>([])
|
||||||
|
const menuIndex = ref<number>(0)
|
||||||
|
|
||||||
|
|
||||||
|
export const useMenuOa = () => {
|
||||||
|
|
||||||
|
const handleAddMenu = () => {
|
||||||
|
menuList.value.push({
|
||||||
|
name: '菜单名称',
|
||||||
|
type: 1,
|
||||||
|
jump_link: 1,
|
||||||
|
url: '',
|
||||||
|
app_id: '',
|
||||||
|
pages: '',
|
||||||
|
children: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
menuList,
|
||||||
|
menuIndex,
|
||||||
|
handleAddMenu
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- Phone -->
|
|
||||||
<div class="oa-phone">
|
|
||||||
<div class="oa-phone-content"></div>
|
|
||||||
|
|
||||||
<div class="oa-phone-menu">
|
|
||||||
<div class="flex items-center justify-center oa-phone-switch">
|
|
||||||
<el-icon>
|
|
||||||
<Grid />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.oa-phone {
|
|
||||||
width: 260px;
|
|
||||||
height: 460px;
|
|
||||||
border: 1px solid #E5E5EA;
|
|
||||||
|
|
||||||
&-content {
|
|
||||||
height: 420px;
|
|
||||||
border-bottom: 1px solid #E5E5EA;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-menu {
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
.oa-phone-switch {
|
|
||||||
width: 40px;
|
|
||||||
height: 100%;
|
|
||||||
border-right: 1px solid #E5E5EA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue