fix:修改创建虚拟机镜像

src/views/acs/images/VmImages.vue

@@ -143,16 +143,39 @@
         <el-form-item label="镜像名称" prop="name">
           <el-input v-model="imageForm.name" placeholder="请输入镜像名称" />
         </el-form-item>
-        <el-form-item label="文件路径" prop="path" v-if="editOr == true">
+        <el-form-item label="文件路径" prop="path" >
           <el-input v-model="imageForm.path" placeholder="请输入镜像文件路径" />
         </el-form-item>
         <el-form-item label="展示名称" prop="show_name">
           <el-input v-model="imageForm.show_name" placeholder="请输入展示名称" />
         </el-form-item>
-        <el-form-item label="分类" prop="class_id" v-if="editOr == true">
-          <el-select v-model="imageForm.class_id" placeholder="请选择分类" clearable style="width: 100%">
+        <el-form-item label="分类" prop="class_id" >
+          <div class="category-select-container">
+            <el-select 
+              v-model="imageForm.class_id" 
+              placeholder="请选择分类" 
+              clearable 
+              style="width: 100%"
+              @change="handleCategoryChange"
+            >
               <el-option v-for="item in categoryList" :key="item.class_id" :label="item.name" :value="item.class_id" />
             </el-select>
+            <div class="category-input-container" v-if="showNewCategoryInput">
+              <el-input 
+                v-model="imageForm.class_name" 
+                placeholder="请输入新分类名称" 
+                style="width: 100%; margin-top: 8px"
+              />
+              <el-button 
+                type="primary" 
+                size="small" 
+                @click="createNewCategory"
+                style="margin-top: 8px"
+              >
+                创建新分类
+              </el-button>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="图标" prop="image_ico">
           <div class="image-icon-upload">
@@ -249,7 +272,7 @@ import {
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getServer, getServerPlan } from '@/utils/acs/server'
 import { 
-  editMirror, delMirror, getUserMirrorList, addVirtualMirror, getImageTypeList
+  editMirror, delMirror, getUserMirrorList, addVirtualMirror, getImageTypeList, createImageType
 } from '@/utils/acs/mirror'
 import { uploadFile, getFileList } from '@/utils/acs/message'
 import { mainUrl } from '@/utils/request'
@@ -298,13 +321,15 @@ const imageForm = reactive({
   image_ico: '',
   server_id: '',
   path: '',
-  class_id: ''
+  class_id: '',
+  class_name: ''
 })
 
 const rules = {
-  name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
-  path: [{ required: true, message: '请输入镜像文件路径', trigger: 'blur' }],
-  show_name: [{ required: true, message: '请输入展示名称', trigger: 'blur' }],
+  // 根据接口文档，所有字段都是可选的
+  // name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
+  // path: [{ required: true, message: '请输入镜像文件路径', trigger: 'blur' }],
+  // show_name: [{ required: true, message: '请输入展示名称', trigger: 'blur' }],
   // plan_id: [{ required: true, message: '请选择套餐', trigger: 'change' }]
 }
 
@@ -320,6 +345,7 @@ const picList = ref([])
 const total = ref(10)
 const currentIndex = ref(null)
 const categoryList = ref([])
+const showNewCategoryInput = ref(false)
 
 // 获取操作系统图标
 const getOsIcon = (os) => {
@@ -447,6 +473,47 @@ const fetchCategoryList = async (serverId) => {
   }
 }
 
+// 处理分类选择变化
+const handleCategoryChange = (value) => {
+  if (value) {
+    // 选择了现有分类，清空新分类名称
+    imageForm.class_name = ''
+    showNewCategoryInput.value = false
+  } else {
+    // 清空选择，显示新分类输入框
+    showNewCategoryInput.value = true
+  }
+}
+
+// 创建新分类
+const createNewCategory = async () => {
+  if (!imageForm.class_name.trim()) {
+    ElMessage.warning('请输入分类名称')
+    return
+  }
+  
+  try {
+    const response = await createImageType(nowserver_id.value, imageForm.class_name.trim(), '')
+    if (response.data.code === 200) {
+      ElMessage.success('分类创建成功')
+      // 重新获取分类列表
+      await fetchCategoryList(nowserver_id.value)
+      // 设置新创建的分类为选中状态
+      const newCategory = categoryList.value.find(item => item.name === imageForm.class_name.trim())
+      if (newCategory) {
+        imageForm.class_id = newCategory.class_id
+        imageForm.class_name = ''
+        showNewCategoryInput.value = false
+      }
+    } else {
+      ElMessage.error('创建分类失败：' + response.data.message)
+    }
+  } catch (error) {
+    console.error('创建分类出错：', error)
+    ElMessage.error('创建分类失败')
+  }
+}
+
 // 新增镜像
 const toLoad = async (data) => {
   dialogVisible.value = true
@@ -456,6 +523,7 @@ const toLoad = async (data) => {
   })
   imageForm.server_id = data
   nowserver_id.value = data
+  showNewCategoryInput.value = true // 添加镜像时默认显示新分类输入框
   try {
     // 获取套餐列表
     let res = await getServerPlan({ server_id: data })
@@ -515,6 +583,7 @@ const handleEdit = async (row) => {
     
     editOr.value = true
     dialogVisible.value = true
+    showNewCategoryInput.value = false // 编辑时默认不显示新分类输入框
     for (const key in row) {
       if (row.hasOwnProperty(key)) {
         imageForm[key] = row[key]
@@ -553,6 +622,7 @@ const handleCreateVM = (row) => {
 // 关闭对话框
 const handleDialogClose = () => {
   dialogVisible.value = false
+  showNewCategoryInput.value = false
   if (imageFormRef.value) {
     imageFormRef.value.resetFields()
   }
@@ -564,10 +634,27 @@ const submitForm = async () => {
   
   await imageFormRef.value.validate((valid) => {
     if (valid) {
+      // 准备提交数据，根据接口要求处理分类字段
+      const submitData = { ...imageForm }
+      
+      // 如果选择了现有分类，清空 class_name
+      if (submitData.class_id) {
+        submitData.class_name = ''
+      }
+      // 如果没有选择现有分类但有新分类名称，清空 class_id
+      else if (submitData.class_name) {
+        submitData.class_id = ''
+      }
+      // 如果都没有，清空两个字段
+      else {
+        submitData.class_id = ''
+        submitData.class_name = ''
+      }
+      
       if (editOr.value) {
-        imageForm.image_id = imageForm.id
-        delete imageForm.id
-        editMirror(imageForm).then(res => {
+        submitData.image_id = submitData.id
+        delete submitData.id
+        editMirror(submitData).then(res => {
           if (res.data.code == 200) {
             dialogVisible.value = false
             ElMessage.success('编辑成功')
@@ -579,7 +666,7 @@ const submitForm = async () => {
           ElMessage.error('编辑失败')
         })
       } else {
-        addVirtualMirror(imageForm).then(res => {
+        addVirtualMirror(submitData).then(res => {
           if (res.data.code == 200) {
             dialogVisible.value = false
             ElMessage.success('添加成功')
@@ -882,6 +969,23 @@ onMounted(() => {
   border-radius: 4px;
 }
 
+/* 分类选择容器样式 */
+.category-select-container {
+  width: 100%;
+}
+
+.category-input-container {
+  margin-top: 8px;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.category-input-container .el-input {
+  margin-bottom: 8px;
+}
+
 /* 响应式调整 */
 @media (max-width: 768px) {
   .image-info-cell {