compdfkit_web_viewer/packages/webview/src/components/Dialogs/PrintSettingDialog.vue

<template>
  <div class="print-setting-popup" v-if="show">
    <Dialog :show="show" :dialogName="dialogName" :close="false">
      <!-- header -->
      <template #header>
        <p>{{ $t('compare.printSetting') }}</p>
      </template>

      <!-- content -->
      <div class="select-content">
        <div @click="printFile = 'old'" class="option"><RadioBtnSel v-if="printFile === 'old'" /><RadioBtnDis v-else />{{ $t('compare.printOldFile') }}</div>
        <div @click="printFile = 'new'" class="option"><RadioBtnSel v-if="printFile === 'new'" /><RadioBtnDis v-else />{{ $t('compare.printNewFile') }}</div>
      </div>

      <!-- footer -->
      <template #footer>
        <div class="rect-button white" @click="closeDialog">{{ $t('cancel') }}</div>
        <div class="rect-button blue" @click="handlePrint">{{ $t('ok') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'
const { triggerPrinting } = core

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const dialogName = 'printSettingDialog'
const show = computed(() => useViewer.isElementOpen(dialogName))
const compareResult = computed(() => useDocument.getCompareResult)

const printFile = ref('old')

const closeDialog = () => {
  useViewer.closeElement(dialogName)
}

const handlePrint = async () => {
  let url = null
  if (printFile.value === 'old') {
    url = compareResult.value.oldFile.url
  } else if (printFile.value === 'new') {
    url = compareResult.value.newFile.url
  }

  closeDialog()
  useViewer.setDownloading(true)
  try {
    await triggerPrinting(url)
    useViewer.setDownloading(false)
  } catch (error) {
    console.log(error)
  }
}
</script>

<style lang="scss">
.print-setting-popup {
  header {
    padding: 4px 0;
  }
  .dialog-container {
    width: 325px;
    padding: 30px 20px;
    main {
      margin-bottom: 20px;
    }
  }
}
</style>