上传

src/views/Basic/Menu/MenuForm.vue

@@ -10,7 +10,7 @@
       <el-form-item label="服务类型" prop="serviceId">
         <el-select v-model="formData.serviceId" placeholder="选择服务类型" filterable>
           <el-option
-            v-for="item in appList"
+            v-for="item in props.appList"
             :key="item.serviceId"
             :label="item.serviceName"
             :value="item.serviceId"
@@ -124,6 +124,10 @@ const { wsCache } = useCache()
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
+const props = defineProps({
+  appList: Object as any
+})
+
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -159,7 +163,6 @@ const open = async (type: string, id?: number, parentId?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  getOptions()
   if (parentId) {
     formData.value.parentId = parentId
   }
@@ -177,13 +180,6 @@ const open = async (type: string, id?: number, parentId?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-const appList = ref([])
-const getOptions = () => {
-  MenuApi.getServiceAppList().then((data) => {
-    appList.value = data
-  })
-}
-
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {

src/views/Basic/Menu/index.vue

@@ -62,6 +62,11 @@
       <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
       <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" />
       <el-table-column label="状态" prop="status" width="80" />
+      <el-table-column label="服务类型" prop="" width="100">
+        <template #default="{ row }">
+          {{ getServiceName(row.serviceId) }}
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button link type="primary" @click="openForm('update', scope.row.id)">
@@ -77,7 +82,7 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <MenuForm ref="formRef" @success="getList" />
+  <MenuForm ref="formRef" :appList="appList" @success="getList" />
 </template>
 <script lang="ts" name="SystemMenu" setup>
 import { handleTree } from '@/utils/tree'
@@ -160,8 +165,20 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+const appList = ref([] as any)
+const getOptions = () => {
+  MenuApi.getServiceAppList().then((data) => {
+    appList.value = data
+  })
+}
+
+function getServiceName(serviceId: any) {
+  return appList.value.find((it: any) => it.serviceId == serviceId)?.serviceName
+}
+
 /** 初始化 **/
 onMounted(() => {
+  getOptions()
   getList()
 })
 </script>