253 lines
7.8 KiB
Vue
253 lines
7.8 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">
|
|
<iframe v-if="iframeSrc" :src="iframeSrc" width="100%" frameborder="0"></iframe>
|
|
<a-empty class="empty-file" v-else description="当前文件类型暂不支持预览"></a-empty>
|
|
</div>
|
|
<!-- 右侧表单区域 -->
|
|
<div class="content-right">
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<!-- 章节编号 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.esInspectionProcess.sectionNumber')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.esInspectionProcess.sectionNumber')"
|
|
:maxLength="50"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'clause', validatorRules.sectionNumber ]" />
|
|
</a-form-item>
|
|
<!-- 标准内容或要求 -->
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.esInspectionProcess.standardContentOrDemand')">
|
|
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.esInspectionProcess.standardContentOrDemand')"
|
|
:maxLength="500"
|
|
type="textarea"
|
|
@change="event => event.target.value = event.target.value.trim()"
|
|
v-decorator.trim="[ 'requirement', validatorRules.standardContentOrDemand ]" />
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-spin>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<template slot="footer">
|
|
<a-button :loading="confirmLoading" @click="handleCancel">
|
|
{{ $t('cancel') }}
|
|
</a-button>
|
|
<a-button 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 { getFileInfo } from '@/api/api'
|
|
import { previewPdf } from '@/utils/previewPdf'
|
|
import Vue from 'vue'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
import { addInspectionContentTable, editInspectionContentTable, getFileByInspectId } from '@api/workCenter'
|
|
|
|
const Base64 = require('js-base64').Base64
|
|
|
|
export default {
|
|
name: 'InspectionProcessContentModal',
|
|
data () {
|
|
return {
|
|
title: '',
|
|
visible: false,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this),
|
|
// 父表的当前行数据
|
|
data: {},
|
|
// 当前表的当前行数据
|
|
model: {},
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 16 }
|
|
},
|
|
validatorRules: {
|
|
// 章节编号
|
|
sectionNumber: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.esInspectionProcess.sectionNumber') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
// 标准内容或要求
|
|
standardContentOrDemand: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('workCenter.esInspectionProcess.standardContentOrDemand') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
}
|
|
},
|
|
index: undefined, // 编辑的表格的下标
|
|
iframeSrc: '' // 左侧预览的路径
|
|
}
|
|
},
|
|
methods: {
|
|
add (data) {
|
|
this.data = Object.assign({}, data)
|
|
// 后端获取预览文件
|
|
getFileByInspectId({ inspectId: data.inspectId }).then(res => {
|
|
if (res.success) {
|
|
this.handlePreview(res.result)
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
this.visible = true
|
|
this.form.resetFields()
|
|
},
|
|
edit (data, record, index) {
|
|
// 后端获取预览文件
|
|
getFileByInspectId({ inspectId: data.inspectId }).then(res => {
|
|
if (res.success) {
|
|
this.handlePreview(res.result)
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
this.visible = true
|
|
this.index = index
|
|
this.form.resetFields()
|
|
this.data = Object.assign({}, data)
|
|
this.model = Object.assign({}, record)
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(this.model)
|
|
})
|
|
},
|
|
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 (['doc', 'docx'].includes(fileSuffix)) {
|
|
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?token=${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 = ''
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
// 提交并新增
|
|
handleSubmitAddAdd () {
|
|
if (this.confirmLoading) return
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.confirmLoading = true
|
|
const param = Object.assign({}, this.model, values)
|
|
if (!param.processEsInspectId) {
|
|
param.processEsInspectId = this.data.id
|
|
}
|
|
console.log(param)
|
|
const fn = param.id ? editInspectionContentTable : addInspectionContentTable
|
|
fn(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$emit('ok', param, this.index)
|
|
this.form.resetFields()
|
|
this.model = {}
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.confirmLoading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleOk () {
|
|
if (this.confirmLoading) return
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.confirmLoading = true
|
|
const param = Object.assign({}, this.model, values)
|
|
if (!this.model.processEsInspectId) {
|
|
param.processEsInspectId = this.data.id
|
|
}
|
|
console.log(param)
|
|
const fn = param.id ? editInspectionContentTable : addInspectionContentTable
|
|
fn(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$emit('ok', param, this.index)
|
|
this.close()
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.confirmLoading = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
.content-left {
|
|
width: 60%;
|
|
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>
|