【后台管理】-- 渠道-菜单管理

admin/src/api/channel/wx_oa.ts

@@ -9,3 +9,40 @@ export function setOaConfig(params: any) {
 export function getOaConfig() {
     return request.get({ url: '/channel/oa/detail' })
 }
+
+
+export interface Menu {
+    name: string,
+    menuType?: number,
+    visitType?: string,
+    url?: string,
+    appId?: string
+    pagePath?: string,
+    subButtons: Menu[] | any
+}
+
+/**
+ * @return { Promise } 
+ * @description 获取菜单
+ */
+ export function getOaMenu() {
+    return request.get({ url: '/channel/oaMenu/detail' })
+}
+
+/**
+ * @return { Promise } 
+ * @param { Menu } Menu
+ * @description 菜单保存
+ */
+ export function setOaMenuSave(params: Menu | any) {
+    return request.post({ url: '/channel/oaMenu/save', params })
+}
+
+/**
+ * @return { Promise } 
+ * @param { Menu } Menu
+ * @description 菜单发布
+ */
+export function setOaMenuPublish(params: Menu | any) {
+    return request.post({ url: '/channel/oaMenu/publish', params })
+}

admin/src/views/channel/wx_oa/menu.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import OaPhone from "./menu_com/oa-phone.vue";
+import OaAttr from "./menu_com/oa-attr.vue";
+import { useMenuOa } from "./menu_com/useMenuOa";
+
+const { getOaMenuFunc, handleSave, handlePublish } = useMenuOa(undefined);
+getOaMenuFunc();
+</script>
+
 <template>
     <div class="menu-oa">
         <el-card class="!border-none" shadow="never">
@@ -20,16 +29,12 @@
         </el-card>
 
         <footer-btns v-perms="['channel:h5:save']">
-            <el-button type="primary" @click="">保存</el-button>
+            <el-button type="primary" @click="handleSave">保存</el-button>
+            <el-button type="primary" @click="handlePublish">发布</el-button>
         </footer-btns>
     </div>
 </template>
 
-<script setup lang="ts">
-import OaPhone from "./menu_com/oa-phone.vue";
-import OaAttr from "./menu_com/oa-attr.vue";
-</script>
-
 <style lang="scss" scoped>
 .menu-oa {
 }

admin/src/views/channel/wx_oa/menu_com/oa-attr.vue

@@ -1,61 +1,104 @@
 <script lang="ts" setup>
 import { useMenuOa } from "./useMenuOa";
+import oaMenuForm from "./oa-menu-form.vue";
+import oaMenuFormEdit from "./oa-menu-form-edit.vue";
 
-const { menuList, menuIndex, handleAddMenu } = useMenuOa();
-const curMenu = computed(() => menuList.value[menuIndex.value] || {});
-console.log(curMenu);
-const rules = [];
+const menuRef = shallowRef();
+
+const {
+    menuList,
+    menuIndex,
+    handleAddSubMenu,
+    handleEditSubMenu,
+    handleDelMenu,
+    handleDelSubMenu,
+} = useMenuOa(menuRef);
 </script>
 
 <template>
     <!-- Attr -->
-    <div class="flex-1 oa-attr">
-        <div class="text-base oa-attr-title">菜单配置</div>
+    <template v-for="(attrItem, attrIndex) in menuList" :key="attrIndex">
+        <div class="flex-1 oa-attr" v-show="attrIndex === menuIndex">
+            <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>
+            <del-wrap class="w-3/4" @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.menuType"
+                        v-model:visitType="attrItem.visitType"
+                        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.subButtons"
+                                    :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-icon><EditPen /></el-icon>
+                                    </oa-menu-form-edit>
 
-                    <!-- 菜单类型 -->
-                    <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>
+                                    <!-- 删除子菜单 -->
+                                    <popup
+                                        @confirm="
+                                            handleDelSubMenu(
+                                                menuIndex,
+                                                subIndex
+                                            )
+                                        "
+                                    >
+                                        是否删除当前子菜单？
+                                        <template #trigger>
+                                            <el-icon class="ml-5"
+                                                ><Delete
+                                            /></el-icon>
+                                        </template>
+                                    </popup>
+                                </li>
+                            </ul>
 
-                    <!-- 跳转链接 -->
-                    <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>
+                            <!-- 新增子菜单 -->
+                            <oa-menu-form-edit
+                                modular="add"
+                                @add="handleAddSubMenu"
+                            >
+                                <el-button
+                                    type="primary"
+                                    link
+                                    :disabled="attrItem.subButtons.length >= 5"
+                                    >添加子菜单({{
+                                        attrItem.subButtons.length
+                                    }}/5)</el-button
+                                >
+                            </oa-menu-form-edit>
+                        </div>
+                    </oa-menu-form>
+                </div>
+            </del-wrap>
+        </div>
+    </template>
 </template>
 
 <style lang="scss" scoped>

admin/src/views/channel/wx_oa/menu_com/oa-menu-form-edit.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import oaMenuForm from "./oa-menu-form.vue";
+
+const emit = defineEmits<{
+    (event: "add", value: any): void;
+    (event: "edit", value: any): void;
+}>();
+
+const props = withDefaults(
+    defineProps<{
+        modular: string;
+        subItem?: any;
+    }>(),
+    {
+        modular: "edit",
+        subItem: {},
+    }
+);
+
+const menuFormEditRef = shallowRef();
+const menuFromPopupRef = shallowRef();
+
+const form = {
+    name: "",
+    visitType: "view",
+    url: "",
+    appId: "",
+    pagePath: "",
+};
+
+watchEffect(() => {
+    if (Object.keys(props.subItem).length != 0) {
+        for (const key in form) {
+            //@ts-ignore
+            form[key] = props.subItem[key];
+        }
+    }
+});
+
+const handleRules = async () => {
+    await menuFormEditRef.value.menuFormRef.validate();
+    if (props.modular === "edit") {
+        emit("edit", { ...form });
+    } else {
+        emit("add", { ...form });
+    }
+    menuFromPopupRef.value.close();
+    menuFormEditRef.value.menuFormRef.resetFields();
+};
+</script>
+
+<template>
+    <popup
+        ref="menuFromPopupRef"
+        async
+        :clickModalClose="false"
+        :title="`${modular === 'add' ? '新增' : '编辑'}子菜单`"
+        @confirm="handleRules"
+    >
+        <oa-menu-form
+            ref="menuFormEditRef"
+            modular="secondary"
+            v-model:name="form.name"
+            v-model:visitType="form.visitType"
+            v-model:url="form.url"
+            v-model:appId="form.appId"
+            v-model:pagePath="form.pagePath"
+        ></oa-menu-form>
+        <template #trigger>
+            <slot></slot>
+        </template>
+    </popup>
+</template>

admin/src/views/channel/wx_oa/menu_com/oa-menu-form.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-form
+        ref="menuFormRef"
+        :rules="rules"
+        :model="menuForm"
+        label-width="120px"
+        class="pr-10"
+    >
+        <!-- 菜单名称 -->
+        <el-form-item
+            :label="modular === 'master' ? '主菜单名称' : '子菜单名称'"
+            prop="name"
+        >
+            <el-input v-model="menuForm.name" />
+        </el-form-item>
+
+        <!-- 菜单类型 -->
+        <el-form-item
+            label="主菜单类型"
+            prop="menuType"
+            v-if="modular === 'master'"
+        >
+            <el-radio-group v-model="menuForm.menuType">
+                <el-radio :label="1">不配置子菜单</el-radio>
+                <el-radio :label="2">配置子菜单</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item
+            label=""
+            v-if="menuForm.menuType === 2 && modular === 'master'"
+        >
+            <slot></slot>
+        </el-form-item>
+
+        <template v-if="menuForm.menuType === 1">
+            <!-- 跳转链接 -->
+            <el-form-item label="跳转链接" prop="visitType">
+                <el-radio-group v-model="menuForm.visitType">
+                    <el-radio label="view">网页</el-radio>
+                    <el-radio label="miniprogram">小程序</el-radio>
+                </el-radio-group>
+            </el-form-item>
+
+            <!-- 网址 -->
+            <el-form-item label="网址" prop="url">
+                <el-input v-model="menuForm.url" />
+            </el-form-item>
+
+            <template v-if="menuForm.visitType == 'miniprogram'">
+                <!-- AppId -->
+                <el-form-item label="AppId" prop="appId">
+                    <el-input v-model="menuForm.appId" />
+                </el-form-item>
+
+                <!-- 路径 -->
+                <el-form-item label="路径" prop="pagePath">
+                    <el-input v-model="menuForm.pagePath" />
+                </el-form-item>
+            </template>
+        </template>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { rules } from "./useMenuOa";
+import type { FormInstance } from "element-plus";
+
+const emit = defineEmits([
+    "update:name",
+    "update:menuType",
+    "update:visitType",
+    "update:url",
+    "update:pagePath",
+]);
+
+const props = withDefaults(
+    defineProps<{
+        modular?: string;
+        name?: string;
+        menuType?: number;
+        visitType?: string;
+        url?: string;
+        appId?: string;
+        pagePath?: string;
+    }>(),
+    {
+        modular: "master",
+        name: "",
+        menuType: 1,
+        visitType: "view",
+        url: "",
+        appId: "",
+        pagePath: "",
+    }
+);
+
+const menuFormRef = shallowRef<FormInstance>();
+// 表单数据
+const menuForm = ref({ ...props });
+
+watch(
+    () => props,
+    (value) => {
+        menuForm.value = value;
+    },
+    { immediate: true }
+);
+
+watchEffect(() => {
+    if (props.modular === "master") {
+        emit("update:menuType", menuForm.value.menuType);
+    }
+    emit("update:name", menuForm.value.name);
+    emit("update:visitType", menuForm.value.visitType);
+    emit("update:url", menuForm.value.url);
+    emit("update:appId", menuForm.value.appId);
+    emit("update:pagePath", menuForm.value.pagePath);
+});
+
+defineExpose({
+    menuFormRef,
+});
+</script>

admin/src/views/channel/wx_oa/menu_com/oa-phone.vue

@@ -6,7 +6,7 @@ import useSettingStore from "@/stores/modules/setting";
 const settingStore = useSettingStore();
 const themeColor = computed(() => settingStore.theme || "#4A5DFF");
 
-const { menuList, menuIndex, handleAddMenu } = useMenuOa();
+const { menuList, menuIndex, handleAddMenu } = useMenuOa(useMenuOa);
 </script>
 
 <template>
@@ -21,20 +21,25 @@ const { menuList, menuIndex, handleAddMenu } = useMenuOa();
                 </el-icon>
             </div>
 
-            <template v-for="(menuItem, index) in menuList">
-                <div class="relative flex-1" @click="menuIndex = index">
+            <template v-for="(menuItem, i) in menuList" :key="i">
+                <div class="relative flex-1" @click="menuIndex = i">
                     <!-- 一级菜单 -->
                     <div
                         class="flex items-center justify-center flex-1 text-sm oa-phone-menu-item"
-                        :class="{ 'active-menu': menuIndex === index }"
+                        :class="{ 'active-menu': menuIndex === i }"
                     >
                         {{ menuItem.name }}
                     </div>
 
                     <!-- 二级菜单 -->
-                    <div class="oa-phone-menu-subitem">
+                    <div
+                        class="oa-phone-menu-subitem"
+                        v-show="
+                            menuItem.subButtons.length && menuItem.menuType != 1
+                        "
+                    >
                         <template
-                            v-for="(subItem, index2) in menuItem.children"
+                            v-for="(subItem, index2) in menuItem.subButtons"
                         >
                             <div class="oa-phone-menu-subitem-title">
                                 {{ subItem.name }}

admin/src/views/channel/wx_oa/menu_com/useMenuOa.ts

@@ -1,28 +1,161 @@
 import { ref } from "vue"
 import feedback from '@/utils/feedback'
+import type { FormRules } from "element-plus";
+import { setOaMenuSave, getOaMenu, setOaMenuPublish } from "@/api/channel/wx_oa"
+import type { Menu } from "@/api/channel/wx_oa"
 
+// 菜单实例
+export const menuRef = shallowRef();
 // 菜单数据
-const menuList = ref<any>([])
+const menuList = ref<Menu[]>([])
 const menuIndex = ref<number>(0)
 
+// 校验
+export const rules = reactive<FormRules>({
+    name: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+        {
+            min: 1,
+            max: 12,
+            message: "长度限制12个字符",
+            trigger: ["blur", "change"],
+        },
+    ],
+    menuType: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+    ],
+    visitType: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+    ],
+    url: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+    ],
+    appId: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+    ],
+    pagePath: [
+        {
+            required: true,
+            message: "必填项不能为空",
+            trigger: ["blur", "change"],
+        },
+    ],
+});
 
