src/views/etaMenu_manage/components/ChoosedIconDialog.vue

@@ -2,23 +2,21 @@
     <div class="choosed-icon-wrap">
         <t-dialog
             :visible.sync="isShowIconDialog"
-            :close-on-click-modal="false"
-            :modal-append-to-body='false'
             title="选择图标"
             @close="$emit('close')"
-            width="420px"
-            v-dialogDrag
+            width="520px"
             center
+            :footer="false"
         >
             <div class="dialog-container-wrap">
                 <div class="top">
-                    <el-upload action="" accept="image/*" 
+                    <t-upload action="" accept="image/*" 
                         :http-request="handleUploadImg" 
                         :show-file-list="false"
                     >
-                        <el-button size="small">选择文件</el-button>
+                        <t-button size="small">选择文件</t-button>
                         <span>支持上传图标</span>
-                    </el-upload>
+                    </t-upload>
                     
                     
                 </div>
@@ -30,8 +28,8 @@
                     </div>
                 </div>
                 <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
-                    <el-button type="primary" plain  @click="$emit('close')">取消</el-button>
-                    <el-button type="primary"  style="margin-left:50px;" @click="saveIcon">保存</el-button>
+                    <t-button theme="primary" plain  @click="$emit('close')">取消</t-button>
+                    <t-button theme="primary"  style="margin-left:50px;" @click="saveIcon">保存</t-button>
                 </div>
             </div>
         </t-dialog>

src/views/etaMenu_manage/components/ModifyMenuDialog.vue

@@ -7,71 +7,67 @@
             :title="form.MenuId?'编辑菜单':'添加菜单'"
             @close="$emit('close')"
             width="820px"
-            v-dialogDrag
             center
+            :footer="false"
         >
-            <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="menuProps"
-                            :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('close')">取消</el-button>
-                    <el-button type="primary"  style="margin-left:50px;width:200px;" @click="saveMenu">保存</el-button>
-                </div>
+        <div class="dialog-container-wrap">
+            <t-form :data="form" :rules="rules" label-width="80px" ref="menuFormRef">
+                <t-form-item label="菜单类型" name="MenuType">
+                    <t-radio-group v-model="form.MenuType" :disabled="form.MenuId">
+                    <t-radio :value="0" :disabled="isMenuDisabled">菜单</t-radio>
+                    <t-radio :value="1" :disabled="isbtnDisabled">按钮</t-radio>
+                    <t-radio :value="2" :disabled="isbtnDisabled">字段</t-radio>
+                    </t-radio-group>
+                </t-form-item>
+                <t-form-item label="上级菜单" name="ParentId">
+                    <t-cascader v-model="form.ParentId" :options="menuList" :keys="menuProps" :disabled="openType === 'add' ? false : !(openType !== 'add' && form.MenuType === 0 && form.treeLevel === 1)">
+                    </t-cascader>
+                </t-form-item>
+                <t-form-item :label="nameLabel" name="Name">
+                    <t-input v-model="form.Name"></t-input>
+                </t-form-item>
+                <template v-if="form.MenuType === 0">
+                    <t-form-item label="菜单图标" name="Name" v-if="form.treeLevel === 0">
+                    <div class="icon-wrap">
+                        <img :src="form.IconPath" v-if="form.IconPath">
+                        <t-button @click="isShowIconDialog = true">选择图标</t-button>
+                    </div>
+                    </t-form-item>
+                    <t-form-item label="路由地址" name="Path">
+                    <t-input v-model="form.Path"></t-input>
+                    <t-tooltip effect="dark" content="页面跳转路径" placement="right">
+                        <span class="hint-text">
+                        <i class="t-icon t-icon-warning"></i>
+                        </span>
+                    </t-tooltip>
+                    </t-form-item>
+                    <t-form-item label="组件地址" name="Component">
+                    <t-input v-model="form.Component"></t-input>
+                    <t-tooltip effect="dark" content="代码中页面地址" placement="right">
+                        <span class="hint-text">
+                        <i class="t-icon t-icon-warning"></i>
+                        </span>
+                    </t-tooltip>
+                    </t-form-item>
+                </template>
+                <t-form-item label="按钮ID" name="ButtonCode" v-if="form.MenuType !== 0">
+                    <t-input v-model="form.ButtonCode"></t-input>
+                </t-form-item>
+                <t-form-item label="显示排序" name="Sort">
+                    <t-input v-model="form.Sort" type="number" :min="0"></t-input>
+                </t-form-item>
+                <t-form-item label="是否隐藏" name="Hidden">
+                    <t-radio-group v-model="form.Hidden">
+                    <t-radio :value="0">显示</t-radio>
+                    <t-radio :value="1">隐藏</t-radio>
+                    </t-radio-group>
+                </t-form-item>
+            </t-form>
+            <div class="btn-wrap" style="text-align: center; margin-bottom: 25px;">
+                <t-button theme="default" variant="outline" plain style="width: 200px;" @click="$emit('close')">取消</t-button>
+                <t-button theme="primary" style="margin-left: 50px; width: 200px;" @click="saveMenu">保存</t-button>
             </div>
