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

@@ -1,84 +1,88 @@
{
  "name": "@ztzf/task-work-order",
  "private": true,
  "version": "4.1.0",
  "scripts": {
    "dev": "vite --host",
    "prod": "vite --mode production",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "serve": "vite preview --host"
  },
  "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:",
    "@saber/nf-form-design-elp": "catalog:",
    "@saber/nf-form-elp": "catalog:",
    "@smallwei/avue": "catalog:",
    "@turf/turf": "catalog:",
    "animate.css": "catalog:",
    "avue-plugin-ueditor": "catalog:",
    "axios": "catalog:",
    "cesium": "catalog:",
    "codemirror": "catalog:",
    "crypto-js": "catalog:",
    "dayjs": "catalog:",
    "decimal.js": "catalog:",
    "disable-devtool": "catalog:",
    "echarts": "catalog:",
    "element-plus": "catalog:",
    "eventemitter3": "catalog:",
    "highlight.js": "catalog:",
    "html5-qrcode": "catalog:",
    "hull.js": "catalog:",
    "js-audio-recorder": "catalog:",
    "js-base64": "catalog:",
    "js-cookie": "catalog:",
    "js-md5": "catalog:",
    "jszip": "catalog:",
    "leaflet": "catalog:",
    "leaflet-ant-path": "catalog:",
    "lodash": "catalog:",
    "mathjs": "catalog:",
    "mitt": "catalog:",
    "mqtt": "catalog:",
    "nprogress": "catalog:",
    "qrcodejs2-fix": "catalog:",
    "reconnecting-websocket": "catalog:",
    "sm-crypto": "catalog:",
    "trtc-sdk-v5": "catalog:",
    "uuid": "catalog:",
    "vant": "catalog:",
    "video.js": "catalog:",
    "videojs-markers": "catalog:",
    "vue": "catalog:",
    "vue-i18n": "catalog:",
    "vue-router": "catalog:",
    "vue3-clipboard": "catalog:",
    "vuedraggable": "catalog:",
    "vuex": "catalog:",
    "xlsx": "catalog:"
  },
  "devDependencies": {
    "@dvgis/vite-plugin-dc": "catalog:",
    "@vitejs/plugin-basic-ssl": "catalog:",
    "@vitejs/plugin-vue": "catalog:",
    "@vue/compiler-sfc": "catalog:",
    "postcss-pxtorem": "catalog:",
    "sass": "catalog:",
    "terser": "catalog:",
    "unplugin-auto-import": "catalog:",
    "vite": "catalog:",
    "vite-plugin-compression": "catalog:",
    "vite-plugin-minipic": "catalog:",
    "vite-plugin-svg-icons": "catalog:",
    "vite-plugin-vue-setup-extend": "catalog:"
  }
    "name": "@ztzf/task-work-order",
    "private": true,
    "version": "4.1.0",
    "scripts": {
        "dev": "vite --host",
        "prod": "vite --mode production",
        "build:test": "vite build --mode test",
        "build:prod": "vite build --mode production",
        "serve": "vite preview --host"
    },
    "dependencies": {
        "@amap/amap-jsapi-loader": "catalog:",
        "@dvgis/dc-sdk": "catalog:",
        "@element-plus/icons-vue": "catalog:",
        "@saber/nf-design-base-elp": "catalog:",
        "@saber/nf-form-design-elp": "catalog:",
        "@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:",
        "cesium": "catalog:",
        "codemirror": "catalog:",
        "crypto-js": "catalog:",
        "dayjs": "catalog:",
        "decimal.js": "catalog:",
        "disable-devtool": "catalog:",
        "echarts": "catalog:",
        "element-plus": "catalog:",
        "eventemitter3": "catalog:",
        "highlight.js": "catalog:",
        "html5-qrcode": "catalog:",
        "hull.js": "catalog:",
        "js-audio-recorder": "catalog:",
        "js-base64": "catalog:",
        "js-cookie": "catalog:",
        "js-md5": "catalog:",
        "jszip": "catalog:",
        "leaflet": "catalog:",
        "leaflet-ant-path": "catalog:",
        "lodash": "catalog:",
        "mathjs": "catalog:",
        "mitt": "catalog:",
        "mqtt": "catalog:",
        "nprogress": "catalog:",
        "qrcodejs2-fix": "catalog:",
        "reconnecting-websocket": "catalog:",
        "sm-crypto": "catalog:",
        "trtc-sdk-v5": "catalog:",
        "uuid": "catalog:",
        "vant": "catalog:",
        "video.js": "catalog:",
        "videojs-markers": "catalog:",
        "vue": "catalog:",
        "vue-demi": "^0.14.10",
        "vue-i18n": "catalog:",
        "vue-router": "catalog:",
        "vue3-clipboard": "catalog:",
        "vuedraggable": "catalog:",
        "vuex": "catalog:",
        "xlsx": "catalog:"
    },
    "devDependencies": {
        "@dvgis/vite-plugin-dc": "catalog:",
        "@vitejs/plugin-basic-ssl": "catalog:",
        "@vitejs/plugin-vue": "catalog:",
        "@vue/compiler-sfc": "catalog:",
        "postcss-pxtorem": "catalog:",
        "sass": "catalog:",
        "terser": "catalog:",
        "unplugin-auto-import": "catalog:",
        "vite": "catalog:",
        "vite-plugin-compression": "catalog:",
        "vite-plugin-minipic": "catalog:",
        "vite-plugin-svg-icons": "catalog:",
        "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,27 +11,25 @@
        <div class="gd-dialog-form">
            <!-- 关联工单选择 -->
            <div class="work-order-section">
                <div class="form-item-row">
                    <span class="label required">选择工单:</span>
                    <el-select
                        class="gd-select"
                        style="width: 150px"
                        popper-class="gd-select-popper"
                        v-model="selectedWorkOrderId"
                        placeholder="请选择"
                        clearable
                        filterable
                        :disabled="dialogMode !== 'add'"
                        @change="handleWorkOrderChange"
                    >
                        <el-option v-for="item in workOrderList" :key="item.id" :label="item.workOrderName" :value="item.id" />
                    </el-select>
                </div>
                <div class="detail-title" :style="{marginBottom: 0,marginRight: pxToRem(10)}">选择工单</div>
                <el-select
                    class="gd-select"
                    style="width: 150px"
                    popper-class="gd-select-popper"
                    v-model="selectedWorkOrderId"
                    placeholder="请选择"
                    clearable
                    filterable
                    :disabled="dialogMode !== 'add'"
                    @change="handleWorkOrderChange"
                >
                    <el-option v-for="item in workOrderList" :key="item.id" :label="item.workOrderName" :value="item.id" />
                </el-select>
            </div>

            <!-- 工单信息展示 -->
            <div class="work-order-info" v-if="selectedWorkOrder">
                <el-row class="detail-row-view">
                <el-row class="detail-row-view" >
                    <el-col :span="12">
                        <div class="info-item">
                            <span class="label">工单类型</span>
@@ -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