351 lines
14 KiB
Vue
351 lines
14 KiB
Vue
<template>
|
||
<div class="detail-page">
|
||
<div class="detail-page-title">{{ $t('enterpriseStandardLibrary.standard.detailTitle') }}</div>
|
||
<div class="detail-page-part" v-for="(part, index) in partList" :key="part + index">
|
||
<div class="detail-page-part-title">
|
||
<span>{{ part }}</span>
|
||
<div class="detail-page-part-title-operate-box" v-if="index === 0">
|
||
<!-- 企标评价-->
|
||
<a-button type="link" @click="handleEvaluate" v-has="'enterpriseStandard:detail:evaluate'">
|
||
<i class="iconfont icon-edit-1" />
|
||
{{ $t('enterpriseStandardLibrary.standard.evaluate') }}
|
||
</a-button>
|
||
<!-- 更新记录-->
|
||
<a-button type="link" @click="handleOpenUpdateRecord" v-has="'enterpriseStandard:detail:updateLog'">
|
||
<i class="iconfont icon-root-list" />
|
||
{{ $t('enterpriseStandardLibrary.standard.updateRecord') }}
|
||
</a-button>
|
||
<!-- 提交问题-->
|
||
<a-button type="link" @click="submitQuestion" v-has="'enterpriseStandard:detail:submitQuestion'">
|
||
<i class="iconfont icon-chat" />
|
||
{{ $t('enterpriseStandardLibrary.standard.submitQuestion') }}
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
<div class="detail-page-part-form" v-if="part !== '过程稿件' && part !== 'Process Manuscript'">
|
||
<div class="detail-page-part-form-item" v-for="formItem in form[part]" :key="formItem.id">
|
||
<label>{{ formItem.dbFieldTxt }}</label>
|
||
<div v-if="fileField.includes(formItem.dbFieldName)" class="file-box">
|
||
<template v-if="detailData[formItem.dbFieldName]">
|
||
<div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName + 'List']" :key="file.id">
|
||
<div class="detail-page-process-manuscript-file-info">
|
||
<a-icon type="link" />
|
||
<div class="detail-page-process-manuscript-file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
|
||
</div>
|
||
<!-- 下载-->
|
||
<a-button type="link" icon="download" class="file-btn" @click="handleDownload(file)">
|
||
{{ $t('download') }}
|
||
</a-button>
|
||
<!-- 无水印下载-->
|
||
<!--<a-button type="link" v-has="btnPermission.unwatermarkedDownload" class="file-btn">-->
|
||
<!-- <i class="iconfont icon-water-drop-slash"></i>-->
|
||
<!-- {{ $t('unwatermarkedDownload') }}-->
|
||
<!--</a-button>-->
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<span>—</span>
|
||
</template>
|
||
</div>
|
||
<span v-else-if="detailData[formItem.dbFieldName + '_dictText']">{{ detailData[formItem.dbFieldName + '_dictText'] }}</span>
|
||
<!-- 标准适用范围，有标签需要编译 -->
|
||
<span v-else-if="detailData[formItem.dbFieldName] && formItem.dbFieldName === 'standard_scope'" v-html="detailData[formItem.dbFieldName]"></span>
|
||
<span v-else-if="detailData[formItem.dbFieldName]">{{ detailData[formItem.dbFieldName] }}</span>
|
||
<span v-else>—</span>
|
||
</div>
|
||
</div>
|
||
<!-- 过程稿件特殊处理-->
|
||
<div class="detail-page-process-manuscript" v-if="part === '过程稿件' || part === 'Process Manuscript'">
|
||
<div class="detail-page-process-manuscript-item" v-for="(formItem, formIndex) in form[part]" :key="formItem.id">
|
||
<div class="detail-page-process-manuscript-title">
|
||
<span>{{ formItem.dbFieldTxt }}</span>
|
||
<a-button v-if="formIndex === 0"
|
||
type="primary"
|
||
ghost
|
||
icon="file-text"
|
||
v-has="'enterpriseStandard:detail:standardResolutionSheet'"
|
||
@click="previewStandardResolutionSheet(detailData[formItem.dbFieldName + '_standardSplit'])"
|
||
:disabled="!detailData[formItem.dbFieldName + '_standardSplit']">
|
||
{{ $t('enterpriseStandardLibrary.standard.standardResolutionSheet') }}
|
||
</a-button>
|
||
</div>
|
||
<template v-if="detailData[formItem.dbFieldName]">
|
||
<div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName + 'List']" :key="file.id">
|
||
<div class="detail-page-process-manuscript-file-info">
|
||
<a-icon type="link" />
|
||
<div class="detail-page-process-manuscript-file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
|
||
</div>
|
||
<div class="detail-page-process-manuscript-file-operate">
|
||
<!-- 下载-->
|
||
<a-button type="link" icon="download" @click="handleDownload(file)" v-has="'enterpriseStandard:detail:download'">
|
||
{{ $t('download') }}
|
||
</a-button>
|
||
<!-- 无水印下载-->
|
||
<a-button type="link" @click="downloadDraftNoWater(file)" v-has="'enterpriseStandard:detail:noWaterDownload'">
|
||
<i class="iconfont icon-water-drop-slash"></i>
|
||
{{ $t('unwatermarkedDownload') }}
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 稽查内容 -->
|
||
<div class="detail-page-part">
|
||
<div class="detail-page-part-title">
|
||
<span>稽查内容</span>
|
||
</div>
|
||
<div class="detail-page-part-table">
|
||
<a-table
|
||
:scroll="{x: 500}"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="false"
|
||
bordered
|
||
rowKey="id">
|
||
|
||
<template slot="text" slot-scope="text">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||
</a-tooltip>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
<!-- 企标评价 -->
|
||
<enterprise-standard-evaluate-modal ref="enterpriseStandardEvaluateModal"></enterprise-standard-evaluate-modal>
|
||
<!-- 更新记录弹框 -->
|
||
<update-record-modal ref="updateRecordModal"></update-record-modal>
|
||
<!-- 提交问题弹框 -->
|
||
<submit-question-modal ref="submitQuestionModal"></submit-question-modal>
|
||
<!-- 标准分解单-->
|
||
<standard-resolution-sheet-modal ref="standardResolutionSheetModal" />
|
||
<!-- 图片预览容器 -->
|
||
<div id="images">
|
||
<div class="image" v-viewer="{movable: false}">
|
||
<img v-show="image" :src="imageUrl">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import '@assets/less/common.less'
|
||
import { FieldType } from '@/enums/commonEnums'
|
||
import { downloadFile, getFileAccessHttpUrl } from '@/api/manage'
|
||
import { getEnterpriseStandardInfoById, getEnterpriseStandardAddForm } from '@/api/enterpriseStandardLibraryApi'
|
||
import UpdateRecordModal from './module/UpdateRecordModal'
|
||
import SubmitQuestionModal from './module/SubmitQuestionModal'
|
||
import EnterpriseStandardEvaluateModal from './module/EnterpriseStandardEvaluateModal'
|
||
import Vue from 'vue'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import { previewPdf } from '@/utils/previewPdf'
|
||
import { getFileInfo } from '../../../../api/api'
|
||
import UserSelectModal from '@comp/selection/UserSelectModal'
|
||
import StandardResolutionSheetModal from '@views/standardRegulationLibrary/commonPage/modules/StandardResolutionSheetModal'
|
||
import { kkFilePreview } from '@/utils/kkFilePreview'
|
||
|
||
// 支持预览的文件后缀
|
||
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
|
||
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
|
||
const FILE_TYPE_PDF = 'pdf'
|
||
|
||
export default {
|
||
name: 'EnterpriseStandardDetail',
|
||
components: { StandardResolutionSheetModal, UserSelectModal, EnterpriseStandardEvaluateModal, SubmitQuestionModal, UpdateRecordModal },
|
||
data () {
|
||
return {
|
||
FieldType,
|
||
partList: [], // 页面模块列表
|
||
form: {}, // 页面字段
|
||
detailData: {}, // 页面数据
|
||
fileField: ['comp_illustration', 'associated_file', 'publish_of_original', 'modification_list', 'draft_for_review', 'draft_for_comment', 'draft'], // 是文件的字段
|
||
columns: [
|
||
{
|
||
title: this.$t('serialNumber'),
|
||
dataIndex: '',
|
||
key: 'rowIndex',
|
||
width: 100,
|
||
align: 'center',
|
||
customRender: function (t, r, index) {
|
||
return parseInt(index) + 1
|
||
}
|
||
},
|
||
// 章节条款
|
||
{
|
||
title: this.$t('enterpriseStandardLibrary.standard.subjectToClause'),
|
||
align: 'center',
|
||
width: 200,
|
||
dataIndex: 'clause',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
// 标准内容或要求
|
||
{
|
||
title: this.$t('enterpriseStandardLibrary.standard.standardContentOrRequirements'),
|
||
align: 'center',
|
||
dataIndex: 'requirement',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
// 整改部门
|
||
{
|
||
title: this.$t('enterpriseStandardLibrary.standard.rectificationDepartment'),
|
||
align: 'center',
|
||
dataIndex: 'rectificationDepartment_dictText',
|
||
width: 400,
|
||
scopedSlots: { customRender: 'text' }
|
||
}
|
||
], // 稽查内容表格列参数
|
||
dataSource: [], // 稽查内容数据
|
||
image: false,
|
||
imageUrl: ''
|
||
}
|
||
},
|
||
created () {
|
||
this.initForm()
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
initForm () {
|
||
const params = {}
|
||
params.type = 1
|
||
getEnterpriseStandardAddForm(params).then(res => {
|
||
if (res.success) {
|
||
const data = res.result || {}
|
||
this.partList = Object.keys(data)
|
||
this.form = data
|
||
} else {
|
||
this.$message.warn(res.message)
|
||
}
|
||
})
|
||
},
|
||
initData () {
|
||
const params = {}
|
||
if (this.$route.query.id) {
|
||
params.id = this.$route.query.id
|
||
} else if (this.$route.query.standardNumber) {
|
||
params.standardNumber = this.$route.query.standardNumber
|
||
}
|
||
params.type = 1
|
||
getEnterpriseStandardInfoById(params).then(res => {
|
||
if (res.success) {
|
||
this.detailData = res.result
|
||
this.dataSource = this.detailData.checkList
|
||
this.fileField.forEach(item => {
|
||
if (this.detailData[item]) {
|
||
const fileList = this.detailData[item].split(',')
|
||
const fileInfoList = []
|
||
fileList.forEach(async id => {
|
||
const fileInfo = await this.getFileInfo(id)
|
||
if (fileInfo) {
|
||
fileInfoList.push(fileInfo)
|
||
}
|
||
})
|
||
this.$set(this.detailData, item + 'List', fileInfoList)
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
})
|
||
},
|
||
getFileInfo (fileId) {
|
||
return new Promise(resolve => {
|
||
let fileInfo
|
||
getFileInfo({ id: fileId }).then(res => {
|
||
if (res.success) {
|
||
fileInfo = res.result
|
||
}
|
||
}).finally(() => {
|
||
resolve(fileInfo)
|
||
})
|
||
})
|
||
},
|
||
handlePreview (file) {
|
||
if (!file || !file.url) {
|
||
return
|
||
}
|
||
// 截取文件后缀名
|
||
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
|
||
const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt)
|
||
// 判断是否为可预览格式的文件
|
||
if (!canPreview) {
|
||
this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
|
||
this.handleDownload(file)
|
||
})
|
||
return
|
||
}
|
||
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
|
||
// 图片预览，使用自己添加的组件
|
||
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
|
||
this.imageUrl = getFileAccessHttpUrl(file.id)
|
||
// 获取viewer实例
|
||
const viewer = this.$el.querySelector('.image').$viewer
|
||
// 调用show方法进行显示预览图
|
||
viewer.show()
|
||
// this.$refs.imagePreviewModal.open(file)
|
||
return
|
||
}
|
||
// pdf预览
|
||
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
|
||
const url = previewPdf(file.id)
|
||
console.log(url)
|
||
window.open(url)
|
||
return
|
||
}
|
||
// 其余可预览文件仍使用KKFile进行预览
|
||
kkFilePreview(fileFullUrl)
|
||
},
|
||
handleDownload (file) {
|
||
// 下载文件
|
||
downloadFile(`/sys/common/download/${file.id}`, file.fileName)
|
||
},
|
||
// 过程稿件里的无水印下载
|
||
downloadDraftNoWater (file) {
|
||
downloadFile(`/sys/common/downloadWithoutWaterMark/${file.id}`, file.fileName)
|
||
},
|
||
// 企标评价
|
||
handleEvaluate () {
|
||
this.$refs.enterpriseStandardEvaluateModal.open(this.detailData.id)
|
||
},
|
||
// 更新记录
|
||
handleOpenUpdateRecord () {
|
||
this.$refs.updateRecordModal.open(this.detailData.standard_number)
|
||
},
|
||
// 提交问题
|
||
submitQuestion () {
|
||
this.$refs.submitQuestionModal.open(this.detailData.standard_number)
|
||
},
|
||
/**
|
||
* 查看标准分解单
|
||
*/
|
||
previewStandardResolutionSheet (id) {
|
||
this.$refs.standardResolutionSheetModal.open(id)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// 单独设置此页面一行三个的label
|
||
.detail-page-part-form-item label {
|
||
width: 8.5em;
|
||
}
|
||
|
||
.detail-page-part-table {
|
||
margin: 20px;
|
||
}
|
||
|
||
.file-box {
|
||
flex: 1;
|
||
width: 0;
|
||
}
|
||
|
||
.file-btn > ::v-deep span {
|
||
display: inline;
|
||
color: @primary-color;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|