nanxiisletAdmin/src/components/system/menu/MenuFormModal.vue

<template>
  <a-modal
    :open="visible"
    :title="title"
    :confirm-loading="loading"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-item label="上级菜单" name="parentId">
        <a-tree-select
          v-model:value="formData.parentId"
          :tree-data="parentTreeData"
          :field-names="{ label: 'name', value: 'id', children: 'children' }"
          placeholder="请选择上级菜单（不选则为顶级）"
          tree-default-expand-all
          allow-clear
        />
      </a-form-item>
      <a-form-item label="菜单类型" name="type">
        <a-radio-group v-model:value="formData.type">
          <a-radio value="directory">目录</a-radio>
          <a-radio value="menu">菜单</a-radio>
          <a-radio value="button">按钮</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="菜单名称" name="name">
        <a-input v-model:value="formData.name" placeholder="请输入菜单名称" />
      </a-form-item>
      <a-form-item label="菜单编码" name="code">
        <a-input v-model:value="formData.code" placeholder="请输入菜单编码（唯一标识）" />
      </a-form-item>
      <a-form-item v-if="formData.type !== 'button'" label="路由路径" name="path">
        <a-input v-model:value="formData.path" placeholder="请输入路由路径，如 /system/users" />
      </a-form-item>
      <a-form-item v-if="formData.type === 'menu'" label="组件路径" name="component">
        <a-input v-model:value="formData.component" placeholder="请输入组件路径" />
      </a-form-item>
      <a-form-item v-if="formData.type !== 'button'" label="图标" name="icon">
        <IconPicker v-model:value="formData.icon" />
      </a-form-item>
      <a-form-item v-if="formData.type === 'button'" label="权限标识" name="permission">
        <a-input v-model:value="formData.permission" placeholder="请输入权限标识，如 system:user:add" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formData.sort" :min="0" style="width: 100%" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formData.status">
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="formData.type !== 'button'" label="是否隐藏" name="hidden">
        <a-radio-group v-model:value="formData.hidden">
          <a-radio :value="0">显示</a-radio>
          <a-radio :value="1">隐藏</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formData.remark" placeholder="请输入备注" :rows="2" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { message } from 'ant-design-vue'
import { createMenu, updateMenu } from '@/api/system/menu'
import type { MenuFormData, MenuRecord } from '@/types/system/menu'
import IconPicker from '@/components/common/IconPicker.vue'

// ... existing code ...

const props = defineProps<{
  visible: boolean
  record?: MenuFormData
  menuTree: MenuRecord[]
}>()

const emit = defineEmits(['update:visible', 'success'])

const loading = ref(false)
const formRef = ref<FormInstance>()

const formData = reactive<MenuFormData>({
  id: undefined,
  projectId: undefined, // Add this
  parentId: undefined,
  name: '',
  code: '',
  type: 'menu',
  path: '',
  component: '',
  icon: '',
  permission: '',
  sort: 0,
  hidden: 0,
  status: 1,
  remark: ''
})

const title = computed(() => formData.id ? '编辑菜单' : '新增菜单')

const parentTreeData = computed(() => {
  return [{ id: 0, name: '顶级菜单', children: props.menuTree }]
})

const formRules: Record<string, Rule[]> = {
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  code: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
  type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }]
}

watch(
  () => props.visible,
  (val) => {
    if (val) {
      // Reset to defaults
      Object.assign(formData, {
           id: undefined,
           projectId: props.record?.projectId, // Copy projectId
           parentId: props.record?.parentId || 0,
           name: '',
           code: '',
           type: 'menu',
           path: '',
           component: '',
           icon: '',
           permission: '',
           sort: 0,
           hidden: 0,
           status: 1,
           remark: ''
      })
      
      // If full record provided (Edit mode), overwrite
      if (props.record && props.record.id) {
        Object.assign(formData, props.record)
      }
    }
  }
)

async function handleOk() {
  try {
    await formRef.value?.validate()
    loading.value = true
    
    if (formData.id) {
      await updateMenu(formData)
      message.success('更新成功')
    } else {
      await createMenu(formData)
      message.success('创建成功')
    }
    
    emit('update:visible', false)
    emit('success')
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

function handleCancel() {
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>