feat: pdf,word

罗广辉

2026-01-21 957b59c93967829acd78106fd6a6c19d3fc31294

feat: pdf,word

 .npmrc

@@ -5,3 +5,5 @@
strict-peer-dependencies=true
# 自动安装对等依赖，无需手动安装
auto-install-peers=true
# 允许所有包执行构建脚本（避免新依赖安装后无法运行）pnpm9的坑
onlyBuiltDependencies=*

 applications/task-work-order/package.json

@@ -11,11 +11,6 @@
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "catalog:",
    "@ztzf/apis": "workspace:*",
    "@ztzf/components": "workspace:*",
    "@ztzf/constants": "workspace:*",
    "@ztzf/hooks": "workspace:*",
    "@ztzf/utils": "workspace:*",
    "@dvgis/dc-sdk": "catalog:",
    "@element-plus/icons-vue": "catalog:",
    "@saber/nf-design-base-elp": "catalog:",
@@ -23,6 +18,13 @@
    "@saber/nf-form-elp": "catalog:",
    "@smallwei/avue": "catalog:",
    "@turf/turf": "catalog:",
        "@vue-office/docx": "^1.6.3",
        "@vue-office/pdf": "^2.0.10",
        "@ztzf/apis": "workspace:*",
        "@ztzf/components": "workspace:*",
        "@ztzf/constants": "workspace:*",
        "@ztzf/hooks": "workspace:*",
        "@ztzf/utils": "workspace:*",
    "animate.css": "catalog:",
    "avue-plugin-ueditor": "catalog:",
    "axios": "catalog:",
@@ -59,6 +61,7 @@
    "video.js": "catalog:",
    "videojs-markers": "catalog:",
    "vue": "catalog:",
        "vue-demi": "^0.14.10",
    "vue-i18n": "catalog:",
    "vue-router": "catalog:",
    "vue3-clipboard": "catalog:",
@@ -82,3 +85,4 @@
    "vite-plugin-vue-setup-extend": "catalog:"
  }
}


 applications/task-work-order/src/assets/docx/testDocx.docx

Binary files differ

 applications/task-work-order/src/assets/pdf/testPdf.pdf

Binary files differ

 applications/task-work-order/src/components/PreviewFiles/PreviewFiles.vue

New file
@@ -0,0 +1,56 @@
<template>
    <el-dialog
        class="gd-dialog"
        v-model="visible"
        title="预览"
        @closed="visible = false"
        destroy-on-close
        fullscreen
        :close-on-click-modal="false"
    >
        <VueOfficeDocx
            v-if="type === 'docx'"
            :src="src"
            style="height: 100%;width: 100%"
            @rendered="onRendered"
            @error="onError"
        />
        <VueOfficePdf
            v-else
            :src="src"
            style="height: 100%;width: 100%"
            @rendered="onRendered"
            @error="onError"
        />
    </el-dialog>
</template>


<script setup>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import '@vue-office/docx/lib/index.css' // 必须引入样式

const visible = ref(false)
const props = defineProps({
  src: {
    default: '',
  },
    type:{
        type: String,
        default: 'docx'
    }
})

function onRendered() {
    console.log("文档渲染完成")
}

function onError() {
    console.log("文档渲染失败")
}
</script>



<style scoped lang="scss"></style>

 applications/task-work-order/src/styles/common/cockpit.scss

@@ -491,7 +491,7 @@
    overflow: auto;

    .detail-title {
      margin-bottom: 20px;
      margin-bottom: 10px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue

@@ -11,8 +11,7 @@
        <div class="gd-dialog-form">
            <!-- 关联工单选择 -->
            <div class="work-order-section">
                <div class="form-item-row">
                    <span class="label required">选择工单:</span>
                <div class="detail-title" :style="{marginBottom: 0,marginRight: pxToRem(10)}">选择工单</div>
                    <el-select
                        class="gd-select"
                        style="width: 150px"
@@ -26,7 +25,6 @@
                    >
                        <el-option v-for="item in workOrderList" :key="item.id" :label="item.workOrderName" :value="item.id" />
                    </el-select>
                </div>
            </div>

            <!-- 工单信息展示 -->
@@ -61,7 +59,7 @@

            <!-- 子任务表格表单 -->
            <div class="task-table-section">
                <div class="section-title">添加子任务:</div>
                <div class="detail-title" :style="{marginTop: pxToRem(10)}">添加子任务</div>
                <div class="task-table-container">
                    <el-table :data="taskList">
                        <el-table-column width="50" label="">
@@ -196,6 +194,7 @@
import { gdPatrolTaskSaveApi, gdFlyerPageApi, gdPatrolTaskAuditApi } from './inspectionRequestApi'
import { gdWorkOrderPageApi } from '../orderManage/orderManageApi'
import { gdManageDeviceListApi } from '../orderManage/gdManageDeviceApi'
import { pxToRem } from '@/utils/rem'

// 初始化任务行
const initTaskRow = () => ({
@@ -354,4 +353,12 @@
defineExpose({ open })
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.detail-row-view{
    margin-top: 10px;
}
.work-order-section{
    display: flex;
    align-items: center;
}
</style>

 applications/task-work-order/src/views/orderView/orderManage/orderManage/index.vue

@@ -69,6 +69,7 @@

        <div class="gd-table-toolbar">
            <el-button color="#F2F3F5" @click="requester = !requester">我是{{ requester ? '需求方' : '服务方' }}</el-button>
            <el-button color="#F2F3F5" @click="previewVisible = true">预览</el-button>

            <el-button :icon="Plus" color="#4C34FF" type="primary" @click="openForm('add')">新增</el-button>
            <el-button :icon="Delete" color="#4C34FF" :disabled="!selectedIds.length" @click="handleDelete()">删除</el-button>
@@ -127,6 +128,7 @@
            </div>
        </div>

        <PreviewFiles v-model="previewVisible" :src="testDock" type="docx"/>
        <FormDiaLog ref="dialogRef" @success="getList" v-if="dialogVisible" v-model="dialogVisible" />
    </basic-container>
</template>
@@ -139,6 +141,9 @@
import FormDiaLog from './FormDiaLog.vue'
import { gdWorkOrderPageApi, gdWorkOrderRemoveApi } from './orderManageApi'
import dayjs from 'dayjs'
import PreviewFiles from '@/components/PreviewFiles/PreviewFiles.vue'
import testDock from '@/assets/docx/testDocx.docx'
import testPdf from '@/assets/pdf/testPdf.pdf'

// 初始化查询参数
const initSearchParams = () => ({
@@ -160,6 +165,7 @@
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const dialogVisible = ref(false)
const previewVisible = ref(false)
const dictObj = ref({
    deviceLoadDemand: [], // 设备负载需求
    workOrderType: [], // 工单类型

 applications/task-work-order/vite.config.mjs

@@ -48,7 +48,7 @@
        }
      },
    },
    assetsInclude: ['**/*.gltf'],
    assetsInclude: ['**/*.gltf','**/*.docx','**/*.pdf'],
    resolve: {
      alias: {
        '~': resolve(__dirname, './'),

 package.json

@@ -41,7 +41,9 @@
            "esbuild",
            "protobufjs",
            "sharp",
            "vue-demi"
            "vue-demi",
            "@vue-office/docx",
            "@vue-office/pdf"
        ]
    },
    "devDependencies": {

 pnpm-lock.yaml

Diff too large