@@ -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 {