+        </div>
         </t-dialog>
         <ChoosedIconDialog 
             :isShowIconDialog="isShowIconDialog"
@@ -81,143 +77,168 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
+import _ from 'lodash'; // 确保项目中已安装lodash库
 import ChoosedIconDialog from './ChoosedIconDialog.vue';
 
-export default {
-    props: {
-        formData: {
-            type: Object,
-            default: {}
-        },
-        isShowMenuDialog: {
-            type: Boolean,
-            default: false
-        },
-        etaMenu: {
-            type: Array,
-            default: []
-        },
-        openType: {
-            type: String,
-            default: 'add'
-        }
-    },
-    data() {
-        return {
-            form: {
-                MenuType: 0,
-                ParentId: 0,
-                Name: '',
-                IconPath: '',
-                Path: '',
-                Component: '',
-                Sort: 0,
-                Hidden: 0,
-                ButtonCode: '',
-                treeLevel: 0
-            },
-            rules: {
-                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'}]
-            },
-            menuList: [{
-                    MenuId: -1,
-                    Name: '无'
-                }],
-            menuProps: {
-                value: 'MenuId',
-                label: 'Name',
-                children: 'Children',
-                checkStrictly: true,
-                emitPath: false,
-            },
-            isShowIconDialog: false,
-        };
-    },
-    watch: {
-        isShowMenuDialog(newVal) {
-            if (newVal) {
-                this.form = this.$options.data().form;
-                this.menuList = this.$options.data().menuList;
-                this.initForm();
-                this.$nextTick(()=>{
-                    this.$refs.menuForm&&this.$refs.menuForm.clearValidate();
-                })
-            }
-        },
-        'form.MenuType': {
-            handler(newVal) {
-                this.changeListLevel(newVal);
-            },
-            deep: true
-        }
-    },
-    computed: {
-        //菜单类型-菜单 是否禁用
-        isMenuDisabled() {
-            return this.form.treeLevel > 1 && this.openType !== 'add';
-        },
-        //菜单类型-按钮、字段 是否禁用
-        isbtnDisabled() {
-            return this.form.treeLevel === 1 && this.openType !== 'add';
-        },
-        nameLabel(){
-            const nameMap = {
-                0:'菜单标题',
-                1:'按钮名称',
-                2:'字段名称'
-            }
-            return nameMap[this.form.MenuType]||'菜单标题'
-        },
-    },
-    methods: {
-        initForm() {
-            this.menuList = [...this.menuList, ..._.cloneDeep(this.etaMenu)];
-            if (this.openType === 'addNext') {
-                this.form.ParentId = this.formData.ParentId;
-                this.form.treeLevel = this.formData.treeLevel;
-            }
-            if (this.openType === 'edit') {
-                this.form = _.cloneDeep(this.formData);
-            }
-            if (this.form.treeLevel > 1 && this.openType !== 'edit') {
-                this.form.MenuType = 1;
-            }
-            if(this.form.treeLevel===0 && this.openType !== 'add'){
-                this.form.ParentId = -1
-            }
-        },
-        saveMenu() {
-            //检验表单
-            this.$refs.menuForm.validate((valid)=>{
-                if(valid){
-                    this.$emit(this.form.MenuId ? 'edit' : 'add', this.form);
-                }
-            })
-            
-        },
-        changeListLevel(level) {
-            if (level === 0) {
-                this.menuList = this.menuList.map(m => {
-                    if (m.Children) {
-                        delete m.Children;
-                    }
-                    return m;
-                });
-            }
-            else {
-                this.menuList = [...this.$options.data().menuList, ..._.cloneDeep(this.etaMenu)];
-            }
-        }
-    },
-    components: { ChoosedIconDialog }
+// Props
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: () => ({}),
+  },
+  isShowMenuDialog: {
+    type: Boolean,
+    default: false,
+  },
+  etaMenu: {
+    type: Array,
+    default: () => [],
+  },
+  openType: {
+    type: String,
+    default: 'add',
+  },
+});
+// Events
+const emit = defineEmits(['add', 'edit', 'close']);
+
+// 响应式数据
+const form = ref({
+  MenuType: 0,
+  ParentId: 0,
+  Name: '',
+  IconPath: '',
+  Path: '',
+  Component: '',
+  Sort: 0,
+  Hidden: 0,
+  ButtonCode: '',
+  treeLevel: 0,
+});
+
+const rules = {
+  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' }],
+}
+
+const menuList = ref([{ MenuId: -1, Name: '无' }]);
+const menuProps = ref({
+  value: 'MenuId',
+  label: 'Name',
+  children: 'Children',
+  checkStrictly: true,
+  emitPath: false,
+});
+
+const menuFormRef = ref(null);
+const isShowIconDialog = ref(false);
+
+// Watchers
+watch(
+  () => props.isShowMenuDialog,
+  (newVal) => {
+    if (newVal) {
+      resetForm();
+      initForm();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => form.value.MenuType,
+  (newVal) => {
+    changeListLevel(newVal);
+  },
+  { deep: true }
+);
+
+// Computed Properties
+const isMenuDisabled = computed(() => {
+  return form.value.treeLevel > 1 && props.openType !== 'add';
+});
+
+const isbtnDisabled = computed(() => {
+  return form.value.treeLevel === 1 && props.openType !== 'add';
+});
+
+const nameLabel = computed(() => {
+  const nameMap = {
+    0: '菜单标题',
+    1: '按钮名称',
+    2: '字段名称',
+  };
+  return nameMap[form.value.MenuType] || '菜单标题';
+});
+
+// Methods
+const initForm = () => {
+  menuList.value = [...menuList.value, ..._.cloneDeep(props.etaMenu)];
+  if (props.openType === 'addNext') {
+    form.value.ParentId = props.formData.ParentId;
+    form.value.treeLevel = props.formData.treeLevel;
+  }
+  if (props.openType === 'edit') {
+    form.value = _.cloneDeep(props.formData);
+  }
+  if (form.value.treeLevel > 1 && props.openType !== 'edit') {
+    form.value.MenuType = 1;
+  }
+  if (form.value.treeLevel === 0 && props.openType !== 'add') {
+    form.value.ParentId = -1;
+  }
 };
+
+const saveMenu = async () => {
+    const validRes = await menuFormRef.value.validate();
+    if (validRes !== true) return;
+    const emitType = form.value.MenuId ? 'edit' : 'add';
+    emit(emitType, form.value);
+};
+
+const changeListLevel = (level) => {
+  if (level === 0) {
+    menuList.value = menuList.value.map((m) => {
+      if (m.Children) {
+        delete m.Children;
+      }
+      return m;
+    });
+  } else {
+    menuList.value = [...menuList.value, ..._.cloneDeep(props.etaMenu)];
+  }
+};
+
+const resetForm = () => {
+  form.value = {
+    MenuType: 0,
+    ParentId: 0,
+    Name: '',
+    IconPath: '',
+    Path: '',
+    Component: '',
+    Sort: 0,
+    Hidden: 0,
+    ButtonCode: '',
+    treeLevel: 0,
+  };
+  menuList.value = [{ MenuId: -1, Name: '无' }];
+};
+
+// 组件挂载时执行的操作
+onMounted(() => {
+  if (props.isShowMenuDialog) {
+    resetForm();
+    initForm();
+  }
+});
 </script>
 
 <style lang="scss">
@@ -225,6 +246,8 @@ export default {
     .dialog-container-wrap{
         display: flex;
         flex-direction: column;
+        margin: 0 auto;
+        width: 400px;
         .el-form{
             align-self: center;
             .el-form-item{
@@ -242,6 +265,11 @@ export default {
                 }
             }
         }
+        .btn-wrap {
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+        }
     }
 }
 </style>

src/views/etaMenu_manage/etaMenuConfig.vue

@@ -7,35 +7,43 @@
             </t-input>
         </div>
         <div class="menu-table">
-            <t-table
+            <el-table border
                 :data="tableData"
                 row-key="MenuId"
                 :tree-props="{children:'Children'}"
-                :columns="tableColumns"
-                :bordered="true"
             >
-                <!-- 菜单名称 -->
-                <template #Name="{ row }">
-                    <span class="menu-name" >{{row.Name}}</span>
-                </template>
-                <!-- 图标 -->
-                <template #IconPath="{ row }" >
-                    <img class="menu-icon" :src="row.IconPath" v-if="row.IconPath" style="width:24px;height:24px;">
-                    <span class="menu-icon" v-else>-</span>
-                </template>
-                <!-- 状态 -->
-                <template #Hidden="{ row }" >
-                    <span class="menu-status">{{row.Hidden===0?'显示':'隐藏'}}</span>
-                </template>
-                <!-- <template >
-                    <span>{{row[column.key]}}</span>
-                </template> -->
-                <template #opt="{ row }">
-                    <t-button variant="text" theme="primary" @click="handleModifyMenu('addNext',row)">添加子项</t-button>
-                    <t-button variant="text" theme="primary" @click="handleModifyMenu('edit',row)">编辑</t-button>
-                    <t-button variant="text" theme="primary" style="color:#FF0000;" @click="deleteMenu(row)">删除</t-button>
-                </template>
-            </t-table>
+                <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="scope">
+                        <!-- 菜单名称 -->
+                        <div class="menu-name" v-if="column.key==='Name'">
+                            <span>{{scope.row[column.key]}}</span>
+                        </div>
+                        <!-- 图标 -->
+                        <div class="menu-icon" v-else-if="column.key==='IconPath'">
+                            <img :src="scope.row[column.key]" v-if="scope.row[column.key]" style="width:24px;height:24px;">
+                            <span v-else>-</span>
+                        </div>
+                        <!-- 状态 -->
+                        <div class="menu-status" v-else-if="column.key==='Hidden'">
+                            <span>{{scope.row[column.key]===0?'显示':'隐藏'}}</span>
+                        </div>
+                        <div v-else>
+                            <span>{{scope.row[column.key]}}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" prop="操作">
+                    <template #default="scope">
+                        <t-button variant="text" theme="primary" @click="handleModifyMenu('addNext',scope.row)">添加子项</t-button>
+                        <t-button variant="text" theme="primary" @click="handleModifyMenu('edit',scope.row)">编辑</t-button>
+                        <t-button variant="text" theme="primary" style="color:#FF0000;" @click="deleteMenu(scope.row)">删除</t-button>
+                    </template>
+                </el-table-column>
+            </el-table>
         </div>
         <ModifyMenuDialog 
             :isShowMenuDialog="isShowMenuDialog"
@@ -49,136 +57,119 @@
     </div>
 </template>
 
-<script>
-import {menuConfigInterface} from '@/api/modules/etaMenuApi';
+<script setup>
+import { ref, onMounted } from 'vue';
+import { menuConfigInterface } from '@/api/modules/etaMenuApi';
 import ModifyMenuDialog from './components/ModifyMenuDialog.vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
-export default {
-    data() {
-        return {
-            Keyword: '',
-            tableColumns: [{
-                title: '菜单名称',
-                    colKey: 'Name',
-                }, {
-                    title: '图标',
-                    colKey: 'IconPath',
-                }, {
-                    title: '状态',
-                    colKey: 'Hidden',
-                }, {
-                    title: '创建时间',
-                    colKey: 'CreateTime',
-                }, { 
-                    align: 'center',
-                    colKey: 'opt',
-                    title: '操作'
-                },
-                ],
-            tableData: [{}],
-            formData: {},
-            openType:'add',
-            isShowMenuDialog: false,
-        };
-    },
-    methods: {
-        getMenuData() {
-            menuConfigInterface.getMenuList({
-                Keyword: this.Keyword
-            }).then(res => {
-                if (res.Ret !== 200)
-                    return;
-                this.tableData = res.Data.List || [];
-                this.tableData.forEach(d=>{
-                    this.formatData(d,0)
-                })
-            });
-        },
-        //给data加上层级
-        formatData(data,level){
-            data.treeLevel = level
-            if(data.Children && data.Children.length){
-                data.Children = data.Children.map(i=>{
-                    return this.formatData(i,level+1)
-                })
-            }
-            return data
-        },
-        handleModifyMenu(type, data) {
-            if (type === 'addNext') {
-                this.formData.ParentId = data.MenuId;
-                this.formData.treeLevel = data.treeLevel+1
-            }
-            else if (type === 'edit') {
-                this.formData = data;
-            }
-            else {
-                this.formData = {treeLevel:0};
-            }
-            this.openType = type
-            this.isShowMenuDialog = true;
-        },
-        deleteMenu(data){
-            const hintTextMap = {
-                0:'菜单及子项',
-                1:'按钮',
-                2:'字段'
-            }
-            this.$confirm(`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`,'提示',{
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(()=>{
-                menuConfigInterface.removeMenu({MenuId:data.MenuId}).then(res=>{
-                    if(res.Ret!==200) return 
-                    this.$message.success('删除成功')
-                    this.getMenuData()
-                })
-            }).catch(()=>{})
-            
-        },
-        modifyMenu(params,type){
-            let InterfaceParams = {}
-            if(params.MenuType===0){
-                const {ParentId,MenuType,Name,IconPath,Sort,Path,Component,Hidden} = params
-                InterfaceParams = {
-                    ParentId:ParentId===-1?0:ParentId,
-                    MenuType,
-                    Name,
-                    IconPath,
-                    Sort:Number(Sort),
-                    Path,
-                    Component,
-                    Hidden
-                }
-            }else{
-                const {ParentId,MenuType,Name,Sort,Hidden,ButtonCode} = params
-                InterfaceParams = {
-                    ParentId:ParentId===-1?0:ParentId,
-                    MenuType,
-                    Name,
-                    Sort:Number(Sort),
-                    Hidden,
-                    ButtonCode
-                }
-            }
-            if(type==='editMenu'){
-                InterfaceParams = {...{MenuId:params.MenuId},...InterfaceParams}
-            }
-            menuConfigInterface[type](InterfaceParams).then(res=>{
-                    if(res.Ret!==200) return 
-                    this.$message.success(`${type==='addMenu'?'添加':'编辑'}成功`)
-                    this.getMenuData()
-                    this.isShowMenuDialog = false
-                })
-        },
-        editMenu(params){}
-    },
-    mounted() {
-        this.getMenuData();
-    },
-    components: { ModifyMenuDialog, SearchIcon }
+import { ElTable, ElTableColumn } from 'element-plus';
+import 'element-plus/es/components/table/style/css';
+
+const Keyword = ref('');
+const tableColumns = ref([
+  { label: '菜单名称', key: 'Name' },
+  { label: '图标', key: 'IconPath' },
+  { label: '状态', key: 'Hidden' },
+  { label: '创建时间', key: 'CreateTime' },
+]);
+const tableData = ref([]);
+const formData = ref({});
+const openType = ref('add');
+const isShowMenuDialog = ref(false);
+
+// 获取菜单数据
+const getMenuData = async () => {
+  try {
+    const res = await menuConfigInterface.getMenuList({ Keyword: Keyword.value });
+    if (res.Ret !== 200) return;
+    tableData.value = (res.Data.List || []).map(data => formatData(data, 0));
+  } catch (error) {
+    console.error('获取菜单数据失败:', error);
+  }
+};
+
+// 格式化数据
+const formatData = (data, level) => {
+  data.treeLevel = level;
+  if (data.Children && data.Children.length) {
+    data.Children = data.Children.map(child => formatData(child, level + 1));
+  }
+  return data;
+};
+
+// 处理修改菜单操作
+const handleModifyMenu = (type, data) => {
+  if (type === 'addNext') {
+    formData.value = { ParentId: data.MenuId, treeLevel: data.treeLevel + 1, ...formData.value };
+  } else if (type === 'edit') {
+    formData.value = { ...data };
+  } else {
+    formData.value = { treeLevel: 0 };
+  }
+  openType.value = type;
+  isShowMenuDialog.value = true;
 };
+
+// 删除菜单
+const deleteMenu = async (data) => {
+  const hintTextMap = { 0: '菜单及子项', 1: '按钮', 2: '字段' };
+//   if (!confirm(`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`)) return;
+  await $confirmDialog({
+    body:`删除后不可恢复，确认删除该${hintTextMap[data.MenuType]}吗？`,
+    confirmBtn:{default:'确认',theme:'danger'},
+  })
+  try {
+    const res = await menuConfigInterface.removeMenu({ MenuId: data.MenuId });
+    if (res.Ret !== 200) return;
+    MessagePlugin.success('删除成功');
+    getMenuData();
+  } catch (error) {
+    console.error('删除菜单失败:', error);
+  }
+};
+
+// 修改菜单
+const modifyMenu = async (params, type) => {
+  let interfaceParams = {};
+  if (params.MenuType === 0) {
+    interfaceParams = {
+      ParentId: params.ParentId === -1 ? 0 : params.ParentId,
+      MenuType: params.MenuType,
+      Name: params.Name,
+      IconPath: params.IconPath,
+      Sort: Number(params.Sort),
+      Path: params.Path,
+      Component: params.Component,
+      Hidden: params.Hidden,
+    };
+  } else {
+    interfaceParams = {
+      ParentId: params.ParentId === -1 ? 0 : params.ParentId,
+      MenuType: params.MenuType,
+      Name: params.Name,
+      Sort: Number(params.Sort),
+      Hidden: params.Hidden,
+      ButtonCode: params.ButtonCode,
+    };
+  }
+  if (type === 'editMenu') {
+    interfaceParams = { ...interfaceParams, MenuId: params.MenuId };
+  }
+  try {
+    const res = await menuConfigInterface[type](interfaceParams);
+    if (res.Ret !== 200) return;
+    MessagePlugin.success(`${type === 'addMenu' ? '添加' : '编辑'}成功`);
+    getMenuData();
+    isShowMenuDialog.value = false;
+  } catch (error) {
+    console.error(`${type}菜单失败:`, error);
+  }
+};
+
+// 组件挂载时获取菜单数据
+onMounted(() => {
+  getMenuData();
+});
 </script>
 
 <style scoped lang="scss">