332 lines
13 KiB
Vue
332 lines
13 KiB
Vue
<template>
|
|
<a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
|
|
<div class="collapsible-panel-form">
|
|
<div class="form-flex-box">
|
|
<!-- 稽查依据 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.inspectionBasis')">
|
|
{{ $t('workCenter.esInspectionRectification.inspectionBasis') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ model.standardName }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 依据条款 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.accordingToTerms')">
|
|
{{ $t('workCenter.esInspectionRectification.accordingToTerms') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.enterpriseStandardInspectReport.baseClause') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 标准内容或要求 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.standardContentOrDemand')">
|
|
{{ $t('workCenter.esInspectionRectification.standardContentOrDemand') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.enterpriseStandardInspectReport.standardRequire') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 整改单位 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.rectificationUnit')">
|
|
{{ $t('workCenter.esInspectionRectification.rectificationUnit') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.responseDepart_dictText') || getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.responseDepartDictText') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 不符合项描述 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.nonCompliantDescription')">
|
|
{{ $t('workCenter.esInspectionRectification.nonCompliantDescription') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.issue') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 整改措施 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.rectificationMeasures')">
|
|
{{ $t('workCenter.esInspectionRectification.rectificationMeasures') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.rectifyMeasure') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 整改负责人 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.rectificationDirector')">
|
|
{{ $t('workCenter.esInspectionRectification.rectificationDirector') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.responseUserDictText') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 计划完成日期 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.planDoneDate')">
|
|
{{ $t('workCenter.esInspectionRectification.planDoneDate') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model">
|
|
<span>{{ getNestedProperty(model, 'enterpriseStandardInspectRectifyPlan.planCompleteDate') }}</span>
|
|
</a-form-model-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="collapsible-panel-form">
|
|
<div class="form-flex-box">
|
|
<!-- 操作类型 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.operationType')">
|
|
{{ $t('workCenter.esInspectionRectification.operationType') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="operationType">
|
|
<j-dict-select-tag class="box-input"
|
|
:disabled="disabled"
|
|
@change="changeOperationType"
|
|
v-model="formInline.operationType"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.esInspectionRectification.operationType')"
|
|
:triggerChange="false"
|
|
dictCode="report_operation_type" />
|
|
</a-form-model-item>
|
|
</div>
|
|
<template v-if="operationType === '1'">
|
|
<!-- 整改结果 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.rectificationResults')">
|
|
{{ $t('workCenter.esInspectionRectification.rectificationResults') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="rectifyResult">
|
|
<a-textarea :maxLength="500"
|
|
:disabled="disabled"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.esInspectionRectification.rectificationResults')"
|
|
:rows="4"
|
|
v-model="formInline.rectifyResult" />
|
|
</a-form-model-item>
|
|
</div>
|
|
<!-- 附件 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.file')">
|
|
{{ $t('workCenter.esInspectionRectification.file') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="attachment">
|
|
<a-button type="primary" class="button-text" @click="clickButtonToUpload" style="width: 100%">
|
|
{{
|
|
(formInline.attachment === 'null' || formInline.attachment === '' || formInline.attachment === null || formInline.attachment === undefined)
|
|
? $t('uploadFile.clickUpload')
|
|
: $t('uploadFile.viewUploadedFiles')
|
|
}}
|
|
</a-button>
|
|
</a-form-model-item>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="operationType === '2'">
|
|
<!-- 申请延期日期 -->
|
|
<div class="box-title-text form-flex-item">
|
|
<div class="title-text">
|
|
<span class="required">*</span>
|
|
<span class="title-text-text" :title="$t('workCenter.esInspectionRectification.requestExtensionDate')">
|
|
{{ $t('workCenter.esInspectionRectification.requestExtensionDate') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="applyDelayDate">
|
|
<j-date date-format="YYYY-MM-DD" style="width: 100%" showType="day" :disabled="disabled" :disabledDate="disabledDate"
|
|
:placeholder="$t('pleaseSelect') + $t('workCenter.esInspectionRectification.requestExtensionDate')"
|
|
v-model="formInline.applyDelayDate" />
|
|
</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.esInspectionRectification.extensionDescription')">
|
|
{{ $t('workCenter.esInspectionRectification.extensionDescription') }}
|
|
</span>
|
|
</div>
|
|
<a-form-model-item class="item-model" prop="delayDetail">
|
|
<a-textarea :maxLength="500"
|
|
:placeholder="$t('pleaseSelect')+$t('workCenter.esInspectionRectification.extensionDescription')"
|
|
:rows="4"
|
|
:disabled="disabled"
|
|
v-model="formInline.delayDetail" />
|
|
</a-form-model-item>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- 上传 -->
|
|
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false" :disabled="disabled"></upload-file>
|
|
</a-form-model>
|
|
</template>
|
|
|
|
<script>
|
|
import UploadFile from '@comp/UploadFile'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'BaseInfoForm',
|
|
components: { UploadFile },
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
formInline: {},
|
|
// 当前数据
|
|
model: {},
|
|
// 操作类型
|
|
operationType: null,
|
|
rules: {
|
|
// 操作类型
|
|
operationType: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.esInspectionRectification.operationType') + this.$t('cannotEmpty'),
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
// 整改结果
|
|
rectifyResult: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.esInspectionRectification.rectificationResults') + this.$t('cannotEmpty'),
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
// 申请延期日期
|
|
applyDelayDate: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.esInspectionRectification.requestExtensionDate') + this.$t('cannotEmpty'),
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
// 延期说明
|
|
delayDetail: [
|
|
{
|
|
required: true,
|
|
message: this.$t('workCenter.esInspectionRectification.extensionDescription') + this.$t('cannotEmpty'),
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
changeOperationType (val) {
|
|
this.$refs.ruleForm.clearValidate()
|
|
this.formInline = { operationType: this.formInline.operationType }
|
|
this.operationType = val + ''
|
|
},
|
|
initData (data) {
|
|
this.model = JSON.parse(JSON.stringify(data))
|
|
this.operationType = data.operationType + ''
|
|
// 给表单赋值
|
|
this.formInline = {
|
|
operationType: data.operationType,
|
|
rectifyResult: data.rectifyResult,
|
|
attachment: data.attachment,
|
|
applyDelayDate: data.applyDelayDate,
|
|
delayDetail: data.delayDetail
|
|
}
|
|
},
|
|
// 外层要获取数据
|
|
getData () {
|
|
return { ...this.formInline }
|
|
},
|
|
// 获取数据并验证
|
|
getDataValidate () {
|
|
return new Promise((resolve, reject) => {
|
|
this.$refs.ruleForm.validate(valid => {
|
|
if (valid) {
|
|
const data = { ...this.formInline }
|
|
resolve(data)
|
|
} else {
|
|
reject(new Error('base'))
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 点击点击上传按钮
|
|
clickButtonToUpload () {
|
|
this.$refs.uploadFile.open(this.formInline.attachment)
|
|
// this.uploadName = item.dbFieldName
|
|
},
|
|
// 文件上传改变后的回调
|
|
uploadFileChange (data) {
|
|
const attIdList = []
|
|
if (data && data.length > 0) {
|
|
data.map(item => {
|
|
attIdList.push(item.id)
|
|
})
|
|
}
|
|
/** 赋值给当前对应的表单文件 */
|
|
this.$set(this.formInline, 'attachment', attIdList.join(','))
|
|
// this.formInline.attachment = attIdList.join(',')
|
|
},
|
|
// 禁用日期选择大于当前天
|
|
disabledDate (date) {
|
|
return date.isBefore(moment().add(1, 'days'), 'day')
|
|
},
|
|
// 获取深层次属性防止报错
|
|
getNestedProperty (obj, prop) {
|
|
const props = prop.split('.')
|
|
let result = obj
|
|
for (let i = 0; i < props.length; i++) {
|
|
if (!result || typeof result !== 'object') {
|
|
return ''
|
|
}
|
|
result = result[props[i]]
|
|
}
|
|
return result || ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
// 无边框无背景
|
|
//.readonly-transparent {
|
|
// background-color: transparent;
|
|
// border-color: transparent;
|
|
// &:hover {
|
|
// cursor: default;
|
|
// background-color: transparent;
|
|
// border-color: transparent;
|
|
// }
|
|
//}
|
|
</style>
|