[update] 企标制修订流程页面
This commit is contained in:
lideqin
+466
@@ -0,0 +1,466 @@
|
||||
<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', 'raw', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
|
||||
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.data = data
|
||||
// 给表格赋值,在线编辑不知道要怎么赋值？
|
||||
// this.drafterDataSource =
|
||||
// this.dataSource =
|
||||
// this.formInline =
|
||||
// 给表单赋值
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.baseInfoForm.formInline =
|
||||
// })
|
||||
},
|
||||
// 外层要获取数据
|
||||
getData () {
|
||||
// 把数据抛出，在线编辑不知道要不要抛
|
||||
const data = {}
|
||||
data.dataSource = this.dataSource
|
||||
data.uploadMinuteFormInline = this.formInline
|
||||
return data
|
||||
},
|
||||
// 外层获取数据要过校验,返回false表示没有通过校验
|
||||
getDataValidate () {
|
||||
this.$refs.ruleForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.dataSource && this.dataSource.length > 0) {
|
||||
// 有数据可以抛出
|
||||
const data = {}
|
||||
data.dataSource = this.dataSource
|
||||
data.uploadMinuteFormInline = this.formInline
|
||||
return data
|
||||
} else {
|
||||
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
|
||||
return false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查看企标文本
|
||||
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>
|
||||
Reference in New Issue
Block a user