-export const useMenuOa = () => {
 
+export const useMenuOa = (ref: any) => {
+    if( ref ) menuRef.value = ref
+
+    // 添加主菜单
     const handleAddMenu = () => {
         menuList.value.push({
             name: '菜单名称',
-            type: 1,
-            jump_link: 1,
+            menuType: 1,
+            visitType: 'view',
             url: '',
-            app_id: '',
-            pages: '',
-            children: []
+            appId: "",
+            pagePath: '',
+            subButtons: []
         })
     }
 
+    // 添加子菜单
+    const handleAddSubMenu = (event?: Menu) => {
+        const index = menuIndex.value;
+        if(menuList.value[index].subButtons.length>=5) {
+            feedback.msgError('已添加上限～')
+            return
+        }
+        menuList.value[index].subButtons.push(event)
+    }
+
+    // 编辑子菜单
+    const handleEditSubMenu = (event: Menu, subIndex: number) => {
+        const index = menuIndex.value;
+        menuList.value[index].subButtons[subIndex] = event
+    }
+
+    // 删除主菜单
+    const handleDelMenu = (index: number) => {
+        menuList.value.splice(index, 1)
+    }
+
+    // 删除子菜单
+    const handleDelSubMenu = (index: number, subIndex: number) => {
+        menuList.value[index].subButtons.splice(subIndex, 1)
+    }
+
+    // 获取菜单
+    const getOaMenuFunc = async () => {
+        try {
+            menuList.value = await getOaMenu();
+        } catch (error) {
+            console.log('获取菜单=>', error)
+        }
+    }
+
+    // 保存菜单
+    const handleSave = async () => {
+        const refs = menuRef.value.value;
+        for (let i = 0; i < refs.length; i++) {
+            try {
+                await refs[i].menuFormRef.validate()
+            } catch (error) {
+                menuIndex.value = i
+                feedback.msgError(`菜单${i+1}必填项不能为空～`)
+                return
+            }            
+        }
+        await setOaMenuSave(menuList.value)
+        feedback.msgSuccess('保存成功')
+    }
+
+    // 保存菜单
+    const handlePublish = async () => {
+        const refs = menuRef.value.value;
+        for (let i = 0; i < refs.length; i++) {
+            try {
+                await refs[i].menuFormRef.validate()
+            } catch (error) {
+                menuIndex.value = i
+                feedback.msgError(`菜单${i+1}必填项不能为空～`)
+                return
+            }            
+        }
+        await setOaMenuPublish(menuList.value)
+        feedback.msgSuccess('发布成功')
+    }
+    
     return {
         menuList,
         menuIndex,
-        handleAddMenu
+        handleAddMenu,
+        handleAddSubMenu,
+        handleEditSubMenu,
+        handleDelMenu,
+        handleDelSubMenu,
+        getOaMenuFunc,
+        handleSave,
+        handlePublish
     }
 }