ETA菜单配置-弹窗

src/views/operation_manage/etaMenu_manage/components/ModifyMenuDialog.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { ref, reactive, computed, watch } from 'vue'
+import _ from 'lodash'
+const props = defineProps({
+    isShow:{
+        type:Boolean,
+        default:false
+    },
+    openType:{
+        type:String,
+        default:'add'
+    },
+    etaMenu:{
+        type:Array,
+        default:[]
+    }
+})
+const emit = defineEmits(["closeDia","saveMenu"])
+const baseForm = {
+    MenuType: 0,
+    ParentId: 0,
+    Name: '',
+    IconPath: '',
+    Path: '',
+    Component: '',
+    Sort: 0,
+    Hidden: 0,
+    ButtonCode: '',
+    treeLevel: 0
+}
+let form = reactive({})
+let menuForm = ref(null)
+const baseMenuList = [{MenuId: -1,Name: '无'}]
+let menuList = ref([])
+//菜单类型-菜单 是否禁用
+const isMenuDisabled = computed(()=>form.treeLevel>1&&props.openType!=='add')
+//菜单类型-按钮、字段 是否禁用
+const isbtnDisabled = computed(()=>form.treeLevel === 1 && props.openType !== 'add')
+const nameLabel = computed(()=>{
+    const nameMap = {
+        0:'菜单标题',
+        1:'按钮名称',
+        2:'字段名称'
+    }
+    return nameMap[form.MenuType]||'菜单标题'
+})
+watch(()=>props.isShow,(newVal)=>{
+    if(newVal){
+        Object.assign(form,baseForm)
+        menuList.value = baseMenuList
+        initForm()
+    }else{
+        menuForm.value?.clearValidate()
+    }
+})
+function initForm(){
+    menuList.value = [...menuList.value, ..._.cloneDeep(props.etaMenu)];
+    if (props.openType === 'addNext') {
+        form.ParentId = formData.ParentId;
+        form.treeLevel = formData.treeLevel;
+    }
+    if (props.openType === 'edit') {
+        form = _.cloneDeep(formData);
+    }
+    if (form.treeLevel > 1 && props.openType !== 'edit') {
+        form.MenuType = 1;
+    }
+    if(form.treeLevel===0 && props.openType !== 'add'){
+        form.ParentId = -1
+    }
+}
+const rules = reactive({
+    ParentId:[{required:true,message:'请选择上级菜单'}],
+    Name:[{required:true,message:'请输入菜单标题'}],
+    IconPath:[{required:true,message:'请选择菜单图标'}],
+    Path:[{required:true,message:'请输入路由地址'}],
+    Component:[{required:true,message:'请输入组件地址'}],
+    Sort:[{required:true,message:'请输入显示排序'}],
+    ButtonCode:[{required:true,message:'请输入按钮ID'}]
+})
+function saveMenu(){}
+</script>
+
+<template>
+    <el-dialog
+        :model-value="props.isShow"
+        :close-on-click-modal="false"
+        :modal-append-to-body='false'
+        :title="form.MenuId?'编辑菜单':'添加菜单'"
+        @close="emit('closeDia')"
+        width="820px"
+        center
+        class="modify-menu-wrap"
+    >
+        <div class="dialog-container-wrap">
+            <el-form :model="form" :rules="rules" label-width="80px" :hide-required-asterisk="true" ref="menuForm">
+                <el-form-item label="菜单类型" prop="MenuType">
+                    <el-radio-group v-model="form.MenuType" :disabled="form.MenuId">
+                        <el-radio :label="0" :disabled="isMenuDisabled">菜单</el-radio>
+                        <el-radio :label="1" :disabled="isbtnDisabled">按钮</el-radio>
+                        <el-radio :label="2" :disabled="isbtnDisabled">字段</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上级菜单" prop="ParentId">
+                    <el-cascader v-model="form.ParentId"
+                        :options="menuList"
+                        :props="{
+                            value: 'MenuId',
+                            label: 'Name',
+                            children: 'Children',
+                            checkStrictly: true,
+                            emitPath: false,
+                        }"
+                        :disabled="openType==='add'?false:!(openType!=='add'&&form.MenuType===0&&form.treeLevel===1)"
+                    >
+                    </el-cascader>
+                </el-form-item>
+                <el-form-item :label="nameLabel" prop="Name">
+                    <el-input v-model="form.Name"></el-input>
+                </el-form-item>
+                <template v-if="form.MenuType===0">
+                    <el-form-item label="菜单图标" prop="Name" v-if="form.treeLevel===0">
+                        <div class="icon-wrap">
+                            <img :src="form.IconPath" v-if="form.IconPath">
+                            <el-button @click="isShowIconDialog = true">选择图标</el-button>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label="路由地址" prop="Path">
+                        <el-input v-model="form.Path"></el-input>
+                        <el-tooltip effect="dark" content="页面跳转路径" placement="right">
+                            <span class="hint-text">
+                                <i class="el-icon-warning-outline"></i>
+                            </span>
+                        </el-tooltip>
+                    </el-form-item>
+                    <el-form-item label="组件地址" prop="Component">
+                        <el-input v-model="form.Component"></el-input>
+                        <el-tooltip effect="dark" content="代码中页面地址" placement="right">
+                            <span class="hint-text">
+                                <i class="el-icon-warning-outline"></i>
+                            </span>
+                        </el-tooltip>
+                    </el-form-item>
+                </template>
+                <el-form-item label="按钮ID" prop="ButtonCode" v-if="form.MenuType!==0">
+                    <el-input v-model="form.ButtonCode"></el-input>
+                </el-form-item>
+                <el-form-item label="显示排序" prop="Sort">
+                    <el-input v-model="form.Sort" type="number" :min="0"></el-input>
+                </el-form-item>
+                <el-form-item label="是否隐藏" prop="Hidden">
+                    <el-radio-group v-model="form.Hidden">
+                        <el-radio :label="0">显示</el-radio>
+                        <el-radio :label="1">隐藏</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </el-form>
+            <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
+                <el-button type="primary" plain style="width:200px;" @click="emit('closeDia')">取消</el-button>
+                <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveMenu">保存</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.modify-menu-wrap{
+    .dialog-container-wrap{
+        display: flex;
+        flex-direction: column;
+        .el-form{
+            align-self: center;
+            .el-form-item{
+                .el-input{
+                    width: 315px;
+                }
+                .icon-wrap{
+                    display: flex;
+                    align-items: center;
+                    img{
+                        width:24px;
+                        height: 24px;
+                        margin-right: 15px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/operation_manage/etaMenu_manage/etaMenuConfig.vue

@@ -1,13 +1,122 @@
 <script setup>
 import { ref, reactive } from 'vue'
+import {menuConfigInterface} from '@/api/modules/etaMenuApi';
+import { Search } from '@element-plus/icons-vue'
+import ModifyMenuDialog from './components/ModifyMenuDialog.vue'
+let tableData = ref([])
+let Keyword = ref('')
+
+function getMenuData(){
+    menuConfigInterface.getMenuList({
+        Keyword:Keyword.value
+    }).then(res => {
+        if (res.Ret !== 200)
+            return;
+        tableData.value = res.Data.List || [];
+        tableData.value.forEach(d=>{
+            formatData(d,0)
+        })
+    });
+}
+getMenuData()
+function formatData(data,level){
+    data.treeLevel = level
+    if(data.Children && data.Children.length){
+        data.Children = data.Children.map(i=>{
+            return formatData(i,level+1)
+        })
+    }
+    return data
+}
+const tableColumns = [
+    {label: '菜单名称',key: 'Name'}, {label: '图标',key: 'IconPath'}, 
+    {label: '状态',key: 'Hidden'}, {label: '创建时间',key: 'CreateTime'}
+]
+let formData = ref({})
+let openType = ref('add')
+let isShowMenuDialog = ref(false)
+function handleModifyMenu(type,data){
+    formData.value = {treeLevel:0}
+    openType.value = type
+    isShowMenuDialog.value = true
+}
+function deleteMenu(){}
 </script>
 
 <template>
-    <div>
-        ETA菜单配置
+    <div class="eta-menu-config-wrap">
+        <div class="menu-top">
+            <el-button type="primary" @click="handleModifyMenu('add',{})">添加菜单</el-button>
+            <el-input placeholder="请输入菜单名称" :prefix-icon="Search" clearable
+                v-model="Keyword" @input="getMenuData"></el-input>
+        </div>
+        <div class="menu-table">
+            <el-table border
+                :data="tableData"
+                row-key="MenuId"
+                :tree-props="{children:'Children'}"
+            >
+                <el-table-column v-for="column in tableColumns" :key="column.key"
+                    header-align="center"
+                    :align="column.key==='Name'?'':'center'"
+                    :prop="column.key"
+                    :label="column.label">
+                    <template #default="{row}">
+                        <!-- 菜单名称 -->
+                        <div class="menu-name" v-if="column.key==='Name'">
+                            <span>{{row[column.key]}}</span>
+                        </div>
+                        <!-- 图标 -->
+                        <div class="menu-icon" v-else-if="column.key==='IconPath'">
+                            <img :src="row[column.key]" v-if="row[column.key]" style="width:24px;height:24px;">
+                            <span v-else>-</span>
+                        </div>
+                        <!-- 状态 -->
+                        <div class="menu-status" v-else-if="column.key==='Hidden'">
+                            <span>{{row[column.key]===0?'显示':'隐藏'}}</span>
+                        </div>
+                        <div v-else>
+                            <span>{{row[column.key]}}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作">
+                    <template #default="{row}">
+                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyMenu('addNext',row)">添加子项</el-link>
+                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyMenu('edit',row)">编辑</el-link>
+                        <el-link :underline="false" type="danger" @click="deleteMenu(row)">删除</el-link>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
     </div>
+    <ModifyMenuDialog 
+        :isShow="isShowMenuDialog"
+        :formData="formData"
+        :etaMenu="tableData"
+        :openType="openType"
+        @close="()=>{formData = {};isShowMenuDialog = false;}"
+    />
 </template>
 
 <style scoped lang="scss">
-
+.eta-menu-config-wrap{
+    .menu-top{
+        padding:20px;
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        .el-input{
+            width:260px;
+        }
+    }
+    .menu-table{
+        margin-top: 20px;
+        padding:20px;
+        background-color: #fff;
+        .menu-name{
+            display: inline-block;
+        }
+    }
+}
 </style>