0370e4018a
- Add Asset and CardLayer model updates - Create asset upload API endpoints - Add AssetUploadDialog component - Create card layout algorithms - Implement symmetry generation utils - Add template configurations
155 lines
3.4 KiB
Vue
155 lines
3.4 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
title="上传素材"
|
||
width="500px"
|
||
@close="handleClose"
|
||
>
|
||
<el-form :model="form" label-width="100px">
|
||
<el-form-item label="素材类型">
|
||
<el-select v-model="form.assetType" placeholder="选择素材类型">
|
||
<el-option label="花色图案" value="suit_symbol" />
|
||
<el-option label="JQK人像" value="face_card" />
|
||
<el-option label="大小王" value="joker" />
|
||
<el-option label="背面图案" value="back" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="素材标识">
|
||
<el-input
|
||
v-model="form.assetKey"
|
||
placeholder="如：spade, heart-J, big_joker"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="选择文件">
|
||
<el-upload
|
||
ref="upload"
|
||
drag
|
||
:auto-upload="false"
|
||
:on-change="handleFileChange"
|
||
:limit="1"
|
||
:on-exceed="handleExceed"
|
||
>
|
||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||
<div class="el-upload__text">
|
||
拖拽文件到此处或<em>点击上传</em>
|
||
</div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">
|
||
支持 PNG, JPG, SVG 格式
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="handleClose">取消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
:loading="uploading"
|
||
:disabled="!canSubmit"
|
||
@click="handleSubmit"
|
||
>
|
||
上传
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, watch } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { UploadFilled } from '@element-plus/icons-vue'
|
||
import { uploadAsset } from '@/api/asset'
|
||
|
||
const props = defineProps({
|
||
modelValue: Boolean,
|
||
projectId: String
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'upload-success'])
|
||
const dialogVisible = ref(props.modelValue)
|
||
const upload = ref(null)
|
||
const uploading = ref(false)
|
||
const selectedFile = ref(null)
|
||
|
||
const form = ref({
|
||
assetType: 'suit_symbol',
|
||
assetKey: '',
|
||
file: null
|
||
})
|
||
|
||
const canSubmit = computed(() => {
|
||
return form.value.assetKey && selectedFile.value
|
||
})
|
||
|
||
watch(() => props.modelValue, (val) => {
|
||
dialogVisible.value = val
|
||
})
|
||
|
||
watch(dialogVisible, (val) => {
|
||
emit('update:modelValue', val)
|
||
})
|
||
|
||
function handleFileChange(file) {
|
||
selectedFile.value = file.raw
|
||
}
|
||
|
||
function handleExceed() {
|
||
ElMessage.warning('只能上传一个文件')
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
if (!canSubmit.value) {
|
||
ElMessage.warning('请填写完整信息')
|
||
return
|
||
}
|
||
|
||
try {
|
||
uploading.value = true
|
||
await uploadAsset(
|
||
props.projectId,
|
||
selectedFile.value,
|
||
form.value.assetType,
|
||
form.value.assetKey
|
||
)
|
||
|
||
ElMessage.success('上传成功')
|
||
emit('upload-success')
|
||
handleClose()
|
||
} catch (error) {
|
||
ElMessage.error('上传失败')
|
||
console.error(error)
|
||
} finally {
|
||
uploading.value = false
|
||
}
|
||
}
|
||
|
||
function handleClose() {
|
||
dialogVisible.value = false
|
||
emit('update:modelValue', false)
|
||
// Reset form
|
||
form.value = {
|
||
assetType: 'suit_symbol',
|
||
assetKey: '',
|
||
file: null
|
||
}
|
||
selectedFile.value = null
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-upload__text {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
</style>
|