zfb_mp/src/views/scenes/downloadModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.scenes.downloadScene')"
    :showCancelBtn="false"
    :okText="t('routes.scenes.cancelDownload')"
    @ok="handleSubmit"
    @cancel="cancelDownload"
  >
    <div class="pt-20px">
      <BasicForm @register="registerForm">
        <template #label="{ model, field }">
          {{ model[field] }}
        </template>
        <template #process> {{ downloadInfo.process }} % </template>
        <template #status> {{ downloadInfo.status }} </template>
      </BasicForm>
    </div>
    <template #centerFooter>
      <!-- <a-button>xxxx</a-button> -->
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  // import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table';
  // import { useMessage } from '/@/hooks/web/useMessage';
  // import { checkUserAddAble } from '/@/api/corporation/modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getDownloadProcessApi } from '/@/api/scene/list';
  // import { bindAnchorListParam } from '/@/api/scene/model';
  // import { Time } from '/@/components/Time';
  // import { useUserStore } from '/@/store/modules/user';

  const schemas: FormSchema[] = [
    {
      field: 'sceneName',
      label: '场景名称:',
      component: 'Input',
      slot: 'label',
    },
    {
      field: 'process',
      label: '下载进度:',
      component: 'Input',
      slot: 'process',
    },
    {
      field: 'status',
      label: '状态：',
      component: 'Input',
      slot: 'status',
    },
  ];

  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'success'],
    setup() {
      const { t } = useI18n();
      // const { createMessage } = useMessage();
      const sceneNum = ref('');
      const downloadInfo = reactive<Recordable>({});
      downloadInfo.timer = null;
      downloadInfo.process = 0;
      downloadInfo.status = '下载中';

      const [registerForm, { setFieldsValue }] = useForm({
        schemas: schemas,
        labelWidth: 120,
        showActionButtonGroup: false,

        actionColOptions: {
          span: 24,
        },
        // submitFunc: handleSubmit,
      });
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        console.log('Data Received', data, data.num);

        setFieldsValue({
          ...data,
        });

        sceneNum.value = data.num;
      }
      const handleSubmit = async () => {
        try {
          cancelDownload();
          closeModal();
        } catch (error) {}
      };
      async function getDownloadInfo(sceneNum: string) {
        downloadInfo.timer = setInterval(async () => {
          const res = await getDownloadProcessApi({ sceneNum });
          console.log('res', res);
          const percent = res.percent;
          downloadInfo.process = percent;
        }, 2000);
      }
      function cancelDownload() {
        clearInterval(downloadInfo.timer);
        sceneNum.value = '';
      }
      watch(
        () => sceneNum.value,
        () => {
          console.log('sceneNum', sceneNum.value);
          if (sceneNum.value) {
            getDownloadInfo(sceneNum.value);
          }
        },
      );

      return {
        t,
        register,
        schemas,
        handleSubmit,
        closeModal,
        registerForm,
        downloadInfo,
        cancelDownload,
      };
    },
  });
</script>