293 lines
9.9 KiB
Vue
293 lines
9.9 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="title"
|
|
:maskClosable="true"
|
|
:width="500"
|
|
:closable="true"
|
|
@cancel="handleCancel"
|
|
fullscreen
|
|
:visible="visible">
|
|
<div class="content">
|
|
<!-- 左侧文件预览 -->
|
|
<div class="content-left">
|
|
<a-spin :spinning="leftLoading" class="left-spin">
|
|
<iframe v-if="iframeSrc" :src="iframeSrc" width="100%" frameborder="0"></iframe>
|
|
<a-empty class="empty-file" v-else description="当前文件类型暂不支持预览"></a-empty>
|
|
</a-spin>
|
|
</div>
|
|
<!-- 右侧表单区域 -->
|
|
<div class="content-right">
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<!-- 条款号 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardRevision.clauseNumber')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardRevision.clauseNumber')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'clauseNumber', validatorRules.clauseNumber ]" />
|
|
</a-form-item>
|
|
<!-- 条款名称 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardRevision.clauseName')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardRevision.clauseName')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'clauseName', validatorRules.clauseName ]" />
|
|
</a-form-item>
|
|
<!-- 修改意见内容(包括修改理由和依据) -->
|
|
<a-form-item :label="$t('workCenter.enStandardRevision.contentOfRevisedOpinion')"></a-form-item>
|
|
<!-- 修改前 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardChange.beforeUpdate')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardChange.beforeUpdate')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'beforeUpdate', validatorRules.beforeUpdate ]" />
|
|
</a-form-item>
|
|
<!-- 修改后 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardChange.afterUpdate')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardChange.afterUpdate')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'afterUpdate', validatorRules.afterUpdate ]" />
|
|
</a-form-item>
|
|
<!-- 修改理由 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.enStandardChange.updateReason')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.enStandardChange.updateReason')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'updateReason', validatorRules.updateReason ]" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-spin>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<template slot="footer">
|
|
<a-button :loading="confirmLoading" @click="handleCancel">
|
|
{{ $t('cancel') }}
|
|
</a-button>
|
|
<a-button v-if="isAdd" type="primary" :loading="confirmLoading" @click="handleSubmitAddAdd">
|
|
{{ $t('submitAddAdd') }}
|
|
</a-button>
|
|
<a-button type="primary" :loading="confirmLoading" @click="handleOk">
|
|
{{ $t('submit') }}
|
|
</a-button>
|
|
</template>
|
|
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import pick from 'lodash.pick'
|
|
import { getFileInfo } from '@/api/api'
|
|
import { previewPdf } from '@/utils/previewPdf'
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
import { getEnterpriseStandardInfoById } from '@/api/enterpriseStandardLibraryApi'
|
|
|
|
const Base64 = require('js-base64').Base64
|
|
|
|
export default {
|
|
name: 'UpdateListModal',
|
|
data () {
|
|
return {
|
|
title: '',
|
|
visible: false,
|
|
leftLoading: true,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this),
|
|
model: {},
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 4 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 18 }
|
|
},
|
|
validatorRules: {
|
|
// 条款号
|
|
clauseNumber: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardRevision.clauseNumber') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 条款名称
|
|
clauseName: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardRevision.clauseName') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 修改前
|
|
beforeUpdate: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardChange.beforeUpdate') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 修改后
|
|
afterUpdate: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardChange.afterUpdate') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 修改理由
|
|
updateReason: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.enStandardChange.updateReason') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
}
|
|
},
|
|
index: undefined, // 编辑的表格的下标
|
|
iframeSrc: '', // 左侧预览的路径
|
|
isAdd: false // 是否是新增，新增才有提交并新增按钮
|
|
}
|
|
},
|
|
methods: {
|
|
add (standardId) {
|
|
this.getStandardFile(standardId)
|
|
this.isAdd = true
|
|
this.visible = true
|
|
this.form.resetFields()
|
|
},
|
|
edit (standardId, record, index) {
|
|
this.getStandardFile(standardId)
|
|
this.visible = true
|
|
this.index = index
|
|
this.form.resetFields()
|
|
this.model = Object.assign({}, record)
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(pick(this.model, 'clauseNumber', 'clauseName', 'beforeUpdate', 'afterUpdate', 'updateReason'))
|
|
})
|
|
},
|
|
// 根据企标id查询标准详情数据，为了获取发布稿，修改单左侧预览
|
|
getStandardFile (standardId) {
|
|
if (!standardId) {
|
|
return
|
|
}
|
|
this.leftLoading = true
|
|
getEnterpriseStandardInfoById({ id: standardId, type: '2' }).then(res => {
|
|
if (res.success) {
|
|
// 过程稿件id 发布稿>修改单>报批稿>送审稿>征求意见稿>草稿
|
|
const fieldArr = ['publish_of_original', 'modification_list', 'draft_for_review', 'draft_for_comment', 'draft']
|
|
let fileId = ''
|
|
for (const item of fieldArr) {
|
|
if (!fileId) {
|
|
fileId = res.result[item] ? res.result[item].split(',')[0] : ''
|
|
}
|
|
}
|
|
if (fileId) {
|
|
this.getFileInfo(fileId).then(res => {
|
|
this.handlePreview(res)
|
|
})
|
|
}
|
|
}
|
|
}).finally(() => {
|
|
this.leftLoading = false
|
|
})
|
|
},
|
|
getFileInfo (fileId) {
|
|
return new Promise(resolve => {
|
|
let fileInfo
|
|
getFileInfo({ id: fileId }).then(res => {
|
|
if (res.success) {
|
|
fileInfo = res.result
|
|
}
|
|
}).finally(() => {
|
|
resolve(fileInfo)
|
|
})
|
|
})
|
|
},
|
|
handlePreview (file) {
|
|
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1].toLowerCase() : ''
|
|
if (fileSuffix === 'pdf') {
|
|
// pdf预览
|
|
const url = previewPdf(file.id)
|
|
this.iframeSrc = url
|
|
} else if (fileSuffix === 'docx' || fileSuffix === 'doc') {
|
|
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?at=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
|
|
// word文件仍使用KKFile进行预览
|
|
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
|
|
this.iframeSrc = url
|
|
}
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
this.model = {}
|
|
this.index = undefined
|
|
this.iframeSrc = ''
|
|
this.isAdd = false
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
// 提交并新增
|
|
handleSubmitAddAdd () {
|
|
if (this.confirmLoading) return
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.confirmLoading = true
|
|
const param = Object.assign({}, values)
|
|
console.log(param)
|
|
this.$emit('ok', param, this.index)
|
|
this.form.resetFields()
|
|
this.model = {}
|
|
this.confirmLoading = false
|
|
}
|
|
})
|
|
},
|
|
handleOk () {
|
|
if (this.confirmLoading) return
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.confirmLoading = true
|
|
const param = Object.assign({}, values)
|
|
console.log(param)
|
|
this.$emit('ok', param, this.index)
|
|
this.close()
|
|
this.confirmLoading = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
.content-left {
|
|
width: 60%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
.left-spin {
|
|
height: 100%;
|
|
}
|
|
/deep/ .ant-spin-container {
|
|
height: 100%;
|
|
}
|
|
iframe {
|
|
height: calc(100% - 20px) !important;
|
|
}
|
|
}
|
|
.content-right {
|
|
width: 40%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.empty-file {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
</style>
|