4dkk_mp/src/views/productOperation/modal/DownLoadModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="系统正在为您打包数据"
    :minHeight="0"
    @visible-change="handleVisibleChange"
    @cancel="hundleCancel"
    @ok="handleSubmit"
  >
    <div class="pt-2px pr-3px">
      <div class="warp">
        <p>正在打包场景离线数据{{ downloadPercent }}</p>
        <span>{{ modelRef.sceneName }}.zip</span>
        <Progress :percent="downloadOption.percent" />
        <p>* 打包完成后将关闭弹窗自动下载。</p>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Progress } from 'ant-design-vue';
  const { t } = useI18n();

  export default defineComponent({
    components: { BasicModal, Progress },
    props: {
      userData: { type: Object },
      downloadOption: { type: Object },
    },
    emits: ['update', 'register', 'cancelDownload'],
    setup(props, { emit }) {
      const modelRef = ref({});

      const { createMessage } = useMessage();

      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        // data && onDataReceive(data);
        modelRef.value = data;
      });

      const handleSubmit = async () => {
        console.log(props.downloadOption);
        if (props.downloadOption.url) {
          window.open(props.downloadOption.url);
        }
      };
      const hundleCancel = async () => {
        emit('cancelDownload');
      };

      return {
        register,
        modelRef,
        handleSubmit,
        hundleCancel,
        addListFunc,
        t,
      };
    },
  });
</script>
<style lang="less" scoped>
  .pt-2px {
  }
  .warp {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-flow: column;
  }
</style>