eoss-mobiles 0.3.95 → 0.3.97

package/packages/form/src/main.vue

@@ -1,523 +1,548 @@
-<template>
-  <van-form
-    class="em-form"
-    ref="emForm"
-    v-bind="$attrs"
-    @failed="handleFailed"
-    @submit="handleSubmit"
-  >
-    <div class="em-form-content">
-      <div
-        v-for="(item, index) in newContent"
-        :key="index"
-        :style="
-          item.type == 'tab'
-            ? `flex:1;height:0;min-height:${item.minHeight || 400}px`
-            : item.type == 'table'
-            ? 'flex:1;height:0'
-            : ''
-        "
-      >
-        <em-tabs
-          v-model="item.active"
-          v-bind="{ ...item, type: item.tabType || 'line' }"
-          v-on="{ ...item.events }"
-          v-if="item.type === 'tab'"
-        >
-          <em-tab v-bind="{ ...z }" v-for="(z, i) in item.contents" :key="i">
-            <div style="height: 100%" v-for="(x, j) in z.contents" :key="j">
-              <em-input
-                v-if="
-                  x.type === 'text' ||
-                  x.type === 'textarea' ||
-                  x.type == 'number' ||
-                  x.type == 'digit' ||
-                  x.type == 'password' ||
-                  x.type == 'tel'
-                "
-                class="em-table-input"
-                v-bind="{ ...$attrs, ...x }"
-                v-on="{ ...x.events }"
-                :label-position="x.labelPosition || labelPosition"
-                :disabled="x.disabled || disabled"
-                :readonly="x.readonly || readonly"
-                ref="input"
-                v-model="model[x.name]"
-                :label="x.label.text || x.label"
-                @input="handleChange(x.name, model[x.name])"
-              />
-              <!-- <em-input
-        v-if="
-          (item.type === 'text' ||
-            item.type === 'textarea' ||
-            item.type == 'number' ||
-            item.type == 'digit' ||
-            item.type == 'password' ||
-            item.type == 'tel') && item.events
-        "
-        class="em-table-input"
-        v-bind="{ ...$attrs, ...item }"
-        
-        :label-position="item.labelPosition || labelPosition"
-        :disabled="item.disabled || disabled"
-        :readonly="item.readonly || readonly"
-        ref="input"
-        v-model="model[item.name]"
-        :label="item.label.text || item.label"
-        @input="handleChange(item.name, model[item.name])"
-      /> -->
-              <em-picker
-                v-if="x.type === 'select'"
-                v-bind="{ ...$attrs, ...x }"
-                v-on="{ ...x.events }"
-                ref="select"
-                :label-position="x.labelPosition || labelPosition"
-                :disabled="x.disabled || disabled"
-                :readonly="x.readonly || readonly"
-                v-model="model[x.name]"
-                :columns="x.data || []"
-                @confirm="
-                  (value) => {
-                    handleChange(item.name, value);
-                  }
-                "
-              />
-              <em-date
-                v-else-if="
-                  x.date ||
-                  x.type == 'date' ||
-                  x.type == 'year' ||
-                  x.type == 'year-month' ||
-                  x.type == 'month-day' ||
-                  x.type == 'time' ||
-                  x.type == 'datetimeSecond' ||
-                  x.type == 'datetime' ||
-                  x.type == 'datehour'
-                "
-                ref="date"
-                v-bind="{ ...$attrs, ...x }"
-                v-on="{ ...x.events }"
-                v-model="model[x.name]"
-                :label-position="x.labelPosition || labelPosition"
-                :disabled="x.disabled || disabled"
-                :readonly="x.readonly || readonly"
-                :joinStr="x.joinStr || ''"
-                @confirm="
-                  (value, timePeriod) => {
-                    handleChange(x.name, value, timePeriod);
-                  }
-                "
-              />
-              <em-input
-                v-else-if="x.type === 'radio'"
-                ref="radio"
-                v-bind="{ ...$attrs, ...x }"
-                :label-position="x.labelPosition || labelPosition"
-              >
-                <template slot="input">
-                  <em-radio-group
-                    v-bind="{ ...$attrs, ...x }"
-                    v-on="{ ...x.events }"
-                    v-model="model[x.name]"
-                    :disabled="x.disabled || disabled || x.readonly || readonly"
-                    :data="x.data"
-                    @change="
-                      (value) => {
-                        handleChange(x.name, value);
-                      }
-                    "
-                  />
-                </template>
-              </em-input>
-              <em-input
-                v-else-if="x.type === 'checkbox'"
-                ref="checkbox"
-                v-bind="{ ...$attrs, ...x }"
-                :label-position="x.labelPosition || labelPosition"
-              >
-                <template slot="input">
-                  <em-checkbox-group
-                    v-bind="{ ...$attrs, ...x }"
-                    v-on="{ ...x.events }"
-                    v-model="model[x.name]"
-                    :disabled="x.disabled || disabled || x.readonly || readonly"
-                    @change="
-                      (value) => {
-                        handleChange(x.name, value);
-                      }
-                    "
-                  />
-                </template>
-              </em-input>
-              <em-input
-                v-else-if="x.type === 'switch'"
-                ref="switch"
-                v-bind="{ ...$attrs, ...x }"
-                :label-position="x.labelPosition || labelPosition"
-              >
-                <template slot="input">
-                  <em-switch
-                    v-bind="{ ...$attrs, ...x }"
-                    v-model="model[x.name]"
-                    v-on="{ ...x.events }"
-                    :disabled="x.disabled || disabled || x.readonly || readonly"
-                    @change="
-                      (value) => {
-                        handleChange(x.name, value);
-                      }
-                    "
-                  />
-                </template>
-              </em-input>
-              <em-selector
-                v-else-if="x.type == 'selector'"
-                ref="selector"
-                v-bind="{ ...$attrs, ...x }"
-                v-model="model[x.name]"
-                v-on="{ ...x.events }"
-                :label="x.label"
-                :label-position="x.labelPosition || labelPosition"
-                :disabled="x.disabled || disabled || x.readonly || readonly"
-                @change="
-                  (value) => {
-                    handleChange(x.name, value);
-                  }
-                "
-              />
-              <em-table
-                v-else-if="x.type == 'table'"
-                class="em-form-table"
-                ref="emFormTable"
-                v-bind="{ ...$attrs, ...x }"
-                :data="model[x.name]"
-                :thead="x.tHead"
-                :style="`margin:${x.margin || 10}px 0px`"
-                isForm
-                :form="
-                  !x.disabled && !disabled && !x.readonly && !readonly && x.form
-                "
-                v-on="{ ...x.events }"
-                @btn-click="handleBtnClick"
-              />
-            </div>
-          </em-tab>
-        </em-tabs>
-        <em-input
-          v-if="
-            item.type === 'text' ||
-            item.type === 'textarea' ||
-            item.type == 'number' ||
-            item.type == 'digit' ||
-            item.type == 'password' ||
-            item.type == 'tel'
-          "
-          class="em-table-input"
-          v-bind="{ ...$attrs, ...item }"
-          v-on="{ ...item.events }"
-          :label-position="item.labelPosition || labelPosition"
-          :disabled="item.disabled || disabled"
-          :readonly="item.readonly || readonly"
-          ref="input"
-          v-model="model[item.name]"
-          :label="item.label.text || item.label"
-          @input="handleChange(item.name, model[item.name])"
-        />
-        <!-- <em-input
-        v-if="
-          (item.type === 'text' ||
-            item.type === 'textarea' ||
-            item.type == 'number' ||
-            item.type == 'digit' ||
-            item.type == 'password' ||
-            item.type == 'tel') && item.events
-        "
-        class="em-table-input"
-        v-bind="{ ...$attrs, ...item }"
-        
-        :label-position="item.labelPosition || labelPosition"
-        :disabled="item.disabled || disabled"
-        :readonly="item.readonly || readonly"
-        ref="input"
-        v-model="model[item.name]"
-        :label="item.label.text || item.label"
-        @input="handleChange(item.name, model[item.name])"
-      /> -->
-        <em-picker
-          v-if="item.type === 'select'"
-          v-bind="{ ...$attrs, ...item }"
-          v-on="{ ...item.events }"
-          ref="select"
-          :label-position="item.labelPosition || labelPosition"
-          :disabled="item.disabled || disabled"
-          :readonly="item.readonly || readonly"
-          v-model="model[item.name]"
-          :columns="item.data || []"
-          @confirm="
-            (value) => {
-              handleChange(item.name, value);
-            }
-          "
-        />
-        <em-date
-          v-else-if="
-            item.date ||
-            item.type == 'date' ||
-            item.type == 'year' ||
-            item.type == 'year-month' ||
-            item.type == 'month-day' ||
-            item.type == 'time' ||
-            item.type == 'datetimeSecond' ||
-            item.type == 'datetime' ||
-            item.type == 'datehour'
-          "
-          ref="date"
-          v-bind="{ ...$attrs, ...item }"
-          v-on="{ ...item.events }"
-          v-model="model[item.name]"
-          :label-position="item.labelPosition || labelPosition"
-          :disabled="item.disabled || disabled"
-          :readonly="item.readonly || readonly"
-          :joinStr="item.joinStr || ''"
-          @confirm="
-            (value, timePeriod) => {
-              handleChange(item.name, value, timePeriod);
-            }
-          "
-        />
-        <em-input
-          v-else-if="item.type === 'radio'"
-          ref="radio"
-          v-bind="{ ...$attrs, ...item }"
-          :label-position="item.labelPosition || labelPosition"
-        >
-          <template slot="input">
-            <em-radio-group
-              v-bind="{ ...$attrs, ...item }"
-              v-on="{ ...item.events }"
-              v-model="model[item.name]"
-              :disabled="item.disabled || disabled || item.readonly || readonly"
-              :data="item.data"
-              @change="
-                (value) => {
-                  handleChange(item.name, value);
-                }
-              "
-            />
-          </template>
-        </em-input>
-        <em-input
-          v-else-if="item.type === 'checkbox'"
-          ref="checkbox"
-          v-bind="{ ...$attrs, ...item }"
-          :label-position="item.labelPosition || labelPosition"
-        >
-          <template slot="input">
-            <em-checkbox-group
-              v-bind="{ ...$attrs, ...item }"
-              v-on="{ ...item.events }"
-              v-model="model[item.name]"
-              :disabled="item.disabled || disabled || item.readonly || readonly"
-              @change="
-                (value) => {
-                  handleChange(item.name, value);
-                }
-              "
-            />
-          </template>
-        </em-input>
-        <em-input
-          v-else-if="item.type === 'switch'"
-          ref="switch"
-          v-bind="{ ...$attrs, ...item }"
-          :label-position="item.labelPosition || labelPosition"
-        >
-          <template slot="input">
-            <em-switch
-              v-bind="{ ...$attrs, ...item }"
-              v-model="model[item.name]"
-              v-on="{ ...item.events }"
-              :disabled="item.disabled || disabled || item.readonly || readonly"
-              @change="
-                (value) => {
-                  handleChange(item.name, value);
-                }
-              "
-            />
-          </template>
-        </em-input>
-        <em-selector
-          v-else-if="item.type == 'selector'"
-          ref="selector"
-          v-bind="{ ...$attrs, ...item }"
-          v-model="model[item.name]"
-          v-on="{ ...item.events }"
-          :label="item.label"
-          :label-position="item.labelPosition || labelPosition"
-          :disabled="item.disabled || disabled || item.readonly || readonly"
-          @change="
-            (value) => {
-              handleChange(item.name, value);
-            }
-          "
-        />
-        <em-table
-          v-else-if="item.type == 'table'"
-          class="em-form-table"
-          ref="emFormTable"
-          v-bind="{ ...$attrs, ...item }"
-          :data="model[item.name]"
-          :thead="item.tHead"
-          :style="`margin:${item.margin || 10}px 0px`"
-          isForm
-          :form="
-            !item.disabled &&
-            !disabled &&
-            !item.readonly &&
-            !readonly &&
-            item.form
-          "
-          v-on="{ ...item.events }"
-          @btn-click="handleBtnClick"
-        />
-        <!-- @btn-click="handleBtnClick($event,item)"
-        @selection-change="handleSelectionChange($event,item)"
-        @edit="handleEdit($event,item)" -->
-      </div>
-    </div>
-
-    <div
-      :style="`margin: 16px;text-align:${position}`"
-      v-if="showBtn && !disabled && !readonly"
-    >
-      <em-button
-        round
-        block
-        type="primary"
-        v-if="btnList.length == 0"
-        native-type="submit"
-        >提交</em-button
-      >
-      <em-button
-        v-show="btnList.length != 0"
-        v-for="item in btnList[0].contents"
-        :key="item.text"
-        v-bind="item"
-        :native-type="item.nativeType ? item.nativeType : 'button'"
-        @click="handleClick(item)"
-        >{{ item.text }}</em-button
-      >
-    </div>
-  </van-form>
-</template>
-
-<script>
-export default {
-  name: 'EmForm',
-  props: {
-    contents: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    model: {
-      type: Object,
-      default: () => {}
-    },
-    position: {
-      type: String,
-      default: 'center'
-    },
-    showBtn: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    labelPosition: {
-      type: String,
-      default: 'left'
-    }
-  },
-  computed: {
-    btnList() {
-      return this.contents.filter((x) => x.type === 'submit');
-    },
-    newContent: {
-      get() {
-        let tableList = this.contents.filter((x) => x.type == 'table');
-        if (tableList.length > 0) {
-          tableList.map((x) => {
-            x.tHead.map((z) => {
-              if (z.type == 'handle' && z.events) {
-                z.events.map((y) => {
-                  y['native-type'] = 'button';
-                });
-              }
-            });
-          });
-        }
-        return this.contents;
-      },
-      set(val) {
-        return val;
-      }
-    }
-  },
-  mounted() {
-    // this.setBtnType()
-  },
-  methods: {
-    handleFailed(values) {
-      this.$refs.emFormTable.map((item) => {
-        item.validate();
-      });
-      this.$emit('failed', { errors: values.errors, values: this.model });
-    },
-    handleSubmit() {
-      let errForm = false;
-      if (this.$refs.emFormTable) {
-        this.$refs.emFormTable.map((item) => {
-          if (!item.validate()) {
-            errForm = true;
-          }
-        });
-      }
-      if (errForm) {
-        this.$emit('failed', { errors: [], values: this.model });
-      } else {
-        this.$emit('submit', this.model);
-      }
-    },
-    handleChange(key, value, timePeriod) {
-      this.$emit('change', key, value, timePeriod);
-    },
-    handleBtnClick(val) {
-      this.$emit('table-btn-click', val);
-    },
-    validate(name) {
-      return this.$refs.emForm.validate(name);
-    },
-    submit() {
-      this.$refs.emForm.submit();
-    },
-    resetValidation(name) {
-      this.$refs.emForm.resetValidation(name);
-    },
-    scrollToField(name, alignToTop) {
-      this.$refs.emForm.scrollToField(name, alignToTop);
-    },
-    handleClick(val) {
-      this.$emit('click', { values: this.model, btn: val });
-    }
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <van-form
+    class="em-form"
+    ref="emForm"
+    v-bind="$attrs"
+    @failed="handleFailed"
+    @submit="handleSubmit"
+  >
+    <div class="em-form-content">
+      <div
+        v-for="(item, index) in newContent"
+        :key="index"
+        :style="
+          item.type == 'tab'
+            ? `flex:1;height:0;min-height:${item.minHeight || 400}px`
+            : item.type == 'table'
+            ? 'flex:1;height:0'
+            : ''
+        "
+      >
+        <em-tabs
+          v-model="item.active"
+          v-bind="{ ...item, type: item.tabType || 'line' }"
+          v-on="{ ...item.events }"
+          v-if="item.type === 'tab'"
+        >
+          <em-tab v-bind="{ ...z }" v-for="(z, i) in item.contents" :key="i">
+            <div style="height: 100%" v-for="(x, j) in z.contents" :key="j">
+              <em-input
+                v-if="
+                  x.type === 'text' ||
+                  x.type === 'textarea' ||
+                  x.type == 'number' ||
+                  x.type == 'digit' ||
+                  x.type == 'password' ||
+                  x.type == 'tel'
+                "
+                class="em-table-input"
+                v-bind="{ ...$attrs, ...x }"
+                v-on="{ ...x.events }"
+                :label-position="x.labelPosition || labelPosition"
+                :disabled="x.disabled || disabled"
+                :readonly="x.readonly || readonly"
+                ref="input"
+                v-model="model[x.name]"
+                :label="x.label.text || x.label"
+                @input="handleChange(x.name, model[x.name])"
+              />
+              <!-- <em-input
+        v-if="
+          (item.type === 'text' ||
+            item.type === 'textarea' ||
+            item.type == 'number' ||
+            item.type == 'digit' ||
+            item.type == 'password' ||
+            item.type == 'tel') && item.events
+        "
+        class="em-table-input"
+        v-bind="{ ...$attrs, ...item }"
+        
+        :label-position="item.labelPosition || labelPosition"
+        :disabled="item.disabled || disabled"
+        :readonly="item.readonly || readonly"
+        ref="input"
+        v-model="model[item.name]"
+        :label="item.label.text || item.label"
+        @input="handleChange(item.name, model[item.name])"
+      /> -->
+              <em-picker
+                v-if="x.type === 'select'"
+                v-bind="{ ...$attrs, ...x }"
+                v-on="{ ...x.events }"
+                ref="select"
+                :label-position="x.labelPosition || labelPosition"
+                :disabled="x.disabled || disabled"
+                :readonly="x.readonly || readonly"
+                v-model="model[x.name]"
+                :columns="x.data || []"
+                @confirm="
+                  (value) => {
+                    handleChange(item.name, value);
+                  }
+                "
+              />
+              <em-date
+                v-else-if="
+                  x.date ||
+                  x.type == 'date' ||
+                  x.type == 'year' ||
+                  x.type == 'year-month' ||
+                  x.type == 'month-day' ||
+                  x.type == 'time' ||
+                  x.type == 'datetimeSecond' ||
+                  x.type == 'datetime' ||
+                  x.type == 'datehour'
+                "
+                ref="date"
+                v-bind="{ ...$attrs, ...x }"
+                v-on="{ ...x.events }"
+                v-model="model[x.name]"
+                :label-position="x.labelPosition || labelPosition"
+                :disabled="x.disabled || disabled"
+                :readonly="x.readonly || readonly"
+                :joinStr="x.joinStr || ''"
+                @confirm="
+                  (value, timePeriod) => {
+                    handleChange(x.name, value, timePeriod);
+                  }
+                "
+              />
+              <em-input
+                v-else-if="x.type === 'radio'"
+                ref="radio"
+                v-bind="{ ...$attrs, ...x }"
+                :label-position="x.labelPosition || labelPosition"
+              >
+                <template slot="input">
+                  <em-radio-group
+                    v-bind="{ ...$attrs, ...x }"
+                    v-on="{ ...x.events }"
+                    v-model="model[x.name]"
+                    :disabled="x.disabled || disabled || x.readonly || readonly"
+                    :data="x.data"
+                    @change="
+                      (value) => {
+                        handleChange(x.name, value);
+                      }
+                    "
+                  />
+                </template>
+              </em-input>
+              <em-input
+                v-else-if="x.type === 'checkbox'"
+                ref="checkbox"
+                v-bind="{ ...$attrs, ...x }"
+                :label-position="x.labelPosition || labelPosition"
+              >
+                <template slot="input">
+                  <em-checkbox-group
+                    v-bind="{ ...$attrs, ...x }"
+                    v-on="{ ...x.events }"
+                    v-model="model[x.name]"
+                    :disabled="x.disabled || disabled || x.readonly || readonly"
+                    @change="
+                      (value) => {
+                        handleChange(x.name, value);
+                      }
+                    "
+                  />
+                </template>
+              </em-input>
+              <em-input
+                v-else-if="x.type === 'switch'"
+                ref="switch"
+                v-bind="{ ...$attrs, ...x }"
+                :label-position="x.labelPosition || labelPosition"
+              >
+                <template slot="input">
+                  <em-switch
+                    v-bind="{ ...$attrs, ...x }"
+                    v-model="model[x.name]"
+                    v-on="{ ...x.events }"
+                    :disabled="x.disabled || disabled || x.readonly || readonly"
+                    @change="
+                      (value) => {
+                        handleChange(x.name, value);
+                      }
+                    "
+                  />
+                </template>
+              </em-input>
+              <em-selector
+                v-else-if="x.type == 'selector'"
+                ref="selector"
+                v-bind="{ ...$attrs, ...x }"
+                v-model="model[x.name]"
+                v-on="{ ...x.events }"
+                :label="x.label"
+                :label-position="x.labelPosition || labelPosition"
+                :disabled="x.disabled || disabled || x.readonly || readonly"
+                @change="
+                  (value) => {
+                    handleChange(x.name, value);
+                  }
+                "
+              />
+              <em-table
+                v-else-if="x.type == 'table'"
+                class="em-form-table"
+                ref="emFormTable"
+                v-bind="{ ...$attrs, ...x }"
+                :data="model[x.name]"
+                :thead="x.tHead"
+                :style="`margin:${x.margin || 10}px 0px`"
+                isForm
+                :form="
+                  !x.disabled && !disabled && !x.readonly && !readonly && x.form
+                "
+                v-on="{ ...x.events }"
+                @btn-click="handleBtnClick"
+              />
+              <van-cell
+                v-else-if="x.type === 'component'"
+                :title="x.label"
+                :name="x.name"
+              >
+                <component
+                  v-model="model[x.name]"
+                  :is="x.is || x.tag"
+                  v-bind="{ ...$attrs, ...x }"
+                  v-on="x.events"
+                ></component>
+              </van-cell>
+            </div>
+          </em-tab>
+        </em-tabs>
+        <em-input
+          v-if="
+            item.type === 'text' ||
+            item.type === 'textarea' ||
+            item.type == 'number' ||
+            item.type == 'digit' ||
+            item.type == 'password' ||
+            item.type == 'tel'
+          "
+          class="em-table-input"
+          v-bind="{ ...$attrs, ...item }"
+          v-on="{ ...item.events }"
+          :label-position="item.labelPosition || labelPosition"
+          :disabled="item.disabled || disabled"
+          :readonly="item.readonly || readonly"
+          ref="input"
+          v-model="model[item.name]"
+          :label="item.label.text || item.label"
+          @input="handleChange(item.name, model[item.name])"
+        />
+        <!-- <em-input
+        v-if="
+          (item.type === 'text' ||
+            item.type === 'textarea' ||
+            item.type == 'number' ||
+            item.type == 'digit' ||
+            item.type == 'password' ||
+            item.type == 'tel') && item.events
+        "
+        class="em-table-input"
+        v-bind="{ ...$attrs, ...item }"
+        
+        :label-position="item.labelPosition || labelPosition"
+        :disabled="item.disabled || disabled"
+        :readonly="item.readonly || readonly"
+        ref="input"
+        v-model="model[item.name]"
+        :label="item.label.text || item.label"
+        @input="handleChange(item.name, model[item.name])"
+      /> -->
+        <em-picker
+          v-if="item.type === 'select'"
+          v-bind="{ ...$attrs, ...item }"
+          v-on="{ ...item.events }"
+          ref="select"
+          :label-position="item.labelPosition || labelPosition"
+          :disabled="item.disabled || disabled"
+          :readonly="item.readonly || readonly"
+          v-model="model[item.name]"
+          :columns="item.data || []"
+          @confirm="
+            (value) => {
+              handleChange(item.name, value);
+            }
+          "
+        />
+        <em-date
+          v-else-if="
+            item.date ||
+            item.type == 'date' ||
+            item.type == 'year' ||
+            item.type == 'year-month' ||
+            item.type == 'month-day' ||
+            item.type == 'time' ||
+            item.type == 'datetimeSecond' ||
+            item.type == 'datetime' ||
+            item.type == 'datehour'
+          "
+          ref="date"
+          v-bind="{ ...$attrs, ...item }"
+          v-on="{ ...item.events }"
+          v-model="model[item.name]"
+          :label-position="item.labelPosition || labelPosition"
+          :disabled="item.disabled || disabled"
+          :readonly="item.readonly || readonly"
+          :joinStr="item.joinStr || ''"
+          @confirm="
+            (value, timePeriod) => {
+              handleChange(item.name, value, timePeriod);
+            }
+          "
+        />
+        <em-input
+          v-else-if="item.type === 'radio'"
+          ref="radio"
+          v-bind="{ ...$attrs, ...item }"
+          :label-position="item.labelPosition || labelPosition"
+        >
+          <template slot="input">
+            <em-radio-group
+              v-bind="{ ...$attrs, ...item }"
+              v-on="{ ...item.events }"
+              v-model="model[item.name]"
+              :disabled="item.disabled || disabled || item.readonly || readonly"
+              :data="item.data"
+              @change="
+                (value) => {
+                  handleChange(item.name, value);
+                }
+              "
+            />
+          </template>
+        </em-input>
+        <em-input
+          v-else-if="item.type === 'checkbox'"
+          ref="checkbox"
+          v-bind="{ ...$attrs, ...item }"
+          :label-position="item.labelPosition || labelPosition"
+        >
+          <template slot="input">
+            <em-checkbox-group
+              v-bind="{ ...$attrs, ...item }"
+              v-on="{ ...item.events }"
+              v-model="model[item.name]"
+              :disabled="item.disabled || disabled || item.readonly || readonly"
+              @change="
+                (value) => {
+                  handleChange(item.name, value);
+                }
+              "
+            />
+          </template>
+        </em-input>
+        <em-input
+          v-else-if="item.type === 'switch'"
+          ref="switch"
+          v-bind="{ ...$attrs, ...item }"
+          :label-position="item.labelPosition || labelPosition"
+        >
+          <template slot="input">
+            <em-switch
+              v-bind="{ ...$attrs, ...item }"
+              v-model="model[item.name]"
+              v-on="{ ...item.events }"
+              :disabled="item.disabled || disabled || item.readonly || readonly"
+              @change="
+                (value) => {
+                  handleChange(item.name, value);
+                }
+              "
+            />
+          </template>
+        </em-input>
+        <em-selector
+          v-else-if="item.type == 'selector'"
+          ref="selector"
+          v-bind="{ ...$attrs, ...item }"
+          v-model="model[item.name]"
+          v-on="{ ...item.events }"
+          :label="item.label"
+          :label-position="item.labelPosition || labelPosition"
+          :disabled="item.disabled || disabled || item.readonly || readonly"
+          @change="
+            (value) => {
+              handleChange(item.name, value);
+            }
+          "
+        />
+        <em-table
+          v-else-if="item.type == 'table'"
+          class="em-form-table"
+          ref="emFormTable"
+          v-bind="{ ...$attrs, ...item }"
+          :data="model[item.name]"
+          :thead="item.tHead"
+          :style="`margin:${item.margin || 10}px 0px`"
+          isForm
+          :form="
+            !item.disabled &&
+            !disabled &&
+            !item.readonly &&
+            !readonly &&
+            item.form
+          "
+          v-on="{ ...item.events }"
+          @btn-click="handleBtnClick"
+        />
+        <van-cell
+          v-else-if="item.type === 'component'"
+          :title="item.label"
+          :name="item.name"
+        >
+          <component
+            v-model="model[item.name]"
+            :is="item.is || item.tag"
+            v-bind="{ ...$attrs, ...item }"
+            v-on="item.events"
+          ></component>
+        </van-cell>
+
+        <!-- @btn-click="handleBtnClick($event,item)"
+        @selection-change="handleSelectionChange($event,item)"
+        @edit="handleEdit($event,item)" -->
+      </div>
+    </div>
+
+    <div
+      :style="`margin: 16px;text-align:${position}`"
+      v-if="showBtn && !disabled && !readonly"
+    >
+      <em-button
+        round
+        block
+        type="primary"
+        v-if="btnList.length == 0"
+        native-type="submit"
+        >提交</em-button
+      >
+      <em-button
+        v-show="btnList.length != 0"
+        v-for="item in btnList[0].contents"
+        :key="item.text"
+        v-bind="item"
+        :native-type="item.nativeType ? item.nativeType : 'button'"
+        @click="handleClick(item)"
+        >{{ item.text }}</em-button
+      >
+    </div>
+  </van-form>
+</template>
+
+<script>
+export default {
+  name: 'EmForm',
+  props: {
+    contents: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    model: {
+      type: Object,
+      default: () => {}
+    },
+    position: {
+      type: String,
+      default: 'center'
+    },
+    showBtn: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    labelPosition: {
+      type: String,
+      default: 'left'
+    }
+  },
+  computed: {
+    btnList() {
+      return this.contents.filter((x) => x.type === 'submit');
+    },
+    newContent: {
+      get() {
+        let tableList = this.contents.filter((x) => x.type == 'table');
+        if (tableList.length > 0) {
+          tableList.map((x) => {
+            x.tHead.map((z) => {
+              if (z.type == 'handle' && z.events) {
+                z.events.map((y) => {
+                  y['native-type'] = 'button';
+                });
+              }
+            });
+          });
+        }
+        return this.contents;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  mounted() {
+    // this.setBtnType()
+  },
+  methods: {
+    handleFailed(values) {
+      this.$refs.emFormTable.map((item) => {
+        item.validate();
+      });
+      this.$emit('failed', { errors: values.errors, values: this.model });
+    },
+    handleSubmit() {
+      let errForm = false;
+      if (this.$refs.emFormTable) {
+        this.$refs.emFormTable.map((item) => {
+          if (!item.validate()) {
+            errForm = true;
+          }
+        });
+      }
+      if (errForm) {
+        this.$emit('failed', { errors: [], values: this.model });
+      } else {
+        this.$emit('submit', this.model);
+      }
+    },
+    handleChange(key, value, timePeriod) {
+      this.$emit('change', key, value, timePeriod);
+    },
+    handleBtnClick(val) {
+      this.$emit('table-btn-click', val);
+    },
+    validate(name) {
+      return this.$refs.emForm.validate(name);
+    },
+    submit() {
+      this.$refs.emForm.submit();
+    },
+    resetValidation(name) {
+      this.$refs.emForm.resetValidation(name);
+    },
+    scrollToField(name, alignToTop) {
+      this.$refs.emForm.scrollToField(name, alignToTop);
+    },
+    handleClick(val) {
+      this.$emit('click', { values: this.model, btn: val });
+    }
+  }
+};
+</script>
+
+<style></style>