| | |
| | | <template> |
| | | <uni-forms class="oi-form" ref="baseForm" label-align="right"> |
| | | <template v-for="(item,index) in form.items"> |
| | | <OIFormLayout v-if="item.name == 'Layout'" v-show="!item.isHidden" :focusId="focusId" :viewMode="viewMode" |
| | | :hiddenIds="hiddenIds" :data="item" @change="onChange" @focus="onFocus" @click="onClick" |
| | | @click-prefix="onClickPrefix" @click-suffix="onClickSuffix"> |
| | | </OIFormLayout> |
| | | <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" |
| | | @change="onChange" @focus="onFocus" @click="onClick" @click-prefix="onClickPrefix" |
| | | @click-suffix="onClickSuffix"> |
| | | @on-change="onChange" @on-focus="onFocus" @on-click="onClick" @on-click-prefix="onClickPrefix" |
| | | @on-click-suffix="onClickSuffix"> |
| | | </OIFormItem> |
| | | </template> |
| | | </view> |
| | | |
| | | </uni-forms> |
| | | </template> |
| | | |
| | | <script> |
| | | import OIFormItem from './list/index.vue' |
| | | import OIFormLayout from './list/layout/index.vue' |
| | | export default { |
| | | name: "OIForm", |
| | | components: { |
| | | OIFormItem, |
| | | OIFormLayout |
| | | }, |
| | | props: { |
| | | form: { |
| | |
| | | onChange(item) { |
| | | var attr = item.fieldId; |
| | | this.form.model[attr] = item.value; |
| | | this.$emit("change", item) |
| | | this.$emit("on-change", item) |
| | | }, |
| | | onClick(item) { |
| | | this.$emit("click", item) |
| | | this.$emit("on-click", item) |
| | | }, |
| | | onFocus(item) { |
| | | this.$emit("focus", item) |
| | | this.$emit("on-focus", item) |
| | | }, |
| | | onClickPrefix(item) { |
| | | this.$emit("click-prefix", item) |
| | | this.$emit("on-click-prefix", item) |
| | | }, |
| | | onClickSuffix(item) { |
| | | this.$emit("click-suffix", item) |
| | | this.$emit("on-click-suffix", item) |
| | | }, |
| | | } |
| | | }, |
| | | // beforeUpdate() { |
| | | // console.log("beforeUpdate form", this.form) |
| | | // }, |
| | | // updated() { |
| | | // console.log("updated form", this.form) |
| | | // } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .oi-form { |
| | | |
| | | |
| | | } |
| | | .oi-form {} |
| | | </style> |