From b47fc4219e831b240bb0c08e5a48b34cabe589b8 Mon Sep 17 00:00:00 2001
From: linjinyuan <2841541624@qq.com>
Date: Tue, 13 Sep 2022 19:05:21 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=90=8E=E5=8F=B0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=91--=20=E6=B8=A0=E9=81=93-=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=EF=BC=88=E6=9C=AA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/channel/wx_oa/menu.vue        |  25 ++--
 .../views/channel/wx_oa/menu_com/oa-attr.vue  |  64 +++++++++
 .../views/channel/wx_oa/menu_com/oa-phone.vue | 123 ++++++++++++++++++
 .../views/channel/wx_oa/menu_com/useMenuOa.ts |  28 ++++
 .../channel/wx_oa/menu_component/oa-attr.vue  |   1 -
 .../channel/wx_oa/menu_component/oa-phone.vue |  37 ------
 .../channel/wx_oa/menu_component/useMenuOa.ts |   0
 7 files changed, 232 insertions(+), 46 deletions(-)
 create mode 100644 admin/src/views/channel/wx_oa/menu_com/oa-attr.vue
 create mode 100644 admin/src/views/channel/wx_oa/menu_com/oa-phone.vue
 create mode 100644 admin/src/views/channel/wx_oa/menu_com/useMenuOa.ts
 delete mode 100644 admin/src/views/channel/wx_oa/menu_component/oa-attr.vue
 delete mode 100644 admin/src/views/channel/wx_oa/menu_component/oa-phone.vue
 delete mode 100644 admin/src/views/channel/wx_oa/menu_component/useMenuOa.ts

diff --git a/admin/src/views/channel/wx_oa/menu.vue b/admin/src/views/channel/wx_oa/menu.vue
index 8bcba3ec..8d5959d1 100644
--- a/admin/src/views/channel/wx_oa/menu.vue
+++ b/admin/src/views/channel/wx_oa/menu.vue
@@ -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>
\ No newline at end of file
+.menu-oa {
+}
+</style>
diff --git a/admin/src/views/channel/wx_oa/menu_com/oa-attr.vue b/admin/src/views/channel/wx_oa/menu_com/oa-attr.vue
new file mode 100644
index 00000000..3f59e7b4
--- /dev/null
+++ b/admin/src/views/channel/wx_oa/menu_com/oa-attr.vue
@@ -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>
diff --git a/admin/src/views/channel/wx_oa/menu_com/oa-phone.vue b/admin/src/views/channel/wx_oa/menu_com/oa-phone.vue
new file mode 100644
index 00000000..39ae753f
--- /dev/null
+++ b/admin/src/views/channel/wx_oa/menu_com/oa-phone.vue
@@ -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>
diff --git a/admin/src/views/channel/wx_oa/menu_com/useMenuOa.ts b/admin/src/views/channel/wx_oa/menu_com/useMenuOa.ts
new file mode 100644
index 00000000..31ae22ec
--- /dev/null
+++ b/admin/src/views/channel/wx_oa/menu_com/useMenuOa.ts
@@ -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
+    }
+}
\ No newline at end of file
diff --git a/admin/src/views/channel/wx_oa/menu_component/oa-attr.vue b/admin/src/views/channel/wx_oa/menu_component/oa-attr.vue
deleted file mode 100644
index 8b137891..00000000
--- a/admin/src/views/channel/wx_oa/menu_component/oa-attr.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/admin/src/views/channel/wx_oa/menu_component/oa-phone.vue b/admin/src/views/channel/wx_oa/menu_component/oa-phone.vue
deleted file mode 100644
index cd56568e..00000000
--- a/admin/src/views/channel/wx_oa/menu_component/oa-phone.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/admin/src/views/channel/wx_oa/menu_component/useMenuOa.ts b/admin/src/views/channel/wx_oa/menu_component/useMenuOa.ts
deleted file mode 100644
index e69de29b..00000000