12 changed files with 590 additions and 159 deletions
@ -0,0 +1,128 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="新增平台" |
||||
|
:visible="visible" |
||||
|
width="500px" |
||||
|
@close="handleClose" |
||||
|
custom-class="blue-dialog" |
||||
|
> |
||||
|
<el-form :model="formData" :rules="rules" ref="importForm" label-width="100px" size="small"> |
||||
|
<el-form-item label="平台名称" prop="name"> |
||||
|
<el-input v-model="formData.name" placeholder="请输入平台名称"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="平台分类" prop="type"> |
||||
|
<el-select v-model="formData.type" placeholder="请选择分类" style="width: 100%"> |
||||
|
<el-option label="空中" value="Air"></el-option> |
||||
|
<el-option label="海上" value="Sea"></el-option> |
||||
|
<el-option label="地面" value="Ground"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="平台图标"> |
||||
|
<el-upload |
||||
|
class="icon-uploader" |
||||
|
action="#" |
||||
|
:auto-upload="false" |
||||
|
:show-file-list="false" |
||||
|
:on-change="handleIconChange" |
||||
|
> |
||||
|
<div v-if="imageUrl" class="preview-container"> |
||||
|
<img :src="imageUrl" class="platform-icon-preview"> |
||||
|
<div class="re-upload-mask">修改图标</div> |
||||
|
</div> |
||||
|
<i v-else class="el-icon-plus uploader-icon"></i> |
||||
|
</el-upload> |
||||
|
<div class="upload-tip">建议尺寸: 64x64, 支持 png/jpg</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<div slot="footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="handleConfirm">确认新增</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PlatformImportDialog', |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
imageUrl: '', |
||||
|
formData: { |
||||
|
name: '', |
||||
|
type: '', |
||||
|
icon_file: null |
||||
|
}, |
||||
|
rules: { |
||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }], |
||||
|
type: [{ required: true, message: '请选择分类', trigger: 'change' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleIconChange(file) { |
||||
|
// 生成本地预览图 |
||||
|
this.imageUrl = URL.createObjectURL(file.raw); |
||||
|
this.formData.icon_file = file.raw; |
||||
|
}, |
||||
|
|
||||
|
handleClose() { |
||||
|
this.imageUrl = ''; |
||||
|
// 重置数据 |
||||
|
this.formData = { |
||||
|
name: '', |
||||
|
type: '', |
||||
|
icon_file: null |
||||
|
}; |
||||
|
this.$emit('update:visible', false); |
||||
|
}, |
||||
|
|
||||
|
handleConfirm() { |
||||
|
this.$refs.importForm.validate((valid) => { |
||||
|
if (valid) { |
||||
|
// 将包含原始 File 对象的 formData 传给父组件 |
||||
|
this.$emit('confirm', { ...this.formData }); |
||||
|
this.handleClose(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 简单的上传样式 */ |
||||
|
.icon-uploader { |
||||
|
border: 1px dashed #409EFF; |
||||
|
border-radius: 6px; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.platform-icon-preview { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.uploader-icon { |
||||
|
font-size: 24px; |
||||
|
color: #8c939d; |
||||
|
} |
||||
|
.upload-tip { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue