From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目

---
 src/views/system/menu/MenuForm.vue |  257 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 257 insertions(+), 0 deletions(-)

diff --git a/src/views/system/menu/MenuForm.vue b/src/views/system/menu/MenuForm.vue
new file mode 100644
index 0000000..ddc3d3e
--- /dev/null
+++ b/src/views/system/menu/MenuForm.vue
@@ -0,0 +1,257 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item label="涓婄骇鑿滃崟">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="menuTree"
+          :default-expanded-keys="[0]"
+          :props="defaultProps"
+          check-strictly
+          node-key="id"
+        />
+      </el-form-item>
+      <el-form-item label="鑿滃崟鍚嶇О" prop="name">
+        <el-input v-model="formData.name" clearable placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" />
+      </el-form-item>
+      <el-form-item label="鑿滃崟绫诲瀷" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio-button
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="鑿滃崟鍥炬爣">
+        <IconSelect v-model="formData.icon" clearable />
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="璺敱鍦板潃" prop="path">
+        <template #label>
+          <Tooltip
+            message="璁块棶鐨勮矾鐢卞湴鍧�锛屽锛歚user`銆傚闇�澶栫綉鍦板潃鏃讹紝鍒欎互 `http(s)://` 寮�澶�"
+            title="璺敱鍦板潃"
+          />
+        </template>
+        <el-input v-model="formData.path" clearable placeholder="璇疯緭鍏ヨ矾鐢卞湴鍧�" />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="缁勪欢鍦板潃" prop="component">
+        <el-input v-model="formData.component" clearable placeholder="渚嬪璇达細system/user/index" />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="缁勪欢鍚嶅瓧" prop="componentName">
+        <el-input v-model="formData.componentName" clearable placeholder="渚嬪璇达細SystemUser" />
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 1" label="鏉冮檺鏍囪瘑" prop="permission">
+        <template #label>
+          <Tooltip
+            message="Controller 鏂规硶涓婄殑鏉冮檺瀛楃锛屽锛欯PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+            title="鏉冮檺鏍囪瘑"
+          />
+        </template>
+        <el-input v-model="formData.permission" clearable placeholder="璇疯緭鍏ユ潈闄愭爣璇�" />
+      </el-form-item>
+      <el-form-item label="鏄剧ず鎺掑簭" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
+      </el-form-item>
+      <el-form-item label="鑿滃崟鐘舵��" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.label"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="鏄剧ず鐘舵��" prop="visible">
+        <template #label>
+          <Tooltip message="閫夋嫨闅愯棌鏃讹紝璺敱灏嗕笉浼氬嚭鐜板湪渚ц竟鏍忥紝浣嗕粛鐒跺彲浠ヨ闂�" title="鏄剧ず鐘舵��" />
+        </template>
+        <el-radio-group v-model="formData.visible">
+          <el-radio key="true" :value="true" border>鏄剧ず</el-radio>
+          <el-radio key="false" :value="false" border>闅愯棌</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type !== 3" label="鎬绘槸鏄剧ず" prop="alwaysShow">
+        <template #label>
+          <Tooltip
+            message="閫夋嫨涓嶆槸鏃讹紝褰撹鑿滃崟鍙湁涓�涓瓙鑿滃崟鏃讹紝涓嶅睍绀鸿嚜宸憋紝鐩存帴灞曠ず瀛愯彍鍗�"
+            title="鎬绘槸鏄剧ず"
+          />
+        </template>
+        <el-radio-group v-model="formData.alwaysShow">
+          <el-radio key="true" :value="true" border>鎬绘槸</el-radio>
+          <el-radio key="false" :value="false" border>涓嶆槸</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 2" label="缂撳瓨鐘舵��" prop="keepAlive">
+        <template #label>
+          <Tooltip
+            message="閫夋嫨缂撳瓨鏃讹紝鍒欎細琚� `keep-alive` 缂撳瓨锛屽繀椤诲～鍐欍�岀粍浠跺悕绉般�嶅瓧娈�"
+            title="缂撳瓨鐘舵��"
+          />
+        </template>
+        <el-radio-group v-model="formData.keepAlive">
+          <el-radio key="true" :value="true" border>缂撳瓨</el-radio>
+          <el-radio key="false" :value="false" border>涓嶇紦瀛�</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">纭� 瀹�</el-button>
+      <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as MenuApi from '@/api/system/menu'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { CommonStatusEnum, SystemMenuTypeEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'SystemMenuForm' })
+
+const { wsCache } = useCache()
+const { t } = useI18n() // 鍥介檯鍖�
+const message = useMessage() // 娑堟伅寮圭獥
+
+const dialogVisible = ref(false) // 寮圭獥鐨勬槸鍚﹀睍绀�
+const dialogTitle = ref('') // 寮圭獥鐨勬爣棰�
+const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑锛�1锛変慨鏀规椂鐨勬暟鎹姞杞斤紱2锛夋彁浜ょ殑鎸夐挳绂佺敤
+const formType = ref('') // 琛ㄥ崟鐨勭被鍨嬶細create - 鏂板锛泆pdate - 淇敼
+const formData = ref({
+  id: undefined,
+  name: '',
+  permission: '',
+  type: SystemMenuTypeEnum.DIR,
+  sort: Number(undefined),
+  parentId: 0,
+  path: '',
+  icon: '',
+  component: '',
+  componentName: '',
+  status: CommonStatusEnum.ENABLE,
+  visible: true,
+  keepAlive: true,
+  alwaysShow: true
+})
+const formRules = reactive({
+  name: [{ required: true, message: '鑿滃崟鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }],
+  type: [{ required: true, message: '鑿滃崟绫诲瀷涓嶈兘涓虹┖', trigger: 'blur' }],
+  sort: [{ required: true, message: '鑿滃崟椤哄簭涓嶈兘涓虹┖', trigger: 'blur' }],
+  path: [{ required: true, message: '璺敱鍦板潃涓嶈兘涓虹┖', trigger: 'blur' }],
+  status: [{ required: true, message: '鐘舵�佷笉鑳戒负绌�', trigger: 'blur' }]
+})
+const formRef = ref() // 琛ㄥ崟 Ref
+
+/** 鎵撳紑寮圭獥 */
+const open = async (type: string, id?: number, parentId?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (parentId) {
+    formData.value.parentId = parentId
+  }
+  // 淇敼鏃讹紝璁剧疆鏁版嵁
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await MenuApi.getMenu(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 鑾峰緱鑿滃崟鍒楄〃
+  await getTree()
+}
+defineExpose({ open }) // 鎻愪緵 open 鏂规硶锛岀敤浜庢墦寮�寮圭獥
+
+/** 鎻愪氦琛ㄥ崟 */
+const emit = defineEmits(['success']) // 瀹氫箟 success 浜嬩欢锛岀敤浜庢搷浣滄垚鍔熷悗鐨勫洖璋�
+const submitForm = async () => {
+  // 鏍￠獙琛ㄥ崟
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 鎻愪氦璇锋眰
+  formLoading.value = true
+  try {
+    if (
+      formData.value.type === SystemMenuTypeEnum.DIR ||
+      formData.value.type === SystemMenuTypeEnum.MENU
+    ) {
+      if (!isExternal(formData.value.path)) {
+        if (formData.value.parentId === 0 && formData.value.path.charAt(0) !== '/') {
+          message.error('璺緞蹇呴』浠� / 寮�澶�')
+          return
+        } else if (formData.value.parentId !== 0 && formData.value.path.charAt(0) === '/') {
+          message.error('璺緞涓嶈兘浠� / 寮�澶�')
+          return
+        }
+      }
+    }
+    const data = formData.value as unknown as MenuApi.MenuVO
+    if (formType.value === 'create') {
+      await MenuApi.createMenu(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await MenuApi.updateMenu(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 鍙戦�佹搷浣滄垚鍔熺殑浜嬩欢
+    emit('success')
+  } finally {
+    formLoading.value = false
+    // 娓呯┖锛屼粠鑰岃Е鍙戝埛鏂�
+    wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+  }
+}
+
+/** 鑾峰彇涓嬫媺妗哰涓婄骇鑿滃崟]鐨勬暟鎹�  */
+const menuTree = ref<Tree[]>([]) // 鏍戝舰缁撴瀯
+const getTree = async () => {
+  menuTree.value = []
+  const res = await MenuApi.getSimpleMenusList()
+  let menu: Tree = { id: 0, name: '涓荤被鐩�', children: [] }
+  menu.children = handleTree(res)
+  menuTree.value.push(menu)
+}
+
+/** 閲嶇疆琛ㄥ崟 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    permission: '',
+    type: SystemMenuTypeEnum.DIR,
+    sort: Number(undefined),
+    parentId: 0,
+    path: '',
+    icon: '',
+    component: '',
+    componentName: '',
+    status: CommonStatusEnum.ENABLE,
+    visible: true,
+    keepAlive: true,
+    alwaysShow: true
+  }
+  formRef.value?.resetFields()
+}
+
+/** 鍒ゆ柇 path 鏄笉鏄閮ㄧ殑 HTTP 绛夐摼鎺� */
+const isExternal = (path: string) => {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+</script>

--
Gitblit v1.8.0