Files
laws_chery_client/src/views/workCenter/standardInterpretationProcess/modules/InterpretationClauseTableModal.vue
T

373 lines
19 KiB
Vue

<template>
<a-drawer
:title="title"
:width="width"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
:maskClosable="false"
destroyOnClose
class="custom-drawer-style"
>
<div class="custom-drawer-style-scroll">
<a-spin :spinning="confirmLoading">
<a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<!--译文-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.translation')" :colon="false">
<a-textarea :placeholder="$t('pleaseEnter') + $t('workCenter.standardInterpretationProcess.translation')"
:maxLength="500"
:rows="4"
:disabled="disabled"
v-decorator="['translation']" />
</a-form-item>
<!--是否与上一版相同-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.sameAsPreviousVersion')" :colon="false">
<j-dict-select-tag dict-code="yn"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.sameAsPreviousVersion')"
@nameChange="(name) => nameChange(name, 'isSameAsPrevVersion')"
v-decorator="['isSameAsPrevVersion']"/>
</a-form-item>
<!--相对上一版变化点说明-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.explanationOfChangePoints')" :colon="false">
<a-textarea :placeholder="$t('pleaseEnter') + $t('workCenter.standardInterpretationProcess.explanationOfChangePoints')"
:maxLength="500"
:rows="4"
:disabled="disabled"
v-decorator="['changeDescription']" />
</a-form-item>
<!--法规注解-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.regulatoryAnnotations')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.regulatoryAnnotations')"
v-decorator="['regulatoryNotes']"/>
</a-form-item>
<!--涉及系统/部件-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.involvingSystemsComponents')" :colon="false">
<tree-selection :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.involvingSystemsComponents')"
filedName="keywords"
type="checkbox"
options-href="/laws/standard/partName/"
:nameStr="model.keywords_dictText"
:disabled="disabled"
@nameChange="nameChange"
v-decorator="['keywords']" />
</a-form-item>
<!--关键控制器-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.keyController')" :colon="false">
<j-multi-select-tag dict-code="key_controller"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.keyController')"
@nameChange="(name) => nameChange(name, 'keyController')"
v-decorator="['keyController']"/>
</a-form-item>
<!--责任部门-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.responsibleDepartment')" :colon="false">
<j-select-depart :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.responsibleDepartment')"
:backDepart="true"
:disabled="disabled"
multi
treeOpera
@back="departNameChange($event, 'responsibleDepartment')"
v-decorator="['responsibleDepartment']" />
</a-form-item>
<!--责任部门专业模块-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.responsibleDepartmentModule')" :colon="false">
<j-multi-select-tag dict-code="responsible_module"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.responsibleDepartmentModule')"
@nameChange="(name) => nameChange(name, 'responsibleModule')"
v-decorator="['responsibleModule']"/>
</a-form-item>
<!--关联部门-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.relatedDepartments')" :colon="false">
<j-select-depart :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.relatedDepartments')"
:backDepart="true"
:disabled="disabled"
multi
treeOpera
@back="departNameChange($event, 'relatedDepartment')"
v-decorator="['relatedDepartment']" />
</a-form-item>
<!--关联部门专业模块-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.relatedDepartmentsModule')" :colon="false">
<j-multi-select-tag dict-code="related_module"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.relatedDepartmentsModule')"
@nameChange="(name) => nameChange(name, 'relatedModule')"
v-decorator="['relatedModule']"/>
</a-form-item>
<!--适用车型-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.applications')" :colon="false">
<j-multi-select-tag dict-code="applicable_vehicle_type"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.applications')"
@nameChange="(name) => nameChange(name, 'applications')"
v-decorator="['applications']"/>
</a-form-item>
<!--动力类型-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.powerType')" :colon="false">
<j-multi-select-tag dict-code="dynamic_type"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.powerType')"
@nameChange="(name) => nameChange(name, 'powerType')"
v-decorator="['powerType']"/>
</a-form-item>
<!--专业领域-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.professionalField')" :colon="false">
<s-tree-select
v-decorator="['domainArea']"
:disabled="disabled"
:tree-data="professionalFieldTreeList"
tree-checkable
treeCheckStrictly
@change="treeNameChange($event, 'domainArea')"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.professionalField')"/>
</a-form-item>
<!--配置需求-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.configurationRequirements')" :colon="false">
<j-multi-select-tag dict-code="configuration_requirements"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.configurationRequirements')"
@nameChange="(name) => nameChange(name, 'configurationRequirements')"
v-decorator="['configurationRequirements']"/>
</a-form-item>
<!--新认证车实施日期-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.newCertificationImplementationDate')" :colon="false">
<j-multiple-date-picker :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.newCertificationImplementationDate')"
fieldName="newCerImplementDate"
:disabled="disabled"
v-decorator="['newCerImplementDate']" />
</a-form-item>
<!--新生产车实施日期-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.newProduceImplementationDate')" :colon="false">
<j-multiple-date-picker :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.newProduceImplementationDate')"
fieldName="newProductionImplementation"
:disabled="disabled"
v-decorator="['newProductionImplementation']" />
</a-form-item>
<!--注册日期-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.registrationDate')" :colon="false">
<j-multiple-date-picker :placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.registrationDate')"
fieldName="registrationDate"
:disabled="disabled"
v-decorator="['registrationDate']" />
</a-form-item>
<!--企业标准-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.enterpriseStandards')" :colon="false">
<standard-selection :source="StandardSource.ENTERPRISE.value"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.enterpriseStandards')"
:disabled="disabled"
:disabledSourceSearch="true"
type="radio"
v-decorator="['enterpriseStandard']" />
</a-form-item>
<!--技术规范/设计指南-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.technicalSpecificationsDesignGuidelines')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.technicalSpecificationsDesignGuidelines')"
v-decorator="['technicalSpecificationDesignGuide']"/>
</a-form-item>
<!--图纸模板-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.drawingTemplate')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.drawingTemplate')"
v-decorator="['drawingTemplate']"/>
</a-form-item>
<!--技术协议模板-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.technicalAgreementTemplate')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.technicalAgreementTemplate')"
v-decorator="['technicalAgreementTemplate']"/>
</a-form-item>
<!--校核报告模板/checklist-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.verificationReportTemplate')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.verificationReportTemplate')"
v-decorator="['verificationReportTemplateChecklist']"/>
</a-form-item>
<!--DVP模板-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.dvpTemplate')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.dvpTemplate')"
v-decorator="['dvpTemplate']"/>
</a-form-item>
<!--DFEMA-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.dfema')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.dfema')"
v-decorator="['dfema']"/>
</a-form-item>
<!--关键技术分解表-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.specialListTemplate')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.specialListTemplate')"
v-decorator="['keyTechnologyDecompositionTable']"/>
</a-form-item>
<!--其他文件或模板-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.otherFilesOrTemplates')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.otherFilesOrTemplates')"
v-decorator="['otherDocumentsTemplates']"/>
</a-form-item>
<!--排查阶段-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.investigationStage')" :colon="false">
<j-multi-select-tag dict-code="investigation_stage"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.standardInterpretationProcess.investigationStage')"
@nameChange="(name) => nameChange(name, 'investigationStage')"
v-decorator="['investigationStage']"/>
</a-form-item>
<!--P3证明符合性的交付物名称-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.pThree')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.pThree')"
v-decorator="['p3']"/>
</a-form-item>
<!--P5证明符合性的交付物名称-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.pFive')" :colon="false">
<a-input :max-length="50"
:disabled="disabled"
:placeholder="$t('pleaseEnter')+$t('workCenter.standardInterpretationProcess.pFive')"
v-decorator="['p5']"/>
</a-form-item>
<!--备注-->
<a-form-item :label="$t('workCenter.standardInterpretationProcess.notes')" :colon="false">
<a-textarea :placeholder="$t('pleaseEnter') + $t('workCenter.standardInterpretationProcess.notes')"
:maxLength="500"
:rows="4"
:disabled="disabled"
v-decorator="['remarks']" />
</a-form-item>
</a-form>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn">
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('submit') }}</a-button>
</div>
</a-drawer>
</template>
<script>
import JMultipleDatePicker from '@comp/JMultipleDatePicker'
import StandardSelection from '@comp/selection/StandardSelection'
import TreeSelection from '@comp/selection/TreeSelection'
import { StandardSource } from '@/enums/commonEnums'
import STreeSelect from '@comp/STreeSelect'
import { getFormDictTreeList } from '@api/api'
export default {
name: 'InterpretationClauseTableModal',
components: { STreeSelect, TreeSelection, StandardSelection, JMultipleDatePicker },
data () {
return {
StandardSource,
title: this.$t('workCenter.standardInterpretationProcess.interpretationAttributes'),
width: 900,
disabled: false,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
// 专业领域下拉
professionalFieldTreeList: []
}
},
methods: {
add () {
this.edit()
},
edit (record) {
this.initProfessionalFieldTreeList()
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
// 是否与上一版相同(多个值就不回显)
if (!this.model.isSameAsPrevVersion || this.model.isSameAsPrevVersion.split(',').length > 1) {
delete this.model.isSameAsPrevVersion
}
// 专业领域
if (typeof this.model.domainArea === 'string' && this.model.domainArea.length) {
this.model.domainArea = this.model.domainArea.split(',').map(item => ({ value: item }))
} else {
this.model.domainArea = []
}
this.form.setFieldsValue(this.model)
})
},
close () {
this.visible = false
},
handleSubmit () {
this.form.validateFields((err, values) => {
if (!err) {
const formData = Object.assign(this.model, values)
if (Array.isArray(formData.domainArea)) {
formData.domainArea = formData.domainArea.map(item => item.value).join(',')
}
console.log(formData)
this.$emit('ok', formData)
this.close()
}
})
},
handleCancel () {
this.close()
},
// 专业领域下拉
initProfessionalFieldTreeList () {
getFormDictTreeList({ dictId: '1801078082552725506' }).then(res => {
if (res.success) {
this.professionalFieldTreeList = res.result || []
}
})
},
// 下拉多选获取名称
nameChange (name, field) {
this.model[field + '_dictText'] = name
},
// 部门名称
departNameChange (departList, field) {
this.model[field + '_dictText'] = departList.map(item => item.text).join(',')
},
// 下拉树名称
treeNameChange (list, field) {
this.model[field + '_dictText'] = list.map(item => item.label).join(',')
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.custom-drawer-style-scroll {
/deep/ .ant-form-item-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 8px;
}
}
</style>