927 lines
38 KiB
Vue
927 lines
38 KiB
Vue
<template>
|
||
<internal-detail-page :title="pageTitle" :content-padding="0" :loading="loading">
|
||
<!-- 标题右侧tab -->
|
||
<template v-slot:titleRightCustom>
|
||
<div class="table-operator-tab">
|
||
<!--基础信息-->
|
||
<a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
|
||
@click="switchChange('base')">{{ $t('workCenter.basicInformation') }}
|
||
</a>
|
||
<!--人员信息-->
|
||
<a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
|
||
@click="switchChange('user')">{{ $t('workCenter.personalInformation') }}
|
||
</a>
|
||
</div>
|
||
</template>
|
||
<!--基本信息-->
|
||
<div class="detail-page-scroll-content" v-show="switchValue === 'base'">
|
||
<!--流程信息-->
|
||
<div class="process-part-title">{{ $t('processInformation') }}</div>
|
||
<a-form :form="processInfoForm">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<!--流程名称-->
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:maxLength="50"
|
||
disabled
|
||
v-decorator="['processName']" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<!--截止日期-->
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
|
||
<a-date-picker class="box-input"
|
||
:placeholder="$t('pleaseSelect') + $t('expirationDate')"
|
||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-decorator="['processDueDate']"
|
||
style="width: 100%" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<!--流程说明-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('processExplain')"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:maxLength="500"
|
||
type="textarea"
|
||
v-decorator="['processDescription']" />
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<!--业务基本信息-->
|
||
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
|
||
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
|
||
<template v-for="(val,index) in formList">
|
||
<div :key="index"
|
||
class="collapsible-panel-form"
|
||
v-if="(val && val.length > 0) || ((!val || val.length === 0) && formPartList.indexOf(index) === 0)">
|
||
<div class="collapsible-panel-form-header">
|
||
<span>{{ index }}</span>
|
||
<div class="retractable-btn" @click="handleChangeRetractable(index)">
|
||
<a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
|
||
{{ retractableFlag[index] ? '收起' : '展开' }}
|
||
</div>
|
||
</div>
|
||
<div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
|
||
<template v-if="formPartList.indexOf(index) === 0">
|
||
<!--来源-->
|
||
<div class="box-title-text form-flex-item">
|
||
<div class="title-text">
|
||
<span class="required">*</span>
|
||
<span class="title-text-text" :title="$t('standardSelect.source')">{{ $t('standardSelect.source') }}</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="source">
|
||
<j-dict-select-tag class="box-input"
|
||
v-model="formInline.source"
|
||
:disabled="disabled || disabledFieldList.includes('source')"
|
||
:placeholder="$t('pleaseSelect')+$t('standardSelect.source')"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:options="sourceOptions"
|
||
@change="handleSourceChange" />
|
||
</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('log.operationType')">{{ $t('log.operationType') }}</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" prop="operationType">
|
||
<j-dict-select-tag class="box-input"
|
||
v-model="formInline.operationType"
|
||
:disabled="disabled || disabledFieldList.includes('operationType')"
|
||
:placeholder="$t('pleaseSelect')+$t('log.operationType')"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
dict-code="operation_type"
|
||
@change="handleOperationTypeChange" />
|
||
</a-form-model-item>
|
||
</div>
|
||
</template>
|
||
<template v-for="(item, index) in val">
|
||
<div :key="index"
|
||
class="box-title-text form-flex-item"
|
||
:class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
|
||
v-if="!hiddenFieldList.includes(item.dbFieldName)">
|
||
<div class="title-text">
|
||
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
|
||
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
|
||
</div>
|
||
<a-form-model-item class="item-model"
|
||
:prop="item.dbFieldName"
|
||
v-if="item.dbFieldName === 'standard_number_temp'">
|
||
<!--标准单选-->
|
||
<standard-selection v-if="formInline.operationType === OperationType.CHANGE.value"
|
||
:source="formInline.source"
|
||
:disabledSourceSearch="true"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
type="radio"
|
||
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||
v-model="formInline[item.dbFieldName]"
|
||
@listChange="handleStandardChange" />
|
||
<!--文本框-->
|
||
<a-input v-else
|
||
class="box-input"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:maxLength="50"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
|
||
</a-form-model-item>
|
||
<a-form-model-item class="item-model" :prop="item.dbFieldName" v-else>
|
||
<!-- 1, 日期单选 -->
|
||
<a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
|
||
class="box-input"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:getCalendarContainer="(trigger) => trigger.parentNode"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
style="width: 100%" />
|
||
<!-- 2, 单选用户 -->
|
||
<user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:filedName="item.dbFieldName"
|
||
@nameChange="userSelectNameChange"
|
||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||
type="radio"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
<!-- 3, 单选组织机构 -->
|
||
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:backDepart="true" />
|
||
<!-- 4, 日期多选 -->
|
||
<j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:fieldName="item.dbFieldName"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
<!-- 5, 多行文本 -->
|
||
<a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
|
||
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:maxLength="500"
|
||
v-model="formInline[item.dbFieldName]" :rows="4" />
|
||
<!-- 6, 标准多选 -->
|
||
<standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
|
||
:source="formInline.source"
|
||
:disabledSourceSearch="true"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:exclude-standard-numbers="excludeStandardFields.includes(item.dbFieldName) ? excludeStandardNumbers : null"
|
||
v-model="formInline[item.dbFieldName]" />
|
||
<!-- 7, 多选组织机构 -->
|
||
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:multi="true"
|
||
:backDepart="true"
|
||
:treeOpera="true" />
|
||
<!-- 8, 上传文件 -->
|
||
<a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
|
||
@click="clickButtonToUpload(item)">
|
||
{{
|
||
(formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
|
||
|| formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
|
||
? $t('uploadFile.clickUpload')
|
||
: $t('uploadFile.viewUploadedFiles')
|
||
}}
|
||
</a-button>
|
||
<!-- 9, 文本框 -->
|
||
<a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
|
||
class="box-input"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model.trim="formInline[item.dbFieldName]"
|
||
:maxLength="item.dbLength"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
|
||
<!-- 10, 下拉单选（数据字典） -->
|
||
<j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:dictCode="item.dictField" />
|
||
<!-- 11, 下拉多选（数据字典） -->
|
||
<j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
|
||
class="box-input"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:dictCode="item.dictField" />
|
||
<!-- 12, 树选择 -->
|
||
<a-tree-select
|
||
v-else-if="item.fieldShowType === FieldType.TREE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
style="width: 100%"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
tree-checkable
|
||
treeCheckStrictly
|
||
:label-in-value="false"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
<!-- 14, 年份选择 -->
|
||
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
|
||
show-type="year"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:default-value="defaultValue[item.dbFieldName]"
|
||
date-format="YYYY"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
<!-- 15, 树选择（单选） -->
|
||
<a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||
style="width: 100%"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
:label-in-value="false"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||
<!--16、树形弹框选择-->
|
||
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
v-model="formInline[item.dbFieldName]"
|
||
@nameChange="treeSelectNameChange"
|
||
:filedName="item.dbFieldName"
|
||
type="radio"
|
||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||
:dict-id="item.dictId"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
</a-form-model-item>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</a-form-model>
|
||
|
||
<!--流程审批信息-->
|
||
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
|
||
<a-form :form="approvalInfoForm">
|
||
<!--备注-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
|
||
<a-input :placeholder="$t('pleaseEnter') + $t('remarks')"
|
||
@change="event => event.target.value = event.target.value.trim()"
|
||
:maxLength="500"
|
||
type="textarea"
|
||
v-decorator="['handleText']" />
|
||
</a-form-item>
|
||
<!--附件-->
|
||
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
|
||
<j-upload v-decorator="['handleFile']" return-id />
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
<!--人员信息-->
|
||
<div class="detail-page-scroll-content p-0" v-show="switchValue === 'user'">
|
||
<process-detail-list>
|
||
<template #personnelInfo>
|
||
<personnel-info ref="personnelInfo" :data="personnelInfoData" />
|
||
</template>
|
||
</process-detail-list>
|
||
</div>
|
||
<div class="detail-page-bottom-operate-box">
|
||
<!--转办 审批节点存在-->
|
||
<a-button type="primary" :loading="loading" ghost icon="arrow-up" v-if="btnList.includes('return')" @click="handleTurnTo">
|
||
{{ $t('turnTo') }}
|
||
</a-button>
|
||
<!--保存 发起节点、审批节点都存在-->
|
||
<a-button type="primary" :loading="loading" ghost v-if="btnList.includes('save')" @click="handleSave">
|
||
<i class="iconfont icon-save" />{{ $t('preservation') }}
|
||
</a-button>
|
||
<!--提交 发起节点存在-->
|
||
<a-button type="primary" :loading="loading" @click="handleSubmit" v-if="btnList.includes('submit')" icon="upload">
|
||
{{ $t('submit') }}
|
||
</a-button>
|
||
<!--同意 审批节点存在-->
|
||
<a-button type="primary" :loading="loading" icon="check-circle" v-if="btnList.includes('agree')" @click="handleSubmit">
|
||
{{ $t('agree') }}
|
||
</a-button>
|
||
<!--驳回 审批节点存在-->
|
||
<a-button type="primary" :loading="loading" icon="close-circle" v-if="btnList.includes('reject')" @click="handleSubmit">
|
||
{{ $t('reject') }}
|
||
</a-button>
|
||
</div>
|
||
|
||
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
|
||
|
||
<!--转办选人-->
|
||
<user-select-modal ref="userSelectModal" @change="continueTurnTo" />
|
||
</internal-detail-page>
|
||
</template>
|
||
|
||
<script>
|
||
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
||
import {
|
||
FieldType,
|
||
StandardSource,
|
||
OperationType,
|
||
StandardProperty,
|
||
ProcessKey,
|
||
FGEntryChangeProcessNode
|
||
} from '../../../enums/commonEnums.js'
|
||
import {
|
||
getDomesticStandardDocumentInfo,
|
||
getDomesticStandardFormModal,
|
||
getOverseasStandardForm,
|
||
getOverseasStandardDocumentInfo
|
||
} from '../../../api/standardRegulationLibraryApi.js'
|
||
import { getAction } from '../../../api/manage.js'
|
||
import { ajaxGetDictItems, getFormDictTreeList } from '../../../api/api.js'
|
||
import JMultipleDatePicker from '../../../components/JMultipleDatePicker.vue'
|
||
import UserSelection from '../../../components/selection/UserSelection.vue'
|
||
import StandardSelection from '../../../components/selection/StandardSelection.vue'
|
||
import UploadFile from '../../../components/UploadFile.vue'
|
||
import PersonnelInfo from '../../../components/PersonnelInfo.vue'
|
||
import ProcessDetailList from '../../../components/ProcessDetailList.vue'
|
||
import UserSelectModal from '../../../components/selection/UserSelectModal.vue'
|
||
import TreeSelection from '../../../components/selection/TreeSelection'
|
||
import { initiateStandardECProcess, saveStandardECProcess } from '../../../api/workCenter'
|
||
import { WorkCenterMixin } from '../../../mixins/WorkCenterMixin'
|
||
|
||
export default {
|
||
name: 'StandardEntryOrChangeProcess',
|
||
components: {
|
||
PersonnelInfo,
|
||
UploadFile,
|
||
StandardSelection,
|
||
UserSelection,
|
||
JMultipleDatePicker,
|
||
InternalDetailPage,
|
||
ProcessDetailList,
|
||
UserSelectModal,
|
||
TreeSelection
|
||
},
|
||
mixins: [WorkCenterMixin],
|
||
data () {
|
||
return {
|
||
FieldType,
|
||
OperationType,
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 4 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 20 }
|
||
},
|
||
longLabelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 2 }
|
||
},
|
||
longWrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 22 }
|
||
},
|
||
// 流程信息表单
|
||
processInfoForm: this.$form.createForm(this),
|
||
processInfo: {},
|
||
// 特殊的placeholder
|
||
specialPlaceholder: {
|
||
standard_number_temp: `${this.$t('standardRegulationLibrary.inputExample')}7258`
|
||
},
|
||
defaultValue: {
|
||
year_number: new Date().getFullYear() + ''
|
||
},
|
||
// 业务基本信息的字段
|
||
formList: {},
|
||
// 业务基本信息有几个部分
|
||
formPartList: [],
|
||
formListArr: [], // 所有的字段
|
||
optionsData: {}, // 用接口获取到的下拉数据
|
||
retractableFlag: {}, // 面板展开收起的标识
|
||
isFormInline: false,
|
||
rules: {},
|
||
// 业务基本信息表单
|
||
formInline: {},
|
||
// 需要隐藏的字段
|
||
hiddenFieldList: [],
|
||
disabled: false,
|
||
uploadName: '',
|
||
sourceOptions: [],
|
||
// 审批信息的表单
|
||
approvalInfoForm: this.$form.createForm(this),
|
||
approvalInfo: {},
|
||
loading: false,
|
||
switchValue: 'base',
|
||
excludeStandardNumbers: null,
|
||
currentNode: null,
|
||
btnList: [] // 拥有的按钮
|
||
}
|
||
},
|
||
computed: {
|
||
pageTitle () {
|
||
return `${this.$t('flowCenter')}${this.$route.meta.title}（法规工程师发起）`
|
||
},
|
||
// 不可编辑的字段
|
||
disabledFieldList () {
|
||
// 标准法规变更
|
||
if (this.formInline.operationType === OperationType.CHANGE.value) {
|
||
// 标准编号，被代替标准号，被引用标准号，标准类别，年代号
|
||
return ['standard_name', 'replaced_by_standard_number', 'referenced_standard', 'standard_class', 'year_number']
|
||
}
|
||
return ['replaced_by_standard_number', 'referenced_standard']
|
||
},
|
||
// 不能包含当前标准的字段
|
||
excludeStandardFields () {
|
||
if (this.formInline.operationType === OperationType.CHANGE.value) {
|
||
return ['substitute_standard_number', 'reference_standard']
|
||
}
|
||
return []
|
||
}
|
||
},
|
||
watch: {
|
||
// 国内的零部件名称、适用认证、适用车型和标准性质关联，准入标准必填，非准入标准不必填
|
||
'formInline.standard_property' () {
|
||
this.handleDomesticSpecialCheck()
|
||
}
|
||
},
|
||
created () {
|
||
if (this.$route.query.id) {
|
||
this.disabled = true
|
||
} else {
|
||
this.currentNode = FGEntryChangeProcessNode.initiate.value
|
||
this.btnList = FGEntryChangeProcessNode.initiate.btn
|
||
}
|
||
this.getSourceOptions()
|
||
// 默认选中国内
|
||
this.initDomesticStandardForm()
|
||
this.getPersonInfoStructure(ProcessKey.FB_ENTRY_CHANGE.value)
|
||
},
|
||
methods: {
|
||
/**
|
||
* 数据字典值获取
|
||
*/
|
||
getSourceOptions () {
|
||
ajaxGetDictItems('standard_source').then(res => {
|
||
if (res.success) {
|
||
this.sourceOptions = (res.result || []).filter(tt => tt.value === StandardSource.DOMESTIC.value || tt.value === StandardSource.OVERSEAS.value)
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 获取国内标准的表单
|
||
*/
|
||
initDomesticStandardForm () {
|
||
const params = {
|
||
module: StandardSource.DOMESTIC.value,
|
||
type: 2 // 2是新增；1是详情
|
||
}
|
||
this.formInline = {}
|
||
this.loading = true
|
||
getDomesticStandardFormModal(params).then(res => {
|
||
if (res.success) {
|
||
this.formList = res.result || {}
|
||
this.formListArr = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
|
||
this.formPartList = Object.keys(this.formList)
|
||
this.formInline.source = StandardSource.DOMESTIC.value
|
||
this.getOptionsData() // 处理通过接口获取的下拉数据
|
||
this.integrateData() // 处理表单验证
|
||
this.initRetractableFlag() // 处理面板展开
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 获取海外标准的表单
|
||
*/
|
||
initOverseasStandardForm () {
|
||
this.loading = true
|
||
const params = {
|
||
module: StandardSource.OVERSEAS.value,
|
||
type: 2 // 2是新增；1是详情
|
||
}
|
||
this.formInline = {}
|
||
getOverseasStandardForm(params).then(res => {
|
||
if (res.success) {
|
||
this.formList = res.result || {}
|
||
this.formListArr = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
|
||
this.formPartList = Object.keys(this.formList)
|
||
this.formInline.source = StandardSource.OVERSEAS.value
|
||
this.getOptionsData() // 处理通过接口获取的下拉数据
|
||
this.integrateData() // 处理表单验证
|
||
this.initRetractableFlag() // 处理面板展开
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 默认所有面板都是展开状态
|
||
*/
|
||
initRetractableFlag () {
|
||
this.retractableFlag = {}
|
||
this.formPartList.forEach(key => {
|
||
this.retractableFlag[key] = true
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
/**
|
||
* 处理需要通过接口获取的下拉数据
|
||
*/
|
||
getOptionsData () {
|
||
this.formListArr.forEach(item => {
|
||
if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
|
||
// 展示类型是树选择，且有接口的
|
||
if (item.fieldHref) {
|
||
getAction(item.fieldHref).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
} else if (item.dictId) {
|
||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 处理表单验证
|
||
*/
|
||
integrateData () {
|
||
this.isFormInline = false
|
||
const rules = {}
|
||
this.formListArr.forEach((res, index) => {
|
||
const rule = []
|
||
if (res.fieldMustInput === '1') {
|
||
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'blur'
|
||
})
|
||
} else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
|
||
// 解决第一次校验不消失的问题
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: ['change', 'blur']
|
||
})
|
||
} else {
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
})
|
||
}
|
||
}
|
||
if (rule.length > 0) {
|
||
rules[res.dbFieldName] = rule
|
||
}
|
||
})
|
||
this.rules = rules
|
||
this.isFormInline = true
|
||
},
|
||
/**
|
||
* 面板展开收起
|
||
* @param key
|
||
*/
|
||
handleChangeRetractable (key) {
|
||
this.$set(this.retractableFlag, key, !this.retractableFlag[key])
|
||
this.$forceUpdate()
|
||
},
|
||
/**
|
||
* 选择用户得到用户名
|
||
* @param value
|
||
* @param fieldName
|
||
*/
|
||
userSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
/**
|
||
* 点击点击上传按钮
|
||
* @param item
|
||
*/
|
||
clickButtonToUpload (item) {
|
||
this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
|
||
this.uploadName = item.dbFieldName
|
||
},
|
||
/**
|
||
* 文件上传改变后的回调
|
||
* @param data
|
||
*/
|
||
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 }
|
||
},
|
||
/**
|
||
* 来源变更，重新获取表单
|
||
*/
|
||
handleSourceChange () {
|
||
switch (this.formInline.source) {
|
||
case StandardSource.DOMESTIC.value:
|
||
this.initDomesticStandardForm()
|
||
break
|
||
case StandardSource.OVERSEAS.value:
|
||
this.initOverseasStandardForm()
|
||
break
|
||
default:
|
||
this.formInline.source = StandardSource.DOMESTIC.value
|
||
this.initDomesticStandardForm()
|
||
break
|
||
}
|
||
},
|
||
/**
|
||
* 操作类型变化
|
||
*/
|
||
handleOperationTypeChange (value) {
|
||
this.$refs.ruleForm.clearValidate()
|
||
this.formInline = {
|
||
source: this.formInline.source
|
||
}
|
||
this.formInline.operationType = value
|
||
},
|
||
switchChange (value) {
|
||
this.switchValue = value
|
||
},
|
||
/**
|
||
* 处理页面的数据
|
||
*/
|
||
dealFormData () {
|
||
const formData = {}
|
||
let flag = true
|
||
// 处理流程信息
|
||
this.processInfoForm.validateFields((errors, values) => {
|
||
if (!errors) {
|
||
formData.basicProcessInfoDTO = Object.assign(this.processInfo, values)
|
||
} else {
|
||
flag = false
|
||
}
|
||
formData.basicProcessInfoDTO = Object.assign(this.processInfo, values)
|
||
})
|
||
// 处理业务信息
|
||
this.$refs.ruleForm.validate(valid => {
|
||
if (valid) {
|
||
formData.businessInfoDTO = this.dealBusinessData({ ...this.formInline })
|
||
} else {
|
||
flag = false
|
||
}
|
||
})
|
||
// 处理流程审批信息
|
||
this.approvalInfoForm.validateFields((errors, values) => {
|
||
if (!errors) {
|
||
formData.basicTaskInfoDTO = Object.assign(this.approvalInfo, values)
|
||
} else {
|
||
flag = false
|
||
}
|
||
})
|
||
// 处理人员信息
|
||
const userInfo = this.$refs.personnelInfo.getDataObjVerify()
|
||
if (!userInfo) {
|
||
flag = false
|
||
} else {
|
||
formData.userInfoMap = userInfo
|
||
}
|
||
if (flag) {
|
||
return formData
|
||
}
|
||
return flag
|
||
},
|
||
dealBusinessData (data) {
|
||
// 下划线转驼峰
|
||
const toHump = (name) => {
|
||
return name.replace(/\_(\w)/g, function (all, letter) {
|
||
return letter.toUpperCase()
|
||
})
|
||
}
|
||
const resultData = {}
|
||
Object.keys(data).forEach(key => {
|
||
const newKey = toHump(key)
|
||
resultData[newKey] = data[key]
|
||
})
|
||
return resultData
|
||
},
|
||
/**
|
||
* 保存
|
||
*/
|
||
handleSave () {
|
||
const formData = {
|
||
basicProcessInfoDTO: Object.assign(this.processInfo, this.processInfoForm.getFieldsValue()), // 流程信息
|
||
businessInfoDTO: this.dealBusinessData({ ...this.formInline }), // 业务信息
|
||
basicTaskInfoDTO: Object.assign(this.approvalInfo, this.approvalInfoForm.getFieldsValue()), // 流程审批信息
|
||
userInfoMap: this.$refs.personnelInfo.getDataObj() // 用户信息
|
||
}
|
||
const params = { ...formData.basicProcessInfoDTO, ...formData.businessInfoDTO, ...formData.basicTaskInfoDTO }
|
||
if (!Object.values(params).some(tt => !!tt || tt === 0)) {
|
||
// 提示至少填写一项
|
||
this.$message.warning(this.$t('pleaseFillInAtLeastOneItem'))
|
||
return
|
||
}
|
||
this.loading = true
|
||
saveStandardECProcess(formData).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 提交（发起）
|
||
*/
|
||
handleSubmit () {
|
||
const formData = this.dealFormData()
|
||
if (!formData) {
|
||
return
|
||
}
|
||
this.loading = true
|
||
initiateStandardECProcess(formData).then(res => {
|
||
if (res.success) {
|
||
this.$message.success(res.message)
|
||
this.goBack()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 转办
|
||
*/
|
||
handleTurnTo () {
|
||
this.$refs.userSelectModal.open()
|
||
},
|
||
continueTurnTo () {
|
||
|
||
},
|
||
treeSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
/**
|
||
* 标准变化
|
||
* @param list
|
||
*/
|
||
handleStandardChange (list) {
|
||
if (this.formInline.operationType === OperationType.CHANGE.value && list && list.length > 0) {
|
||
const standardId = list[0].id
|
||
switch (this.formInline.source) {
|
||
case StandardSource.DOMESTIC.value:
|
||
this.initDomesticFormData(standardId)
|
||
break
|
||
case StandardSource.OVERSEAS.value:
|
||
this.initOverseasFormData(standardId)
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 获取国内标准表单数据
|
||
* @param id
|
||
*/
|
||
initDomesticFormData (id) {
|
||
this.loading = true
|
||
getDomesticStandardDocumentInfo({ id, type: 2 }).then(res => {
|
||
if (res.success) {
|
||
// 处理树结构多选回显
|
||
console.log(this.da)
|
||
const formList = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
|
||
const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
|
||
const data = res.result || {}
|
||
treeMultipleField.forEach(field => {
|
||
const valueArr = []
|
||
if (data[field.dbFieldName]) {
|
||
const values = data[field.dbFieldName].split(',')
|
||
for (let i = 0; i < values.length; i++) {
|
||
valueArr[i] = {
|
||
value: values[i]
|
||
}
|
||
}
|
||
data[field.dbFieldName] = valueArr
|
||
} else {
|
||
data[field.dbFieldName] = undefined
|
||
}
|
||
})
|
||
const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
|
||
dictField.forEach(field => {
|
||
data[field.dbFieldName] = data[field.dbFieldName] || null
|
||
})
|
||
this.formInline = Object.assign({ ...this.formInline }, { ...data })
|
||
// 处理标准选择不能选自己
|
||
this.excludeStandardNumbers = this.formInline.standard_number
|
||
this.handleDomesticSpecialCheck()
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
/**
|
||
* 国内的特殊处理
|
||
*/
|
||
handleDomesticSpecialCheck () {
|
||
const fieldNameList = ['part_name', 'applicable_certification', 'applicable_vehicle']
|
||
const rules = JSON.parse(JSON.stringify(this.rules))
|
||
if (this.formInline.standard_property === StandardProperty.admittance.value) {
|
||
fieldNameList.forEach(key => {
|
||
if (rules[key] && rules[key].length > 0) {
|
||
rules[key][0].required = true
|
||
const dataPart = Object.keys(this.formList).find(tt => this.formList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.formList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.formList[dataPart][index].fieldMustInput = '1'
|
||
}
|
||
})
|
||
} else {
|
||
fieldNameList.forEach(key => {
|
||
if (rules[key] && rules[key].length > 0) {
|
||
rules[key][0].required = false
|
||
const dataPart = Object.keys(this.formList).find(tt => this.formList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.formList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.formList[dataPart][index].fieldMustInput = '0'
|
||
}
|
||
})
|
||
}
|
||
this.rules = Object.assign({}, rules)
|
||
this.$refs.ruleForm.clearValidate()
|
||
},
|
||
/**
|
||
* 获取海外的表单数据
|
||
* @param id
|
||
*/
|
||
initOverseasFormData (id) {
|
||
this.loading = true
|
||
getOverseasStandardDocumentInfo({ id, type: 2 }).then(res => {
|
||
if (res.success) {
|
||
// 处理树结构多选回显
|
||
const formList = Object.values(this.formList).reduce((acc, cur) => acc.concat(cur), [])
|
||
const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
|
||
const data = res.result || {}
|
||
treeMultipleField.forEach(field => {
|
||
const valueArr = []
|
||
if (data[field.dbFieldName]) {
|
||
const values = data[field.dbFieldName].split(',')
|
||
for (let i = 0; i < values.length; i++) {
|
||
valueArr[i] = {
|
||
value: values[i]
|
||
}
|
||
}
|
||
data[field.dbFieldName] = valueArr
|
||
} else {
|
||
data[field.dbFieldName] = undefined
|
||
}
|
||
})
|
||
const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
|
||
dictField.forEach(field => {
|
||
data[field.dbFieldName] = data[field.dbFieldName] || null
|
||
})
|
||
this.formInline = Object.assign({ ...this.formInline }, { ...data })
|
||
// 处理标准选择不能选自己
|
||
this.excludeStandardNumbers = this.formInline.standard_number
|
||
} else {
|
||
this.$message.warning(res.message)
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
goBack () {
|
||
let timer = setTimeout(() => {
|
||
this.$router.go(-1)
|
||
}, 700)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '~@assets/less/common.less';
|
||
|
||
/deep/ .ant-form-item-children {
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.button-text {
|
||
width: 100%;
|
||
}
|
||
</style>
|