14 changed files with 3179 additions and 114 deletions
-
2package.json
-
21src/api/system/borrower.js
-
48src/api/system/documentArchives.js
-
925src/views/archivesMIOD/miodLibrary/index copy.vue
-
507src/views/archivesMIOD/miodLibrary/index.vue
-
57src/views/archivesMIOD/miodLibrary/module/detail.vue
-
290src/views/archivesMIOD/miodLibrary/module/pdfViewer.vue
-
610src/views/archivesMIOD/miodLibrary/module/pdfViewer2.vue
-
293src/views/archivesMIOD/miodLibrary/module/pdfViewer3.vue
-
146src/views/archivesMIOD/miodLibrary/module/pdfViewer4.vue
-
10src/views/archivesMIOD/miodRecord/index.vue
-
338src/views/components/category/PreviewForm.vue
-
4src/views/components/category/SettingForm.vue
-
4src/views/system/borrowerManage/index.vue
@ -0,0 +1,925 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 门类列表 --> |
||||
|
<div class="container-main"> |
||||
|
<div class="elect-cont-left"> |
||||
|
<TreeList ref="treeList" @nodeClick="handleNodeClick" /> |
||||
|
</div> |
||||
|
<div v-if="selectedDocument.isType!==1" class="elect-cont-right"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container" :style="isRecycle?'display:flex;justify-content: space-between; align-items: center;':'' "> |
||||
|
<div class="head-search" :style="isRecycle?'margin: 0;':''"> |
||||
|
<!-- 搜索 --> |
||||
|
<el-input v-model="query.search" clearable size="small" placeholder="输入题名搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
<rrOperation /> |
||||
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button> |
||||
|
</div> |
||||
|
<crudOperation v-if="!isRecycle" :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<!-- 新增 --> |
||||
|
<el-button size="mini" @click="handleForm('add')"><i class="iconfont icon-xinzeng" />新增</el-button> |
||||
|
<!-- 修改 --> |
||||
|
<el-button size="mini" :disabled="crud.selections.length !== 1" @click="handleForm('edit')"><i class="iconfont icon-bianji" />编辑</el-button> |
||||
|
<!-- 删除btn 多选 --> |
||||
|
<el-button size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"><i class="iconfont icon-shanchu" />删除</el-button> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)"> |
||||
|
<i class="iconfont icon-daochu" /> |
||||
|
导出 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-slot:rightButtonGroup> |
||||
|
<div> |
||||
|
<el-button size="mini" :disabled="crud.selections.length === 0" @click="doPrint(crud.selections)"><i class="iconfont icon-dayin" />打印处理单</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
<div v-if="isRecycle"> |
||||
|
<el-button size="mini" type="success" @click="toRecover(crud.selections)"><i class="iconfont icon-huifu" />恢复</el-button> |
||||
|
<el-button size="mini" type="success" @click="toCompletelyDelete(crud.selections)"><i class="iconfont icon-shanchu" />彻底删除</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--表格渲染--> |
||||
|
<div class="container-right"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
class="archives-table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
@row-click="clickRowHandler" |
||||
|
@select="crud.selectChange" |
||||
|
@select-all="crud.selectAllChange" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
@cell-dblclick="tableDoubleClick" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip> |
||||
|
<template slot="header"> |
||||
|
<el-tooltip |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
:content="field.fieldCnName" |
||||
|
placement="top-start" |
||||
|
> |
||||
|
<span>{{ field.fieldCnName }}</span> |
||||
|
</el-tooltip> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 仅针对read_type字段添加特殊处理 --> |
||||
|
<span |
||||
|
v-if="field.fieldName === 'read_type'" |
||||
|
:class="{ |
||||
|
'row-state row-packing': scope.row.read_type === '未传阅', |
||||
|
'row-state row-warehousing state-active': scope.row.read_type === '传阅中', |
||||
|
'row-state row-binding state-active': scope.row.read_type === '已完成', |
||||
|
}" |
||||
|
> |
||||
|
{{ scope.row[field.fieldName] }} |
||||
|
</span> |
||||
|
<span v-else>{{ scope.row[field.fieldName] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
|
</div> |
||||
|
<detail ref="archivesInfo" :selected-document="selectedDocument" /> |
||||
|
|
||||
|
<!--新增 / 编辑 表单组件--> |
||||
|
<el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body :before-close="closeDialog" :visible="formVisible" :title="formTitle"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<PreviewForm |
||||
|
ref="previewForm" |
||||
|
:form-preview-data.sync="formPreviewData" |
||||
|
:selected-category="selectedCategory" |
||||
|
:parents-id="parentsId" |
||||
|
:arc-id="arcId" |
||||
|
:is-des-form-type="isDesFormType" |
||||
|
:is-disabled="isDisabled" |
||||
|
:selected-document="selectedDocument" |
||||
|
:is-has-code="isHasCode" |
||||
|
@close-dialog="closeDialog" |
||||
|
@formLoadingShow="formLoadingShow" |
||||
|
@refreshTree="refreshTreeList" |
||||
|
/> |
||||
|
<div slot="footer" class="dialog-footer" style="margin-top: 20px !important;"> |
||||
|
<el-button type="text" @click="closeDialog">取消</el-button> |
||||
|
<el-button :loading="archivesBtnLoading" type="primary" @click="handlerArchivesSubmit">保存</el-button> |
||||
|
<!-- @click="handlerArchivesSubmit" --> |
||||
|
<el-button :loading="bindSaveLoading" type="primary">保存并绑定标签</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog class="tip-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示" :visible.sync="printVisible"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="tip-content"> |
||||
|
<p class="tipMsg">此操作将打印所选公文库数据</p> |
||||
|
</div> |
||||
|
<el-radio-group v-model="printType" style="padding-left: 36px;"> |
||||
|
<el-radio :label="0">套打</el-radio> |
||||
|
<el-radio :label="1">彩打</el-radio> |
||||
|
</el-radio-group> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click.native="printVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handlePrint">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!-- v-show="isHidden" --> |
||||
|
<div id="print" ref="printId" class="print-container"> |
||||
|
<!-- 收文处理单表格 --> |
||||
|
<table class="official-table" width="100%" cellpadding="1" cellspacing="0"> |
||||
|
<!-- 列宽定义 --> |
||||
|
<col width="32*"> |
||||
|
<col width="70*"> |
||||
|
<col width="42*"> |
||||
|
<col width="56*"> |
||||
|
<col width="27*"> |
||||
|
<col width="29*"> |
||||
|
|
||||
|
<!-- 表头 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td colspan="6" class="header-cell"> |
||||
|
<p class="header-text" style="font-size: 30px;">武汉市交通运输局收文处理单</p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 收文信息行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">收文号</td> |
||||
|
<td class="content-cell">{{ formData.receiveNo }}</td> |
||||
|
<td class="label-cell">收文日期</td> |
||||
|
<td class="content-cell">{{ formData.receiveDate }}</td> |
||||
|
<td class="label-cell">缓急</td> |
||||
|
<td class="content-cell">{{ formData.urgency }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 来文信息行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">来文单位</td> |
||||
|
<td class="content-cell">{{ formData.senderUnit }}</td> |
||||
|
<td class="label-cell">来文字号</td> |
||||
|
<td class="content-cell">{{ formData.senderNo }}</td> |
||||
|
<td class="label-cell">密级</td> |
||||
|
<td class="content-cell">{{ formData.secrecyLevel }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 提示行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">提示</td> |
||||
|
<td colspan="5" class="content-cell content-left">{{ formData.tip }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 文件标题行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">文件标题</td> |
||||
|
<td colspan="5" class="content-cell content-left">{{ formData.fileTitle }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 拟办意见行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">拟办意见</td> |
||||
|
<td colspan="5" class="content-cell content-left">{{ formData.recommendation }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 领导批示行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">领导批示</td> |
||||
|
<td colspan="5" class="content-cell content-left">{{ formData.leaderApproval }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
|
||||
|
<!-- 部门阅办行 --> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td class="label-cell">部门阅办</td> |
||||
|
<td colspan="5" class="content-cell content-center">{{ formData.departmentOpinion }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CRUD, { presenter, header } from '@crud/crud' |
||||
|
import { miodLibraryCrud } from './mixins/index' |
||||
|
import crudDocumentArchives, { FetchDelArchives, FetchCompleteDelArchives, FetchRestoreArchives } from '@/api/system/documentArchives' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import TreeList from './treeList' |
||||
|
import PreviewForm from '@/views/components/category/PreviewForm' |
||||
|
import detail from './module/detail' |
||||
|
import { exportFile } from '@/utils/index' |
||||
|
import qs from 'qs' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
import html2canvas from 'html2canvas' |
||||
|
import printJS from 'print-js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'MiodLibrary', |
||||
|
components: { TreeList, PreviewForm, detail, rrOperation, crudOperation, pagination }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '收发文', url: 'api/documentArchives/initPreDocument', |
||||
|
crudMethod: { ...crudDocumentArchives }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
}, |
||||
|
queryOnPresenterCreated: false |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
provide() { |
||||
|
return { |
||||
|
parentsData: this |
||||
|
} |
||||
|
}, |
||||
|
mixins: [presenter(), header(), miodLibraryCrud], |
||||
|
props: { |
||||
|
isRecycle: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
isdel: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
archivesBtnLoading: false, |
||||
|
bindSaveLoading: false, |
||||
|
permission: { |
||||
|
add: ['admin', 'prearchiveLibrary:add'], |
||||
|
edit: ['admin', 'prearchiveLibrary:edit'], |
||||
|
del: ['admin', 'prearchiveLibrary:del'], |
||||
|
sort: ['admin', 'prearchiveLibrary:sort'] |
||||
|
}, |
||||
|
tableDisplayFields: [], // table-list-title字段 |
||||
|
arrySort: [], |
||||
|
selectedDocument: {}, |
||||
|
form: {}, |
||||
|
formVisible: false, |
||||
|
formTitle: '新增文件', |
||||
|
formPreviewData: [], |
||||
|
selectedCategory: null, |
||||
|
parentsId: null, |
||||
|
arcId: null, |
||||
|
isDesFormType: 'miodLibrary', |
||||
|
isDisabled: false, |
||||
|
isHasCode: false, |
||||
|
printVisible: false, |
||||
|
printType: 0, |
||||
|
isHidden: false, |
||||
|
formData: { |
||||
|
receiveNo: '武交收〔2025〕12号', |
||||
|
receiveDate: '2025年05月20日', |
||||
|
urgency: '急件', |
||||
|
senderUnit: '湖北省交通运输厅', |
||||
|
senderNo: '鄂交发〔2025〕35号', |
||||
|
secrecyLevel: '普通', |
||||
|
tip: '请办公室尽快协调相关部门阅办', |
||||
|
fileTitle: '关于加强交通运输安全生产管理的通知', |
||||
|
recommendation: '建议转交运输科牵头办理，5个工作日内反馈意见', |
||||
|
leaderApproval: '同意拟办意见，张XX 2025.05.20', |
||||
|
departmentOpinion: '已阅，将于2025.05.25前反馈' |
||||
|
}, |
||||
|
printTitle: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
watch: { |
||||
|
isdel: function(newValue, oldValue) { |
||||
|
}, |
||||
|
isRecycle: function(newValue, oldValue) { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
refreshTreeList() { |
||||
|
this.$refs.treeList.refreshData() |
||||
|
}, |
||||
|
resetQuery() { |
||||
|
if (this.selectedDocument.isType === 3) { |
||||
|
this.crud.query.docDepartment = this.selectedDocument.label |
||||
|
this.crud.query.archiveYear = null |
||||
|
this.crud.query.search = null |
||||
|
} else if (this.selectedDocument.isType === 4) { |
||||
|
this.crud.query.docDepartment = null |
||||
|
this.crud.query.archiveYear = this.selectedDocument.label |
||||
|
this.crud.query.search = null |
||||
|
} else { |
||||
|
this.crud.query.search = null |
||||
|
this.crud.query.docDepartment = null |
||||
|
this.crud.query.archiveYear = null |
||||
|
} |
||||
|
this.crud.toQuery() |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
this.crud.query.documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
this.crud.query.documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
this.crud.query.isdel = this.isdel |
||||
|
// this.crud.query.ignore = false |
||||
|
this.crud.query.fondsAffiliation = this.selectedDocument.fondsId |
||||
|
this.crud.query.sort = this.arrySort |
||||
|
}, |
||||
|
formLoadingShow(loadingType) { |
||||
|
this.archivesBtnLoading = loadingType |
||||
|
}, |
||||
|
handleNodeClick(data) { |
||||
|
if (data.isType !== 1) { |
||||
|
this.selectedDocument = data |
||||
|
let documentId = null |
||||
|
if (data.isType === 2) { |
||||
|
documentId = data.id |
||||
|
} else { |
||||
|
documentId = data.documentId |
||||
|
} |
||||
|
this.getInitDocumentsViewTable(documentId) |
||||
|
} |
||||
|
}, |
||||
|
// table字段项 |
||||
|
getInitDocumentsViewTable(documentId) { |
||||
|
crudDocumentArchives.FetchInitDocumentsViewTable({ documentId: documentId }).then(data => { |
||||
|
if (data) { |
||||
|
this.arrySort = [] |
||||
|
this.tableDisplayFields = data |
||||
|
const orderSortArry = this.tableDisplayFields.filter(item => item.queue).sort((a, b) => a.queue - b.queue) |
||||
|
orderSortArry.forEach(item => { |
||||
|
if (item.displayOrderBy) { |
||||
|
this.arrySort.push(item.fieldName + ',' + item.displayOrderBy) |
||||
|
} |
||||
|
}) |
||||
|
this.$nextTick(() => { |
||||
|
if (this.selectedDocument.isType === 3) { |
||||
|
this.crud.query.docDepartment = this.selectedDocument.label |
||||
|
this.crud.query.archiveYear = null |
||||
|
} else if (this.selectedDocument.isType === 4) { |
||||
|
this.crud.query.docDepartment = null |
||||
|
this.crud.query.archiveYear = this.selectedDocument.label |
||||
|
} else { |
||||
|
this.crud.query.search = null |
||||
|
this.crud.query.docDepartment = null |
||||
|
this.crud.query.archiveYear = null |
||||
|
} |
||||
|
this.crud.toQuery() |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleForm(type) { |
||||
|
const { selectedDocument, crud } = this |
||||
|
|
||||
|
if (!selectedDocument) { |
||||
|
console.warn('selectedDocument 未定义，无法继续操作') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.selectedCategory = selectedDocument |
||||
|
this.isDesFormType = 'miodLibrary' |
||||
|
|
||||
|
let documentId |
||||
|
if (selectedDocument.isType === 2) { |
||||
|
documentId = selectedDocument.id |
||||
|
} else { |
||||
|
documentId = selectedDocument.documentId |
||||
|
} |
||||
|
|
||||
|
const params = { documentId } |
||||
|
|
||||
|
if (type === 'add') { |
||||
|
this.formTitle = '新增文件' |
||||
|
params.archivesId = null |
||||
|
} else if (type === 'edit') { |
||||
|
this.formTitle = '编辑文件' |
||||
|
const { id: archivesId } = crud.selections[0] |
||||
|
this.arcId = archivesId |
||||
|
params.archivesId = archivesId |
||||
|
} |
||||
|
|
||||
|
this.getFormInfo(params, type) |
||||
|
}, |
||||
|
|
||||
|
getFormInfo(params, type) { |
||||
|
crudDocumentArchives.FetchDoeditDocument(params).then(data => { |
||||
|
console.log('data', data) |
||||
|
const showFiledAll = data.showFiled.filter(item => item.isSequence).sort((a, b) => a.isSequence - b.isSequence) |
||||
|
this.$nextTick(() => { |
||||
|
this.formPreviewData = showFiledAll |
||||
|
this.formVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.previewForm.fileOriginal = null |
||||
|
this.$refs.previewForm.fileJsonString = null |
||||
|
if (type === 'edit') { |
||||
|
this.$refs.previewForm.archivesType = 'edit' |
||||
|
this.$refs.previewForm.addOrUpdateForm = data.echo |
||||
|
if (data.fileecho) { |
||||
|
const fileecho = [] |
||||
|
fileecho.push(data.fileecho) |
||||
|
this.$refs.previewForm.fileOriginal = fileecho[0].file_name |
||||
|
this.$refs.previewForm.fileJsonString = JSON.stringify(fileecho) |
||||
|
} else { |
||||
|
this.$refs.previewForm.fileOriginal = '' |
||||
|
this.$refs.previewForm.fileJsonString = '' |
||||
|
} |
||||
|
} else { |
||||
|
this.$refs.previewForm.archivesType = 'add' |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
handlerArchivesSubmit() { |
||||
|
let documentId |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
this.$refs.previewForm.submitForm('addOrUpdateForm', documentId) |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
// 双击查看详情 |
||||
|
tableDoubleClick(row) { |
||||
|
console.log('tableDoubleClick', row) |
||||
|
this.$refs.archivesInfo.archivesInfoVisible = true |
||||
|
this.$refs.archivesInfo.archivesTabIndex = 0 |
||||
|
this.$refs.archivesInfo.parentInfo = row |
||||
|
this.$refs.archivesInfo.getDetial(row.id) |
||||
|
}, |
||||
|
// 删除 |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选公文库数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
let documentId |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
|
||||
|
const params = { |
||||
|
'documentId': documentId, |
||||
|
'archivesIds': ids |
||||
|
} |
||||
|
|
||||
|
FetchDelArchives(params).then((res) => { |
||||
|
console.log('res', res) |
||||
|
if (res.code !== 500) { |
||||
|
this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
||||
|
this.crud.refresh() |
||||
|
} else { |
||||
|
this.crud.notify('删除失败', CRUD.NOTIFICATION_TYPE.ERROR) |
||||
|
} |
||||
|
this.crud.delAllLoading = false |
||||
|
}).catch(err => { |
||||
|
this.crud.delAllLoading = false |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 导出 |
||||
|
doExport(datas) { |
||||
|
this.crud.downloadLoading = true |
||||
|
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
let documentId |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
const params = { |
||||
|
'documentId': documentId, |
||||
|
'ids': ids |
||||
|
} |
||||
|
exportFile(this.baseApi + '/api/documentArchives/downloadDocumentArchives?' + qs.stringify(params, { indices: false })) |
||||
|
this.crud.downloadLoading = false |
||||
|
}).catch(() => { |
||||
|
this.crud.downloadLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
doPrint(datas) { |
||||
|
this.printVisible = true |
||||
|
}, |
||||
|
handlePrint() { |
||||
|
this.printVisible = false |
||||
|
this.isHidden = true |
||||
|
if (this.isHidden) { |
||||
|
const timer = setTimeout(() => { |
||||
|
this.printFn() |
||||
|
this.isHidden = false |
||||
|
clearTimeout(timer) |
||||
|
}, 100) |
||||
|
} |
||||
|
}, |
||||
|
printFn() { |
||||
|
// printJS({ |
||||
|
// printable: 'print', |
||||
|
// type: 'html', |
||||
|
// style: `page { |
||||
|
// size: A4; |
||||
|
// margin: 2cm; |
||||
|
// } |
||||
|
// /* 基础样式 */ |
||||
|
// .print-container { |
||||
|
// font-family: "宋体", sans-serif; |
||||
|
// margin: 20px; |
||||
|
// } |
||||
|
|
||||
|
// /* 标题样式 */ |
||||
|
// .print-title { |
||||
|
// font-size: 22pt; |
||||
|
// font-family: "华文中宋"; |
||||
|
// color: #ff0000; |
||||
|
// margin: 20px 0; |
||||
|
// } |
||||
|
|
||||
|
// /* 表格样式 */ |
||||
|
// .official-table { |
||||
|
// border-collapse: collapse; |
||||
|
// width: 100%; |
||||
|
// } |
||||
|
|
||||
|
// .label-cell, .content-cell { |
||||
|
// border: 1px solid #ff0000; |
||||
|
// padding: 8px; |
||||
|
// } |
||||
|
|
||||
|
// .label-cell { |
||||
|
// background: #ffffff; |
||||
|
// text-align: center; |
||||
|
// font-size: 12pt; |
||||
|
// color: #ff0000; |
||||
|
// vertical-align: middle; |
||||
|
// } |
||||
|
|
||||
|
// .content-cell { |
||||
|
// background: #ffffff; |
||||
|
// font-size: 12pt; |
||||
|
// vertical-align: top; |
||||
|
// } |
||||
|
|
||||
|
// .content-left { |
||||
|
// text-align: left; |
||||
|
// } |
||||
|
|
||||
|
// .content-center { |
||||
|
// text-align: center; |
||||
|
// } |
||||
|
|
||||
|
// .header-cell { |
||||
|
// border: none; |
||||
|
// padding: 20px 0; |
||||
|
// text-align: center; |
||||
|
// } |
||||
|
|
||||
|
// .header-text { |
||||
|
// font-family: "华文中宋"; |
||||
|
// font-size: 10pt; |
||||
|
// color: #ff0000; |
||||
|
// margin: 0; |
||||
|
// } |
||||
|
// ` // 去除页眉页脚 |
||||
|
// }) |
||||
|
const printContent = this.$refs.printId |
||||
|
// 获取dom 宽度 高度 |
||||
|
const width = printContent.clientWidth |
||||
|
const height = printContent.clientHeight |
||||
|
console.log('height', height) |
||||
|
// 创建一个canvas节点 |
||||
|
const canvas = document.createElement('canvas') |
||||
|
|
||||
|
const scale = 1 // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。 |
||||
|
canvas.width = width * scale // 定义canvas 宽度 * 缩放 |
||||
|
canvas.height = height * scale // 定义canvas高度 *缩放 |
||||
|
canvas.style.width = width * scale + 'px' |
||||
|
canvas.style.height = height * scale + 'px' |
||||
|
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale |
||||
|
|
||||
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度 |
||||
|
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft // 获取水平滚动轴的长度 |
||||
|
|
||||
|
html2canvas(printContent, { |
||||
|
canvas, |
||||
|
backgroundColor: null, |
||||
|
useCORS: true, |
||||
|
windowHeight: document.body.scrollHeight, |
||||
|
scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全 |
||||
|
scrollY: -scrollTop |
||||
|
}).then((canvas) => { |
||||
|
const url = canvas.toDataURL('image/png') |
||||
|
printJS({ |
||||
|
printable: url, |
||||
|
type: 'image', |
||||
|
documentTitle: '', // 标题 |
||||
|
style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚 |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
console.error(err) |
||||
|
}) |
||||
|
}, |
||||
|
// 回收站 - 恢复 |
||||
|
toRecover(datas) { |
||||
|
if (datas.length === 0) { |
||||
|
this.$message({ message: '您还未勾选需要操作的条目，请先确认！', offset: 8 }) |
||||
|
return false |
||||
|
} |
||||
|
this.$confirm('此恢复将会把所选条目及其子集一并恢复' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const archivesIds = [] |
||||
|
datas.forEach(val => { |
||||
|
archivesIds.push(val.id) |
||||
|
}) |
||||
|
|
||||
|
let documentId |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
const params = { |
||||
|
'documentId': documentId, |
||||
|
'archivesIds': archivesIds |
||||
|
} |
||||
|
console.log('params', params) |
||||
|
FetchRestoreArchives(params).then((res) => { |
||||
|
console.log('res', res) |
||||
|
if (res.code !== 500) { |
||||
|
if (res.includes('成功')) { |
||||
|
this.$message({ message: res, type: 'success', offset: 8 }) |
||||
|
this.crud.refresh() |
||||
|
this.refreshTreeList() |
||||
|
} else { |
||||
|
this.$message({ message: res, type: 'error', offset: 8 }) |
||||
|
} |
||||
|
} else { |
||||
|
this.$message({ message: '恢复所选档案失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 回收站 - 彻底删除 |
||||
|
toCompletelyDelete(datas) { |
||||
|
if (datas.length === 0) { |
||||
|
this.$message({ message: '您还未勾选需要操作的条目，请先确认！', offset: 8 }) |
||||
|
return false |
||||
|
} |
||||
|
this.$confirm('此删除将把会所选条目与其子集彻底删除' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
const archivesIds = [] |
||||
|
datas.forEach(val => { |
||||
|
archivesIds.push(val.id) |
||||
|
}) |
||||
|
let documentId |
||||
|
if (this.selectedDocument.isType === 2) { |
||||
|
documentId = this.selectedDocument.id |
||||
|
} else { |
||||
|
documentId = this.selectedDocument.documentId |
||||
|
} |
||||
|
const params = { |
||||
|
'documentId': documentId, |
||||
|
'archivesIds': archivesIds |
||||
|
} |
||||
|
console.log('params', params) |
||||
|
FetchCompleteDelArchives(params).then((res) => { |
||||
|
if (res.code !== 500) { |
||||
|
this.$message({ message: res, type: 'success', offset: 8 }) |
||||
|
this.crud.refresh() |
||||
|
this.refreshTreeList() |
||||
|
} else { |
||||
|
this.$message({ message: '删除所选档案失败', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
closeDialog() { |
||||
|
this.formVisible = false |
||||
|
this.$refs.previewForm.miodDeptsTags = [] |
||||
|
this.$refs.previewForm.miodDeptsSelections = [] |
||||
|
this.$refs.previewForm.deptsValid = false |
||||
|
if (this.$refs.previewForm.$refs['addOrUpdateForm']) { |
||||
|
this.$refs.previewForm.$refs['addOrUpdateForm'].clearValidate() |
||||
|
this.$refs.previewForm.$refs['addOrUpdateForm'].resetFields() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
@media print { |
||||
|
html,body{ |
||||
|
height: inherit; |
||||
|
} |
||||
|
.print-container { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
@page { |
||||
|
size: A4; |
||||
|
margin: 2cm; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style lang='scss' scoped> |
||||
|
@import "~@/assets/styles/collect-reorganizi.scss"; |
||||
|
@mixin management-fixed-style{ |
||||
|
[data-theme="dark"] & { |
||||
|
background-color: #031435 !important; |
||||
|
-webkit-box-shadow: -5px 5px 10px 1px rgba(15,164,222,.16); |
||||
|
box-shadow: -5px 5px 10px 1px rgba(15,164,222,.16); |
||||
|
} |
||||
|
[data-theme="light"] & { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.el-table { |
||||
|
::v-deep .el-table__fixed-right { |
||||
|
@include management-fixed-style; |
||||
|
} |
||||
|
} |
||||
|
.preview-dialog .el-dialog .preview-content { |
||||
|
height: calc(100vh - 264px) !important; |
||||
|
|
||||
|
} |
||||
|
.elect-cont-right .container-right { |
||||
|
min-height: calc(100vh - 284px); |
||||
|
} |
||||
|
.dialog-footer .el-button.el-button--primary, |
||||
|
.el-message-box__btns .el-button.el-button--primary{ |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
line-height:normal; |
||||
|
padding: 6px 20px; |
||||
|
} |
||||
|
|
||||
|
.tip-dialog{ |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 504px; |
||||
|
.setting-dialog{ |
||||
|
padding: 10px 10px 0 10px; |
||||
|
} |
||||
|
.tip-content{ |
||||
|
padding-left: 34px; |
||||
|
font-size: 14px; |
||||
|
line-height: 24px; |
||||
|
color: #0C0E1E; |
||||
|
background: url("~@/assets/images/icon/tip-icon.png") no-repeat left top; |
||||
|
background-size: 24px 24px; |
||||
|
padding-bottom: 20px; |
||||
|
span{ |
||||
|
font-size: 12px; |
||||
|
color: #ED4A41; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.dialog-footer{ |
||||
|
margin-top: 27px; |
||||
|
} |
||||
|
} |
||||
|
.intoExamine{ |
||||
|
position: fixed; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
z-index: 99; |
||||
|
} |
||||
|
/* 基础样式 */ |
||||
|
.print-container { |
||||
|
position: fixed; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
z-index: 99; |
||||
|
} |
||||
|
|
||||
|
/* 标题样式 */ |
||||
|
.print-title { |
||||
|
font-size: 22pt; |
||||
|
font-family: "华文中宋"; |
||||
|
color: #ff0000; |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
/* 表格样式 */ |
||||
|
.official-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.label-cell, .content-cell { |
||||
|
border: 1px solid #ff0000; |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.label-cell { |
||||
|
background: #ffffff; |
||||
|
text-align: center; |
||||
|
font-size: 12pt; |
||||
|
color: #ff0000; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.content-cell { |
||||
|
background: #ffffff; |
||||
|
font-size: 12pt; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.content-left { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.content-center { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.header-cell { |
||||
|
border: none; |
||||
|
padding: 20px 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.header-text { |
||||
|
font-family: "华文中宋"; |
||||
|
font-size: 22pt; |
||||
|
color: #ff0000; |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,290 @@ |
|||||
|
<template> |
||||
|
<div class="pdf-viewer-container"> |
||||
|
<!-- 加载状态 --> |
||||
|
<div v-if="loading" class="loading-overlay"> |
||||
|
<div class="loading-spinner"> |
||||
|
<i class="fa fa-spinner fa-spin fa-3x" /> |
||||
|
<p>{{ loadingMessage }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 错误提示 --> |
||||
|
<div v-else-if="error" class="error-message"> |
||||
|
<i class="fa fa-exclamation-triangle" /> |
||||
|
<p>{{ error }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- PDF 容器 --> |
||||
|
<div v-else class="pdf-container"> |
||||
|
<div class="pdf-controls"> |
||||
|
<button class="print-button" @click="printPdf"> |
||||
|
<i class="fa fa-print" /> 打印 PDF |
||||
|
</button> |
||||
|
<button class="download-button" @click="downloadPdf"> |
||||
|
<i class="fa fa-download" /> 下载 PDF |
||||
|
</button> |
||||
|
<div class="page-controls"> |
||||
|
<button :disabled="currentPage <= 1" class="page-button" @click="goToPrevPage"> |
||||
|
<i class="fa fa-chevron-left" /> |
||||
|
</button> |
||||
|
<span class="page-info"> |
||||
|
第 {{ currentPage }} 页，共 {{ totalPages }} 页 |
||||
|
</span> |
||||
|
<button :disabled="currentPage >= totalPages" class="page-button" @click="goToNextPage"> |
||||
|
<i class="fa fa-chevron-right" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div ref="pdfViewer" class="pdf-viewer" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import pdfjsLib from 'pdfjs-dist/webpack' |
||||
|
// import 'pdfjs-dist/web/pdf_viewer.css' |
||||
|
|
||||
|
// 中文语言包支持 |
||||
|
// import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist' |
||||
|
|
||||
|
import * as PDFJS from 'pdfdist-mergeofd/build/pdf' |
||||
|
// import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib' |
||||
|
// import { TextLayerBuilder, EventBus } from 'pdfdist-mergeofd/web/pdf_viewer' |
||||
|
import 'pdfdist-mergeofd/web/pdf_viewer.css' |
||||
|
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfdist-mergeofd/build/pdf.worker.entry.js') |
||||
|
// import { saveByteArray } from '@/utils/index' |
||||
|
// import { getInitWatermark } from '@/api/system/waterMask' |
||||
|
// import { FetchGetFilingsealFormat, FetchGetFilingsealFormatDtails } from '@/api/system/category/category' |
||||
|
// import fontkit from '@pdf-lib/fontkit' |
||||
|
|
||||
|
// 设置 PDF.js worker 路径 |
||||
|
// GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PdfViewer', |
||||
|
props: { |
||||
|
// 支持 URL 或 Blob 格式 |
||||
|
pdfSource: { |
||||
|
type: [String, Blob], |
||||
|
required: true |
||||
|
}, |
||||
|
// 后端请求配置（当 pdfSource 为 URL 时使用） |
||||
|
requestOptions: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
method: 'GET', |
||||
|
headers: {} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
pdfDoc: null, |
||||
|
currentPage: 1, |
||||
|
totalPages: 0, |
||||
|
scale: 1.0, |
||||
|
loading: true, |
||||
|
loadingMessage: '正在准备 PDF...', |
||||
|
error: null, |
||||
|
pdfBlob: null // 存储 PDF Blob 对象 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.loadPdf() |
||||
|
}, |
||||
|
methods: { |
||||
|
async loadPdf() { |
||||
|
try { |
||||
|
let pdfData |
||||
|
|
||||
|
// 处理不同类型的数据源 |
||||
|
if (typeof this.pdfSource === 'string') { |
||||
|
// 如果是 URL，发起请求获取数据流 |
||||
|
this.loadingMessage = '正在下载 PDF...' |
||||
|
const response = await fetch(this.pdfSource, this.requestOptions) |
||||
|
|
||||
|
if (!response.ok) { |
||||
|
throw new Error(`HTTP错误，状态码：${response.status}`) |
||||
|
} |
||||
|
|
||||
|
pdfData = await response.arrayBuffer() |
||||
|
this.pdfBlob = new Blob([pdfData], { type: 'application/pdf' }) |
||||
|
} else if (this.pdfSource instanceof Blob) { |
||||
|
// 如果是 Blob 直接处理 |
||||
|
this.loadingMessage = '正在处理 PDF...' |
||||
|
pdfData = await this.blobToArrayBuffer(this.pdfSource) |
||||
|
this.pdfBlob = this.pdfSource |
||||
|
} else { |
||||
|
throw new Error('不支持的 PDF 数据源类型') |
||||
|
} |
||||
|
|
||||
|
// 加载 PDF 文件 |
||||
|
const loadingTask = PDFJS.getDocument({ |
||||
|
data: pdfData, |
||||
|
cMapUrl: '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/cmaps/', |
||||
|
cMapPacked: true |
||||
|
}) |
||||
|
|
||||
|
// 监听加载进度 |
||||
|
loadingTask.onProgress = (progressData) => { |
||||
|
const percent = Math.round((progressData.loaded / progressData.total) * 100) |
||||
|
this.loadingMessage = `正在加载 PDF: ${percent}%` |
||||
|
} |
||||
|
|
||||
|
// 获取 PDF 文档对象 |
||||
|
this.pdfDoc = await loadingTask.promise |
||||
|
this.totalPages = this.pdfDoc.numPages |
||||
|
|
||||
|
// 渲染第一页 |
||||
|
this.renderPage(this.currentPage) |
||||
|
this.loading = false |
||||
|
} catch (err) { |
||||
|
console.error('加载 PDF 失败:', err) |
||||
|
this.error = `无法加载 PDF 文件: ${err.message}` |
||||
|
this.loading = false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// Blob 转 ArrayBuffer |
||||
|
blobToArrayBuffer(blob) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
const reader = new FileReader() |
||||
|
reader.onload = () => resolve(reader.result) |
||||
|
reader.onerror = reject |
||||
|
reader.readAsArrayBuffer(blob) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async renderPage(num) { |
||||
|
try { |
||||
|
const page = await this.pdfDoc.getPage(num) |
||||
|
|
||||
|
// 获取渲染上下文 |
||||
|
const viewport = page.getViewport({ scale: this.scale }) |
||||
|
const canvas = document.createElement('canvas') |
||||
|
const context = canvas.getContext('2d') |
||||
|
|
||||
|
// 设置 canvas 尺寸 |
||||
|
canvas.height = viewport.height |
||||
|
canvas.width = viewport.width |
||||
|
canvas.className = 'pdf-page' |
||||
|
|
||||
|
// 清空容器并添加新的 canvas |
||||
|
const viewer = this.$refs.pdfViewer |
||||
|
viewer.innerHTML = '' |
||||
|
viewer.appendChild(canvas) |
||||
|
|
||||
|
// 渲染 PDF 页面 |
||||
|
const renderContext = { |
||||
|
canvasContext: context, |
||||
|
viewport: viewport |
||||
|
} |
||||
|
|
||||
|
await page.render(renderContext).promise |
||||
|
} catch (err) { |
||||
|
console.error('渲染 PDF 页面失败:', err) |
||||
|
this.error = '无法渲染 PDF 页面。' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
goToPrevPage() { |
||||
|
if (this.currentPage > 1) { |
||||
|
this.currentPage-- |
||||
|
this.renderPage(this.currentPage) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
goToNextPage() { |
||||
|
if (this.currentPage < this.totalPages) { |
||||
|
this.currentPage++ |
||||
|
this.renderPage(this.currentPage) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async printPdf() { |
||||
|
try { |
||||
|
// 打印前确保 PDF 已加载 |
||||
|
if (!this.pdfDoc) return |
||||
|
|
||||
|
this.loading = true |
||||
|
this.loadingMessage = '正在准备打印...' |
||||
|
|
||||
|
// 创建临时打印容器 |
||||
|
const printContainer = document.createElement('div') |
||||
|
printContainer.className = 'pdf-print-container' |
||||
|
printContainer.style.display = 'none' |
||||
|
document.body.appendChild(printContainer) |
||||
|
|
||||
|
// 逐页渲染到打印容器 |
||||
|
for (let i = 1; i <= this.totalPages; i++) { |
||||
|
const page = await this.pdfDoc.getPage(i) |
||||
|
const viewport = page.getViewport({ scale: 1.5 }) // 使用较高的缩放比例以获得更好的打印质量 |
||||
|
|
||||
|
const canvas = document.createElement('canvas') |
||||
|
const context = canvas.getContext('2d') |
||||
|
|
||||
|
canvas.height = viewport.height |
||||
|
canvas.width = viewport.width |
||||
|
canvas.className = 'pdf-print-page' |
||||
|
canvas.style.pageBreakAfter = 'always' |
||||
|
if (i === this.totalPages) { |
||||
|
canvas.style.pageBreakAfter = 'avoid' |
||||
|
} |
||||
|
|
||||
|
printContainer.appendChild(canvas) |
||||
|
|
||||
|
const renderContext = { |
||||
|
canvasContext: context, |
||||
|
viewport: viewport |
||||
|
} |
||||
|
|
||||
|
await page.render(renderContext).promise |
||||
|
|
||||
|
// 更新加载进度 |
||||
|
const percent = Math.round((i / this.totalPages) * 100) |
||||
|
this.loadingMessage = `正在准备打印: ${percent}%` |
||||
|
} |
||||
|
|
||||
|
// 保存当前视图 |
||||
|
const currentScroll = window.scrollY |
||||
|
|
||||
|
// 打印 |
||||
|
window.print() |
||||
|
|
||||
|
// 清理 |
||||
|
setTimeout(() => { |
||||
|
document.body.removeChild(printContainer) |
||||
|
this.loading = false |
||||
|
window.scrollTo(0, currentScroll) |
||||
|
}, 1000) |
||||
|
} catch (err) { |
||||
|
console.error('打印 PDF 失败:', err) |
||||
|
this.error = '打印 PDF 时出错。' |
||||
|
this.loading = false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
downloadPdf() { |
||||
|
if (!this.pdfBlob) { |
||||
|
this.error = '无法下载 PDF，数据不可用。' |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 创建下载链接 |
||||
|
const url = URL.createObjectURL(this.pdfBlob) |
||||
|
const link = document.createElement('a') |
||||
|
link.href = url |
||||
|
link.download = 'document.pdf' |
||||
|
link.click() |
||||
|
|
||||
|
// 释放 URL 对象 |
||||
|
setTimeout(() => URL.revokeObjectURL(url), 100) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 样式部分保持不变... */ |
||||
|
</style> |
||||
@ -0,0 +1,610 @@ |
|||||
|
<template> |
||||
|
<div class="pdf-overlay-container"> |
||||
|
<div class="toolbar"> |
||||
|
<button class="btn" @click="loadPdf"> |
||||
|
<i class="fa fa-file-pdf-o" /> 加载PDF |
||||
|
</button> |
||||
|
<button class="btn" @click="addTextField"> |
||||
|
<i class="fa fa-font" /> 添加文本 |
||||
|
</button> |
||||
|
<button class="btn" @click="saveTemplate"> |
||||
|
<i class="fa fa-save" /> 保存模板 |
||||
|
</button> |
||||
|
<button class="btn" @click="loadTemplate"> |
||||
|
<i class="fa fa-folder-open-o" /> 加载模板 |
||||
|
</button> |
||||
|
<button class="btn" @click="exportPdf"> |
||||
|
<i class="fa fa-download" /> 导出PDF |
||||
|
</button> |
||||
|
<button class="btn" @click="printPdf"> |
||||
|
<i class="fa fa-print" /> 打印 |
||||
|
</button> |
||||
|
<div class="scale-controls"> |
||||
|
<button class="btn" @click="decreaseScale"> |
||||
|
<i class="fa fa-search-minus" /> |
||||
|
</button> |
||||
|
<span>{{ scale.toFixed(1) }}x</span> |
||||
|
<button class="btn" @click="increaseScale"> |
||||
|
<i class="fa fa-search-plus" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pdf-container"> |
||||
|
<div ref="pdfViewer" class="pdf-viewer"> |
||||
|
<canvas ref="pdfCanvas" /> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
ref="overlayContainer" |
||||
|
class="overlay-container" |
||||
|
@mousedown="startDrag" |
||||
|
@mousemove="onDrag" |
||||
|
@mouseup="stopDrag" |
||||
|
@mouseleave="stopDrag" |
||||
|
> |
||||
|
<div |
||||
|
v-for="(field, index) in formFields" |
||||
|
:key="index" |
||||
|
:style="getFieldStyle(field)" |
||||
|
class="form-field" |
||||
|
@click="selectField(index)" |
||||
|
@dblclick="editField(index)" |
||||
|
> |
||||
|
{{ field.content || '点击编辑' }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="selectedFieldIndex !== -1" class="properties-panel"> |
||||
|
<h3>字段属性</h3> |
||||
|
<div class="property-row"> |
||||
|
<label>内容:</label> |
||||
|
<input v-model="formFields[selectedFieldIndex].content" type="text"> |
||||
|
</div> |
||||
|
<div class="property-row"> |
||||
|
<label>字体大小:</label> |
||||
|
<input v-model.number="formFields[selectedFieldIndex].fontSize" type="number"> |
||||
|
</div> |
||||
|
<div class="property-row"> |
||||
|
<label>颜色:</label> |
||||
|
<input v-model="formFields[selectedFieldIndex].color" type="color"> |
||||
|
</div> |
||||
|
<div class="property-row"> |
||||
|
<label>位置:</label> |
||||
|
<span>X: {{ formFields[selectedFieldIndex].x.toFixed(0) }}</span> |
||||
|
<span>Y: {{ formFields[selectedFieldIndex].y.toFixed(0) }}</span> |
||||
|
</div> |
||||
|
<button class="btn danger" @click="deleteSelectedField"> |
||||
|
<i class="fa fa-trash" /> 删除字段 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import html2canvas from 'html2canvas' |
||||
|
|
||||
|
import * as PDFJS from 'pdfdist-mergeofd/build/pdf' |
||||
|
// import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib' |
||||
|
// import { TextLayerBuilder, EventBus } from 'pdfdist-mergeofd/web/pdf_viewer' |
||||
|
import 'pdfdist-mergeofd/web/pdf_viewer.css' |
||||
|
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfdist-mergeofd/build/pdf.worker.entry.js') |
||||
|
// import { saveByteArray } from '@/utils/index' |
||||
|
// import fontkit from '@pdf-lib/fontkit' |
||||
|
import jsPDF from 'jspdf' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PdfOverlay', |
||||
|
data() { |
||||
|
return { |
||||
|
pdfDoc: null, |
||||
|
currentPage: 1, |
||||
|
totalPages: 0, |
||||
|
scale: 1.0, |
||||
|
formFields: [], |
||||
|
draggingFieldIndex: -1, |
||||
|
lastX: 0, |
||||
|
lastY: 0, |
||||
|
selectedFieldIndex: -1, |
||||
|
templateData: null, |
||||
|
pdfPath: '', |
||||
|
isDraggingCanvas: false, |
||||
|
canvasDragStart: { x: 0, y: 0 }, |
||||
|
canvasOffset: { x: 0, y: 0 } |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
pdfViewerStyle() { |
||||
|
return { |
||||
|
transform: `translate(${this.canvasOffset.x}px, ${this.canvasOffset.y}px) scale(${this.scale})`, |
||||
|
transformOrigin: '0 0', |
||||
|
position: 'relative', |
||||
|
overflow: 'auto' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs.pdfViewer.addEventListener('wheel', this.zoomOnScroll) |
||||
|
this.$refs.pdfViewer.addEventListener('mousedown', this.startCanvasDrag) |
||||
|
window.addEventListener('mousemove', this.onCanvasDrag) |
||||
|
window.addEventListener('mouseup', this.stopCanvasDrag) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.$refs.pdfViewer.removeEventListener('wheel', this.zoomOnScroll) |
||||
|
this.$refs.pdfViewer.removeEventListener('mousedown', this.startCanvasDrag) |
||||
|
window.removeEventListener('mousemove', this.onCanvasDrag) |
||||
|
window.removeEventListener('mouseup', this.stopCanvasDrag) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 修改后的printPdf方法 |
||||
|
async printPdf() { |
||||
|
if (!this.pdfDoc) { |
||||
|
alert('请先加载PDF') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
// 临时显示所有字段以便打印 |
||||
|
const originalStyles = this.formFields.map(field => ({ |
||||
|
...field, |
||||
|
style: { ...field.style } |
||||
|
})) |
||||
|
|
||||
|
// 确保所有字段可见 |
||||
|
this.formFields.forEach(field => { |
||||
|
field.style = { |
||||
|
...field.style, |
||||
|
display: 'block', |
||||
|
opacity: 1 |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 强制更新DOM |
||||
|
await this.$nextTick() |
||||
|
|
||||
|
// 使用html2canvas捕获PDF和覆盖层 |
||||
|
const pdfContainer = this.$refs.pdfViewer |
||||
|
const canvas = await html2canvas(pdfContainer, { |
||||
|
scale: 2, |
||||
|
useCORS: true, |
||||
|
logging: false |
||||
|
}) |
||||
|
|
||||
|
// 恢复原始样式 |
||||
|
this.formFields = originalStyles |
||||
|
|
||||
|
// 将canvas转换为Blob |
||||
|
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png')) |
||||
|
const imgUrl = URL.createObjectURL(blob) |
||||
|
|
||||
|
// 创建打印窗口 |
||||
|
const printWindow = window.open('', '_blank', 'width=1000,height=800') |
||||
|
const doc = printWindow.document |
||||
|
|
||||
|
// 写入基本HTML结构 |
||||
|
doc.write(`<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<title>打印PDF</title> |
||||
|
<style> |
||||
|
@media print { |
||||
|
body * { visibility: hidden; } |
||||
|
#print-area, #print-area * { visibility: visible; } |
||||
|
#print-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
||||
|
} |
||||
|
body { margin: 0; padding: 0; } |
||||
|
#print-area { display: flex; justify-content: center; align-items: center; padding: 20px; } |
||||
|
#print-image { max-width: 100%; max-height: 100%; } |
||||
|
.controls { position: fixed; bottom: 20px; left: 0; width: 100%; text-align: center; } |
||||
|
button { padding: 10px 20px; margin: 0 10px; } |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="print-area"></div> |
||||
|
<div class="controls"></div> |
||||
|
</body> |
||||
|
</html>`) |
||||
|
|
||||
|
// 使用DOM API添加内容 |
||||
|
const printArea = doc.getElementById('print-area') |
||||
|
const img = doc.createElement('img') |
||||
|
img.src = imgUrl |
||||
|
img.id = 'print-image' |
||||
|
img.style.maxWidth = '100%' |
||||
|
img.style.maxHeight = '100%' |
||||
|
printArea.appendChild(img) |
||||
|
|
||||
|
// 添加控制按钮 |
||||
|
const controls = doc.querySelector('.controls') |
||||
|
|
||||
|
const printBtn = doc.createElement('button') |
||||
|
printBtn.textContent = '打印' |
||||
|
printBtn.onclick = () => printWindow.print() |
||||
|
controls.appendChild(printBtn) |
||||
|
|
||||
|
const closeBtn = doc.createElement('button') |
||||
|
closeBtn.textContent = '关闭' |
||||
|
closeBtn.onclick = () => { |
||||
|
URL.revokeObjectURL(imgUrl) |
||||
|
printWindow.close() |
||||
|
} |
||||
|
controls.appendChild(closeBtn) |
||||
|
|
||||
|
// 窗口关闭时释放对象URL |
||||
|
printWindow.addEventListener('unload', () => { |
||||
|
URL.revokeObjectURL(imgUrl) |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('打印失败:', error) |
||||
|
alert('打印失败，请重试') |
||||
|
} |
||||
|
}, |
||||
|
async loadPdf() { |
||||
|
const fileInput = document.createElement('input') |
||||
|
fileInput.type = 'file' |
||||
|
fileInput.accept = '.pdf' |
||||
|
fileInput.onchange = async(e) => { |
||||
|
const file = e.target.files[0] |
||||
|
if (!file) return |
||||
|
|
||||
|
const fileReader = new FileReader() |
||||
|
fileReader.onload = async(event) => { |
||||
|
try { |
||||
|
const arrayBuffer = event.target.result |
||||
|
this.pdfDoc = await PDFJS.getDocument(arrayBuffer).promise |
||||
|
this.totalPages = this.pdfDoc.numPages |
||||
|
this.currentPage = 1 |
||||
|
this.pdfPath = URL.createObjectURL(file) |
||||
|
await this.renderPage() |
||||
|
} catch (error) { |
||||
|
console.error('加载PDF失败:', error) |
||||
|
alert('加载PDF失败，请确保文件格式正确') |
||||
|
} |
||||
|
} |
||||
|
fileReader.readAsArrayBuffer(file) |
||||
|
} |
||||
|
fileInput.click() |
||||
|
}, |
||||
|
async renderPage() { |
||||
|
if (!this.pdfDoc) return |
||||
|
|
||||
|
const page = await this.pdfDoc.getPage(this.currentPage) |
||||
|
const viewport = page.getViewport({ scale: 1.0 }) |
||||
|
|
||||
|
const canvas = this.$refs.pdfCanvas |
||||
|
const context = canvas.getContext('2d') |
||||
|
|
||||
|
// 设置canvas尺寸 |
||||
|
canvas.height = viewport.height |
||||
|
canvas.width = viewport.width |
||||
|
|
||||
|
// 渲染PDF页面 |
||||
|
const renderContext = { |
||||
|
canvasContext: context, |
||||
|
viewport: viewport |
||||
|
} |
||||
|
|
||||
|
const renderTask = page.render(renderContext) |
||||
|
await renderTask.promise |
||||
|
|
||||
|
// 调整覆盖层大小 |
||||
|
const overlayContainer = this.$refs.overlayContainer |
||||
|
overlayContainer.style.height = `${viewport.height}px` |
||||
|
overlayContainer.style.width = `${viewport.width}px` |
||||
|
}, |
||||
|
addTextField() { |
||||
|
this.formFields.push({ |
||||
|
x: 50, |
||||
|
y: 50, |
||||
|
width: 150, |
||||
|
height: 30, |
||||
|
fontSize: 14, |
||||
|
content: '输入文本', |
||||
|
color: '#000000', |
||||
|
textAlign: 'left' |
||||
|
}) |
||||
|
}, |
||||
|
getFieldStyle(field) { |
||||
|
return { |
||||
|
position: 'absolute', |
||||
|
left: `${field.x}px`, |
||||
|
top: `${field.y}px`, |
||||
|
width: `${field.width}px`, |
||||
|
height: `${field.height}px`, |
||||
|
fontSize: `${field.fontSize}px`, |
||||
|
color: field.color, |
||||
|
border: this.selectedFieldIndex === this.formFields.indexOf(field) ? '1px dashed #3b82f6' : 'none', |
||||
|
padding: '4px', |
||||
|
boxSizing: 'border-box', |
||||
|
overflow: 'hidden', |
||||
|
whiteSpace: 'nowrap', |
||||
|
textOverflow: 'ellipsis', |
||||
|
cursor: 'move', |
||||
|
textAlign: field.textAlign, |
||||
|
backgroundColor: 'rgba(255, 255, 255, 0.7)', |
||||
|
borderRadius: '2px', |
||||
|
userSelect: 'none' |
||||
|
} |
||||
|
}, |
||||
|
startDrag(e) { |
||||
|
if (!e.target.classList.contains('form-field')) return |
||||
|
|
||||
|
const fieldIndex = this.formFields.findIndex(field => |
||||
|
e.target.textContent.trim() === (field.content || '点击编辑').trim() |
||||
|
) |
||||
|
|
||||
|
if (fieldIndex === -1) return |
||||
|
|
||||
|
this.draggingFieldIndex = fieldIndex |
||||
|
this.lastX = e.clientX |
||||
|
this.lastY = e.clientY |
||||
|
this.selectField(fieldIndex) |
||||
|
|
||||
|
e.stopPropagation() |
||||
|
}, |
||||
|
onDrag(e) { |
||||
|
if (this.draggingFieldIndex === -1) return |
||||
|
|
||||
|
const dx = e.clientX - this.lastX |
||||
|
const dy = e.clientY - this.lastY |
||||
|
|
||||
|
this.formFields[this.draggingFieldIndex].x += dx |
||||
|
this.formFields[this.draggingFieldIndex].y += dy |
||||
|
|
||||
|
this.lastX = e.clientX |
||||
|
this.lastY = e.clientY |
||||
|
}, |
||||
|
stopDrag() { |
||||
|
this.draggingFieldIndex = -1 |
||||
|
}, |
||||
|
selectField(index) { |
||||
|
this.selectedFieldIndex = index |
||||
|
}, |
||||
|
editField(index) { |
||||
|
const field = this.formFields[index] |
||||
|
const content = prompt('编辑文本内容:', field.content || '') |
||||
|
if (content !== null) { |
||||
|
this.formFields[index].content = content |
||||
|
} |
||||
|
}, |
||||
|
saveTemplate() { |
||||
|
const template = { |
||||
|
formFields: this.formFields, |
||||
|
currentPage: this.currentPage |
||||
|
} |
||||
|
|
||||
|
const templateJson = JSON.stringify(template) |
||||
|
const blob = new Blob([templateJson], { type: 'application/json' }) |
||||
|
const url = URL.createObjectURL(blob) |
||||
|
|
||||
|
const a = document.createElement('a') |
||||
|
a.href = url |
||||
|
a.download = 'pdf_template.json' |
||||
|
a.click() |
||||
|
|
||||
|
URL.revokeObjectURL(url) |
||||
|
}, |
||||
|
loadTemplate() { |
||||
|
const fileInput = document.createElement('input') |
||||
|
fileInput.type = 'file' |
||||
|
fileInput.accept = '.json' |
||||
|
fileInput.onchange = (e) => { |
||||
|
const file = e.target.files[0] |
||||
|
if (!file) return |
||||
|
|
||||
|
const reader = new FileReader() |
||||
|
reader.onload = (event) => { |
||||
|
try { |
||||
|
const template = JSON.parse(event.target.result) |
||||
|
this.formFields = template.formFields || [] |
||||
|
this.currentPage = template.currentPage || 1 |
||||
|
this.renderPage() |
||||
|
} catch (error) { |
||||
|
console.error('加载模板失败:', error) |
||||
|
alert('加载模板失败，请确保文件格式正确') |
||||
|
} |
||||
|
} |
||||
|
reader.readAsText(file) |
||||
|
} |
||||
|
fileInput.click() |
||||
|
}, |
||||
|
async exportPdf() { |
||||
|
if (!this.pdfDoc) { |
||||
|
alert('请先加载PDF') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
// 创建一个新的jsPDF实例 |
||||
|
const Pdf = new jsPDF({ |
||||
|
orientation: 'portrait', |
||||
|
unit: 'px', |
||||
|
format: [this.$refs.pdfCanvas.width, this.$refs.pdfCanvas.height] |
||||
|
}) |
||||
|
|
||||
|
// 将原始PDF转换为图像 |
||||
|
const pdfImage = await this.convertCanvasToImage(this.$refs.pdfCanvas) |
||||
|
|
||||
|
// 添加原始PDF图像 |
||||
|
Pdf.addImage(pdfImage, 'PNG', 0, 0, this.$refs.pdfCanvas.width, this.$refs.pdfCanvas.height) |
||||
|
|
||||
|
// 添加表单字段 |
||||
|
this.formFields.forEach(field => { |
||||
|
Pdf.setFontSize(field.fontSize) |
||||
|
Pdf.setTextColor(field.color) |
||||
|
|
||||
|
// 根据文本对齐方式设置位置 |
||||
|
let x = field.x |
||||
|
if (field.textAlign === 'center') { |
||||
|
x += field.width / 2 |
||||
|
} else if (field.textAlign === 'right') { |
||||
|
x += field.width |
||||
|
} |
||||
|
|
||||
|
Pdf.text(field.content || '', x, field.y + field.fontSize) |
||||
|
}) |
||||
|
|
||||
|
// 保存PDF |
||||
|
Pdf.save('document_with_overlay.pdf') |
||||
|
} catch (error) { |
||||
|
console.error('导出PDF失败:', error) |
||||
|
alert('导出PDF失败，请重试') |
||||
|
} |
||||
|
}, |
||||
|
convertCanvasToImage(canvas) { |
||||
|
return new Promise((resolve) => { |
||||
|
const image = new Image() |
||||
|
image.onload = () => resolve(image) |
||||
|
image.src = canvas.toDataURL('image/png') |
||||
|
}) |
||||
|
}, |
||||
|
increaseScale() { |
||||
|
this.scale = Math.min(this.scale + 0.1, 3.0) |
||||
|
}, |
||||
|
decreaseScale() { |
||||
|
this.scale = Math.max(this.scale - 0.1, 0.5) |
||||
|
}, |
||||
|
zoomOnScroll(e) { |
||||
|
e.preventDefault() |
||||
|
|
||||
|
if (e.ctrlKey) { |
||||
|
const delta = e.deltaY > 0 ? -0.1 : 0.1 |
||||
|
this.scale = Math.max(0.5, Math.min(this.scale + delta, 3.0)) |
||||
|
} |
||||
|
}, |
||||
|
startCanvasDrag(e) { |
||||
|
if (e.target === this.$refs.pdfViewer) { |
||||
|
this.isDraggingCanvas = true |
||||
|
this.canvasDragStart.x = e.clientX - this.canvasOffset.x |
||||
|
this.canvasDragStart.y = e.clientY - this.canvasOffset.y |
||||
|
e.preventDefault() |
||||
|
} |
||||
|
}, |
||||
|
onCanvasDrag(e) { |
||||
|
if (this.isDraggingCanvas) { |
||||
|
this.canvasOffset.x = e.clientX - this.canvasDragStart.x |
||||
|
this.canvasOffset.y = e.clientY - this.canvasDragStart.y |
||||
|
} |
||||
|
}, |
||||
|
stopCanvasDrag() { |
||||
|
this.isDraggingCanvas = false |
||||
|
}, |
||||
|
deleteSelectedField() { |
||||
|
if (this.selectedFieldIndex !== -1) { |
||||
|
this.formFields.splice(this.selectedFieldIndex, 1) |
||||
|
this.selectedFieldIndex = -1 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pdf-overlay-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
font-family: Arial, sans-serif; |
||||
|
} |
||||
|
|
||||
|
.toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 10px; |
||||
|
background-color: #f8fafc; |
||||
|
border-bottom: 1px solid #e2e8f0; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 5px; |
||||
|
padding: 6px 12px; |
||||
|
background-color: #3b82f6; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
transition: background-color 0.2s; |
||||
|
} |
||||
|
|
||||
|
.btn:hover { |
||||
|
background-color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
.btn.danger { |
||||
|
background-color: #ef4444; |
||||
|
} |
||||
|
|
||||
|
.btn.danger:hover { |
||||
|
background-color: #dc2626; |
||||
|
} |
||||
|
|
||||
|
.scale-controls { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: auto; |
||||
|
gap: 5px; |
||||
|
} |
||||
|
|
||||
|
.pdf-container { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.pdf-viewer { |
||||
|
position: relative; |
||||
|
margin: 20px auto; |
||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
||||
|
} |
||||
|
|
||||
|
.overlay-container { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.form-field { |
||||
|
pointer-events: all; |
||||
|
user-select: none; |
||||
|
transition: border-color 0.2s; |
||||
|
} |
||||
|
|
||||
|
.properties-panel { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 10px; |
||||
|
width: 250px; |
||||
|
background-color: white; |
||||
|
border: 1px solid #e2e8f0; |
||||
|
border-radius: 6px; |
||||
|
padding: 10px; |
||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
||||
|
z-index: 3; |
||||
|
} |
||||
|
|
||||
|
.property-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.property-row label { |
||||
|
width: 80px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.property-row input { |
||||
|
flex: 1; |
||||
|
padding: 4px; |
||||
|
border: 1px solid #e2e8f0; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,293 @@ |
|||||
|
|
||||
|
// FormPreview.vue |
||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-loading="loading" class="cardWhite" element-loading-text="加载中..."> |
||||
|
<div class="topArea"> |
||||
|
<div class="backBox"> |
||||
|
<!-- <i class="el-icon-back" @click="goBack"></i> --> |
||||
|
</div> |
||||
|
|
||||
|
<el-alert :title="myTitle" type="warning" :closable="false" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="previewBox"> |
||||
|
<div v-for="pdf in pdfsArray" :key="pdf.id"> |
||||
|
<iframe |
||||
|
ref="myPrint" |
||||
|
:src="pdf.mypdf" |
||||
|
class="myPrint" |
||||
|
width="100%" |
||||
|
height="1500px" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import axios from 'axios' |
||||
|
import { getToken } from '@/utils/auth' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
myTitle: '', |
||||
|
|
||||
|
pdfsArray: [], |
||||
|
allData: [], |
||||
|
loading: false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.loading = true |
||||
|
this.getFile() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
goBack() { |
||||
|
this.$router.go(-1) |
||||
|
}, |
||||
|
|
||||
|
// 重置标题 |
||||
|
resetTitle() { |
||||
|
const arr = this.allData.map(k => { |
||||
|
return k.formName |
||||
|
}) |
||||
|
|
||||
|
const newArr = this.getArrCountInfo(arr) |
||||
|
// console.log("统计", arr, newArr); |
||||
|
let str = '' |
||||
|
for (var i of newArr) { |
||||
|
str = str + '《' + i.formName + '》' + i.count + '份;' |
||||
|
} |
||||
|
|
||||
|
if (str.charAt(str.length - 1) === ';') { |
||||
|
str = str.slice(0, str.length - 1) |
||||
|
} |
||||
|
|
||||
|
this.myTitle = '您当前预览的表单是' + str |
||||
|
}, |
||||
|
|
||||
|
// 数组元素去重 |
||||
|
uniqueArr(arr) { |
||||
|
var x = new Set(arr) |
||||
|
return [...x] |
||||
|
}, |
||||
|
|
||||
|
// 获取重复元素个数，输出info1 |
||||
|
getWordCnt(arr) { |
||||
|
return arr.reduce(function(prev, next) { |
||||
|
prev[next] = prev[next] + 1 || 1 |
||||
|
return prev |
||||
|
}, {}) |
||||
|
}, |
||||
|
|
||||
|
// 获取重复元素个数，输出info2 |
||||
|
getArrCountInfo(arr) { |
||||
|
var info2 = [] |
||||
|
const that = this |
||||
|
that.uniqueArr(arr).forEach(function(item) { |
||||
|
var countInfo = {} |
||||
|
countInfo.formName = item |
||||
|
|
||||
|
countInfo.count = that.getWordCnt(arr)[item] |
||||
|
info2.push(countInfo) |
||||
|
}) |
||||
|
return info2 |
||||
|
}, |
||||
|
|
||||
|
// 获取文件流 |
||||
|
async getFile() { |
||||
|
const arr = JSON.parse(sessionStorage.getItem('FormPreviewArray')) |
||||
|
|
||||
|
const pdfArr = [] |
||||
|
|
||||
|
for (var i = 0; i < arr.length; i++) { |
||||
|
const item = arr[i] |
||||
|
|
||||
|
axios({ |
||||
|
url: |
||||
|
`${window.g.API_URL}/resourceManage/export/v4/dlform/pdf/` + |
||||
|
item.id, |
||||
|
method: 'get', |
||||
|
params: { |
||||
|
// fileUrl: this.$route.query.fileUrl |
||||
|
}, |
||||
|
headers: { |
||||
|
Authorization: getToken() |
||||
|
}, |
||||
|
responseType: 'arraybuffer' |
||||
|
}) |
||||
|
.then(res => { |
||||
|
// console.log("文件流获取成功", res); |
||||
|
|
||||
|
pdfArr.push({ |
||||
|
formName: item.formName, |
||||
|
pdf: res.data |
||||
|
}) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.log('文件流获取失败', err) |
||||
|
this.$message.error('获取文件信息失败,请稍后重试', 6000) |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
// console.log("asd", i, arr.length); |
||||
|
if (i === arr.length) { |
||||
|
// console.log("文件流集合", pdfArr); |
||||
|
|
||||
|
this.pdfPreview(pdfArr) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
pdfPreview(binaryData) { |
||||
|
// data是一个ArrayBuffer格式，也是一个buffer流的数据 |
||||
|
// console.log("pdf流", binaryData); |
||||
|
const newArr = [] |
||||
|
|
||||
|
// 获取blob链接 |
||||
|
|
||||
|
for (var i = 0; i < binaryData.length; i++) { |
||||
|
const k = binaryData[i] |
||||
|
|
||||
|
const pdfUrl = window.URL.createObjectURL( |
||||
|
new Blob([k.pdf], { type: 'application/pdf' }) |
||||
|
) |
||||
|
// console.log("pdfUrl", pdfUrl); |
||||
|
|
||||
|
newArr.push({ |
||||
|
formName: k.formName, |
||||
|
mypdf: pdfUrl |
||||
|
}) |
||||
|
|
||||
|
if (i === binaryData.length - 1) { |
||||
|
// console.log("newArr---", newArr); |
||||
|
setTimeout(() => { |
||||
|
this.resetTitle() |
||||
|
}, 10) |
||||
|
this.pdfsArray = newArr |
||||
|
|
||||
|
this.allData = newArr |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app-container { |
||||
|
height: 100%; |
||||
|
|
||||
|
margin-top: -16px; |
||||
|
position: relative; |
||||
|
overflow-y: hidden; |
||||
|
z-index: 99999 !important; |
||||
|
|
||||
|
.cardWhite { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
// background: gray; |
||||
|
|
||||
|
.topArea { |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
margin-bottom: 20px; |
||||
|
// border: 1px solid red; |
||||
|
|
||||
|
width: 80%; |
||||
|
height: 40px; |
||||
|
z-index: 99999 !important; |
||||
|
// background: gray; |
||||
|
|
||||
|
position: fixed; |
||||
|
top: 4rem; |
||||
|
left: 15.625rem; |
||||
|
|
||||
|
.backBox { |
||||
|
margin-right: 4.5rem; |
||||
|
position: relative; |
||||
|
i { |
||||
|
cursor: pointer; |
||||
|
font-size: 20px; |
||||
|
color: #fff; |
||||
|
|
||||
|
position: absolute; |
||||
|
left: 20px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-button { |
||||
|
margin-right: 1rem; |
||||
|
} |
||||
|
|
||||
|
.titleBox { |
||||
|
text-align: center; |
||||
|
background: #fff; |
||||
|
color: #000000; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 50%; |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.previewBox { |
||||
|
// border: 1px solid blue; |
||||
|
|
||||
|
max-height: 1000px; |
||||
|
|
||||
|
overflow-y: auto; |
||||
|
|
||||
|
padding-top: 38px; |
||||
|
|
||||
|
::v-deep div { |
||||
|
margin-bottom: 20px; |
||||
|
.myPrint { |
||||
|
.vue-office-pdf-wrapper { |
||||
|
// font-size: 14px !important; |
||||
|
canvas { |
||||
|
// height: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//打印样式 |
||||
|
@media print { |
||||
|
body { |
||||
|
//设置一下边框，可以显示内容的范围，用于测试 |
||||
|
|
||||
|
//添加height:auto;才能打印多页，否则只能打印一页 |
||||
|
height: auto; |
||||
|
|
||||
|
// border: 1px solid red; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
header, |
||||
|
footer { |
||||
|
//隐藏页眉页脚，不然会多打印出首尾两页 |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
@page { |
||||
|
// overflow: visible; |
||||
|
// /* 纵向 */ |
||||
|
// size: portrait; |
||||
|
size: auto; |
||||
|
margin: 0mm 10mm; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,146 @@ |
|||||
|
<template> |
||||
|
<div class="main"> |
||||
|
<div style="padding: 20px"> |
||||
|
<a-form layout="inline" style="color: black; margin-bottom: 22px"> |
||||
|
<a-row :gutter="48"> |
||||
|
<a-col> |
||||
|
<a-form-item label="运单号" style="margin-right: 30px"> |
||||
|
<a-input v-model="queryParam.waybillNo" placeholder="请输入运单号" allow-clear size="large" /> |
||||
|
</a-form-item> |
||||
|
<sava-button class="button" @click="doSearch">查询</sava-button> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-form> |
||||
|
<a-table |
||||
|
ref="table" |
||||
|
:columns="columns" |
||||
|
:data-source="loadData" |
||||
|
:loading="loading" |
||||
|
:row-key="(record) => record.id" |
||||
|
:pagination="pagination" |
||||
|
style="margin-top: 10px" |
||||
|
@change="handleTableChange" |
||||
|
> |
||||
|
<span slot="action" slot-scope="text, record"> |
||||
|
<!-- <a @click="handleEdit(record)" style="color: #2b79c2">编辑</a> --> |
||||
|
<a style="color: #2b79c2; margin-left: 10px" @click="viewDetail(record)">查看</a> |
||||
|
<a style="color: #2b79c2; margin-left: 10px" @click="printBill(record)">打印</a> |
||||
|
</span> |
||||
|
</a-table> |
||||
|
|
||||
|
<a-modal :visible="previewVisibleForAll" :footer="null" :width="800" @cancel="handleCancelAll"> |
||||
|
<div style="overflow-y: auto; overflow-x: hidden"> |
||||
|
<a-button shape="round" icon="file-pdf" size="small" @click="handlePrint(printData)">打印</a-button> |
||||
|
<div id="printFrom"> |
||||
|
<pdf ref="pdf" :src="previewFileSrc" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// 两个库引入 |
||||
|
import pdf from 'vue-pdf' |
||||
|
import printJS from 'print-js' |
||||
|
// 接口 |
||||
|
// import { reqWayBillList, reqBillReport } from '@/api/DigitalWayBill/DigitalWayBill' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
pdf |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
queryParam: { |
||||
|
waybillNo: '' |
||||
|
}, |
||||
|
columns: [ |
||||
|
], |
||||
|
loadData: [], |
||||
|
loading: false, |
||||
|
pagination: {}, |
||||
|
mdl: null, |
||||
|
enterpriseInfo: [], |
||||
|
inspectorInfo: [], |
||||
|
fenceParam: {}, |
||||
|
pdfUrl: '', // 你的 PDF 文件 URL |
||||
|
progress: 0, |
||||
|
printData: { |
||||
|
printable: 'printFrom', |
||||
|
header: '', |
||||
|
ignore: ['no-print'] |
||||
|
}, |
||||
|
previewVisibleForAll: false, |
||||
|
pageTotal: null, |
||||
|
previewFileSrc: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.doSearch() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
doSearch() { |
||||
|
this.loading = true |
||||
|
reqWayBillList(this.queryParam).then((res) => { |
||||
|
console.log('way bill list', res) |
||||
|
this.loadData = res.records |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
handleTableChange(pagination) { |
||||
|
const pager = { ...this.pagination1 } |
||||
|
pager.current = pagination.current |
||||
|
this.pagination1 = pager |
||||
|
this.queryParam1.pageIndex = pagination.current |
||||
|
this.doSearch() |
||||
|
}, |
||||
|
|
||||
|
viewDetail(record) { |
||||
|
console.log('click view') |
||||
|
this.mdl = { ...record } |
||||
|
// 将获取的信息传递到新页面 |
||||
|
this.$router.push({ |
||||
|
path: '/bill/detail', |
||||
|
query: { |
||||
|
data: JSON.stringify(this.mdl) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
printBill(record) { |
||||
|
this.$message.success('生成文档需要一些时间, 请稍候...', 10) |
||||
|
reqBillReport(record.waybillNo) |
||||
|
.then((res) => { |
||||
|
console.log('pdf url', res) |
||||
|
this.previewFileSrc = res |
||||
|
this.previewVisibleForAll = true |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
this.$message.error(`获取文档失败: ${err}`) |
||||
|
}) |
||||
|
}, |
||||
|
handlePrint(params) { |
||||
|
printJS({ |
||||
|
printable: params.printable, // 'printFrom', // 标签元素id |
||||
|
type: params.type || 'html', |
||||
|
header: params.header, // '表单', |
||||
|
targetStyles: ['*'], |
||||
|
style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾 |
||||
|
ignoreElements: params.ignore || [], // ['no-print'] |
||||
|
properties: params.properties || null |
||||
|
}) |
||||
|
}, |
||||
|
printPdf() { |
||||
|
this.$refs.pdf.print() |
||||
|
// window.print() |
||||
|
}, |
||||
|
handleCancel() { |
||||
|
this.previewVisible = false |
||||
|
}, |
||||
|
handleCancelAll() { |
||||
|
this.previewVisibleForAll = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue