change

src/components/common/Dialog.vue

@@ -21,6 +21,7 @@ interface Props {
     title: string
     width?: string | number
     destroyOnClose?: boolean
+    type?: string
 }
 
 interface Emits {
@@ -31,7 +32,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    width: '400px',
+    width: '600px',
     destroyOnClose: true,
 })
 

src/views/system/menuManagement/index.vue

@@ -33,7 +33,7 @@
         </MenuTable>
     </div>
     <!-- 菜单新增/编辑弹窗 -->
-    <MenuDialog :visible="dialogVisible" :title="dialogTitle" @confirm="handleSubmit" @cancel="handleCancel"
+    <MenuDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" @confirm="handleSubmit" @cancel="handleCancel"
         @close="handleClose">
         <MenuForm :form-data="menuForm" :form-rules="menuFormRules" :form-items="MenuFormItemOptions"
             :options-map="menuFormOptionsMap" ref="menuFormRef" />
@@ -50,7 +50,7 @@ import MenuForm from '@/components/common/Form.vue'
 import { MenuTableColumns, MenuiconOptions, menuiconMap, MenuFormItemOptions } from './options'
 import { rules } from './rules'
 
-import { getMenuApi } from '@/api/modules/menu'
+import { getMenuApi,createMenuApi,editMenuApi,deleteMenuApi } from '@/api/modules/menu'
 // 定义header配置
 const menuTitle = ref('菜单管理')
 const menuHeaderButtons = [
@@ -64,6 +64,7 @@ const treeProps = { children: 'son' }
 // 定义弹窗配置
 const dialogVisible = ref(false)
 const dialogTitle = ref('')
+const dialogType = ref('add')
 
 // 定义菜单表单数据
 const menuForm = ref({
@@ -90,15 +91,12 @@ const menuFormOptionsMap = ref({
     ]
 })
 
-
-
 /** 
 @description: 新增菜单
 **/
 const handleAddMenu = () => {
     dialogVisible.value = true
     dialogTitle.value = '新增菜单'
-    console.log('新增菜单')
 }
 
 /** 
@@ -139,6 +137,10 @@ onMounted(async () => {
 const handleEditMenu = (row: any) => {
     dialogVisible.value = true
     dialogTitle.value = '编辑菜单'
+    dialogType.value = 'edit'
+    menuForm.value = { ...row,
+        parentName: row.name
+     }
     console.log('编辑菜单', row)
 }
 const handleDeleteMenu = (row: any) => {
@@ -151,8 +153,26 @@ const handleToggleStatus = (row: any) => {
 /** 
 @description: 处理弹窗提交/取消/关闭事件
 **/
-const handleSubmit = () => {
+const handleSubmit = async () => {
     console.log('提交菜单表单')
+    try {
+        await menuFormRef.value?.validate()
+        if (dialogType.value === 'add') {
+            const params = {
+                ...menuForm.value,
+                parent_id: '0'
+            }
+            await createMenuApi(params)
+        } else {
+            await editMenuApi(menuForm.value)
+        }
+        dialogVisible.value = false
+        // 刷新菜单列表
+        // onMounted()
+    } catch (err) {
+        console.log('表单验证失败')
+        return
+    }
 }
 const handleCancel = () => {
     dialogVisible.value = false