You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
8.3 KiB
191 lines
8.3 KiB
9 months ago
|
<template>
|
||
|
|
<u-form :model="formData" ref="dataForm" :errorType="['toast']" label-position="left" label-width="150">
|
||
|
|
<u-form-item :label="item.label" :prop="item.id" v-for="(item, i) in formConfCopy" :key="i">
|
||
|
|
<template v-if="webType != 4">
|
||
|
|
<block v-if="useInputList.indexOf(item.__config__.jnpfKey) > -1">
|
||
|
|
<u-input input-align='right' v-model="formData[item.id]" :placeholder="'请输入'+item.label" />
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='inputNumber'||item.__config__.jnpfKey==='calculate'">
|
||
|
|
<jnpf-num-range v-model="formData[item.id]"
|
||
|
|
:precision="!item.precision && item.__config__.jnpfKey=='calculate'?0:item.precision " />
|
||
|
|
</block>
|
||
|
|
<view v-if="item.__config__.jnpfKey==='switch'" class="u-flex u-form-item-switch">
|
||
|
|
<jnpf-switch v-model="formData[item.id]"></jnpf-switch>
|
||
|
|
</view>
|
||
|
|
<block v-if="['select','radio','checkbox'].indexOf(item.__config__.jnpfKey) > -1">
|
||
|
|
<jnpf-select v-model="formData[item.id]" :placeholder="'请选择'+item.label" :options="item.options"
|
||
|
|
:props="item.props" :multiple="item.searchMultiple">
|
||
|
|
</jnpf-select>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='cascader'">
|
||
|
|
<jnpf-cascader v-model="formData[item.id]" :placeholder="'请选择'+item.label" :options="item.options"
|
||
|
|
:props="item.props" :filterable='item.filterable' :showAllLevels="item.showAllLevels"
|
||
|
|
:multiple="item.searchMultiple">
|
||
|
|
</jnpf-cascader>
|
||
|
|
</block>
|
||
|
|
<!-- 下拉补全 -->
|
||
|
|
<block v-if="item.__config__.jnpfKey==='autoComplete'">
|
||
|
|
<jnpf-auto-complete :interfaceName="item.interfaceName" :placeholder="item.placeholder"
|
||
|
|
:interfaceId="item.interfaceId" :total="item.total" v-model="formData[item.id]"
|
||
|
|
:templateJson="item.templateJson" :formData='formData' :relationField="item.relationField"
|
||
|
|
:propsValue="item.propsValue" :clearable='item.clearable'></jnpf-auto-complete>
|
||
|
|
</block>
|
||
|
|
<block
|
||
|
|
v-if="useDateList.indexOf(item.__config__.jnpfKey) > -1 || item.__config__.jnpfKey==='timePicker'">
|
||
|
|
<jnpf-date-range v-model="formData[item.id]" :format='item.format'
|
||
|
|
:jnpfKey="item.jnpfKey==='timePicker'?'time':'date'" />
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='rate'">
|
||
|
|
<u-rate v-model="formData[item.id]" size="40" :count="item.count">
|
||
|
|
</u-rate>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='slider'">
|
||
|
|
<jnpf-slider v-model="formData[item.id]" :step="item.step" :min="item.min||0"
|
||
|
|
:max="item.max||100" />
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='groupSelect'">
|
||
|
|
<jnpf-group-select :vModel='item.id' v-model="formData[item.id]" :multiple="item.searchMultiple"
|
||
|
|
:disabled="item.disabled" :placeholder="item.placeholder" :ableIds="item.ableIds"
|
||
|
|
:selectType="item.selectType" />
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='roleSelect'">
|
||
|
|
<jnpf-role-select :vModel='item.id' v-model="formData[item.id]" :multiple="item.searchMultiple"
|
||
|
|
:disabled="item.disabled" :placeholder="item.placeholder" :ableIds="item.ableIds"
|
||
|
|
:selectType="item.selectType" />
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='organizeSelect'||item.__config__.jnpfKey==='currOrganize'">
|
||
|
|
<jnpf-com-select v-model="formData[item.id]" :placeholder="'请选择'+item.label"
|
||
|
|
:multiple="item.searchMultiple" :ableIds="item.ableIds" :selectType="item.selectType">
|
||
|
|
</jnpf-com-select>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='depSelect'||item.__config__.jnpfKey==='currDept'">
|
||
|
|
<jnpf-postordep-select type="department" v-model="formData[item.id]" :placeholder="'请选择'+item.label"
|
||
|
|
:ableIds="item.ableIds" :selectType="item.selectType" :multiple="item.searchMultiple">
|
||
|
|
</jnpf-postordep-select>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='posSelect'||item.__config__.jnpfKey==='currPosition'">
|
||
|
|
<jnpf-postordep-select type="position" v-model="formData[item.id]" :placeholder="'请选择'+item.label"
|
||
|
|
:ableIds="item.ableIds" :selectType="item.selectType" :multiple="item.searchMultiple">
|
||
|
|
</jnpf-postordep-select>
|
||
|
|
</block>
|
||
|
|
<block v-if="['userSelect','createUser', 'modifyUser'].indexOf(item.__config__.jnpfKey) > -1">
|
||
|
|
<jnpf-user-select v-model="formData[item.id]" :placeholder="'请选择'+item.label"
|
||
|
|
:ableIds="item.ableIds" :selectType="item.selectType!='custom'?'all':'custom'" :bh="650"
|
||
|
|
:multiple="item.searchMultiple">
|
||
|
|
</jnpf-user-select>
|
||
|
|
</block>
|
||
|
|
<!-- 用户组件 -->
|
||
|
|
<block v-if="item.__config__.jnpfKey==='usersSelect'">
|
||
|
|
<jnpf-user-choice v-model="formData[item.id]" :multiple="item.searchMultiple"
|
||
|
|
:placeholder="'请选择'+item.label" :selectType="item.selectType" :ableIds="item.ableIds"
|
||
|
|
:clearable="item.clearable">
|
||
|
|
</jnpf-user-choice>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='treeSelect'">
|
||
|
|
<jnpf-tree-select v-model="formData[item.id]" :options="item.options" :props="item.props"
|
||
|
|
:placeholder="'请选择'+item.label" :filterable='item.filterable' :multiple="item.searchMultiple">
|
||
|
|
</jnpf-tree-select>
|
||
|
|
</block>
|
||
|
|
<block v-if="item.__config__.jnpfKey==='areaSelect'">
|
||
|
|
<jnpf-city-select v-model="formData[item.id]" :placeholder="'请选择'+item.label" :level="item.level"
|
||
|
|
:multiple="item.searchMultiple">
|
||
|
|
</jnpf-city-select>
|
||
|
|
</block>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<block>
|
||
|
|
<u-input input-align='right' v-model="formData[item.id]" :placeholder="'请输入'+item.label" />
|
||
|
|
</block>
|
||
|
|
</template>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getDictionaryDataSelector,
|
||
|
|
getDataInterfaceRes
|
||
|
|
} from '@/api/common'
|
||
|
|
const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect']
|
||
|
|
const useInputList = ['input', 'textarea', 'text', 'billRule']
|
||
|
|
const useDateList = ['datePicker', 'createTime', 'modifyTime']
|
||
|
|
const useArrList = ['cascader', 'areaSelect', 'inputNumber', 'calculate', ...useDateList]
|
||
|
|
const isDef = ['userSelect', 'posSelect', 'depSelect', 'organizeSelect']
|
||
|
|
export default {
|
||
|
|
props: ['formConf', 'webType', 'searchFormData'],
|
||
|
|
data() {
|
||
|
|
const data = {
|
||
|
|
useInputList,
|
||
|
|
useDateList,
|
||
|
|
formConfCopy: this.$u.deepClone(this.formConf),
|
||
|
|
formData: this.$u.deepClone(this.searchFormData),
|
||
|
|
}
|
||
|
|
this.initRelationForm(data.formConfCopy)
|
||
|
|
this.initFormData(data.formConfCopy, data.formData)
|
||
|
|
return data
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initFormData(componentList, formData) {
|
||
|
|
componentList.forEach(cur => {
|
||
|
|
const config = cur.__config__
|
||
|
|
if (cur.id && !formData[cur.id]) {
|
||
|
|
formData[cur.id] = cur.value;
|
||
|
|
}
|
||
|
|
if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
|
||
|
|
let isTreeSelect = config.jnpfKey === 'treeSelect' || config.jnpfKey === 'cascader'
|
||
|
|
if (config.dataType === 'dictionary' && config.dictionaryType) {
|
||
|
|
cur.options = []
|
||
|
|
getDictionaryDataSelector(config.dictionaryType).then(res => {
|
||
|
|
cur.options = res.data.list
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (config.dataType === 'dynamic' && config.propsUrl) {
|
||
|
|
cur.options = []
|
||
|
|
getDataInterfaceRes(config.propsUrl).then(res => {
|
||
|
|
cur.options = Array.isArray(res.data) ? res.data : []
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initRelationForm(componentList) {
|
||
|
|
componentList.forEach(cur => {
|
||
|
|
const config = cur.__config__
|
||
|
|
if (config.jnpfKey == 'relationFormAttr' || config.jnpfKey == 'popupAttr') {
|
||
|
|
const relationKey = cur.relationField.split("_jnpfTable_")[0]
|
||
|
|
componentList.forEach(item => {
|
||
|
|
const noVisibility = Array.isArray(item.__config__.visibility) && !item
|
||
|
|
.__config__.visibility.includes('app')
|
||
|
|
if ((relationKey == item.id) && (noVisibility || !!item.__config__
|
||
|
|
.noShow)) {
|
||
|
|
cur.__config__.noShow = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
|
||
|
|
.__config__.children)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
submitForm() {
|
||
|
|
this.$refs.dataForm.validate(valid => {
|
||
|
|
if (!valid) return
|
||
|
|
for (let key in this.formData) {
|
||
|
|
if (!this.formData[key]) this.formData[key] = undefined
|
||
|
|
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
|
||
|
|
.length) {
|
||
|
|
this.formData[key] = undefined
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.$emit('submit', this.formData)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
resetForm() {
|
||
|
|
this.$refs.dataForm.resetFields()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
/deep/.u-form-item {
|
||
|
|
min-height: 112rpx;
|
||
|
|
}
|
||
|
|
</style>
|