'init'
This commit is contained in:
198
src/components/basicData/HeadForm.vue
Normal file
198
src/components/basicData/HeadForm.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:18:27
|
||||
* @LastEditTime: 2022-06-15 15:02:29
|
||||
* @LastEditors: gtz
|
||||
* @Description:
|
||||
*/-->
|
||||
|
||||
<template>
|
||||
<el-form :inline="true" :model="formInline" class="blueTip">
|
||||
<el-form-item v-for="(item,index) in formConfig" :key="index" :label="item.label?item.label:''" style="marginBottom:4px" :required="item.required?item.required:false">
|
||||
<el-input v-if="item.type==='input'" v-model="formInline[item.param]" size="small" clearable :disabled="item.disabled?item.disabled:false" :style="item.width?'width:'+item.width+'px':'width:200px'" :placeholder="['placeholder.input', item.placeholder ? item.placeholder : ''] | i18nFilterForm" />
|
||||
<el-select v-if="item.type==='select'" v-model="formInline[item.param]" size="small" :filterable="item.filterable?item.filterable:false" :multiple="item.multiple?item.multiple:false" :clearable="item.clearable===false?false:true" :style="item.width?item.width+'px':'width:200px'" :placeholder="['placeholder.select', item.label] | i18nFilterForm" @change="item.onchange ? $emit('select-changed', { param: item.param, value: formInline[item.param]}) : null">
|
||||
<el-option v-for="(sub,i) in item.selectOptions" :key="i" :label="item.labelField?sub[item.labelField]:sub['name']" :value="item.valueField?sub[item.valueField]:sub['id']" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-if="item.type==='datePicker'"
|
||||
:key="item.elDatePickerKey || Math.random()"
|
||||
v-model="formInline[item.param]"
|
||||
size="small"
|
||||
:type="item.dateType"
|
||||
:format="item.format?item.format:'yyyy-MM-dd'"
|
||||
:value-format="item.valueFormat?item.valueFormat:null"
|
||||
:default-time="item.defaultTime || null"
|
||||
:range-separator="item.dateType==='daterange' && item.rangeSeparator || null"
|
||||
:start-placeholder="item.dateType==='daterange' && item.startPlaceholder || null"
|
||||
:end-placeholder="item.dateType==='daterange' && item.endPlaceholder || null"
|
||||
:placeholder="item.placeholder"
|
||||
:picker-options="item.pickerOptions?item.pickerOptions:null"
|
||||
:style="item.width?'width:'+item.width+'px':'width:250px'"
|
||||
@change="$forceUpdate()"
|
||||
/>
|
||||
<el-autocomplete v-if="item.type==='autocomplete'" v-model="formInline[item.param]" size="small" :value-key="item.valueKey?item.valueKey:'value'" :fetch-suggestions="item.querySearch" :placeholder="['placeholder.input', item.placeholder] | i18nFilterForm" clearable :style="item.width?'width:'+item.width+'px':'width:200px'" filterable />
|
||||
<el-button v-if="item.type==='button'" :type="item.color" size="small" @click="headBtnClick(item.name)">{{ item.btnName | i18nFilter }}</el-button>
|
||||
<el-upload
|
||||
v-if="item.type==='uploadButton'"
|
||||
style="display: inline-block"
|
||||
:on-success="importFile"
|
||||
:on-error="importFileError"
|
||||
:name="item.nameField || 'file'"
|
||||
:action="item.action"
|
||||
:show-file-list="false"
|
||||
size="small"
|
||||
>
|
||||
<el-button :type="item.color">{{ item.btnName | i18nFilter }}</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// formConfig的传入的格式demo
|
||||
// headFormConfig:[
|
||||
// {
|
||||
// type:'input',
|
||||
// label:this.$t('module.basicData.ScrapInfo.cause'),
|
||||
// placeholder:this.$t('module.basicData.ScrapInfo.cause'),
|
||||
// param:'scrap'
|
||||
// width:200
|
||||
// },
|
||||
// {
|
||||
// type:'select',
|
||||
// label:this.$t('module.basicData.ScrapInfo.scrapType'),
|
||||
// selectOptions:[],
|
||||
// param:'scrapId',
|
||||
// width:200,
|
||||
// defaultSelect:'',
|
||||
// clearable:false//不传默认显示clearable，传false就不显示clearable
|
||||
// },
|
||||
// {
|
||||
// type: 'datePicker',
|
||||
// label: this.$t('module.equipmentManager.statusSetting.searchPlaceholder2'),
|
||||
// dateType:"daterange",
|
||||
// format:"yyyy-MM-dd",
|
||||
// valueFormat:"yyyy-MM-dd"
|
||||
// rangeSeparator:"-",
|
||||
// startPlaceholder:this.$t('module.equipmentManager.repair.startDate'),
|
||||
// endPlaceholder:this.$t('module.equipmentManager.repair.endDate'),
|
||||
// param: 'searchTime'
|
||||
// },
|
||||
// {
|
||||
// type:'button',
|
||||
// btnName:'btn.search',
|
||||
// name:'search',
|
||||
// color:'primary'
|
||||
// }
|
||||
// ],
|
||||
export default {
|
||||
props: {
|
||||
formConfig: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const formInline = {}
|
||||
let hasExtraOptions = false
|
||||
for (const obj of this.formConfig) {
|
||||
if (obj.type !== 'button') {
|
||||
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
|
||||
formInline[obj.param] = obj.defaultSelect
|
||||
} else {
|
||||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
|
||||
}
|
||||
}
|
||||
if (obj.extraOptions) {
|
||||
hasExtraOptions = true
|
||||
// watchQueue.push('formInline.' + obj.param)
|
||||
}
|
||||
}
|
||||
return {
|
||||
formInline,
|
||||
hasExtraOptions
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formConfig: {
|
||||
handler(newVal, oldVal) {
|
||||
for (const obj of this.formConfig) {
|
||||
if (obj.defaultSelect) {
|
||||
this.formInline[obj.param] = obj.defaultSelect
|
||||
} else if (obj.defaultSelect === null) { // 需要手动从外部清除选项缓存的情况，确保在外部配置项中可直接设置null
|
||||
this.formInline[obj.param] = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
formInline: {
|
||||
handler: function(val) {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.hasExtraOptions) {
|
||||
// 如果有额外参数就处理，如果没有就算了
|
||||
for (const obj of this.formConfig) {
|
||||
if (obj.extraOptions) {
|
||||
// 注: 对obj.extraOptions的选择是互斥的!
|
||||
this.$watch(
|
||||
`formInline.${obj.param}`,
|
||||
function(newVal) {
|
||||
let deleteCount = 0
|
||||
if (obj.index + 1 < this.formConfig.length) {
|
||||
// 如果obj不是最后一个配置
|
||||
const nextConfig = this.formConfig[obj.index + 1]
|
||||
if (nextConfig.parent && nextConfig.parent === obj.param) deleteCount = 1
|
||||
}
|
||||
const currentConfig = Object.assign({}, obj.extraOptions[newVal])
|
||||
this.formConfig.splice(obj.index + 1, deleteCount, currentConfig)
|
||||
// 修改 formInline
|
||||
this.$set(this.formInline, currentConfig.param, '')
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
headBtnClick(btnName) {
|
||||
this.formInline.btnName = btnName
|
||||
this.$emit('headBtnClick', this.formInline)
|
||||
},
|
||||
importFile(response, file, fileList) {
|
||||
this.$emit('importFile', { response, file, fileList })
|
||||
},
|
||||
importFileError(response, file, fileList) {
|
||||
this.$emit('importFileError', { response, file, fileList })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blueTip::before{
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user