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