368 lines
14 KiB
Vue
368 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>
|
|
<!-- 需要显示查看全部按钮 -->
|
|
<a-button v-else-if="showViewAllField.includes(formItem.dbFieldName) &&
|
|
(detailData[formItem.dbFieldName + '_dictText'] || detailData[formItem.dbFieldName])"
|
|
type="primary" ghost @click="viewAll('auth_dept')">
|
|
{{ $t('enterpriseStandardLibrary.standard.viewAll')}}
|
|
</a-button>
|
|
<span v-else-if="detailData[formItem.dbFieldName + '_dictText']">{{ detailData[formItem.dbFieldName + '_dictText'] }}</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>
|
|
<text-content-modal ref="textContentModal"></text-content-modal>
|
|
</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'
|
|
import TextContentModal from './module/TextContentModal'
|
|
|
|
// 支持预览的文件后缀
|
|
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: { TextContentModal, 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: '',
|
|
showViewAllField: ['auth_dept'] // 需要显示展示查看全部按钮的字段
|
|
}
|
|
},
|
|
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}?at=${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
|
|
}
|
|
// word用KKfile预览
|
|
if (canPreview && (fileSuffix === 'doc' || fileSuffix === 'docx')) {
|
|
kkFilePreview(fileFullUrl)
|
|
return
|
|
}
|
|
// 如果都不能预览就下载
|
|
downloadFile(`/sys/common/download/${file.id}`, file.fileName)
|
|
},
|
|
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)
|
|
},
|
|
// 查看全部
|
|
viewAll (fieldName) {
|
|
const data = this.detailData[fieldName + '_dictText'] || this.detailData[fieldName]
|
|
this.$refs.textContentModal.open(data)
|
|
}
|
|
}
|
|
}
|
|
</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>
|