1. 修改巡查单据的下载功能（待完成）

riku

2025-11-14 b1ce70777fb52ba986b6a8cf1b00cce93c2e84be

 src/views/fysp/scene/SceneInspectFile.vue

@@ -28,6 +28,7 @@
                '地址：' + item.scense.location
              }}</el-text>
            </div>
            <el-row justify="space-between">
            <el-space class="m-t-4">
              <el-tag>
                {{
@@ -35,14 +36,18 @@
                  item.scense.districtname +
                  item.scense.townname
                }}
                <!-- {{ item.scense.districtname }}
                {{ item.scense.townname }} -->
              </el-tag>
              <el-tag>{{ item.scense.type }}</el-tag>

              <!-- {{ item.scense.contacts }}
              {{ item.scense.contactst }} -->
            </el-space>
              <el-button
                type="default"
                size="small"
                class="m-t-4"
                @click="handlePreview(item)"
              >
                预览
              </el-button>
            </el-row>
          </el-checkbox>
        </el-space>
      </el-checkbox-group>
@@ -53,11 +58,28 @@
        <el-button type="primary" :loading="docLoading" @click="handelDownload">
          下载
        </el-button>
        <!-- <el-button type="default" :loading="docLoading" @click="handelPrint">
        <el-button type="default" :loading="docLoading" @click="handelPrint">
          打印
        </el-button> -->
        </el-button>
      </div>
    </template>
  </el-dialog>
  <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">
          关闭
        </el-button>
        <el-button
          type="primary"
          @click="handelPrint(refWord)"
          icon="PrintFilled"
        >
          打印
        </el-button>
      </el-row>
    </template>
    <div ref="refWord"></div>
  </el-dialog>
</template>
<script setup>
@@ -65,23 +87,36 @@
 * 场景巡查单据自动下载
 */
import { ref, watch } from 'vue';
import { exportDocx } from '@/utils/doc';
import {
  exportDocx,
  prepareDocxBlob,
  preparePdf,
  previewDocx,
  downloadDocx,
  print
} from '@/utils/doc';
import sceneApi from '@/api/fysp/sceneApi';

const props = defineProps({
  // 对话框开关
  modelValue: Boolean,
  // 场景基础信息数组
  value: Array
  value: Array,
  previewElement: String
});

const emits = defineEmits(['update:modelValue']);

const refWord = ref(null);

const loading = ref(false);
const scrollbarRef = ref();
const sceneInfoList = ref([]);
const checkList = ref([]);
const docLoading = ref(false);

// 预览对话框开关
const previewVisible = ref(false);

watch(
  () => [props.modelValue, props.value],
@@ -139,8 +174,10 @@
}

// 格式化场景信息，生成参数结构
function parseParam() {
  const selected = sceneInfoList.value.filter((v, i) => {
function parseParam(item) {
  const selected = item
    ? [item]
    : sceneInfoList.value.filter((v, i) => {
    return checkList.value.indexOf(i) != -1;
  });
  const param = selected.map((v) => {
@@ -187,22 +224,12 @@
    }
  });

  // param.forEach((p) => {
  //   for (const key in p.params) {
  //     let value = p.params[key];
  //     if (value == undefined) {
  //       // 若属性缺失，则改为20个空格符，对应word中10个中文字符的长度
  //       p.params[key] = '                    ';
  //     }
  //   }
  // });

  return param;
}

// 根据场景类型，生成对应的word文档
function generateDoc(param) {
  param.forEach((p) => {
function generateDoc(param, callback) {
  param.map((p) => {
    let template, _param;
    switch (p.type) {
      // 工地
@@ -218,39 +245,72 @@
      default:
        break;
    }

    exportDocx(template, _param, `${_param.name}巡查单据.docx`).finally(
      () => (docLoading.value = false)
    );
    prepareDocxBlob(template, _param).then((blob) => {
      callback(blob, `${_param.name}巡查单据.docx`);
    });
  });
}

// 下载word文档
function download(file) {}
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`);
    });
  });
}

// 打印word文档
function print(file) {}

function filePrepare() {
function filePrepare(callback) {
  const param = parseParam();
  if (param) {
    return generateDoc(param);
    return generateDoc(param, callback);
  }
}

// 点击下载按钮操作
// 点击下载按钮操作, 下载word文档
function handelDownload() {
  const file = filePrepare();
  if (file) {
    download(file);
  }
  filePrepare((blob, name) => {
    downloadDocx(blob, name);
  });
}

// 点击打印按钮操作
function handelPrint() {
  const file = filePrepare();
  if (file) {
    print(file);
function handelPrint(ref) {
  if (ref) {
    print(ref);
  }
  // const file = filePrepare();
  // if (file) {
  //   previewDocx(file.blob, refWord.value);
  // }
}

function handlePreview(item) {
  const param = parseParam(item);
  if (param) {
    generatePdf(param, (blob, name) => {
      blob.getBuffer((buffer) => {
        previewDocx(buffer, refWord.value);
      });
      previewVisible.value = true;
      // setTimeout(() => {
      //   previewDocx(blob, refWord.value);
      // }, 200);
    });
  }
}

@@ -271,4 +331,7 @@
:deep(.el-checkbox) {
  height: auto;
}
:deep(.el-checkbox__label) {
  width: 100%;
}
</style>