784 lines
34 KiB
Vue
784 lines
34 KiB
Vue
<template>
|
||
<a-spin :spinning="loading">
|
||
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
|
||
<div v-for="(val,index) in dataList" :key="index">
|
||
<div v-if="val && val.length > 0" class="header-text">{{ index }}</div>
|
||
<div v-if="val && val.length > 0" class="form-flex-box">
|
||
<template v-for="(item, index) in val">
|
||
<div :key="index"
|
||
class="box-title-text form-flex-item-half"
|
||
: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' || rules[item.dbFieldName][0].required">*</span>
|
||
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
|
||
</div>
|
||
<a-form-model-item class="item-model" :prop="item.dbFieldName">
|
||
<!-- 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"
|
||
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseSelectStandard')"
|
||
:source="getFlag(item.dbFieldName)"
|
||
:disabledSourceSearch="!selectStandardCanUpdateTypeField.includes(item.dbFieldName)"
|
||
: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) || innerDisabledField.includes(item.dbFieldName)"
|
||
:selectRange="item.dbFieldName === 'auth_dept' ? departSelectRange : []"
|
||
: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) || innerDisabledField.includes(item.dbFieldName)"
|
||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||
:type="'select'"
|
||
:triggerChange="false"
|
||
:options="optionsData[item.dbFieldName]"
|
||
:dictCode="item.fieldHref ? null : 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"
|
||
:options="optionsData[item.dbFieldName]"
|
||
:dictCode="item.fieldHref ? null : item.dictField" />
|
||
<!-- 12, 树选择 -->
|
||
<s-tree-select
|
||
v-else-if="item.fieldShowType === FieldType.TREE.value"
|
||
v-model="formInline[item.dbFieldName]"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||
:tree-data="optionsData[item.dbFieldName]"
|
||
tree-checkable
|
||
treeCheckStrictly
|
||
: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, 树选择（单选） -->
|
||
<s-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="checkbox"
|
||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||
:dict-id="item.dictId"
|
||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||
</a-form-model-item>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
|
||
</a-form-model>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script>
|
||
import '@assets/less/common.less'
|
||
import JDictSelectTag from '../dict/JDictSelectTag'
|
||
import JMultiSelectTag from '../dict/JMultiSelectTag'
|
||
import UploadFile from '../UploadFile'
|
||
// 选择标准选择器
|
||
import StandardSelection from '../selection/StandardSelection'
|
||
import {
|
||
FieldType,
|
||
StandardGradeClassify,
|
||
StandardProperty,
|
||
IsTrial,
|
||
EnterpriseStandardStatus,
|
||
StandardSource,
|
||
StandardStatus
|
||
} from '../../enums/commonEnums'
|
||
import JMultipleDatePicker from '../JMultipleDatePicker'
|
||
import UserSelection from '../selection/UserSelection'
|
||
import { getAction } from '../../api/manage.js'
|
||
import { getFormDictTreeList } from '../../api/api.js'
|
||
import TreeSelection from '../selection/TreeSelection'
|
||
import { getStandardGradeClassification } from '../../api/enterpriseStandardLibraryApi'
|
||
import STreeSelect from '../STreeSelect'
|
||
|
||
export default {
|
||
name: 'AddForm',
|
||
components: {
|
||
UserSelection,
|
||
JMultipleDatePicker,
|
||
StandardSelection,
|
||
JDictSelectTag,
|
||
JMultiSelectTag,
|
||
UploadFile,
|
||
TreeSelection,
|
||
STreeSelect
|
||
},
|
||
props: {
|
||
url: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 获取表单数据的方法
|
||
getFormFunc: {
|
||
type: Function,
|
||
required: false,
|
||
default: () => {
|
||
return function () {
|
||
}
|
||
}
|
||
},
|
||
// 获取详细信息的方法
|
||
getDocumentInfoFunc: {
|
||
type: Function,
|
||
required: false,
|
||
default: () => {
|
||
return function () {
|
||
}
|
||
}
|
||
},
|
||
// 标准模块的区分：1，国内； 2，国外；3，企标
|
||
flag: {
|
||
type: String,
|
||
default: null
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
extraParams: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 特殊的placeholder，目前只处理了输入框，有需要再处理别的
|
||
specialPlaceholder: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 默认值
|
||
defaultValue: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 不可修改值
|
||
disabledFieldList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// 需要隐藏的字段
|
||
hiddenFieldList: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// 不包含的标准从哪个字段取值
|
||
excludeStandardValFormFields: {
|
||
type: String,
|
||
required: false,
|
||
default: 'standard_number'
|
||
},
|
||
// 需要处理不包含标准的字段
|
||
excludeStandardFields: {
|
||
type: [Array],
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
// 是否需要进行国内标准的特殊校验
|
||
domesticSpecialCheck: {
|
||
type: Boolean,
|
||
required: false,
|
||
default: false
|
||
},
|
||
// 选择标准字段和选择来源的对应关系
|
||
flagByField: {
|
||
type: Object,
|
||
required: false,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
// 选择标准组件可以修改来源的字段（暂时只有企标的引用标准用到）
|
||
selectStandardCanUpdateTypeField: {
|
||
type: Array,
|
||
required: false,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
// 如果是企标就获取企标级别映射数据
|
||
if (this.flag === StandardSource.ENTERPRISE.value) {
|
||
getStandardGradeClassification().then(res => {
|
||
if (res.success) {
|
||
this.standardGradeClassification = res.result
|
||
}
|
||
})
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
FieldType,
|
||
StandardSource,
|
||
loading: false,
|
||
formInline: {},
|
||
isFormInline: false,
|
||
rules: {},
|
||
confirmLoading: false,
|
||
type: 2,
|
||
dataList: [],
|
||
ruleList: [],
|
||
uploadName: '',
|
||
optionsData: {}, // 用接口获取到的下拉数据
|
||
excludeStandardNumbers: '', // 不包含的标准号
|
||
standardGradeClassification: [], // 企标级别映射
|
||
innerDisabledField: [], // 内部不可编辑字段
|
||
departSelectRange: [], // 选择部门的选择范围，传了就只能从这些里面选，不传就都能选
|
||
isEditSetData: false, // 正在编辑回显数据
|
||
oldMainDraftingUnit: '' // 上一次的主起草单位
|
||
}
|
||
},
|
||
watch: {
|
||
// 国内的零部件名称、适用认证、适用车型和标准性质关联，准入标准必填，非准入标准不必填
|
||
'formInline.standard_property' () {
|
||
this.handleDomesticSpecialCheck()
|
||
},
|
||
// 标准等级分类改变后授权部门需要自动带出
|
||
'formInline.grade_classification' (val) {
|
||
if (val && this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||
if (val === StandardGradeClassify.ZERO_LEVEL.value) {
|
||
// 选的是0级，授权部门带出不可编辑
|
||
this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '0').deptIds
|
||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField.push('auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.ONE_LEVEL.value) {
|
||
// 选的是1级
|
||
// // 带出3级的部门：起草部门
|
||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||
// 带出主起草单位
|
||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||
// 设置可选择项
|
||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '1').deptIds.split(',')
|
||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
// 设置授权部门可编辑
|
||
if (this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.TWO_LEVEL.value) {
|
||
// 选的是2级
|
||
// // 带出3级的部门：起草部门
|
||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||
// 带出主起草单位
|
||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||
// 设置可选择项
|
||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '2').deptIds.split(',')
|
||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
// 设置授权部门可编辑
|
||
if (this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.THREE_LEVEL.value) {
|
||
// // 选的是3级，授权部门带出不可编辑
|
||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||
// 选的是3级，带出主起草单位
|
||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField.push('auth_dept')
|
||
}
|
||
}
|
||
} else if (val && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||
if (val === StandardGradeClassify.ZERO_LEVEL.value) {
|
||
// 选的是0级，授权部门带出不可编辑
|
||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField.push('auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.ONE_LEVEL.value) {
|
||
// 选的是1级
|
||
// 设置可选择项
|
||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '1').deptIds.split(',')
|
||
// 设置授权部门可编辑
|
||
if (this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.TWO_LEVEL.value) {
|
||
// 选的是2级
|
||
// 设置可选择项
|
||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '2').deptIds.split(',')
|
||
// 设置授权部门可编辑
|
||
if (this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||
}
|
||
} else if (val === StandardGradeClassify.THREE_LEVEL.value) {
|
||
// 选的是3级，授权部门带出不可编辑
|
||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||
this.innerDisabledField.push('auth_dept')
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 主起草单位改变后，需要将选中的主起草单位增加到授权部门
|
||
'formInline.main_drafting_unit' (val) {
|
||
if (val) {
|
||
if (this.formInline.grade_classification === StandardGradeClassify.ONE_LEVEL.value ||
|
||
this.formInline.grade_classification === StandardGradeClassify.TWO_LEVEL.value) {
|
||
// 标准等级分类是1级或者2级需要，把主起草单位追加到授权部门
|
||
let authDeptArr = (this.formInline.auth_dept || '').split(',')
|
||
// 把旧的主起草部门刨出去，否则每换一次主起草单位都会累计到授权部门
|
||
authDeptArr = authDeptArr.filter(item => item !== this.oldMainDraftingUnit)
|
||
authDeptArr.push(val)
|
||
this.formInline.auth_dept = authDeptArr.join(',')
|
||
} else if (this.formInline.grade_classification === StandardGradeClassify.THREE_LEVEL.value) {
|
||
// 标准等级分类是3级，把授权部门替换成主起草单位
|
||
this.formInline.auth_dept = val
|
||
}
|
||
this.oldMainDraftingUnit = val
|
||
}
|
||
},
|
||
// 企标是否试行改变，标准状态需要跟着变,试行周期必填校验也跟着变
|
||
'formInline.try_flag' (val) {
|
||
if (val && this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||
if (val === IsTrial.YES.value) {
|
||
// 试行，标准状态改为试运行，
|
||
this.formInline.standard_state = EnterpriseStandardStatus.TRIAL_OPERATION.value
|
||
// 试行周期给默认值24
|
||
this.formInline.trial_period = '24'
|
||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
// 试行，标准状态不可修改
|
||
if (!this.innerDisabledField.includes('standard_state')) {
|
||
this.innerDisabledField.push('standard_state')
|
||
}
|
||
// 试行，试行周期必填
|
||
this.rules.trial_period[0].required = true
|
||
} else {
|
||
// 试行周期置空
|
||
this.formInline.trial_period = undefined
|
||
// 不试行，标准状态可修改
|
||
if (this.innerDisabledField.includes('standard_state')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'standard_state')
|
||
}
|
||
// 不试行，试行周期非必填
|
||
this.rules.trial_period[0].required = false
|
||
}
|
||
} else if (val && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||
if (val === IsTrial.YES.value) {
|
||
// 编辑回显得时候改变，设置标准状态不可编辑，试行周期必填
|
||
// 试行，试行周期必填
|
||
this.rules.trial_period[0].required = true
|
||
} else {
|
||
// 不试行，试行周期非必填
|
||
this.rules.trial_period[0].required = false
|
||
}
|
||
}
|
||
},
|
||
// 编辑回显标准状态是废止，标准状态不可更改
|
||
'formInline.standard_state' (val) {
|
||
if (val && this.isEditSetData && (
|
||
(this.flag === StandardSource.ENTERPRISE.value && val === EnterpriseStandardStatus.ABOLISH.value) ||
|
||
(this.flag === StandardSource.DOMESTIC.value && val === StandardStatus.ABOLISH.value) ||
|
||
(this.flag === StandardSource.OVERSEAS.value && val === StandardStatus.ABOLISH.value))) {
|
||
// 状态是废止
|
||
if (!this.innerDisabledField.includes('standard_state')) {
|
||
this.innerDisabledField.push('standard_state')
|
||
}
|
||
} else if (this.formInline.try_flag === IsTrial.YES.value && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||
// 企标，是否试行选的是，需要标准状态不可编辑
|
||
if (!this.innerDisabledField.includes('standard_state')) {
|
||
this.innerDisabledField.push('standard_state')
|
||
}
|
||
} else {
|
||
// 状态不是废止
|
||
if (this.innerDisabledField.includes('standard_state')) {
|
||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'standard_state')
|
||
}
|
||
}
|
||
// 起草、征求依据、报批、废止状态时发布日期、实施日期不必填
|
||
this.handleRequiredByState(val)
|
||
}
|
||
},
|
||
methods: {
|
||
add () {
|
||
this.formInline = Object.assign({}, this.defaultValue)
|
||
this.$forceUpdate()
|
||
this.getForm()
|
||
},
|
||
edit (item, callback) {
|
||
this.loading = true
|
||
this.getForm(() => {
|
||
if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
|
||
this.loading = false
|
||
return
|
||
}
|
||
// type标识是新增表单还是详情页
|
||
this.getDocumentInfoFunc({ id: item.id, type: this.type }).then((res) => {
|
||
if (res.success) {
|
||
// 设置正在编辑回显值
|
||
this.isEditSetData = true
|
||
// 处理树结构多选回显
|
||
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
|
||
const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
|
||
this.formInline = res.result
|
||
callback && callback(this.formInline)
|
||
treeMultipleField.forEach(field => {
|
||
const valueArr = []
|
||
if (this.formInline[field.dbFieldName]) {
|
||
const values = this.formInline[field.dbFieldName].split(',')
|
||
for (let i = 0; i < values.length; i++) {
|
||
valueArr[i] = {
|
||
value: values[i]
|
||
}
|
||
}
|
||
this.formInline[field.dbFieldName] = valueArr
|
||
console.log(this.formInline[field.dbFieldName])
|
||
} else {
|
||
this.formInline[field.dbFieldName] = undefined
|
||
}
|
||
})
|
||
const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
|
||
dictField.forEach(field => {
|
||
this.formInline[field.dbFieldName] = this.formInline[field.dbFieldName] || null
|
||
})
|
||
|
||
// 处理标准选择不能选自己
|
||
this.excludeStandardNumbers = this.formInline[this.excludeStandardValFormFields]
|
||
this.handleDomesticSpecialCheck()
|
||
this.loading = false
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
}).finally(() => {
|
||
// 设置编辑回显值完成
|
||
this.isEditSetData = false
|
||
})
|
||
})
|
||
},
|
||
// 获取表单列表
|
||
getForm (callBack) {
|
||
if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
|
||
return
|
||
}
|
||
this.confirmLoading = true
|
||
const params = {
|
||
module: this.flag,
|
||
type: this.type
|
||
}
|
||
this.getFormFunc(params).then((res) => {
|
||
if (res.success) {
|
||
this.dataList = res.result
|
||
this.ruleList = res.result
|
||
this.integrateData()
|
||
this.getOptionsData() // 获取下拉数据
|
||
callBack && callBack()
|
||
}
|
||
})
|
||
},
|
||
// 设置表单校验
|
||
integrateData () {
|
||
this.isFormInline = false
|
||
const ruleList = []
|
||
for (const item in this.ruleList) {
|
||
this.ruleList[item].forEach(ol => {
|
||
ruleList.push(ol)
|
||
})
|
||
}
|
||
const rules = {}
|
||
ruleList.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 {
|
||
rule.push({
|
||
required: true,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
})
|
||
}
|
||
} else {
|
||
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
|
||
rule.push({
|
||
required: false,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'blur'
|
||
})
|
||
} else {
|
||
rule.push({
|
||
required: false,
|
||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||
trigger: 'change'
|
||
})
|
||
}
|
||
}
|
||
if (rule.length > 0) {
|
||
rules[res.dbFieldName] = rule
|
||
}
|
||
})
|
||
this.rules = rules
|
||
this.isFormInline = true
|
||
this.confirmLoading = false
|
||
},
|
||
/**
|
||
* 处理需要通过接口获取的下拉数据
|
||
*/
|
||
getOptionsData () {
|
||
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
|
||
formList.forEach(item => {
|
||
// 如果接口这个字段有值
|
||
if (item.fieldHref) {
|
||
getAction(item.fieldHref).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
} else if ((item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) && item.dictId) {
|
||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||
if (res.success) {
|
||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击点击上传按钮
|
||
clickButtonToUpload (item) {
|
||
this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
|
||
this.uploadName = item.dbFieldName
|
||
},
|
||
// 文件上传改变后的回调
|
||
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 }
|
||
},
|
||
// 标准选择变化
|
||
standardSelectionChange (value, id) {
|
||
// this.formInline[value + '_by'] = id
|
||
this.formInline = { ...this.formInline }
|
||
},
|
||
// 选择用户得到用户名
|
||
userSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
treeSelectNameChange (value, fieldName) {
|
||
this.formInline[fieldName + '_dictText'] = value
|
||
},
|
||
submit () {
|
||
this.$refs.ruleForm.validate(valid => {
|
||
if (valid) {
|
||
const formInline = JSON.parse(JSON.stringify(this.formInline))
|
||
Object.keys(formInline).forEach(res => {
|
||
if (formInline[res] instanceof Array) {
|
||
if (formInline[res][0] instanceof Object) {
|
||
// 说明是树选择
|
||
formInline[res] = formInline[res].map(item => item.value).join(',')
|
||
} else {
|
||
formInline[res] = formInline[res].join(',')
|
||
}
|
||
}
|
||
})
|
||
this.$emit('submitFormData', formInline)
|
||
} else {
|
||
this.$emit('addFormWarning')
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
clearValidate (fieldNameList) {
|
||
this.$refs.ruleForm.clearValidate(fieldNameList)
|
||
},
|
||
/**
|
||
* 国内海外的特殊处理
|
||
*/
|
||
handleDomesticSpecialCheck () {
|
||
if (this.domesticSpecialCheck) {
|
||
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.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.dataList[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.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.dataList[dataPart][index].fieldMustInput = '0'
|
||
}
|
||
})
|
||
}
|
||
this.rules = Object.assign({}, rules)
|
||
this.clearValidate(fieldNameList)
|
||
}
|
||
},
|
||
getFlag (fieldName) {
|
||
return this.flagByField[fieldName] || this.flag
|
||
},
|
||
filterTreeOption (input, option) {
|
||
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
|
||
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
},
|
||
/**
|
||
* 标准状态为起草、征求意见、报批等状态时发布日期、实施日期不应是必填项
|
||
* @param val
|
||
*/
|
||
handleRequiredByState (val) {
|
||
let notRequiredStatus = [], fields = []
|
||
// 国内和海外的标准状态是同一个数据字典
|
||
if (this.flag === StandardSource.DOMESTIC.value || this.flag === StandardSource.OVERSEAS.value) {
|
||
notRequiredStatus = [StandardStatus.DRAFT.value, StandardStatus.SEEK_FOR_OPTIONS.value, StandardStatus.EXAMINE.value, StandardStatus.APPROVAL.value, StandardStatus.ABOLISH.value]
|
||
fields = ['release_date', 'implementation_date']
|
||
} else { // 处理企标
|
||
notRequiredStatus = [EnterpriseStandardStatus.DRAFT.value, EnterpriseStandardStatus.SEEK_FOR_OPTIONS.value, EnterpriseStandardStatus.EXAMINE.value, EnterpriseStandardStatus.APPROVAL.value]
|
||
fields = ['release_date', 'implementation_date']
|
||
}
|
||
const rules = JSON.parse(JSON.stringify(this.rules))
|
||
if (notRequiredStatus.includes(val)) {
|
||
fields.forEach(key => {
|
||
if (rules[key] && rules[key].length > 0) {
|
||
rules[key][0].required = false
|
||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.dataList[dataPart][index].fieldMustInput = '0'
|
||
}
|
||
})
|
||
} else {
|
||
fields.forEach(key => {
|
||
if (rules[key] && rules[key].length > 0) {
|
||
rules[key][0].required = true
|
||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||
this.dataList[dataPart][index].fieldMustInput = '1'
|
||
}
|
||
})
|
||
}
|
||
this.rules = Object.assign({}, rules)
|
||
this.clearValidate(fields)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/deep/ .ant-form-item-children {
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.form-flex-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.form-flex-item-half {
|
||
width: 50%;
|
||
}
|
||
|
||
.form-flex-item-line {
|
||
width: 100%;
|
||
}
|
||
</style>
|