<template>
|
<view class="oi-form-item" :class="largeMode?'large-mode':''">
|
<uni-forms-item v-show="!hiddenIds.includes(data.fieldId)"
|
:label="data.labelWidth === 0 ? '' : data.label? data.label+'：':''"
|
:label-width="largeMode?'100%': data.labelWidth || data.labelWidth === 0 ? data.labelWidth : 100+'px'"
|
:style="{ textAlign: data.setting.align }">
|
<OIFormText v-if="viewMode && data.disabled" :data="data" :model="model">
|
</OIFormText>
|
<OIFormInput v-else-if="data.name == 'Input'" :viewMode="viewMode" :focus="focusId== data.fieldId"
|
:data="data" :model="model" @on-change="onChange" @on-focus="onFocus" @on-click="onClick"
|
@on-click-prefix="onClickPrefix" @on-click-suffix="onClickSuffix">
|
</OIFormInput>
|
<OIFormInputNumber v-else-if="data.name == 'InputNumber'" :focus="focusId== data.fieldId" :data="data"
|
:model="model" @on-change="onChange" @on-focus="onFocus" @on-click="onClick">
|
</OIFormInputNumber>
|
<OIFormTextArea v-else-if="data.name == 'Textarea'" :focus="focusId== data.fieldId" :data="data"
|
:model="model" @on-change="onChange" @on-focus="onFocus" @on-click="onClick">
|
</OIFormTextArea>
|
<OIFormSelect v-else-if="data.name == 'Select'" :data="data" :model="model" @on-change="onChange">
|
</OIFormSelect>
|
<OIFormSwitch v-else-if="data.name == 'Switch'" :data="data" :model="model" @on-change="onChange">
|
</OIFormSwitch>
|
<OIFormCheckbox v-else-if="data.name == 'Checkbox'" :data="data" :model="model" @on-change="onChange">
|
</OIFormCheckbox>
|
<OIFormRadio v-else-if="data.name == 'Radio'" :data="data" :model="model" @on-change="onChange">
|
</OIFormRadio>
|
<OIFormDatePicker v-else-if="data.name == 'DatePicker'" :data="data" :model="model" @on-change="onChange">
|
</OIFormDatePicker>
|
<OIFormTimePicker v-else-if="data.name == 'TimePicker'" :data="data" :model="model" @on-change="onChange">
|
</OIFormTimePicker>
|
<OIFormDatePickerRange v-else-if="data.name == 'DatePickerRange'" :data="data" :model="model"
|
@on-change="onChange">
|
</OIFormDatePickerRange>
|
<OIFormText v-else-if="data.name == 'Text'" :data="data" :model="model">
|
</OIFormText>
|
<OIFormText v-else :data="data" :model="model">
|
</OIFormText>
|
</uni-forms-item>
|
</view>
|
</template>
|
|
<script>
|
import OIFormInput from './input/index.vue'
|
import OIFormInputNumber from './input-number/index.vue'
|
import OIFormText from './text/index.vue'
|
import OIFormTextArea from './textarea/index.vue'
|
import OIFormSelect from './select/index.vue'
|
import OIFormSwitch from './switch/index.vue'
|
import OIFormCheckbox from './checkbox/index.vue'
|
import OIFormRadio from './radio/index.vue'
|
import OIFormDatePicker from './date-picker/index.vue'
|
import OIFormDatePickerRange from './date-picker-range/index.vue'
|
import OIFormTimePicker from './time-picker/index.vue'
|
export default {
|
name: "OIFormItem",
|
components: {
|
OIFormInput,
|
OIFormInputNumber,
|
OIFormText,
|
OIFormTextArea,
|
OIFormSelect,
|
OIFormSwitch,
|
OIFormCheckbox,
|
OIFormRadio,
|
OIFormDatePicker,
|
OIFormDatePickerRange,
|
OIFormTimePicker
|
},
|
props: {
|
data: {
|
type: Object,
|
required: true,
|
},
|
model: Object,
|
viewMode: {
|
type: Boolean,
|
default: false
|
},
|
focusId: {
|
type: String,
|
default: ''
|
},
|
hiddenIds: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
largeMode: getApp().globalData?.largeMode || false,
|
}
|
},
|
methods: {
|
onChange(e) {
|
this.$emit("on-change", this.data)
|
},
|
onClick(e) {
|
this.$emit("on-click", this.data)
|
},
|
onFocus(e) {
|
this.$emit("on-focus", this.data)
|
},
|
onClickPrefix() {
|
this.$emit("on-click-prefix", this.data)
|
},
|
onClickSuffix() {
|
this.$emit("on-click-suffix", this.data)
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.oi-form-item {
|
.uni-forms-item {
|
margin-bottom: 15rpx;
|
}
|
}
|
|
.oi-form-item.large-mode {
|
.uni-forms-item {
|
margin-left: 10rpx;
|
margin-right: 10rpx;
|
}
|
}
|
</style>
|
