ReUploadBgUrl.vue 2.03 KB
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="更新报关单"
    width="500px"
    :bodyStyle="{ height: '240px' }"
    @ok="handleOk"
    @visible-change="handleShow"
  >
    <div>报关单(请上传PDF格式)</div
    ><a-space direction="vertical" style="width: 100%" size="large">
      <a-upload
        v-model:file-list="fileList"
        :beforeUpload="beforeUpload"
        list-type="picture"
        :max-count="1"
        :action="updateUrl"
        @change="handleChange"
      >
        <a-button> 上传报关单 </a-button>
      </a-upload>
    </a-space>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref } from 'vue';
  import type { UploadProps } from 'ant-design-vue';
  import { reUploadBgUrl } from '@/api/project/invoice';
  import { useMessage } from '/@/hooks/web/useMessage';

  const fileList = ref<UploadProps['fileList']>([]);
  const { createMessage } = useMessage();
  const { error } = createMessage;
  const emit = defineEmits(['success']);

  const id = ref();
  const uploadUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
  const updateUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
  const bgUrl = ref();
  const urlOld = ref();

  const [register, { closeModal }] = useModalInner(async (data) => {
    id.value = data.data.id;
  });
  function handleChange(info) {
    if (info.file.status == 'done') {
      updateUrl.value = info.file.response.data.fileUrl;
      bgUrl.value = updateUrl.value;
    }
    if (info.fileList.length == 0) {
      info.file = null;
      bgUrl.value = '';
    }
  }
  function beforeUpload(info) {
    updateUrl.value += uploadUrl.value + info.name;
  }
  function handleShow(visible: boolean) {
    if (!visible) {
      updateUrl.value = '';
      fileList.value = null;
    }
  }

  async function handleOk() {
    reUploadBgUrl({ id: id.value, bgUrl: bgUrl.value });
    emit('success');
    closeModal();
  }
</script>