|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<div class="collect-header" style="display: flex; justify-content: space-between;"> |
|
|
|
<h4 class="is-file">四性检测详情</h4> |
|
|
|
<div class="preview-btn" style="margin-right: 20px;"> |
|
|
|
<el-button class="iconfont icon-xiazai" @click="downloadFile(fileCurrent)">导出</el-button> |
|
|
|
<el-button v-if="currentReportInfo.categoryLevel === 3" class="iconfont icon-xiazai" @click="doExport()">导出</el-button> |
|
|
|
<el-button v-print="printObj" class="iconfont icon-dayin">打印</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -26,10 +26,16 @@ |
|
|
|
:default-expand-all="true" |
|
|
|
:expand-on-click-node="false" |
|
|
|
@node-click="handleNodeClick" |
|
|
|
/> |
|
|
|
> |
|
|
|
<span slot-scope="{ node }" class="custom-tree-node"> |
|
|
|
<el-tooltip class="item" effect="dark" placement="top-start" :content="node.label"> |
|
|
|
<span>{{ node.label }}</span> |
|
|
|
</el-tooltip> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
<el-empty v-else :image-size="100" /> |
|
|
|
</div> |
|
|
|
<div id="printArea" ref="output" v-loading="loading" class="content-right"> |
|
|
|
<div id="printArea" ref="output" v-loading.body="loading" class="content-right"> |
|
|
|
<div class="report-header"> |
|
|
|
<h5>四性检测报告</h5> |
|
|
|
<p>报告编号：{{ currentReportInfo && currentReportInfo.reportNo }}</p> |
|
|
|
@ -79,10 +85,10 @@ |
|
|
|
|
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div v-if="currentReportInfo && currentReportInfo.categoryLevel === 3"> |
|
|
|
<div v-if="currentReportInfo && currentReportInfo.categoryLevel === 3" class="report-table-all"> |
|
|
|
<div class="report-checkItem"> |
|
|
|
<div class="report-title"><span>真实性检测</span></div> |
|
|
|
<el-table ref="table" class="fixed-table" :data="checkItemAllData.authenticity"> |
|
|
|
<el-table ref="table" class="fixed-table" :data="checkItemAllData.authenticity" style="width: 100%;"> |
|
|
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="secondaryClassId" label="分类" min-width="150" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="detectionCode" label="检测编号" min-width="100" /> |
|
|
|
@ -212,7 +218,8 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchFourCheckRecordTreeByReportId } from '@/api/collect/collect' |
|
|
|
import { downloadFile } from '@/utils/index' |
|
|
|
import qs from 'qs' |
|
|
|
import { exportFile } from '@/utils/index' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
// import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js |
|
|
|
// import printJS from 'print-js' |
|
|
|
@ -287,6 +294,7 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getFourCheckRecordTreeByReportId() |
|
|
|
// window.addEventListener('scroll', this.handleScroll, true) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleNodeClick(data) { |
|
|
|
@ -295,6 +303,13 @@ export default { |
|
|
|
this.getFourCheckRecordTreeByReportId() |
|
|
|
}, |
|
|
|
getFourCheckRecordTreeByReportId() { |
|
|
|
this.checkItemAllData = { |
|
|
|
authenticity: [], |
|
|
|
integrity: [], |
|
|
|
usability: [], |
|
|
|
safety: [] |
|
|
|
} |
|
|
|
this.goToTop() |
|
|
|
this.loading = true |
|
|
|
const params = { |
|
|
|
'reportId': this.currentReportInfo.id |
|
|
|
@ -352,7 +367,6 @@ export default { |
|
|
|
getArchivesSubet(archivesId) { |
|
|
|
if (this.currentReportInfo.categoryLevel !== 2) { |
|
|
|
const matchedSubset = this.reportData.subset.find(subsetItem => subsetItem.archivesId === archivesId) |
|
|
|
console.log('matchedSubset', matchedSubset) |
|
|
|
return matchedSubset || null |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -361,12 +375,29 @@ export default { |
|
|
|
this.$refs.tree.setCurrentKey(key) |
|
|
|
} |
|
|
|
}, |
|
|
|
downloadFile(row) { |
|
|
|
const url = this.baseApi + '/downloadFile' + row.file_path |
|
|
|
fetch(url).then(res => res.blob()).then(blob => { |
|
|
|
downloadFile(blob, row.file_name.split('.')[0], row.file_type) |
|
|
|
goToTop() { |
|
|
|
let scrolltop = document.getElementById('printArea').scrollTop |
|
|
|
// 定时器平滑滚动 |
|
|
|
const time = setInterval(() => { |
|
|
|
document.getElementById('printArea').scrollTop = scrolltop -= 40 |
|
|
|
if (scrolltop <= 0) { |
|
|
|
clearInterval(time) |
|
|
|
} |
|
|
|
}, 10) |
|
|
|
}, |
|
|
|
doExport(data) { |
|
|
|
this.$confirm('此操作将导出当前报告' + '<span>你是否还要继续？</span>', '提示', { |
|
|
|
confirmButtonText: '继续', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning', |
|
|
|
dangerouslyUseHTMLString: true |
|
|
|
}).then(() => { |
|
|
|
const params = { |
|
|
|
'reportId': this.currentReportInfo.id |
|
|
|
} |
|
|
|
exportFile(this.baseApi + '/api/collect/exportFourCheckReport?' + qs.stringify(params, { indices: false })) |
|
|
|
}).catch(() => { |
|
|
|
this.$message({ message: '下载文件失败!', type: 'error', offset: 8 }) |
|
|
|
console.log('取消') |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -393,9 +424,22 @@ export default { |
|
|
|
.el-popover[x-placement^=top] .popper__arrow::after{ |
|
|
|
border-top-color: #303133; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "~@/assets/styles/mixin.scss"; |
|
|
|
|
|
|
|
.el-tree{ |
|
|
|
.custom-tree-node span { |
|
|
|
width: 260px; |
|
|
|
display: block; |
|
|
|
font-weight: bold; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.preview-wrapper{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -458,60 +502,68 @@ export default { |
|
|
|
padding-bottom: 20px; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
.report-header{ |
|
|
|
padding: 10px 20px; |
|
|
|
height: 200px; |
|
|
|
background-color: #1890ff; |
|
|
|
color: #fff; |
|
|
|
h5{ |
|
|
|
font-size: 24px; |
|
|
|
line-height: 48px; |
|
|
|
} |
|
|
|
} |
|
|
|
.report-baseInfo{ |
|
|
|
margin: -100px 20px 0 20px; |
|
|
|
background-color: #fff; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
overflow: hidden; |
|
|
|
.baseInfo-txt{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
li{ |
|
|
|
width: 40%; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 28px; |
|
|
|
color:#606266; |
|
|
|
span{ |
|
|
|
color: #0c0e1e; |
|
|
|
} |
|
|
|
.row-state{ |
|
|
|
@include process-status-style; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.report-title{ |
|
|
|
margin-bottom: 20px; |
|
|
|
border-bottom: 1px solid #edeff3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.report-header{ |
|
|
|
padding: 10px 20px; |
|
|
|
height: 200px; |
|
|
|
background-color: #1890ff; |
|
|
|
color: #fff; |
|
|
|
h5{ |
|
|
|
font-size: 24px; |
|
|
|
line-height: 48px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.report-baseInfo{ |
|
|
|
margin: -100px 20px 0 20px; |
|
|
|
background-color: #fff; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
overflow: hidden; |
|
|
|
.baseInfo-txt{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
li{ |
|
|
|
width: 40%; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 28px; |
|
|
|
color:#606266; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
padding-bottom: 10px; |
|
|
|
font-weight: 600; |
|
|
|
border-bottom: 3px solid #0348f3; |
|
|
|
color: #0c0e1e; |
|
|
|
} |
|
|
|
.row-state{ |
|
|
|
@include process-status-style; |
|
|
|
} |
|
|
|
} |
|
|
|
.report-checkItem{ |
|
|
|
background-color: #fff; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: 20px 20px 0 20px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.report-checkItem{ |
|
|
|
background-color: #fff; |
|
|
|
padding: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: 20px 20px 0 20px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.report-title{ |
|
|
|
margin-bottom: 20px; |
|
|
|
border-bottom: 1px solid #edeff3; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
padding-bottom: 10px; |
|
|
|
font-weight: 600; |
|
|
|
border-bottom: 3px solid #0348f3; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.report-table-all{ |
|
|
|
padding-bottom: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-popover__reference{ |
|
|
|
max-width: 200px; |
|
|
|
white-space: nowrap; |
|
|
|
|
