132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
||
<view class="wflow-form">
|
||
<uni-forms ref="wflowForm" class="wflow-form" :rules="rules" :modelValue="_value" label-position="top"
|
||
label-width="200">
|
||
<uni-forms-item :class="`w-form-item ${item.perm === 'R' ? 'w-form-item-r':''}`" v-for="item in formFields"
|
||
v-show="showItem(item, _value[item.id])" :name="item.id" :key="item.id" :required="item.props.required">
|
||
<template v-slot:label>
|
||
<view class="w-form-title">
|
||
<text style="color: #CE5266;" v-if="item.props.required && item.perm === 'E'">* </text>
|
||
<text style="font-size: 32rpx;">{{item.title}}</text>
|
||
</view>
|
||
</template>
|
||
<w-form-item :type="item.name" v-model="_value[item.id]" :form-props="item.props"
|
||
:readonly="item.perm !== 'E'" :formData="_value" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { showItem } from '@/utils/tool.js'
|
||
import WFormItem from './WFormItem.vue'
|
||
|
||
//import FormComponents from '@/components/form/ComponentsExport.js'
|
||
|
||
export default {
|
||
name: 'FormRender',
|
||
options: { styleIsolation: 'shared' },
|
||
components: { WFormItem },
|
||
props: {
|
||
modelValue: { //表单双向绑定的值
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
config: { //表单联动相关配置
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
},
|
||
jsonConf: { //表单json配置，用来渲染表单
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
_value: {
|
||
get() {
|
||
return this.modelValue
|
||
},
|
||
set(val) {
|
||
emit('update:modelValue', val)
|
||
}
|
||
},
|
||
rules() {
|
||
const formRule = {}
|
||
this.formFields.forEach(v => {
|
||
if (v.props.required) {
|
||
formRule[v.id] = {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请填写' + v.title
|
||
}]
|
||
}
|
||
}
|
||
})
|
||
return formRule
|
||
},
|
||
formFields() {
|
||
const fields = []
|
||
this.jsonConf.forEach(field => this.loadInnerField(field, fields))
|
||
return fields
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$refs['wflowForm'].setRules(this.rules)
|
||
},
|
||
methods: {
|
||
showItem,
|
||
loadInnerField(field, items) {
|
||
if (field.name === 'SpanLayout') {
|
||
field.props.items.forEach(f => this.loadInnerField(f, items))
|
||
} else {
|
||
items.push(field)
|
||
}
|
||
},
|
||
validate(call) {
|
||
this.$refs['wflowForm'].validate().then(res => {
|
||
call(true)
|
||
console.log('表单数据信息：', res);
|
||
}).catch(err => {
|
||
call(false)
|
||
console.log('表单错误信息：', err);
|
||
})
|
||
}
|
||
},
|
||
emits: ['update:modelValue']
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.w-form-item {
|
||
padding: 0 16rpx 32rpx 16rpx;
|
||
background-color: white;
|
||
margin-bottom: 16rpx;
|
||
font-size: 32rpx !important;
|
||
|
||
.uni-forms-item__error {
|
||
padding-top: 0 !important;
|
||
}
|
||
|
||
.uni-easyinput__content-input {
|
||
height: 30px;
|
||
}
|
||
|
||
.w-form-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 13rpx 0;
|
||
}
|
||
}
|
||
</style> |