修改镜像名为下拉框

src/views/business/components/mirrorForm.vue

 <template>
     <el-dialog v-model="props.mirrorDialog" :title="title" width="30%" :before-close="handleClose">
+        <template #title>
+            <div style="display: flex; justify-content: flex-start; align-items: center;">
+                <div>{{ title }}</div>
+                <el-alert style="width: 50%; margin-left: 40px;" title="选择镜像名后才能选择版本号" type="warning"
+                    :closable="false" />
+            </div>
+        </template>
+
         <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
             <el-form-item prop="name" label="镜像名">
-                <el-input v-model="formData.name" placeholder="请输入镜像名" @blur="handleBlur" />
+                <el-select v-model="formData.name" placeholder="请选择镜像名" @change="handleServiceChange">
+                    <el-option v-for="item in serviceList" :key="item.id" :label="item.name" :value="item.name" />
+                </el-select>
             </el-form-item>
             <el-form-item prop="contextPath" label="服务路径">
                 <el-input v-model="formData.contextPath" placeholder="请输入服务路径" />
@@ -43,6 +53,7 @@ const formData = ref({
 })
 
 const versionList = ref([]) as any
+const serviceList = ref([]) as any
 
 const formRef = ref()
 const title = ref('新增服务镜像')
@@ -52,15 +63,15 @@ const rules = ref({
     // contextPath: [{ required: true, message: '请输入服务路径', trigger: 'blur' }],
 })
 
-const handleBlur = async () => {
+const handleServiceChange = async () => {
     if (formData.value.name) {
-        const res: any = await getImageService({ name: formData.value.name })
-        if (res.code === 200 && res.data.records.length !== 0) {
-            const imageId = res.data.records[0].id
-            const ver: any = await getImageVersion({ imageId })
-            console.log(ver);
-            if (ver.code === 200) versionList.value = ver.data
-        }
+        let imageId;
+        serviceList.value.map((item: any) => {
+            if (item.name == formData.value.name)
+                imageId = item.id
+        })
+        const res: any = await getImageVersion({ imageId })
+        if (res.code === 200) versionList.value = res.data
     }
 }
 
@@ -72,6 +83,13 @@ const handleChange = (e: any) => {
     })
 }
 
+const initService = async () => {
+    const res: any = await getImageService({ pageSize: 100 })
+    if (res.code === 200) {
+        serviceList.value = res.data.records
+    }
+}
+
 const handleClose = () => {
     formRef.value?.resetFields()
     formData.value = {
@@ -95,7 +113,9 @@ const onConfirm = () => {
 
 defineExpose({
     formData,
-    title
+    title,
+    initService,
+    handleClose
 })
 </script>
  

src/views/business/licInformation.vue

@@ -63,7 +63,7 @@
 
     <!-- 添加对话框 -->
     <el-dialog v-model="licInfoForm.dialogVisible" :title="licInfoForm.title" width="30%" :before-close="handleClose">
-        <el-form ref="licInfoRef" :model="licInfoForm.formLicInfo" :rules="licInfoForm.rules" label-width="130px"
+        <el-form ref="licInfoRef" :model="licInfoForm.formLicInfo" :rules="licInfoForm.rules" label-width="150px"
             status-icon>
             <el-form-item label="Lic名称" prop="lqLicName">
                 <el-input v-model="licInfoForm.formLicInfo.lqLicName" placeholder="请输入Lic名称"></el-input>
@@ -210,6 +210,7 @@ const onConfirm = () => {
 const addMirror = (row: any) => {
     mirrorDialog.value = true
     mirrorFormRef.value.title = '新增镜像'
+    mirrorFormRef.value.initService()
     mirrorRow.value = JSON.parse(JSON.stringify(row))
 }
 
@@ -219,7 +220,7 @@ const getMirrorData = async (data: any) => {
     if (res.code === 200) {
         ElMessage.success('添加成功')
         initLicInfo(searchValue.value, licInfoTable.pageNo, licInfoTable.pageSize)
-        mirrorDialog.value = false
+        mirrorFormRef.value.handleClose()
     }
 }