Files
laws-sinotruk-client/src/components/customField/AddForm.vue
T
2023-11-06 16:28:18 +08:00

609 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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"
:source="flag"
: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="innerDisabledField.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) || innerDisabledField.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>
<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 } 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'
export default {
name: 'AddForm',
components: {
UserSelection,
JMultipleDatePicker,
StandardSelection,
JDictSelectTag,
JMultiSelectTag,
UploadFile,
TreeSelection
},
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
}
},
mounted () {
// 如果是企标就获取企标级别映射数据
if (this.flag === '3') {
getStandardGradeClassification().then(res => {
if (res.success) {
this.standardGradeClassification = res.result
}
})
}
},
data () {
return {
FieldType,
loading: false,
formInline: {},
isFormInline: false,
rules: {},
confirmLoading: false,
type: 2,
dataList: [],
ruleList: [],
uploadName: '',
optionsData: {}, // 用接口获取到的下拉数据
excludeStandardNumbers: '', // 不包含的标准号
standardGradeClassification: [], // 企标级别映射
innerDisabledField: [] // 内部不可编辑字段
}
},
watch: {
// 国内、海外的零部件名称、适用认证、适用车型和标准性质关联,准入标准必填,非准入标准不必填
'formInline.standard_property' () {
this.handleDomesticSpecialCheck()
},
// 标准等级分类改变后授权部门需要自动带出
'formInline.grade_classification' (val) {
if (val && this.flag === '3') {
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级
this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '1').deptIds
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级
this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '2').deptIds
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
if (!this.innerDisabledField.includes('auth_dept')) {
this.innerDisabledField.push('auth_dept')
}
}
}
},
// 企标是否试行改变,标准状态需要跟着变,试行周期必填校验也跟着变
'formInline.try_flag' (val) {
if (val && this.flag === '3') {
if (val === IsTrial.YES.value) {
// 试行,标准状态改为试运行,
this.formInline.standard_state = EnterpriseStandardStatus.TRIAL_OPERATION.value
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 {
// 不试行,标准状态可修改
if (this.innerDisabledField.includes('standard_state')) {
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'standard_state')
}
// 不试行,试行周期非必填
this.rules.trial_period[0].required = false
}
}
}
},
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) {
// 处理树结构多选回显
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
} 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
}
})
})
},
// 获取表单列表
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
}
})
console.log(rules)
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.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)
}
})
}
}
})
},
// 点击点击上传按钮
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 () {
this.$refs.ruleForm.clearValidate()
},
/**
* 国内海外的特殊处理
*/
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()
}
}
}
}
</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>