146 lines
3.6 KiB
Vue
146 lines
3.6 KiB
Vue
<template>
|
|
<el-dialog v-model="showDialog" title="上传支付凭证" width="700px" @close="closeDialog">
|
|
<el-form label-position="right" label-width="90px" v-loading="loading">
|
|
<el-form-item label="支付凭证：">
|
|
<el-upload
|
|
ref="uploadRef"
|
|
action="/api/upload/img"
|
|
:headers="headers"
|
|
:on-remove="handleRemoveImg"
|
|
:on-error="handleUploadError"
|
|
:on-preview="handlePreview"
|
|
:on-success="handleSuccess"
|
|
:file-list="imgsList"
|
|
:show-file-list="true"
|
|
list-type="picture-card"
|
|
accept=".png,.jpg,.gif">
|
|
<el-icon><Plus /></el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeDialog()">取消</el-button>
|
|
<el-button type="primary" @click="commitApproval()" :loading="loading">提交</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 预览图片 -->
|
|
<el-dialog v-model="picVisible" center width="800px">
|
|
<img :src="dialogImageUrl" style="max-width: 700px; margin: 0 auto;display: block;" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { Plus, Search } from "@element-plus/icons"
|
|
import { reactive, toRefs, watch, ref, nextTick } from 'vue'
|
|
import { get, post } from '@/api/request'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
export default {
|
|
components: { Plus, Search },
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
headers: {
|
|
Authorization: localStorage.getItem('token'),
|
|
'Shop-Id': localStorage.getItem('shopId') || ''
|
|
},
|
|
picVisible: false,
|
|
dialogImageUrl: '',
|
|
launchId: 0,
|
|
showDialog: false,
|
|
imgsList: [],
|
|
loading: false,
|
|
})
|
|
|
|
const commitApproval = () => {
|
|
data.loading = true
|
|
let imgs = []
|
|
for (let index = 0; index < data.imgsList.length; index++) {
|
|
let obj = data.imgsList[index]
|
|
imgs.push(obj.url)
|
|
}
|
|
let params = {
|
|
instance_id: data.launchId,
|
|
payment_voucher: imgs
|
|
}
|
|
post(`/api/purchaseOrder/uploadPayment`, params).then((res) => {
|
|
ElMessage({ type: 'success', message: '提交成功' })
|
|
closeDialog()
|
|
context.emit('refresh')
|
|
data.loading = false
|
|
}).catch(() => {
|
|
data.loading = false
|
|
})
|
|
}
|
|
|
|
function handleUploadError(err) {
|
|
if(JSON.parse(err.message) && JSON.parse(err.message).message) {
|
|
ElMessage({ type: 'error', message: JSON.parse(err.message).message })
|
|
}
|
|
}
|
|
|
|
function handleRemoveImg(res, ress) {
|
|
data.imgsList = ress
|
|
}
|
|
|
|
function handleSuccess(res) {
|
|
data.imgsList.push({url: res.data.link})
|
|
}
|
|
|
|
const uploadRef = ref(null)
|
|
|
|
function clearForm() {
|
|
data.imgsList = []
|
|
nextTick(() => {
|
|
uploadRef.value.clearFiles()
|
|
})
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
clearForm()
|
|
context.emit('close')
|
|
data.showDialog = false
|
|
}
|
|
|
|
function handlePreview(File) {
|
|
data.dialogImageUrl = File.url
|
|
data.picVisible = true
|
|
}
|
|
|
|
watch(() => props, (newProps) => {
|
|
if (newProps.show) {
|
|
data.showDialog = true
|
|
data.launchId = newProps.id
|
|
}
|
|
}, { deep: true })
|
|
|
|
return {
|
|
uploadRef,
|
|
...toRefs(data),
|
|
closeDialog,
|
|
clearForm,
|
|
commitApproval,
|
|
handlePreview,
|
|
handleSuccess,
|
|
handleRemoveImg,
|
|
handleUploadError
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |