433 lines
16 KiB
Vue
433 lines
16 KiB
Vue
<template>
|
|
<div class="detail-page">
|
|
<a-spin :spinning="loading">
|
|
<div class="detail-page-title">{{ pageTitle }}{{ $t('details') }}</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="handleOpenUpdateRecord" v-has="btnPermission.updateRecord">
|
|
<i class="iconfont icon-root-list" />
|
|
{{ $t('standardRegulationLibrary.updateRecord') }}
|
|
</a-button>
|
|
<!-- 提交问题-->
|
|
<a-button type="link" @click="submitQuestion" v-has="btnPermission.submitQuestion">
|
|
<a-icon type="database" />
|
|
{{ $t('standardRegulationLibrary.submitQuestion') }}
|
|
</a-button>
|
|
<!-- 分享-->
|
|
<a-button type="link" @click="handleShare" v-has="btnPermission.share">
|
|
<i class="iconfont icon-share-internal" />{{ $t('share') }}
|
|
</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>
|
|
<!--文件需要显示预览-->
|
|
<span v-if="!fileField.includes(formItem.dbFieldName)">
|
|
{{
|
|
detailData[needDictFieldList.includes(formItem.fieldShowType) ? formItem.dbFieldName + '_dictText' : formItem.dbFieldName] || global.emptyLine
|
|
}}
|
|
</span>
|
|
<div class="file-box" v-else>
|
|
<template v-if="detailData[formItem.dbFieldName + 'List'] && detailData[formItem.dbFieldName + 'List'].length > 0">
|
|
<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"
|
|
v-has="btnPermission.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>
|
|
<span v-else>{{ global.emptyLine }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 过程稿件特殊处理-->
|
|
<div class="detail-page-process-manuscript" v-if="part === '过程稿件' || part === 'Process Manuscript'">
|
|
<div class="detail-page-process-manuscript-item" v-for="formItem in form[part]" :key="formItem.id">
|
|
<div class="detail-page-process-manuscript-title">
|
|
<span>{{ formItem.dbFieldTxt }}</span>
|
|
<!-- 标准分解单-->
|
|
<a-button type="primary"
|
|
ghost
|
|
icon="file-text"
|
|
@click="previewStandardResolutionSheet(detailData[formItem.dbFieldName + '_standardSplit'])"
|
|
v-has="btnPermission.standardResolutionSheet"
|
|
:disabled="!detailData[formItem.dbFieldName + '_standardSplit']">
|
|
{{ $t('standardRegulationLibrary.standardResolutionSheet') }}
|
|
</a-button>
|
|
</div>
|
|
<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" v-has="btnPermission.download" @click="handleWatermarkedDownload(file)">
|
|
{{ $t('download') }}
|
|
</a-button>
|
|
<!-- 无水印下载-->
|
|
<a-button type="link" v-has="btnPermission.unwatermarkedDownload" @click="handleDownload(file)">
|
|
<i class="iconfont icon-water-drop-slash"></i>
|
|
{{ $t('unwatermarkedDownload') }}
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
|
|
<div id="images">
|
|
<div class="image" v-viewer="{movable: false}">
|
|
<img v-show="image" :src="imageUrl" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 更新记录-->
|
|
<update-record-modal ref="uploadRecordModal" />
|
|
<!-- 提交问题-->
|
|
<submit-question-modal ref="submitQuestionModal" />
|
|
<!-- 分享选人-->
|
|
<user-select-modal ref="userSelectModal" type="checkbox" @change="continueShare" />
|
|
<!-- 标准分解单-->
|
|
<standard-resolution-sheet-modal ref="standardResolutionSheetModal" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import '@assets/less/common.less'
|
|
import { FieldType, StandardSource } from '../../../enums/commonEnums'
|
|
import {
|
|
getDomesticStandardFormModal,
|
|
shareDomesticStandard,
|
|
getDomesticStandardDetail,
|
|
getOverseasStandardForm,
|
|
getOverseasStandardDocumentInfo,
|
|
shareOverseasStandard
|
|
} from '../../../api/standardRegulationLibraryApi'
|
|
import UpdateRecordModal from './modules/UpdateRecordModal.vue'
|
|
import SubmitQuestionModal from './modules/SubmitQuestionModal.vue'
|
|
import UserSelectModal from '../../../components/selection/UserSelectModal.vue'
|
|
import StandardResolutionSheetModal from './modules/StandardResolutionSheetModal.vue'
|
|
import { getFileInfo } from '../../../api/api.js'
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from '../../../store/mutation-types.js'
|
|
import { downloadFile, getFileAccessHttpUrl } from '../../../api/manage.js'
|
|
import { previewPdf } from '../../../utils/previewPdf.js'
|
|
import { Base64 } from 'js-base64'
|
|
import { kkFilePreview } from '../../../utils/kkFilePreview'
|
|
|
|
// 国内标准权限
|
|
const DomesticStandardPermission = {
|
|
updateRecord: 'domesticStandard:updateRecord', // 更新记录
|
|
submitQuestion: 'domesticStandard:submitQuestion', // 提交问题
|
|
share: 'domesticStandard:share', // 分享
|
|
standardResolutionSheet: 'domesticStandard:standardResolutionSheet', // 标准分解单
|
|
download: 'domesticStandard:download', // 下载
|
|
unwatermarkedDownload: 'domesticStandard:unwatermarkedDownload' // 无水印下载
|
|
}
|
|
|
|
// 海外标准权限
|
|
const OverseasStandardPermission = {
|
|
updateRecord: 'overseasStandard:updateRecord', // 更新记录
|
|
submitQuestion: 'overseasStandard:submitQuestion', // 提交问题
|
|
share: 'overseasStandard:share', // 分享
|
|
standardResolutionSheet: 'overseasStandard:standardResolutionSheet', // 标准分解单
|
|
download: 'overseasStandard:download', // 下载
|
|
unwatermarkedDownload: 'overseasStandard:unwatermarkedDownload' // 无水印下载
|
|
}
|
|
|
|
// 国内标准接口
|
|
const DomesticApi = {
|
|
getFormFunc: getDomesticStandardFormModal, // 获取字段
|
|
getDetailData: getDomesticStandardDetail, // 获取详情数据
|
|
share: shareDomesticStandard // 分享
|
|
}
|
|
|
|
// 海外标准接口
|
|
const OverseasApi = {
|
|
getFormFunc: getOverseasStandardForm, // 获取字段
|
|
getDetailData: getOverseasStandardDocumentInfo, // 获取详情数据
|
|
share: shareOverseasStandard // 分享
|
|
}
|
|
|
|
// 支持预览的文件后缀
|
|
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
|
|
const FILE_TYPE_PDF = 'pdf'
|
|
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
|
|
|
|
export default {
|
|
name: 'StandardDetailPage',
|
|
components: { UpdateRecordModal, SubmitQuestionModal, UserSelectModal, StandardResolutionSheetModal },
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
partList: [], // 页面模块列表
|
|
form: {}, // 页面字段
|
|
// 页面数据
|
|
detailData: {},
|
|
// 文件的字段
|
|
fileField: [],
|
|
// 需要数据字段翻译的属性类型
|
|
needDictFieldList: [FieldType.USER_SINGLE.value, FieldType.ORGAN_SINGLE.value, FieldType.ORGAN_MORE.value, FieldType.OPTION_SINGLE.value, FieldType.OPTION_MORE.value, FieldType.TREE.value, FieldType.TREE_SINGLE.value],
|
|
image: false,
|
|
imageUrl: null
|
|
}
|
|
},
|
|
computed: {
|
|
type () {
|
|
if (this.$route.path.indexOf('Domestic') !== -1) {
|
|
return StandardSource.DOMESTIC.value
|
|
}
|
|
if (this.$route.path.indexOf('Overseas') !== -1) {
|
|
return StandardSource.OVERSEAS.value
|
|
}
|
|
return ''
|
|
},
|
|
pageTitle () {
|
|
if (this.type === StandardSource.DOMESTIC.value) {
|
|
return this.$t('system.tag.domesticLaws')
|
|
}
|
|
if (this.type === StandardSource.OVERSEAS.value) {
|
|
return this.$t('system.tag.foreignStandards')
|
|
}
|
|
return ''
|
|
},
|
|
// 按钮权限
|
|
btnPermission () {
|
|
let permission = {}
|
|
switch (this.type) {
|
|
// 国内标准法规
|
|
case StandardSource.DOMESTIC.value:
|
|
permission = DomesticStandardPermission
|
|
break
|
|
// 海外
|
|
case StandardSource.OVERSEAS.value:
|
|
permission = OverseasStandardPermission
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
return permission
|
|
},
|
|
// 操作接口
|
|
operateApiFunc () {
|
|
let func = {}
|
|
switch (this.type) {
|
|
case StandardSource.DOMESTIC.value:
|
|
func = DomesticApi
|
|
break
|
|
case StandardSource.OVERSEAS.value:
|
|
func = OverseasApi
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
return func
|
|
}
|
|
},
|
|
async created () {
|
|
await this.initForm()
|
|
this.initDetailData()
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取页面字段
|
|
*/
|
|
initForm () {
|
|
return new Promise(resolve => {
|
|
this.operateApiFunc.getFormFunc({ type: 1 }).then(res => {
|
|
if (res.success) {
|
|
const data = res.result || {}
|
|
this.partList = Object.keys(data)
|
|
const formList = Object.values(data).reduce((acc, cur) => acc.concat(cur), [])
|
|
this.fileField = []
|
|
formList.forEach(item => {
|
|
if (item.fieldShowType === FieldType.FILE_UP.value) {
|
|
this.fileField.push(item.dbFieldName)
|
|
}
|
|
})
|
|
this.form = data
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
// 获取数据
|
|
initDetailData () {
|
|
this.loading = true
|
|
this.operateApiFunc.getDetailData({ id: this.$route.query.id, type: 1 }).then(res => {
|
|
if (res.success) {
|
|
this.detailData = Object.assign({}, res.result || {})
|
|
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)
|
|
}
|
|
})
|
|
console.log(this.detailData)
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
getFileInfo (fileId) {
|
|
return new Promise(resolve => {
|
|
let fileInfo
|
|
getFileInfo({ id: fileId }).then(res => {
|
|
if (res.success) {
|
|
fileInfo = res.result
|
|
}
|
|
}).finally(() => {
|
|
resolve(fileInfo)
|
|
})
|
|
})
|
|
},
|
|
/**
|
|
* 更新记录
|
|
*/
|
|
handleOpenUpdateRecord () {
|
|
this.$refs.uploadRecordModal.open(this.detailData.standard_number)
|
|
},
|
|
/**
|
|
* 提交问题
|
|
*/
|
|
submitQuestion () {
|
|
this.$refs.submitQuestionModal.open(this.detailData.standard_number, this.type)
|
|
},
|
|
/**
|
|
* 分享
|
|
*/
|
|
handleShare () {
|
|
this.$refs.userSelectModal.open()
|
|
},
|
|
/**
|
|
* 选择分享的人之后继续分享
|
|
* @param ids
|
|
*/
|
|
continueShare (ids) {
|
|
const params = {
|
|
standardId: this.$route.query.id, // 要分享的标准的id
|
|
standardNumber: this.detailData.standard_number, // 分享的标准编号
|
|
recipientId: ids // 分享给的用户的id
|
|
}
|
|
this.loading = true
|
|
this.operateApiFunc.share(params).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
/**
|
|
* 查看标准分解单
|
|
*/
|
|
previewStandardResolutionSheet (id) {
|
|
this.$refs.standardResolutionSheetModal.open(id)
|
|
},
|
|
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}`
|
|
console.log(fileFullUrl)
|
|
// 图片预览，使用自己添加的组件
|
|
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)
|
|
window.open(url)
|
|
return
|
|
}
|
|
// 其余可预览文件仍使用KKFile进行预览
|
|
kkFilePreview(fileFullUrl)
|
|
},
|
|
/**
|
|
* 无水印下载
|
|
* @param file
|
|
*/
|
|
handleDownload (file) {
|
|
// 下载文件
|
|
downloadFile(`/sys/common/download/${file.id}`, file.fileName)
|
|
},
|
|
/**
|
|
* 有水印下载
|
|
* @param file
|
|
*/
|
|
handleWatermarkedDownload (file) {
|
|
downloadFile(`/laws/standard/common/downloadWithWaterMark/${file.id}`, file.fileName)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.file-box {
|
|
flex: 1;
|
|
width: 0;
|
|
}
|
|
|
|
.file-btn > ::v-deep span {
|
|
display: inline;
|
|
color: @primary-color;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|