149 lines
5.1 KiB
Vue
149 lines
5.1 KiB
Vue
<template>
|
||
<el-dialog
|
||
:visible.sync="visible"
|
||
width="860px"
|
||
custom-class="project-report-detail"
|
||
:before-close="handleClose"
|
||
append-to-body
|
||
>
|
||
<template #title>
|
||
<div class="dialog-title flex items-center gap-2">
|
||
<i class="el-icon-document"></i>
|
||
<span>项目报工详情</span>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 打印 / 导出区域 -->
|
||
<div ref="printArea">
|
||
<el-scrollbar style="max-height: 70vh; padding-right: 8px">
|
||
<!-- 基本信息 -->
|
||
<el-card shadow="never" class="mb-6">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="经办人">{{ data.nickName }}</el-descriptions-item>
|
||
<el-descriptions-item label="部门">{{ data.deptName }}</el-descriptions-item>
|
||
<el-descriptions-item label="工作地点">{{ data.workPlace }}</el-descriptions-item>
|
||
<el-descriptions-item label="是否出差">
|
||
<el-tag :type="data.isTrip === 1 ? 'success' : 'info'" size="mini">
|
||
{{ data.isTrip === 1 ? '是' : '否' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 项目信息 -->
|
||
<el-card shadow="never" class="mb-6">
|
||
<template #header>
|
||
<div class="card-header">项目信息</div>
|
||
</template>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="项目名称" :span="2">{{ data.projectName }}</el-descriptions-item>
|
||
<el-descriptions-item label="项目编号">{{ data.projectNum }}</el-descriptions-item>
|
||
<el-descriptions-item label="项目代号">{{ data.projectCode }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 报工内容（富文本） -->
|
||
<el-card shadow="never" class="mb-6 rich-card">
|
||
<template #header>
|
||
<div class="card-header">报工内容</div>
|
||
</template>
|
||
<div class="rich-text" v-html="safeContent"></div>
|
||
</el-card>
|
||
|
||
<!-- 备注 -->
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="card-header">备注</div>
|
||
</template>
|
||
<p class="text-gray-700 whitespace-pre-line">{{ data.remark || '—' }}</p>
|
||
</el-card>
|
||
</el-scrollbar>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<template #footer>
|
||
<el-button @click="handlePrint" size="mini">打印</el-button>
|
||
<el-button @click="handleDownload" size="mini">下载 PDF</el-button>
|
||
<el-button @click="visible = false" type="primary" size="mini">关 闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
// import DOMPurify from 'dompurify'
|
||
export default {
|
||
name: 'ProjectReportDetail',
|
||
props: {
|
||
value: { type: Boolean, default: false }, // v-model
|
||
record: { type: Object, required: true }
|
||
},
|
||
data() {
|
||
return { visible: this.value }
|
||
},
|
||
computed: {
|
||
data() {
|
||
return this.record || {}
|
||
},
|
||
safeContent() {
|
||
return this.data.content || ''
|
||
// return DOMPurify.sanitize(this.data.content || '')
|
||
}
|
||
},
|
||
watch: {
|
||
value(v) { this.visible = v },
|
||
visible(v) { this.$emit('input', v) }
|
||
},
|
||
methods: {
|
||
handleClose() { this.visible = false },
|
||
/** 直接打印弹窗内容 */
|
||
handlePrint() {
|
||
const printContent = this.$refs.printArea
|
||
const printWindow = window.open('', '', 'width=1000,height=800')
|
||
printWindow.document.write('<html><head><title>打印</title>')
|
||
printWindow.document.write('<style>@page{size:auto;margin:20mm;}body{font-family:Arial;} .el-scrollbar__wrap{overflow:visible !important;}</style>')
|
||
printWindow.document.write('</head><body>')
|
||
printWindow.document.write(printContent.innerHTML)
|
||
printWindow.document.write('</body></html>')
|
||
printWindow.document.close()
|
||
printWindow.focus()
|
||
printWindow.print()
|
||
printWindow.close()
|
||
},
|
||
/** 下载为 PDF：动态引入 html2pdf.js */
|
||
async handleDownload() {
|
||
// const { default: html2pdf } = await import(/* webpackChunkName: "html2pdf" */ 'html2pdf.js')
|
||
// const opt = {
|
||
// margin: 10,
|
||
// filename: `项目报工详情_${this.data.reportId || Date.now()}.pdf`,
|
||
// html2canvas: { scale: 2, useCORS: true },
|
||
// jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
||
// }
|
||
// html2pdf().from(this.$refs.printArea).set(opt).save()
|
||
this.$message.warning('下载功能暂未实现，敬请期待！')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.project-report-detail >>> .el-dialog__header { padding-bottom: 0; }
|
||
.dialog-title { font-size: 18px; font-weight: 600; }
|
||
.card-header { font-weight: 600; font-size: 14px; color: #303133; }
|
||
.rich-card { padding-bottom: 0 !important; }
|
||
.rich-text {
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
background-color: #ffffff;
|
||
line-height: 1.6;
|
||
}
|
||
.rich-text h1,
|
||
.rich-text h2,
|
||
.rich-text h3,
|
||
.rich-text h4 { margin: 0.8em 0 0.5em; font-weight: 600; }
|
||
.rich-text p { margin: 0.5em 0; }
|
||
.rich-text ul,
|
||
.rich-text ol { padding-left: 1.4em; margin: 0.5em 0; }
|
||
.mb-6 { margin-bottom: 24px; }
|
||
</style>
|