hvac-web/src/views/setup-protocol/RecognitionResult.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { message } from 'ant-design-vue';

import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { downloadUserProtocol, getProtocolBaseInfo, updateProtocolBaseInfo } from '@/api';
import { downloadBlob } from '@/utils';

import ProtocolContent from './ProtocolContent.vue';

import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps } from '@/types';

const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();

const { handleRequest } = useRequest();
let protocolName = '';
let protocolType = '';
let fileName = '';

onMounted(() => {
  handleRequest(async () => {
    const data = await getProtocolBaseInfo(37);
    Object.assign(props.form.protocolInfo, data);
    protocolName = data.protocolName;
    protocolType = data.protocolType;
    fileName = `${protocolType} - ${protocolName}.xlsx`;
  });
});

const exportData = () => {
  handleRequest(async () => {
    const file = await downloadUserProtocol(protocolType, protocolName);
    downloadBlob(file, fileName);
    message.success(t('setupProtocol.downloadProtocolSuccessful', { name: fileName }));
  });
};

const finish = async () => {
  await updateProtocolBaseInfo(props.form.protocolInfo);
};

defineExpose<UseGuideStepItemExpose>({
  exportData,
  finish,
});
</script>

<template>
  <div>
    <div class="result-header">
      <div class="use-guide-title">{{ $t('setupProtocol.recognitionResult') }}</div>
      <AButton>{{ $t('setupProtocol.reRecognize') }}</AButton>
    </div>
    <ProtocolContent class="result-protocol" :info="form.protocolInfo" />
  </div>
</template>

<style lang="scss" scoped>
.result-header {
  display: flex;
  justify-content: space-between;
  width: calc(62% + 17px);
  margin-bottom: 36px;
}

.result-protocol {
  margin: 0 17px;
}
</style>