<template>
|
<uni-forms class="oi-form" ref="baseForm" :label-align="largeMode?'left':'right'" :label-position="largeMode?'top':'left'" >
|
<view v-for="(item,index) in form.items" :key="index">
|
<!-- 栅格布局 -->
|
<uni-row v-if="item.name == 'Layout'" v-show="!item.isHidden" :gutter="item.setting.gutter">
|
<uni-col
|
:span="item.setting.spanList && item.setting.spanList[key]? item.setting.spanList[key] : 24 / item.setting.col"
|
v-for="(col,key) in item.setting.colList" :key="key">
|
<OIFormItem v-if="col != null" :focusId="focusId" :viewMode="viewMode" :data="col"
|
:hiddenIds="hiddenIds" @on-change="onChange" @on-focus="onFocus" @on-click="onClick"
|
@on-click-prefix="onClickPrefix" @on-click-suffix="onClickSuffix"></OIFormItem>
|
<uni-forms-item v-else label=""></uni-forms-item>
|
</uni-col>
|
</uni-row>
|
<OIFormItem v-else :hiddenIds="hiddenIds" :focusId="focusId" :viewMode="viewMode" :data="item"
|
@on-change="onChange" @on-focus="onFocus" @on-click="onClick" @on-click-prefix="onClickPrefix"
|
@on-click-suffix="onClickSuffix">
|
</OIFormItem>
|
</view>
|
|
</uni-forms>
|
</template>
|
|
<script>
|
import OIFormItem from './list/index.vue'
|
export default {
|
name: "OIForm",
|
components: {
|
OIFormItem,
|
},
|
props: {
|
form: {
|
type: Object,
|
required: true,
|
},
|
viewMode: {
|
type: Boolean,
|
default: false
|
},
|
focusId: {
|
type: String,
|
default: ''
|
},
|
hiddenIds: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
largeMode: getApp().globalData?.largeMode || false,
|
}
|
},
|
methods: {
|
setFormItemVisible(attrs) {
|
console.log(attrs)
|
attrs.forEach((attr) => {
|
let index = this.hiddenIds.findIndex((id) => id == attr.attr);
|
if (attr.show) {
|
if (index > -1) this.hiddenIds.splice(index, 1);
|
} else {
|
if (index == -1) this.hiddenIds.push(attr.attr);
|
}
|
});
|
console.log(this.hiddenIds)
|
},
|
clearFormValues() {
|
if (!this.form.model) return;
|
Object.keys(this.form.model).forEach((attr) => {
|
let value = this.form.model[attr];
|
value =
|
typeof value == "number" ?
|
0 :
|
typeof value == "string" ?
|
"" :
|
value instanceof Array ? [] : {};
|
this.form.model[attr] = value;
|
});
|
},
|
onChange(item) {
|
var attr = item.fieldId;
|
this.form.model[attr] = item.value;
|
this.$emit("on-change", item)
|
},
|
onClick(item) {
|
this.$emit("on-click", item)
|
},
|
onFocus(item) {
|
this.$emit("on-focus", item)
|
},
|
onClickPrefix(item) {
|
this.$emit("on-click-prefix", item)
|
},
|
onClickSuffix(item) {
|
this.$emit("on-click-suffix", item)
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.oi-form {
|
|
}
|
|
|
</style>
|
