[update] 修改企标计划详情和企标详情文件列表,企标新增抽屉样式

This commit is contained in:
lideqin
2023-09-21 14:24:16 +08:00
parent dedd11875b
commit 4beca1ec6f
3 changed files with 160 additions and 85 deletions
@@ -1,6 +1,6 @@
<template>
<div class="detail-page">
<div class="detail-page-title">{{ pageTitle }}{{ $t('enterpriseStandardLibrary.plan.detailTitle') }}</div>
<div class="detail-page-title">{{ $t('enterpriseStandardLibrary.plan.detailTitle') }}</div>
<div class="detail-page-part">
<div class="detail-page-part-title">
<span>{{ $t('enterpriseStandardLibrary.plan.basicInformation') }}</span>
@@ -9,72 +9,72 @@
<!-- 原企标编号 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.oldEnterpriseStandardNum') }}</label>
<span>{{ form.originEnStandardNo }}</span>
<span>{{ form.originEnStandardNo || global.emptyLine }}</span>
</div>
<!-- 新企标编号 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.newEnterpriseStandardNum') }}</label>
<span>{{ form.newEnStandardNo }}</span>
<span>{{ form.newEnStandardNo || global.emptyLine }}</span>
</div>
<!-- 原企标名称 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.oldEnterpriseStandardName') }}</label>
<span>{{ form.originEnStandardName }}</span>
<span>{{ form.originEnStandardName || global.emptyLine }}</span>
</div>
<!-- 新企标名称 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.newEnterpriseStandardName') }}</label>
<span>{{ form.newEnStandardName }}</span>
<span>{{ form.newEnStandardName || global.emptyLine }}</span>
</div>
<!-- 企标英文名称 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.englishNameOfEnterpriseStandard') }}</label>
<span>{{ form.enStandardEnglishName }}</span>
<span>{{ form.enStandardEnglishName || global.emptyLine }}</span>
</div>
<!-- 企标等级分类 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.gradeClassification') }}</label>
<span>{{ form.enStandardClassification }}</span>
<span>{{ form.enStandardClassification || global.emptyLine }}</span>
</div>
<!-- 项目状态 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.projectStatus') }}</label>
<span>{{ form.projectStatus_dictText }}</span>
<span>{{ form.projectStatus_dictText || global.emptyLine }}</span>
</div>
<!-- 项目类型 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.projectType') }}</label>
<span>{{ form.projectType_dictText }}</span>
<span>{{ form.projectType_dictText || global.emptyLine }}</span>
</div>
<!-- 草稿计划完成日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.draftPlanFinishDate') }}</label>
<span>{{ form.draftPlannedCompleteDate }}</span>
<span>{{ form.draftPlannedCompleteDate || global.emptyLine }}</span>
</div>
<!-- 征求意见稿计划完成日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.exposureDraftPlanFinishDate') }}</label>
<span>{{ form.solicitationDraftPlanCompleteDate }}</span>
<span>{{ form.solicitationDraftPlanCompleteDate || global.emptyLine }}</span>
</div>
<!-- 计划报批日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.planSubmissionDate') }}</label>
<span>{{ form.planApprovalDate }}</span>
<span>{{ form.planApprovalDate || global.emptyLine }}</span>
</div>
<!-- 草稿完成日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.draftFinishDate') }}</label>
<span>{{ form.draftCompletionDate }}</span>
<span>{{ form.draftCompletionDate || global.emptyLine }}</span>
</div>
<!-- 征求意见稿完成日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.exposureDraftFinishDate') }}</label>
<span>{{ form.solicitationDraftCompletionDate }}</span>
<span>{{ form.solicitationDraftCompletionDate || global.emptyLine }}</span>
</div>
<!-- 报批日期 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.submissionDate') }}</label>
<span>{{ form.approvalDate }}</span>
<span>{{ form.approvalDate || global.emptyLine }}</span>
</div>
</div>
</div>
@@ -86,57 +86,60 @@
<!-- 主起草人 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.principalDrafter') }}</label>
<span>{{ form.mainDraftingUser }}</span>
<span>{{ form.mainDraftingUser || global.emptyLine }}</span>
</div>
<!-- 主起草单位 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.mainDraftingUnit') }}</label>
<span>{{ form.mainDraftingUnit }}</span>
<span>{{ form.mainDraftingUnit || global.emptyLine }}</span>
</div>
<!-- 企标体系 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.enterpriseStandardSystem') }}</label>
<span>{{ form.enStandardSystem }}</span>
<span>{{ form.enStandardSystem || global.emptyLine }}</span>
</div>
<!-- 零部件名称 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.partName') }}</label>
<span>{{ form.componentName }}</span>
<span>{{ form.componentName || global.emptyLine }}</span>
</div>
<!-- 标准适用范围 -->
<div class="detail-page-part-form-item">
<label>{{ $t('enterpriseStandardLibrary.plan.scopeOfApplication') }}</label>
<span>{{ form.enStandardEnglishName }}</span>
<span>{{ form.enStandardEnglishName || global.emptyLine }}</span>
</div>
<!-- 编制说明 -->
<div class="detail-page-part-form-item-large-file">
<label>{{ $t('enterpriseStandardLibrary.plan.compilationIllustration') }}</label>
<a @click="previewCompilation">{{ form.compilationFileName }}</a>
<template v-if="form.compilationFileName">
<a v-for="item in form.compilationDescriptionList" :key="item.id" @click="handlePreview(item)">{{ item.fileName }}</a>
</template>
<span v-else>{{ global.emptyLine }}</span>
</div>
<!-- 立项背景立项依据 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('enterpriseStandardLibrary.plan.projectBackground') }}</label>
<span>{{ form.projectBackground }}</span>
<span>{{ form.projectBackground || global.emptyLine }}</span>
</div>
<!-- 国际国家及行业同类标准分析 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('enterpriseStandardLibrary.plan.similarNaStandardsAnalysis') }}</label>
<span>{{ form.similarNaStandardsAnalysis }}</span>
<span>{{ form.similarNaStandardsAnalysis || global.emptyLine }}</span>
</div>
<!-- 企业同类标准对比分析 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('enterpriseStandardLibrary.plan.similarEnStandardsAnalysis') }}</label>
<span>{{ form.similarEnStandardsAnalysis }}</span>
<span>{{ form.similarEnStandardsAnalysis || global.emptyLine }}</span>
</div>
<!-- 立项标准的领先性与必要性 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('enterpriseStandardLibrary.plan.standardLeadingNecessity') }}</label>
<span>{{ form.standardLeadingNecessity }}</span>
<span>{{ form.standardLeadingNecessity || global.emptyLine }}</span>
</div>
<!-- 立项目的及预期效果等 -->
<div class="detail-page-part-form-item-large">
<label>{{ $t('enterpriseStandardLibrary.plan.projectExpectedEffects') }}</label>
<span>{{ form.projectExpectedEffects }}</span>
<span>{{ form.projectExpectedEffects || global.emptyLine }}</span>
</div>
</div>
</div>
@@ -155,6 +158,7 @@ import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { previewPdf } from '@/utils/previewPdf'
import { getFileAccessHttpUrl } from '@/api/manage'
import { getFileInfo } from '../../../../api/api'
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'
@@ -166,7 +170,8 @@ export default {
return {
image: false,
imageUrl: null,
form: {} // 页面字段
form: {}, // 页面字段
fileField: ['compilationDescription'] // 是文件的字段
}
},
created () {
@@ -181,19 +186,44 @@ export default {
if (res.success) {
const data = res.result || {}
this.form = data
this.fileField.forEach(item => {
if (this.form[item]) {
const fileList = this.form[item].split(',')
const fileInfoList = []
fileList.forEach(async id => {
const fileInfo = await this.getFileInfo(id)
if (fileInfo) {
fileInfoList.push(fileInfo)
}
})
this.$set(this.form, item + 'List', fileInfoList)
}
})
console.log(this.form)
} else {
this.$message.warn(res.message)
}
})
},
// 预览编制说明
previewCompilation () {
handlePreview (file) {
if (!file || !file.url) {
return
}
// 截取文件后缀名
const fileSuffix = this.form.compilationFileName ? this.form.compilationFileName.split('.')[this.form.compilationFileName.split('.').length - 1] : ''
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${this.form.compilationDescription}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${this.form.compilationFileName}`
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
// 判断是否为可预览格式的文件
if (!canPreview) {
this.$message.loading('该文件类型不支持预览,正在为您准备下载...').then(() => {
this.handleDownload(file)
})
return
}
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
// 图片预览,使用自己添加的组件
if (FILE_TYPE_IMGS.includes(fileSuffix)) {
this.imageUrl = getFileAccessHttpUrl(this.form.compilationDescription)
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
this.imageUrl = getFileAccessHttpUrl(file.id)
// 获取viewer实例
const viewer = this.$el.querySelector('.image').$viewer
// 调用show方法进行显示预览图
@@ -202,14 +232,26 @@ export default {
return
}
// pdf预览
if (FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(this.form.compilationDescription)
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(file.response.result.id)
window.open(url)
return
}
// 其余可预览文件仍使用KKFile进行预览
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
window.open(url)
},
getFileInfo (fileId) {
return new Promise(resolve => {
let fileInfo
getFileInfo({ id: fileId }).then(res => {
if (res.success) {
fileInfo = res.result
}
}).finally(() => {
resolve(fileInfo)
})
})
}
}
}
@@ -6,17 +6,17 @@
<span>{{ part }}</span>
<div class="detail-page-part-title-operate-box" v-if="index === 0">
<!-- 企标评价-->
<a-button type="link" @click="handleEvaluate">
<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">
<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">
<a-button type="link" @click="submitQuestion" v-has="'enterpriseStandard:detail:submitQuestion'">
<i class="iconfont icon-chat" />
{{ $t('enterpriseStandardLibrary.standard.submitQuestion') }}
</a-button>
@@ -25,22 +25,15 @@
<div class="detail-page-part-form" v-if="index !== 3">
<div class="detail-page-part-form-item" v-for="formItem in form[part]" :key="formItem.id">
<label>{{ formItem.dbFieldTxt }}</label>
<div v-if="formItem.fieldShowType === FieldType.FILE_UP.value" class="file-box">
<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="(fileId, index) in detailData[formItem.dbFieldName].split(',')" :key="fileId">
<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(fileId, detailData[formItem.dbFieldName + '_dictText'].split(',')[index])">
{{ detailData[formItem.dbFieldName + '_dictText'].split(',')[index] }}
</div>
<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(fileId, detailData[formItem.dbFieldName + '_dictText'].split(',')[index])">
<!-- 下载-->
<a-button type="link" icon="download" class="file-btn" @click="handleDownload(file)">
{{ $t('download') }}
</a-button>
<!-- 无水印下载-->
@@ -66,25 +59,23 @@
<span>{{ formItem.dbFieldTxt }}</span>
<a-button v-if="formIndex === 0" type="primary" ghost icon="file-text">{{ $t('enterpriseStandardLibrary.standard.standardResolutionSheet') }}</a-button>
</div>
<div class="detail-page-process-manuscript-file" v-for="(fileId, index) in detailData[formItem.dbFieldName].split(',')" :key="fileId">
<div class="detail-page-process-manuscript-file-info">
<a-icon type="link" />
<div class="detail-page-process-manuscript-file-name">{{ detailData[formItem.dbFieldName + '_dictText'].split(',')[index] }}</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)">{{ $t('download') }}</a-button>
<!-- 无水印下载-->
<a-button type="link">
<i class="iconfont icon-water-drop-slash"></i>
{{ $t('unwatermarkedDownload') }}
</a-button>
</div>
</div>
<div class="detail-page-process-manuscript-file-operate">
<a-button type="link"
icon="download"
@click="downloadDraft(fileId, detailData[formItem.dbFieldName + '_dictText'].split(',')[index])">
{{ $t('download') }}
</a-button>
<a-button
type="link"
@click="downloadDraftNoWater(fileId, detailData[formItem.dbFieldName + '_dictText'].split(',')[index])">
<i class="iconfont icon-water-drop-slash"></i>
{{ $t('unwatermarkedDownload') }}
</a-button>
</div>
</div>
</template>
</div>
</div>
</div>
@@ -117,6 +108,12 @@
<update-record-modal ref="updateRecordModal"></update-record-modal>
<!-- 提交问题弹框 -->
<submit-question-modal ref="submitQuestionModal"></submit-question-modal>
<!-- 图片预览容器 -->
<div id="images">
<div class="image" v-viewer="{movable: false}">
<img v-show="image" :src="imageUrl">
</div>
</div>
</div>
</template>
@@ -131,6 +128,7 @@ import EnterpriseStandardEvaluateModal from './module/EnterpriseStandardEvaluate
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { previewPdf } from '@/utils/previewPdf'
import { getFileInfo } from '../../../../api/api'
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'
@@ -145,6 +143,7 @@ export default {
partList: [], // 页面模块列表
form: {}, // 页面字段
detailData: {}, // 页面数据
fileField: ['associated_file', 'publish_of_original', 'modification_list', 'draft_for_review', 'draft_for_comment', 'draft'], // 是文件的字段
columns: [
{
title: this.$t('serialNumber'),
@@ -170,7 +169,9 @@ export default {
scopedSlots: { customRender: 'text' }
}
], // 稽查内容表格列参数
dataSource: [] // 稽查内容数据
dataSource: [], // 稽查内容数据
image: false,
imageUrl: ''
}
},
created () {
@@ -198,18 +199,54 @@ export default {
getEnterpriseStandardInfoById(params).then(res => {
if (res.success) {
this.detailData = 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)
}
})
} else {
this.$message.warning(res.message)
}
})
},
handlePreview (fileId, fileName) {
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 = fileName ? fileName.split('.')[fileName.split('.').length - 1] : ''
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${fileId}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${fileName}`
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
// 判断是否为可预览格式的文件
if (!canPreview) {
this.$message.loading('该文件类型不支持预览,正在为您准备下载...').then(() => {
this.handleDownload(file)
})
return
}
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
// 图片预览,使用自己添加的组件
if (FILE_TYPE_IMGS.includes(fileSuffix)) {
this.imageUrl = getFileAccessHttpUrl(fileId)
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
this.imageUrl = getFileAccessHttpUrl(file.id)
// 获取viewer实例
const viewer = this.$el.querySelector('.image').$viewer
// 调用show方法进行显示预览图
@@ -218,8 +255,8 @@ export default {
return
}
// pdf预览
if (FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(fileId)
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
const url = previewPdf(file.response.result.id)
window.open(url)
return
}
@@ -227,13 +264,9 @@ export default {
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
window.open(url)
},
handleDownload (fileId, fileName) {
handleDownload (file) {
// 下载文件
downloadFile(`/sys/common/download/${fileId}`, fileName)
},
// 过程稿件里的下载
downloadDraft (fileId, fileName) {
downloadFile(`/sys/common/download/${fileId}`, fileName)
downloadFile(`/sys/common/download/${file.id}`, file.fileName)
},
// 过程稿件里的无水印下载
downloadDraftNoWater (fileId, fileName) {
@@ -9,8 +9,8 @@
:maskClosable="false"
class="custom-drawer-style"
>
<a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
<div class="custom-drawer-style-scroll">
<div class="custom-drawer-style-scroll">
<a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
<add-form ref="addForm"
flag="3"
:defaultValue="{year_number: new Date().getFullYear() + ''}"
@@ -44,14 +44,14 @@
</template>
</a-table>
</div>
</div>
</a-spin>
<div class="custom-drawer-style-bottom-btn">
<a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
{{ $t('preservation') }}
</a-button>
<a-button @click="handleCancel" style="margin-bottom: 0;">{{ $t('close') }}</a-button>
</div>
</a-spin>
</div>
<check-content-modal ref="checkContentModal" @ok="checkContentOk"></check-content-modal>
</a-drawer>
</template>