2025.11.27

riku

2025-11-27 63d9a9c62fd34f4b48a157e0bc57dd82ee09a197

 src/views/fysp/scene/SceneInspectFile.vue

@@ -2,7 +2,7 @@
  <el-dialog
    :model-value="modelValue"
    @update:model-value="handleDialogChange"
    title="巡查单据下载"
    title="巡查单据下载打印"
    class="dialog-wrapper"
    v-loading="loading"
  >
@@ -43,9 +43,9 @@
                type="default"
                size="small"
                class="m-t-4"
                icon="IconPrinter"
                @click="handlePreview(item)"
              >
                预览
              </el-button>
            </el-row>
          </el-checkbox>
@@ -54,17 +54,33 @@
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="cancel">取消</el-button>
        <el-button type="primary" :loading="docLoading" @click="handelDownload">
          下载
        <el-button type="danger" @click="cancel" icon="CloseBold"
          >取消</el-button
        >
        <el-button
          type="primary"
          :loading="docLoading"
          icon="Download"
          :disabled="checkList.length == 0"
          @click="handelDownload"
        >
          下载所选
        </el-button>
        <el-button type="default" :loading="docLoading" @click="handelPrint">
          打印
        <el-button
          type="default"
          :loading="docLoading"
          :disabled="checkList.length == 0"
          @click="handlePreview()"
          icon="IconPrinter"
        >
          <el-space>
            打印所选
          </el-space>
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="previewVisible" :show-close="true" fullscreen>
  <el-dialog v-model="previewVisible" :show-close="false" fullscreen>
    <template #header="{ close, titleId, titleClass }">
      <el-row justify="end">
        <el-button type="danger" @click="close" icon="CircleCloseFilled">
@@ -73,14 +89,18 @@
        <el-button
          type="primary"
          @click="handelPrint(refWord)"
          icon="PrintFilled"
          icon="IconPrinter"
        >
          打印
        </el-button>
      </el-row>
    </template>
    <div ref="refWord">
      
      <div
        :id="`word-preview-${i}`"
        v-for="(item, i) in previewList"
        :key="item"
      ></div>
    </div>
    <!-- <iframe ref="pdfPreview" width="100%" height="100vh" style="height: calc(100vh - 60px);"></iframe> -->
  </el-dialog>
@@ -90,7 +110,7 @@
 * 场景巡查单据自动下载
 */
import { ref, watch } from 'vue';
import { useRouter } from "vue-router";
import { useRouter } from 'vue-router';
import {
  exportDocx,
  prepareDocxBlob,
@@ -124,6 +144,8 @@

// 预览对话框开关
const previewVisible = ref(false);
// 预览的文档
const previewList = ref([]);

watch(
  () => [props.modelValue, props.value],
@@ -236,7 +258,7 @@

// 根据场景类型，生成对应的word文档
function generateDoc(param, callback) {
  param.map((p) => {
  param.map((p, index) => {
    let template, _param;
    switch (p.type) {
      // 工地
@@ -253,30 +275,7 @@
        break;
    }
    prepareDocxBlob(template, _param).then((blob) => {
      callback(blob, `${_param.name}巡查单据.docx`);
    });
  });
}

function generatePdf(param, callback) {
  param.map((p) => {
    let template, _param;
    switch (p.type) {
      // 工地
      case 1:
        template = '/工地巡查单据模板-简版.docx';
        _param = p.params;
        break;
      // 餐饮
      case 5:
        template = '/餐饮巡查单据模板.docx';
        _param = p.params;
        break;
      default:
        break;
    }
    preparePdf(template, _param).then((blob) => {
      callback(blob, `${_param.name}巡查单据.pdf`);
      callback(blob, `${_param.name}巡查单据.docx`, index);
    });
  });
}
@@ -298,47 +297,36 @@
// 点击打印按钮操作
function handelPrint(ref) {
  if (ref) {
    print(ref);
    print({
      ref,
      // 根据目前使用的docx-preview组件，设置打印样式，主要去除多余的margin和padding，以及阴影效果
      style: `
        @page{size:A4;margin: 0 !important;padding:0 !important;} 
        body {margin: 0 !important;padding:0 !important;} 
        header {color: rgb(182, 182, 182);}
        footer {color: rgb(182, 182, 182);}
        .docx-wrapper {padding: 0 !important;}
        .docx {margin-bottom: 0 !important; box-shadow: none !important;}
        .docx_5 {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
      `
    });
  }
  // const file = filePrepare();
  // if (file) {
  //   previewDocx(file.blob, refWord.value);
  // }
}

function handlePreview(item) {
  const param = parseParam(item);
  // 预览的文档，区分单独打印和打印全部
  previewList.value = item ? ['0'] : checkList.value;
  const param = item ? parseParam(item) : parseParam();
  if (param) {
    generatePdf(param, (blob, name) => {
    generateDoc(param, (blob, name, index) => {
      previewVisible.value = true;
      setTimeout(() => {
        previewDocx(blob, refWord.value);        
        previewDocx(blob, document.getElementById(`word-preview-${index}`));
      }, 200);
      // blob.print()
      // blob.getBlob((buffer) => {
      //   previewDocx(buffer, refWord.value);
      // });

      // const resolved = router.resolve({
      //   path: '/fysp/scene/SceneInspectFile',
      //   query: {
      //     data: JSON.stringify(blob),
      //   }
      // });
      // window.open(resolved.href, '_blank')


      // console.log('pdf', blob);

      // blob.autoPrint();
      // // blob.save(name)
      // // 生成PDF的Blob对象
      // var pdfBlob = blob.output('blob');

      // setTimeout(() => {
      //   // 在iframe中显示预览
      //   pdfPreview.value.src = URL.createObjectURL(pdfBlob);
      // }, 200);
    });
  }
}
@@ -363,4 +351,23 @@
:deep(.el-checkbox__label) {
  width: 100%;
}

/* 文档字体 */
:deep(section.docx) {
  font-family: '黑体' !important;
}
/* 文档标题 */
:deep(header) {
  color: rgb(182, 182, 182);
}
:deep(.docx_5) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*  */
:deep(footer) {
  color: rgb(182, 182, 182);
}
</style>