myERP/src/components/approval/uploadpayment.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>