468 lines
17 KiB
Vue
468 lines
17 KiB
Vue
<template>
|
||
<div>
|
||
<base-info-form ref="baseInfoForm" v-bind="$attrs" disabled></base-info-form>
|
||
<div>
|
||
<j-table
|
||
:can-drag="true"
|
||
:scroll="{x: '100%'}"
|
||
ref="table"
|
||
rowKey="id"
|
||
:columns="drafterColumns"
|
||
:dataSource="drafterDataSource"
|
||
:pagination="false"
|
||
:loading="drafterLoading">
|
||
|
||
<!-- 企标文本 -->
|
||
<template v-slot:standardFile="{text, record}">
|
||
<a-tooltip overlay-class-name="tooltip-style">
|
||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||
<div class="standard-file-div">
|
||
<a class="link-a" @click="handleLookUploadStandard(record)">{{ record.standardFile_dictText }}</a>
|
||
<a class="download-a" @click="handleDownloadUploadStandard(record)">{{ $t('download') }}</a>
|
||
</div>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
</j-table>
|
||
</div>
|
||
<a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
|
||
<div class="collapsible-panel-form">
|
||
<div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
|
||
<!-- 标准文本 -->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
|
||
{{ $t('workCenter.enStandardRevision.standardText') }}
|
||
</span>
|
||
</div>
|
||
<a-form-model-item class="item-model">
|
||
<div class="online-edit-wrapper">
|
||
<!-- todo: 还不确定这里展示的是什么 -->
|
||
<p>企业标准</p>
|
||
<a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
|
||
</div>
|
||
</a-form-model-item>
|
||
</div>
|
||
<!-- 参会人员 -->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="required">*</span>
|
||
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.conferee')">
|
||
{{ $t('workCenter.enStandardRevision.conferee') }}
|
||
</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="conferee">
|
||
<user-selection v-model="formInline.conferee"
|
||
:placeholder="$t('pleaseSelect')+$t('workCenter.enStandardRevision.conferee')"
|
||
:disabled="disabled"
|
||
filedName="conferee"
|
||
@nameChange="userSelectNameChange"
|
||
:nameStr="formInline.conferee_dictText"
|
||
type="checkbox"/>
|
||
</a-form-model-item>
|
||
</div>
|
||
<!-- 会议纪要 -->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="required">*</span>
|
||
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.meetingSummary')">
|
||
{{ $t('workCenter.enStandardRevision.meetingSummary') }}
|
||
</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="meetingSummary">
|
||
<a-button type="primary" class="button-text" style="width: 200px" @click="clickButtonToUpload('meetingSummary')">
|
||
{{
|
||
(formInline.meetingSummary === 'null' || formInline.meetingSummary === ''
|
||
|| formInline.meetingSummary === null || formInline.meetingSummary === undefined)
|
||
? $t('uploadFile.clickUpload')
|
||
: $t('uploadFile.viewUploadedFiles')
|
||
}}
|
||
</a-button>
|
||
</a-form-model-item>
|
||
</div>
|
||
<!-- 编制说明 -->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="required">*</span>
|
||
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.compilationIllustration')">
|
||
{{ $t('workCenter.enStandardRevision.compilationIllustration') }}
|
||
</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="comp_illustration">
|
||
<a-button type="primary" class="button-text" style="width: 200px" @click="clickButtonToUpload('comp_illustration')">
|
||
{{
|
||
(formInline.comp_illustration === 'null' || formInline.comp_illustration === ''
|
||
|| formInline.comp_illustration === null || formInline.comp_illustration === undefined)
|
||
? $t('uploadFile.clickUpload')
|
||
: $t('uploadFile.viewUploadedFiles')
|
||
}}
|
||
</a-button>
|
||
</a-form-model-item>
|
||
</div>
|
||
<!-- 是否需要稽查 -->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="required">*</span>
|
||
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.isNeedAudit')">
|
||
{{ $t('workCenter.enStandardRevision.isNeedAudit') }}
|
||
</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="isNeedAudit">
|
||
<a-radio-group v-model="formInline.isNeedAudit">
|
||
<a-radio :value="1">
|
||
{{ $t('yes') }}
|
||
</a-radio>
|
||
<a-radio :value="2">
|
||
{{ $t('not') }}
|
||
</a-radio>
|
||
</a-radio-group>
|
||
</a-form-model-item>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-form-model>
|
||
<!-- 是否需要稽查选择是，需要填写稽查内容，否则隐藏稽查内容区域 -->
|
||
<template v-if="formInline.isNeedAudit === 1">
|
||
<!-- 稽查内容 -->
|
||
<p class="base-info-inner-title">{{ $t('enterpriseStandardLibrary.standard.auditContent') }}</p>
|
||
|
||
<!-- 操作区域 -->
|
||
<div v-if="!disabled" class="table-operator">
|
||
<!-- 新增 -->
|
||
<a-button icon="plus" type="primary" @click="handleAdd" :disabled="disabled">
|
||
{{ $t('newlyAdded') }}
|
||
</a-button>
|
||
</div>
|
||
|
||
<div>
|
||
<j-table
|
||
:can-drag="true"
|
||
:scroll="{x: '100%'}"
|
||
ref="table"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
:pagination="false"
|
||
:loading="loading">
|
||
|
||
<!-- 操作栏 -->
|
||
<div slot="action" slot-scope="{record, index}" class="action-span-cell">
|
||
<a @click="handleEdit(record, index)" class="table-ope-btn" :disabled="disabled">{{ $t('edit') }}</a>
|
||
<a-divider type="vertical" />
|
||
<a @click="handleDelete(record.id, index)" class="table-ope-btn" :disabled="disabled">{{ $t('delete') }}</a>
|
||
</div>
|
||
|
||
</j-table>
|
||
</div>
|
||
</template>
|
||
<!-- 预览图片的容器 -->
|
||
<div id="images">
|
||
<div class="image" v-viewer="{movable: false}">
|
||
<img v-show="image" :src="imageUrl">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 稽查内容新增、编辑弹框 -->
|
||
<check-content-modal ref="checkContentModal" @ok="checkContentOk"></check-content-modal>
|
||
<!-- 上传文件弹框 -->
|
||
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false" :fileMaxSize="fileMaxSize" :disabled="disabled"></upload-file>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import BaseInfoForm from './BaseInfoForm'
|
||
import UserSelection from '@/components/selection/UserSelection'
|
||
import JTable from '@/components/jero/JTable'
|
||
import CheckContentModal from '@/views/enterpriseStandardLibrary/standard/modules/CheckContentModal'
|
||
import UploadFile from '@/components/UploadFile'
|
||
import Vue from 'vue'
|
||
import { previewPdf } from '@/utils/previewPdf'
|
||
import { downloadFile, getFileAccessHttpUrl } from '@/api/manage'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
|
||
// 支持预览的文件后缀
|
||
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'
|
||
|
||
const Base64 = require('js-base64').Base64
|
||
|
||
export default {
|
||
name: 'MainDrafterCollectUploadMinuteBaseInfo',
|
||
components: { BaseInfoForm, UserSelection, JTable, CheckContentModal, UploadFile },
|
||
props: {
|
||
disabled: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
// 起草人表格列数据
|
||
drafterColumns: [
|
||
{ // 起草单位
|
||
title: this.$t('workCenter.enStandardRevision.draftingUnit'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'draftingUnit_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 起草人
|
||
title: this.$t('workCenter.enStandardRevision.drafter'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'drafter_dictText',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 起草范围
|
||
title: this.$t('workCenter.enStandardRevision.draftingScope'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'draftingScope',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 截止日期
|
||
title: this.$t('expirationDate'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'expirationDate',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{ // 企标文本
|
||
dataIndex: 'standardFile_dictText',
|
||
title: this.$t('workCenter.enStandardRevision.enterpriseStandardText'),
|
||
scopedSlots: { customRender: 'standardFile' },
|
||
align: 'center',
|
||
width: 200
|
||
}
|
||
],
|
||
// 起草人表格数据
|
||
drafterDataSource: [{id: 1, standardFile: '1715299701232504833', standardFile_dictText: '测试上传excel测试测试测试测试.xls'}],
|
||
drafterLoading: false,
|
||
formInline: {},
|
||
rules: {
|
||
// 参会人员
|
||
conferee: [
|
||
{
|
||
required: true,
|
||
message: this.$t('workCenter.enStandardRevision.conferee') + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
// 会议纪要
|
||
meetingSummary: [
|
||
{
|
||
required: true,
|
||
message: this.$t('workCenter.enStandardRevision.meetingSummary') + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
// 是否需要稽查
|
||
isNeedAudit: [
|
||
{
|
||
required: true,
|
||
message: this.$t('workCenter.enStandardRevision.isNeedAudit') + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
}
|
||
]
|
||
},
|
||
// 稽查内容表格列
|
||
columns: [
|
||
{
|
||
title: this.$t('enterpriseStandardLibrary.standard.subjectToClause'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'clause',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('enterpriseStandardLibrary.standard.standardContentOrRequirements'),
|
||
align: 'center',
|
||
width: 180,
|
||
dataIndex: 'requirement',
|
||
scopedSlots: { customRender: 'text' }
|
||
},
|
||
{
|
||
title: this.$t('operation'),
|
||
scopedSlots: { customRender: 'action' },
|
||
align: 'center',
|
||
width: 200
|
||
}
|
||
],
|
||
// 稽查内容表格数据
|
||
dataSource: [],
|
||
loading: false,
|
||
fileMaxSize: undefined,
|
||
image: false,
|
||
imageUrl: ''
|
||
}
|
||
},
|
||
methods: {
|
||
// 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
|
||
initData (data) {
|
||
// 给表格赋值,在线编辑不知道要怎么赋值？
|
||
// this.drafterDataSource =
|
||
// this.dataSource =
|
||
// this.formInline =
|
||
// 给表单赋值
|
||
// this.$nextTick(() => {
|
||
// this.$refs.baseInfoForm.formInline =
|
||
// })
|
||
},
|
||
// 外层要获取数据
|
||
getData () {
|
||
// 把数据抛出，在线编辑不知道要不要抛
|
||
const data = {}
|
||
data.dataSource = this.dataSource
|
||
data.formInline = this.formInline
|
||
return data
|
||
},
|
||
// 外层获取数据要过校验,返回false表示没有通过校验
|
||
async getDataValidate () {
|
||
let data = {}
|
||
await this.$refs.ruleForm.validate(valid => {
|
||
if (valid) {
|
||
if (this.dataSource && this.dataSource.length > 0) {
|
||
// 有数据可以抛出
|
||
data.dataSource = this.dataSource
|
||
data.formInline = this.formInline
|
||
} else {
|
||
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
|
||
data = false
|
||
}
|
||
} else {
|
||
data = false
|
||
}
|
||
})
|
||
return data
|
||
},
|
||
// 查看企标文本
|
||
handleLookUploadStandard (record) {
|
||
// 截取文件后缀名
|
||
const fileSuffix = record.standardFile_dictText ? record.standardFile_dictText.split('.')[record.standardFile_dictText.split('.').length - 1].toLowerCase() : ''
|
||
const canPreview = CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix.toLowerCase() === tt)
|
||
// 判断是否为可预览格式的文件
|
||
if (!canPreview) {
|
||
this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
|
||
this.handleDownloadUploadStandard(record)
|
||
})
|
||
return
|
||
}
|
||
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${record.standardFile}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${record.standardFile_dictText}`
|
||
// 图片预览，使用自己添加的组件
|
||
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix)) {
|
||
this.imageUrl = getFileAccessHttpUrl(record.standardFile)
|
||
// 获取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(record.standardFile)
|
||
window.open(url)
|
||
return
|
||
}
|
||
// 其余可预览文件仍使用KKFile进行预览
|
||
const url = window._CONFIG.onlinePreviewDomainURL + '?url=' + encodeURIComponent(Base64.encode(fileFullUrl))
|
||
window.open(url)
|
||
},
|
||
// 下载企标文本
|
||
handleDownloadUploadStandard (record) {
|
||
// 下载文件
|
||
downloadFile(`/sys/common/download/${record.standardFile}`, record.standardFile_dictText)
|
||
},
|
||
// 选择用户得到用户名
|
||
userSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
// 点击文件上传
|
||
clickButtonToUpload (fieldName) {
|
||
if (fieldName === 'uploadAttachment') {
|
||
this.fileMaxSize = 10
|
||
} else {
|
||
this.fileMaxSize = undefined
|
||
}
|
||
this.$refs.uploadFile.open(this.formInline[fieldName])
|
||
this.uploadName = fieldName
|
||
},
|
||
// 文件上传改变后的回调
|
||
uploadFileChange (data) {
|
||
const attIdList = []
|
||
if (data && data.length > 0) {
|
||
data.map(item => {
|
||
attIdList.push(item.id)
|
||
})
|
||
}
|
||
/** 赋值给当前对应的表单文件 */
|
||
this.formInline[this.uploadName] = attIdList.join(',')
|
||
this.formInline = { ...this.formInline }
|
||
},
|
||
// 稽查内容的添加
|
||
handleAdd () {
|
||
// 新增左侧的预览文件，还不知道要赋值哪个文件 ？？
|
||
const standardFile = ''
|
||
this.$refs.checkContentModal.title = this.$t('newlyAdded')
|
||
this.$refs.checkContentModal.add(standardFile)
|
||
},
|
||
// 稽查内容的编辑
|
||
handleEdit (record, index) {
|
||
// 编辑左侧的预览文件，还不知道要赋值哪个文件 ？？
|
||
const standardFile = ''
|
||
this.$refs.checkContentModal.title = this.$t('edit')
|
||
this.$refs.checkContentModal.edit(standardFile, record, index)
|
||
},
|
||
// 稽查内容的删除
|
||
handleDelete (index) {
|
||
this.dataSource.splice(index, 1)
|
||
},
|
||
// 稽查内容新增编辑完成
|
||
checkContentOk (value, index) {
|
||
console.log(value, index)
|
||
if (index || index === 0) {
|
||
// 有下标，说明是编辑
|
||
this.dataSource.splice(index, 1, value)
|
||
} else {
|
||
// 没有下标， 是新增
|
||
this.dataSource.push(value)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
.collapsible-content-no-head {
|
||
border-top: 1px solid #E5E6EB;
|
||
border-radius: 8px 8px 8px 8px;
|
||
}
|
||
|
||
.online-edit-wrapper {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
p {
|
||
margin-bottom: 0;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.base-info-inner-title {
|
||
color: #1D2129;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.standard-file-div {
|
||
display: flex;
|
||
.download-a {
|
||
width: 50%;
|
||
}
|
||
}
|
||
</style>
|