【后台管理】-- 渠道-菜单管理（未完成
This commit is contained in:
linjinyuan
parent
e5560889fc
commit
b47fc4219e
|
|
@ -1,14 +1,22 @@
|
|||
<template>
|
||||
<div class="menu-oa">
|
||||
<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 class="!border-none mt-4" shadow="never">
|
||||
<div class="flex flex-1">
|
||||
<!-- Phone -->
|
||||
<oa-phone></oa-phone>
|
||||
|
||||
<!-- Phone -->
|
||||
<oa-phone></oa-phone>
|
||||
|
||||
<!-- Attr -->
|
||||
<oa-attr></oa-attr>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<footer-btns v-perms="['channel:h5:save']">
|
||||
|
|
@ -18,10 +26,11 @@
|
|||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-oa {}
|
||||
</style>
|
||||
.menu-oa {
|
||||
}
|
||||
</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