eoss-ui 0.3.97

package/packages/form/src/main.vue

@@ -0,0 +1,4429 @@
+<template>
+  <el-form
+    ref="esForm"
+    v-bind="$attrs"
+    :label-position="labelPosition"
+    :model="models"
+    :label-width="labelWidth"
+    :class="{
+      'es-form-readonly': readonly,
+      'es-form-group': inline,
+      'es-form-table': table,
+      'es-form-inside-dialog': dialog
+    }"
+    :inline="inline"
+    class="es-form"
+    v-loading="loading"
+    element-loading-text="获取数据中..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.65)"
+    v-on="$listeners"
+  >
+    <input type="text" style="display: none" v-if="forbid" />
+    <es-steps
+      v-if="steps"
+      class="es-steps-group"
+      v-bind="
+        handleExclAttribute({ data: steps, attrs: ['active', 'contents'] })
+      "
+      :contents="stepContents"
+      :active="stepActive"
+      @click="handleClick"
+    ></es-steps>
+    <slot>
+      <template v-if="formHeight">
+        <el-collapse
+          v-if="isCollapse"
+          v-model="activeNames"
+          class="es-collapse"
+          :accordion="accordion"
+          @change="handleCollapse"
+        >
+          <el-scrollbar
+            class="es-scrollbar"
+            :style="{ height: formHeight }"
+            ref="scrollbar"
+          >
+            <el-collapse-item
+              v-for="(items, indexs) in content"
+              class="es-collapse-item"
+              :class="{
+                'es-collapse-readonly': accordion ? false : !collapse,
+                'es-collapse-caption': items.caption
+              }"
+              :name="items.name || String(indexs)"
+              :key="indexs"
+              :readonly="accordion ? false : !collapse"
+            >
+              <div slot="title" class="es-collapse-title">
+                <template v-if="typeof items.title === 'object'">
+                  <template v-for="(item, index) in items.title">
+                    <template v-if="typeof item === 'string'">
+                      <span :key="index">{{ item }}</span>
+                    </template>
+                    <div v-else :key="index" class="es-collapse-title-handler">
+                      <es-label
+                        :contents="item.label"
+                        v-if="item.label"
+                      ></es-label>
+                      <span v-if="item.text || item.type === 'text'">{{
+                        item.text || item.contents
+                      }}</span>
+                      <i
+                        v-else-if="item.type === 'icon' || item.icon"
+                        :class="item.class || item.icon"
+                        v-html="item.contents"
+                        @click.stop="
+                          () => {
+                            item.event && item.event(items, indexs);
+                            item.click && item.click(items, indexs);
+                          }
+                        "
+                      ></i>
+                      <es-radio-group
+                        v-else-if="item.type == 'radio'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.name]"
+                        size="medium"
+                        :plain="item.plain || item.name === undefined"
+                        :readonly="readonly ? readonly : item.readonly"
+                        @change="
+                          val => {
+                            handleChange(item, val, items);
+                          }
+                        "
+                      ></es-radio-group>
+                      <es-checkbox-group
+                        v-else-if="item.type == 'checkbox'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.name]"
+                        size="medium"
+                        :plain="item.plain || item.name === undefined"
+                        :readonly="readonly ? readonly : item.readonly"
+                        @change="
+                          val => {
+                            handleChange(item, val, items);
+                          }
+                        "
+                      ></es-checkbox-group>
+                      <es-select
+                        v-else-if="item.type == 'select'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.name]"
+                        size="medium"
+                        :plain="item.plain || item.name === undefined"
+                        :readonly="readonly ? readonly : item.readonly"
+                        @change="
+                          val => {
+                            handleChange(item, val, items);
+                          }
+                        "
+                      ></es-select>
+                    </div>
+                  </template>
+                </template>
+                <template v-else>{{ items.title }}</template>
+              </div>
+              <es-table-form
+                v-if="table || items.table"
+                ref="form"
+                :label-width="items.labelWidth || labelWidth"
+                :span="items.span || span"
+                :tableAfter="tableAfter"
+                v-bind="items"
+                :thead="thead"
+                :model.sync="models"
+                :readonly="readonly"
+                :contents="items.contents"
+                :widths="widths"
+                @click="handleClick"
+                @change="handleChange"
+                @dataChange="handleDataChange"
+                @focus="handleFocus"
+                @blur="handleBlur"
+                @clear="handleClear"
+              ></es-table-form>
+              <template v-else>
+                <template v-for="item in items.contents">
+                  <div
+                    v-if="item.type === 'caption'"
+                    class="es-form-item-caption"
+                    :key="item.name"
+                  >
+                    {{ item.text }}
+                  </div>
+                  <el-form-item
+                    v-else
+                    ref="es-form-pane"
+                    v-show="!item.hide"
+                    :key="item.name"
+                    :label-width="labelWidth"
+                    :prop="item.name"
+                    :rules="getRules(item)"
+                    :style="style(item)"
+                    :class="[
+                      {
+                        'es-form-space-none': !space,
+                        'es-form-item-readonly': readonly,
+                        'es-form-item-table': item.type === 'table',
+                        'es-form-item-inline': item.inline,
+                        'es-form-item-onrow': item.row,
+                        'es-form-item-label-hide':
+                          item.labelHide || item.showLabel === false
+                      },
+                      item.class,
+                      itemClass[item.type]
+                    ]"
+                    :label-class="
+                      [
+                        {
+                          'required-after': after,
+                          'es-label-box': labelPosition !== 'top',
+                          'required-position':
+                            !labelPosition || labelPosition === 'right'
+                        },
+                        'es-justify-' +
+                          (item.labelAlign
+                            ? align[item.labelAlign]
+                            : typeof item.label == 'object' && item.label.align
+                            ? align[item.label.align]
+                            : labelPosition
+                            ? labelPosition == 'top'
+                              ? 'start'
+                              : align[labelPosition]
+                            : 'end'),
+                        !Array.isArray(item.labelClass) ? item.labelClass : ''
+                      ].concat(
+                        Array.isArray(item.labelClass ? item.labelClass : '')
+                      )
+                    "
+                  >
+                    <es-label
+                      slot="label"
+                      v-if="
+                        item.showLabel !== false &&
+                          item.type !== 'table' &&
+                          showLabel
+                      "
+                      :contents="item.label"
+                      :plain="item.plain || item.name === undefined"
+                    ></es-label>
+                    <es-input-number
+                      v-if="item.type == 'number'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-input-number>
+                    <es-radio-group
+                      v-else-if="item.type == 'radio'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-radio-group>
+                    <es-checkbox-group
+                      v-else-if="item.type == 'checkbox'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-checkbox-group>
+                    <es-select
+                      v-else-if="item.type == 'select'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-select>
+                    <es-cascader
+                      v-else-if="item.type == 'cascader'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    >
+                    </es-cascader>
+                    <es-selector
+                      v-else-if="item.type === 'selector'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-selector>
+                    <es-select-ganged
+                      v-else-if="
+                        item.type == 'ganged' ||
+                          (item.type == 'select' && item.ganged)
+                      "
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-select-ganged>
+                    <es-switch
+                      v-else-if="item.type == 'switch'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-switch>
+                    <es-date-picker
+                      v-else-if="
+                        item.date ||
+                          item.type == 'date' ||
+                          item.type == 'year' ||
+                          item.type == 'month' ||
+                          item.type == 'date' ||
+                          item.type == 'dates' ||
+                          item.type == 'week' ||
+                          item.type == 'datetime' ||
+                          item.type == 'datetimerange' ||
+                          item.type == 'daterange' ||
+                          item.type == 'monthrange' ||
+                          item.type == 'quarter' ||
+                          item.type == 'halfyear'
+                      "
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-date-picker>
+                    <es-upload
+                      v-else-if="
+                        item.type == 'attachment' || item.type == 'upload'
+                      "
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value', 'ownId']
+                        })
+                      "
+                      :ownId="item.ownId || models.id"
+                      v-model="models[item.name]"
+                      btn-size="medium"
+                      :readonly="readonly ? readonly : item.readonly"
+                      :rules="item.rules"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-upload>
+                    <es-selector
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      v-else-if="item.type == 'selector'"
+                      :readonly="readonly ? readonly : item.readonly"
+                      :plain="item.plain || item.name === undefined"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-selector>
+                    <template v-else-if="item.type === 'table'">
+                      <es-data-table-form
+                        v-if="item.lazy"
+                        :data="models[item.name]"
+                        :full="item.height != undefined || item.height != null"
+                        v-bind="
+                          handleExclAttribute({ data: item, attrs: ['value'] })
+                        "
+                        :readonly="readonly ? readonly : item.readonly"
+                        @blur="
+                          (val, data) => {
+                            handleBlur(item, val, data);
+                          }
+                        "
+                        @focus="
+                          (val, data) => {
+                            handleFocus(item, val, data);
+                          }
+                        "
+                        @edit="
+                          (val, data) => {
+                            handleChange(item, val, data);
+                          }
+                        "
+                        @clear="handleClear"
+                        @btnClick="handleClick"
+                        @dataChange="handleDataChange"
+                      >
+                      </es-data-table-form>
+                      <es-data-table
+                        v-else
+                        :data="models[item.name]"
+                        :full="item.height != undefined || item.height != null"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value', 'events']
+                          })
+                        "
+                        v-on="item.events"
+                        :readonly="readonly ? readonly : item.readonly"
+                        @blur="
+                          (val, data) => {
+                            handleBlur(item, val, data);
+                          }
+                        "
+                        @focus="
+                          (val, data) => {
+                            handleFocus(item, val, data);
+                          }
+                        "
+                        @edit="
+                          (val, data) => {
+                            handleChange(item, val, data);
+                          }
+                        "
+                        @btnClick="handleClick"
+                        @dataChange="handleDataChange"
+                      >
+                      </es-data-table>
+                    </template>
+                    <es-input
+                      v-else
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @input="
+                        val => {
+                          handleInput(item, val);
+                        }
+                      "
+                      @clear="
+                        () => {
+                          handleClear(item);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-input>
+                    <template v-if="item.inline">
+                      <template v-if="Array.isArray(item.inline)">
+                        <div
+                          class="es-form-inline"
+                          v-for="(inline, k) in item.inline"
+                          :key="k"
+                        >
+                          <div class="es-range" v-if="inline.range !== false">
+                            —
+                          </div>
+                          <es-input-number
+                            v-if="inline.type == 'number'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-input-number>
+                          <es-select
+                            v-else-if="inline.type == 'select'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-select>
+                          <es-cascader
+                            v-else-if="inline.type == 'cascader'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          >
+                          </es-cascader>
+                          <es-date-picker
+                            v-else-if="
+                              inline.date ||
+                                inline.type == 'date' ||
+                                inline.type == 'year' ||
+                                inline.type == 'month' ||
+                                inline.type == 'date' ||
+                                inline.type == 'dates' ||
+                                inline.type == 'week' ||
+                                inline.type == 'datetime' ||
+                                inline.type == 'datetimerange' ||
+                                inline.type == 'daterange' ||
+                                inline.type == 'monthrange' ||
+                                inline.type == 'quarter' ||
+                                inline.type == 'halfyear'
+                            "
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-date-picker>
+                          <template
+                            v-else-if="
+                              inline.type == 'image' || inline.type == 'img'
+                            "
+                          >
+                            <img
+                              v-if="inline.url || inline.src"
+                              v-bind="
+                                handleExclAttribute({
+                                  data: inline,
+                                  attrs: ['value']
+                                })
+                              "
+                              height="100%"
+                              :src="inline.url || inline.src"
+                              @click="inline.event"
+                            />
+                          </template>
+                          <es-input
+                            v-else
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @input="
+                              val => {
+                                handleInput(inline, val);
+                              }
+                            "
+                            @clear="handleClear(inline)"
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-input>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div
+                          class="es-range"
+                          v-if="item.inline.range !== false"
+                        >
+                          —
+                        </div>
+                        <es-input-number
+                          v-if="item.inline.type == 'number'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: item.inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        ></es-input-number>
+                        <es-select
+                          v-else-if="item.inline.type == 'select'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: item.inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        ></es-select>
+                        <es-cascader
+                          v-else-if="item.inline.type == 'cascader'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: item.inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        >
+                        </es-cascader>
+                        <es-date-picker
+                          v-else-if="
+                            item.inline.date ||
+                              item.inline.type == 'date' ||
+                              item.inline.type == 'year' ||
+                              item.inline.type == 'month' ||
+                              item.inline.type == 'date' ||
+                              item.inline.type == 'dates' ||
+                              item.inline.type == 'week' ||
+                              item.inline.type == 'datetime' ||
+                              item.inline.type == 'datetimerange' ||
+                              item.inline.type == 'daterange' ||
+                              item.inline.type == 'monthrange' ||
+                              item.inline.type == 'quarter' ||
+                              item.inline.type == 'halfyear'
+                          "
+                          v-bind="
+                            handleExclAttribute({
+                              data: item.inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        ></es-date-picker>
+                        <template
+                          v-else-if="
+                            item.inline.type == 'image' ||
+                              item.inline.type == 'img'
+                          "
+                        >
+                          <img
+                            v-if="item.inline.url || item.inline.src"
+                            v-bind="
+                              handleExclAttribute({
+                                data: item.inline,
+                                attrs: ['value']
+                              })
+                            "
+                            height="100%"
+                            :src="item.inline.url || item.inline.src"
+                            @click="item.inline.event"
+                          />
+                        </template>
+                        <es-input
+                          v-else
+                          v-bind="
+                            handleExclAttribute({
+                              data: item.inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @input="
+                            val => {
+                              handleInput(item.inline, val);
+                            }
+                          "
+                          @clear="handleClear(item.inline)"
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        ></es-input>
+                      </template>
+                    </template>
+                  </el-form-item>
+                </template>
+              </template>
+            </el-collapse-item>
+          </el-scrollbar>
+        </el-collapse>
+        <div class="es-form-content" v-else>
+          <el-scrollbar
+            class="es-scrollbar"
+            :style="{ height: formHeight }"
+            ref="scrollbar"
+          >
+            <es-table-form
+              v-if="table"
+              ref="form"
+              :tableAfter="tableAfter"
+              v-bind="tableAttrs"
+              :thead="thead"
+              :contents="formContent"
+              :readonly="readonly"
+              :label-width="labelWidth"
+              :span="span"
+              :widths="widths"
+              :model.sync="models"
+              @click="handleClick"
+              @change="handleChange"
+              @dataChange="handleDataChange"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @clear="handleClear"
+            ></es-table-form>
+            <template v-else>
+              <template v-for="item in formContent">
+                <div
+                  v-if="item.type === 'caption'"
+                  class="es-form-item-caption"
+                  :key="item.name"
+                >
+                  {{ item.text }}
+                </div>
+                <el-form-item
+                  v-else
+                  ref="es-form-pane"
+                  v-show="!item.hide"
+                  :key="item.name"
+                  :label-width="labelWidth"
+                  :prop="item.name"
+                  :rules="getRules(item)"
+                  :style="style(item)"
+                  :class="[
+                    {
+                      'es-form-space-none': !space,
+                      'es-form-item-readonly': readonly,
+                      'es-form-item-table': item.type === 'table',
+                      'es-form-item-inline': item.inline,
+                      'es-form-item-onrow': item.row,
+                      'es-form-item-label-hide':
+                        item.labelHide || item.showLabel === false
+                    },
+                    item.class,
+                    itemClass[item.type]
+                  ]"
+                  :label-class="
+                    [
+                      {
+                        'required-after': after,
+                        'es-label-box': labelPosition !== 'top',
+                        'required-position':
+                          !labelPosition || labelPosition === 'right'
+                      },
+                      'es-justify-' +
+                        (item.labelAlign
+                          ? align[item.labelAlign]
+                          : typeof item.label == 'object' && item.label.align
+                          ? align[item.label.align]
+                          : labelPosition
+                          ? labelPosition == 'top'
+                            ? 'start'
+                            : align[labelPosition]
+                          : 'end'),
+                      !Array.isArray(item.labelClass) ? item.labelClass : ''
+                    ].concat(
+                      Array.isArray(item.labelClass ? item.labelClass : '')
+                    )
+                  "
+                >
+                  <es-label
+                    slot="label"
+                    v-if="
+                      item.showLabel !== false &&
+                        item.type !== 'table' &&
+                        showLabel
+                    "
+                    :contents="item.label"
+                    :plain="item.plain || item.name === undefined"
+                  ></es-label>
+                  <es-input-number
+                    v-if="item.type == 'number'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-input-number>
+                  <es-radio-group
+                    v-else-if="item.type == 'radio'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-radio-group>
+                  <es-checkbox-group
+                    v-else-if="item.type == 'checkbox'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-checkbox-group>
+                  <es-select
+                    v-else-if="item.type == 'select'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-select>
+                  <es-cascader
+                    v-else-if="item.type == 'cascader'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  >
+                  </es-cascader>
+                  <es-select-ganged
+                    v-else-if="
+                      item.type == 'ganged' ||
+                        (item.type == 'select' && item.ganged)
+                    "
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-select-ganged>
+                  <es-switch
+                    v-else-if="item.type == 'switch'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-switch>
+                  <es-date-picker
+                    v-else-if="
+                      item.date ||
+                        item.type == 'date' ||
+                        item.type == 'year' ||
+                        item.type == 'month' ||
+                        item.type == 'date' ||
+                        item.type == 'dates' ||
+                        item.type == 'week' ||
+                        item.type == 'datetime' ||
+                        item.type == 'datetimerange' ||
+                        item.type == 'daterange' ||
+                        item.type == 'monthrange' ||
+                        item.type == 'quarter' ||
+                        item.type == 'halfyear'
+                    "
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-date-picker>
+                  <es-upload
+                    v-else-if="
+                      item.type == 'attachment' || item.type == 'upload'
+                    "
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['value', 'ownId']
+                      })
+                    "
+                    :ownId="item.ownId || models.id"
+                    btn-size="medium"
+                    v-model="models[item.name]"
+                    :readonly="readonly ? readonly : item.readonly"
+                    :rules="item.rules"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-upload>
+                  <es-selector
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    v-else-if="item.type === 'selector'"
+                    :readonly="readonly ? readonly : item.readonly"
+                    :plain="item.plain || item.name === undefined"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-selector>
+                  <template v-else-if="item.type === 'table'">
+                    <es-data-table-form
+                      v-if="item.lazy"
+                      :data="models[item.name]"
+                      :full="item.height != undefined || item.height != null"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (val, data) => {
+                          handleBlur(item, val, data);
+                        }
+                      "
+                      @focus="
+                        (val, data) => {
+                          handleFocus(item, val, data);
+                        }
+                      "
+                      @edit="
+                        (val, data) => {
+                          handleChange(item, val, data);
+                        }
+                      "
+                      @clear="handleClear"
+                      @btnClick="handleClick"
+                      @dataChange="handleDataChange"
+                    >
+                    </es-data-table-form>
+                    <es-data-table
+                      v-else
+                      :data="models[item.name]"
+                      :full="item.height != undefined || item.height != null"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value', 'events']
+                        })
+                      "
+                      v-on="item.events"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (val, data) => {
+                          handleBlur(item, val, data);
+                        }
+                      "
+                      @focus="
+                        (val, data) => {
+                          handleFocus(item, val, data);
+                        }
+                      "
+                      @edit="
+                        (val, data) => {
+                          handleChange(item, val, data);
+                        }
+                      "
+                      @btnClick="handleClick"
+                      @dataChange="handleDataChange"
+                    >
+                    </es-data-table>
+                  </template>
+                  <es-input
+                    v-else
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item.name, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item.name, event);
+                      }
+                    "
+                    @input="
+                      val => {
+                        handleInput(item.name, val);
+                      }
+                    "
+                    @clear="handleClear(item.name)"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-input>
+                  <template v-if="item.inline">
+                    <template v-if="Array.isArray(item.inline)">
+                      <div
+                        class="es-form-inline"
+                        v-for="(inline, k) in item.inline"
+                        :key="k"
+                      >
+                        <div class="es-range" v-if="inline.range !== false">
+                          —
+                        </div>
+                        <es-input-number
+                          v-if="inline.type == 'number'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-input-number>
+                        <es-select
+                          v-else-if="inline.type == 'select'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-select>
+                        <es-cascader
+                          v-else-if="inline.type == 'cascader'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        >
+                        </es-cascader>
+                        <es-date-picker
+                          v-else-if="
+                            inline.date ||
+                              inline.type == 'date' ||
+                              inline.type == 'year' ||
+                              inline.type == 'month' ||
+                              inline.type == 'date' ||
+                              inline.type == 'dates' ||
+                              inline.type == 'week' ||
+                              inline.type == 'datetime' ||
+                              inline.type == 'datetimerange' ||
+                              inline.type == 'daterange' ||
+                              inline.type == 'monthrange' ||
+                              inline.type == 'quarter' ||
+                              inline.type == 'halfyear'
+                          "
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-date-picker>
+                        <template
+                          v-else-if="
+                            inline.type == 'image' || inline.type == 'img'
+                          "
+                        >
+                          <img
+                            v-if="inline.url || inline.src"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            height="100%"
+                            :src="inline.url || inline.src"
+                            @click="inline.event"
+                          />
+                        </template>
+                        <es-input
+                          v-else
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @input="
+                            val => {
+                              handleInput(inline, val);
+                            }
+                          "
+                          @clear="handleClear(inline)"
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-input>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="es-range" v-if="item.inline.range !== false">
+                        —
+                      </div>
+                      <es-input-number
+                        v-if="item.inline.type == 'number'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-input-number>
+                      <es-select
+                        v-else-if="item.inline.type == 'select'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-select>
+                      <es-cascader
+                        v-else-if="item.inline.type == 'cascader'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      >
+                      </es-cascader>
+                      <es-date-picker
+                        v-else-if="
+                          item.inline.date ||
+                            item.inline.type == 'date' ||
+                            item.inline.type == 'year' ||
+                            item.inline.type == 'month' ||
+                            item.inline.type == 'date' ||
+                            item.inline.type == 'dates' ||
+                            item.inline.type == 'week' ||
+                            item.inline.type == 'datetime' ||
+                            item.inline.type == 'datetimerange' ||
+                            item.inline.type == 'daterange' ||
+                            item.inline.type == 'monthrange' ||
+                            item.inline.type == 'quarter' ||
+                            item.inline.type == 'halfyear'
+                        "
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-date-picker>
+                      <es-input
+                        v-else
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @input="
+                          val => {
+                            handleInput(item.inline, val);
+                          }
+                        "
+                        @clear="handleClear(item.inline)"
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-input>
+                    </template>
+                  </template>
+                </el-form-item>
+              </template>
+            </template>
+            <el-form-item v-show="labelWidth" v-if="inline">
+              <el-button
+                v-for="(item, index) in buttons"
+                v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                size="medium"
+                :key="index"
+                v-show="!item.hide"
+                @click="handleClick(item)"
+                >{{ item.label || item.text || item.name }}</el-button
+              >
+            </el-form-item>
+          </el-scrollbar>
+        </div>
+      </template>
+      <template v-else>
+        <el-collapse
+          v-if="isCollapse"
+          v-model="activeNames"
+          class="es-collapse"
+          :accordion="accordion"
+          @change="handleCollapse"
+        >
+          <el-collapse-item
+            v-for="(items, indexs) in formContent"
+            class="es-collapse-item"
+            :class="{ 'es-collapse-readonly': accordion ? false : !collapse }"
+            :name="items.name || String(indexs)"
+            :key="indexs"
+            :readonly="accordion ? false : !collapse"
+          >
+            <div class="es-collapse-title" slot="title">
+              <template v-if="typeof items.title === 'string'">{{
+                items.title
+              }}</template>
+              <template v-else>
+                <template v-for="(item, index) in items.title">
+                  <template v-if="typeof item === 'string'">
+                    <span :key="index">{{ item }}</span>
+                  </template>
+                  <div v-else :key="index" class="es-collapse-title-handler">
+                    <es-label
+                      :contents="item.label"
+                      v-if="item.label"
+                    ></es-label>
+                    <span v-if="item.text || item.type === 'text'">{{
+                      item.text || item.contents
+                    }}</span>
+                    <i
+                      v-else-if="item.type === 'icon' || item.icon"
+                      :class="item.class || item.icon"
+                      v-html="item.contents"
+                      @click.stop="
+                        () => {
+                          item.event && item.event(items, indexs);
+                          item.click && item.click(items, indexs);
+                        }
+                      "
+                    ></i>
+                    <es-radio-group
+                      v-else-if="item.type == 'radio'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      size="medium"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val, items);
+                        }
+                      "
+                    ></es-radio-group>
+                    <es-checkbox-group
+                      v-else-if="item.type == 'checkbox'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      size="medium"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val, items);
+                        }
+                      "
+                    ></es-checkbox-group>
+                    <es-select
+                      v-else-if="item.type == 'select'"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      v-model="models[item.name]"
+                      size="medium"
+                      :plain="item.plain || item.name === undefined"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @change="
+                        val => {
+                          handleChange(item, val, items);
+                        }
+                      "
+                    ></es-select>
+                  </div>
+                </template>
+              </template>
+            </div>
+            <es-table-form
+              v-if="table || items.table"
+              ref="form"
+              :label-width="items.labelWidth || labelWidth"
+              :span="items.span || span"
+              :tableAfter="tableAfter"
+              v-bind="items"
+              :thead="thead"
+              :model.sync="models"
+              :readonly="readonly"
+              :contents="items.contents"
+              :widths="widths"
+              @click="handleClick"
+              @change="handleChange"
+              @dataChange="handleDataChange"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @clear="handleClear"
+            ></es-table-form>
+            <template v-else>
+              <template v-for="item in items.contents">
+                <div
+                  v-if="item.type === 'caption'"
+                  class="es-form-item-caption"
+                  :key="item.name"
+                >
+                  {{ item.text }}
+                </div>
+                <el-form-item
+                  v-else
+                  ref="es-form-pane"
+                  v-show="!item.hide"
+                  :key="item.name"
+                  :label-width="labelWidth"
+                  :prop="item.name"
+                  :rules="getRules(item)"
+                  :style="style(item)"
+                  :class="[
+                    {
+                      'es-form-pane':
+                        !inline &&
+                        item.type !== 'submit' &&
+                        item.type !== 'button',
+                      'es-form-space-none': !space,
+                      'es-form-item-readonly': readonly,
+                      'es-form-item-table': item.type === 'table',
+                      'es-form-item-inline': item.inline,
+                      'es-form-item-onrow': item.row,
+                      'es-form-item-label-hide':
+                        item.labelHide || item.showLabel === false
+                    },
+                    item.class,
+                    itemClass[item.type]
+                  ]"
+                  :label-class="
+                    [
+                      {
+                        'required-after': after,
+                        'es-label-box': labelPosition !== 'top',
+                        'required-position':
+                          !labelPosition || labelPosition === 'right'
+                      },
+                      'es-justify-' +
+                        (item.labelAlign
+                          ? align[item.labelAlign]
+                          : typeof item.label == 'object' && item.label.align
+                          ? align[item.label.align]
+                          : labelPosition
+                          ? labelPosition == 'top'
+                            ? 'left'
+                            : align[labelPosition]
+                          : 'end'),
+                      !Array.isArray(item.labelClass) ? item.labelClass : ''
+                    ].concat(
+                      Array.isArray(item.labelClass ? item.labelClass : '')
+                    )
+                  "
+                >
+                  <es-label
+                    slot="label"
+                    v-if="
+                      item.showLabel !== false &&
+                        item.type !== 'table' &&
+                        showLabel
+                    "
+                    :contents="item.label"
+                    :plain="item.plain || item.name === undefined"
+                  ></es-label>
+                  <es-input-number
+                    v-if="item.type == 'number'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-input-number>
+                  <es-radio-group
+                    v-else-if="item.type == 'radio'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-radio-group>
+                  <es-checkbox-group
+                    v-else-if="item.type == 'checkbox'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-checkbox-group>
+                  <es-select
+                    v-else-if="item.type == 'select'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-select>
+                  <es-cascader
+                    v-else-if="item.type == 'cascader'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  >
+                  </es-cascader>
+                  <es-select-ganged
+                    v-else-if="
+                      item.type == 'ganged' ||
+                        (item.type == 'select' && item.ganged)
+                    "
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-select-ganged>
+                  <es-switch
+                    v-else-if="item.type == 'switch'"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-switch>
+                  <es-date-picker
+                    v-else-if="
+                      item.date ||
+                        item.type == 'date' ||
+                        item.type == 'year' ||
+                        item.type == 'month' ||
+                        item.type == 'date' ||
+                        item.type == 'dates' ||
+                        item.type == 'week' ||
+                        item.type == 'datetime' ||
+                        item.type == 'datetimerange' ||
+                        item.type == 'daterange' ||
+                        item.type == 'monthrange' ||
+                        item.type == 'quarter' ||
+                        item.type == 'halfyear'
+                    "
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-date-picker>
+                  <es-upload
+                    v-else-if="
+                      item.type == 'attachment' || item.type == 'upload'
+                    "
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['value', 'ownId']
+                      })
+                    "
+                    :ownId="item.ownId || models.id"
+                    btn-size="medium"
+                    v-model="models[item.name]"
+                    :readonly="readonly ? readonly : item.readonly"
+                    :rules="item.rules"
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-upload>
+                  <es-selector
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :readonly="readonly ? readonly : item.readonly"
+                    :plain="item.plain || item.name === undefined"
+                    v-else-if="item.type == 'selector'"
+                  ></es-selector>
+                  <template v-else-if="item.type === 'table'">
+                    <es-data-table-form
+                      v-if="item.lazy"
+                      :data="models[item.name]"
+                      :full="item.height != undefined || item.height != null"
+                      v-bind="
+                        handleExclAttribute({ data: item, attrs: ['value'] })
+                      "
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (val, data) => {
+                          handleBlur(item, val, data);
+                        }
+                      "
+                      @focus="
+                        (val, data) => {
+                          handleFocus(item, val, data);
+                        }
+                      "
+                      @edit="
+                        (val, data) => {
+                          handleChange(item, val, data);
+                        }
+                      "
+                      @clear="handleClear"
+                      @btnClick="handleClick"
+                      @dataChange="handleDataChange"
+                    >
+                    </es-data-table-form>
+                    <es-data-table
+                      v-else
+                      :data="models[item.name]"
+                      :full="item.height != undefined || item.height != null"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value', 'events']
+                        })
+                      "
+                      v-on="item.events"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        (val, data) => {
+                          handleBlur(item, val, data);
+                        }
+                      "
+                      @focus="
+                        (val, data) => {
+                          handleFocus(item, val, data);
+                        }
+                      "
+                      @edit="
+                        (val, data) => {
+                          handleChange(item, val, data);
+                        }
+                      "
+                      @btnClick="handleClick"
+                      @dataChange="handleDataChange"
+                    >
+                    </es-data-table>
+                  </template>
+                  <es-input
+                    v-else
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    v-model="models[item.name]"
+                    :plain="item.plain || item.name === undefined"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      event => {
+                        handleBlur(item, event);
+                      }
+                    "
+                    @focus="
+                      event => {
+                        handleFocus(item, event);
+                      }
+                    "
+                    @input="
+                      val => {
+                        handleInput(item, val);
+                      }
+                    "
+                    @clear="
+                      () => {
+                        handleClear(item);
+                      }
+                    "
+                    @change="
+                      val => {
+                        handleChange(item, val);
+                      }
+                    "
+                  ></es-input>
+                  <template v-if="item.inline">
+                    <template v-if="Array.isArray(item.inline)">
+                      <div
+                        class="es-form-inline"
+                        v-for="(inline, k) in item.inline"
+                        :key="k"
+                      >
+                        <div class="es-range" v-if="inline.range !== false">
+                          —
+                        </div>
+                        <es-input-number
+                          v-if="inline.type == 'number'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-input-number>
+                        <es-select
+                          v-else-if="inline.type == 'select'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-select>
+                        <es-cascader
+                          v-else-if="inline.type == 'cascader'"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        >
+                        </es-cascader>
+                        <es-date-picker
+                          v-else-if="
+                            inline.date ||
+                              inline.type == 'date' ||
+                              inline.type == 'year' ||
+                              inline.type == 'month' ||
+                              inline.type == 'date' ||
+                              inline.type == 'dates' ||
+                              inline.type == 'week' ||
+                              inline.type == 'datetime' ||
+                              inline.type == 'datetimerange' ||
+                              inline.type == 'daterange' ||
+                              inline.type == 'monthrange' ||
+                              inline.type == 'quarter' ||
+                              inline.type == 'halfyear'
+                          "
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-date-picker>
+                        <template
+                          v-else-if="
+                            inline.type == 'image' || inline.type == 'img'
+                          "
+                        >
+                          <img
+                            v-if="inline.url || inline.src"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            height="100%"
+                            :src="inline.url || inline.src"
+                            @click="inline.event"
+                          />
+                        </template>
+                        <es-input
+                          v-else
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          v-model="models[inline.name]"
+                          :plain="inline.plain || inline.name === undefined"
+                          :readonly="readonly ? readonly : inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(inline, event);
+                            }
+                          "
+                          @input="
+                            val => {
+                              handleInput(inline, val);
+                            }
+                          "
+                          @clear="handleClear(inline)"
+                          @change="
+                            val => {
+                              handleChange(inline, val);
+                            }
+                          "
+                        ></es-input>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="es-range" v-if="item.inline.range !== false">
+                        —
+                      </div>
+                      <es-input-number
+                        v-if="item.inline.type == 'number'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-input-number>
+                      <es-select
+                        v-else-if="item.inline.type == 'select'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-select>
+                      <es-cascader
+                        v-else-if="item.inline.type == 'cascader'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      >
+                      </es-cascader>
+                      <es-date-picker
+                        v-else-if="
+                          item.inline.date ||
+                            item.inline.type == 'date' ||
+                            item.inline.type == 'year' ||
+                            item.inline.type == 'month' ||
+                            item.inline.type == 'date' ||
+                            item.inline.type == 'dates' ||
+                            item.inline.type == 'week' ||
+                            item.inline.type == 'datetime' ||
+                            item.inline.type == 'datetimerange' ||
+                            item.inline.type == 'daterange' ||
+                            item.inline.type == 'monthrange' ||
+                            item.inline.type == 'quarter' ||
+                            item.inline.type == 'halfyear'
+                        "
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-date-picker>
+                      <es-input
+                        v-else
+                        v-bind="
+                          handleExclAttribute({
+                            data: item.inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[item.inline.name]"
+                        :plain="
+                          item.inline.plain || item.inline.name === undefined
+                        "
+                        :readonly="readonly ? readonly : item.inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(item.inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(item.inline, event);
+                          }
+                        "
+                        @input="
+                          val => {
+                            handleInput(item.inline, val);
+                          }
+                        "
+                        @clear="
+                          () => {
+                            handleClear(item);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(item.inline, val);
+                          }
+                        "
+                      ></es-input>
+                    </template>
+                  </template>
+                </el-form-item>
+              </template>
+            </template>
+          </el-collapse-item>
+        </el-collapse>
+        <div class="es-form-content es-form-padding" v-else>
+          <es-table-form
+            v-if="table"
+            ref="form"
+            :tableAfter="tableAfter"
+            v-bind="tableAttrs"
+            :thead="thead"
+            :model.sync="models"
+            :contents="formContent"
+            :readonly="readonly"
+            :label-width="labelWidth"
+            :span="span"
+            :widths="widths"
+            @click="handleClick"
+            @change="handleChange"
+            @dataChange="handleDataChange"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @clear="handleClear"
+          ></es-table-form>
+          <template v-else>
+            <template v-for="item in formContent">
+              <div
+                v-if="item.type === 'caption'"
+                class="es-form-item-caption"
+                :key="item.name"
+              >
+                {{ item.text }}
+              </div>
+              <el-form-item
+                v-else
+                ref="es-form-pane"
+                v-show="!item.hide"
+                :key="item.name"
+                :label-width="labelWidth"
+                :prop="item.name"
+                :rules="getRules(item)"
+                :style="style(item)"
+                :class="[
+                  {
+                    'es-form-space-none': !space,
+                    'es-form-item-readonly': readonly,
+                    'es-form-item-table': item.type === 'table',
+                    'es-form-item-inline': item.inline,
+                    'es-form-item-onrow': item.row,
+                    'es-form-item-label-hide':
+                      item.labelHide || item.showLabel === false
+                  },
+                  item.class,
+                  itemClass[item.type]
+                ]"
+                :label-class="
+                  [
+                    {
+                      'required-after': after,
+                      'es-label-box': labelPosition !== 'top',
+                      'required-position':
+                        !labelPosition || labelPosition === 'right'
+                    },
+                    'es-justify-' +
+                      (item.labelAlign
+                        ? align[item.labelAlign]
+                        : typeof item.label == 'object' && item.label.align
+                        ? align[item.label.align]
+                        : labelPosition
+                        ? labelPosition == 'top'
+                          ? 'start'
+                          : align[labelPosition]
+                        : 'end'),
+                    !Array.isArray(item.labelClass) ? item.labelClass : ''
+                  ].concat(
+                    Array.isArray(item.labelClass ? item.labelClass : '')
+                  )
+                "
+              >
+                <es-label
+                  slot="label"
+                  v-if="
+                    item.showLabel !== false &&
+                      item.type !== 'table' &&
+                      showLabel
+                  "
+                  :contents="item.label"
+                  :plain="item.plain || item.name === undefined"
+                ></es-label>
+                <es-input-number
+                  v-if="item.type == 'number'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @blur="
+                    event => {
+                      handleBlur(item, event);
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus(item, event);
+                    }
+                  "
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-input-number>
+                <es-radio-group
+                  v-else-if="item.type == 'radio'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-radio-group>
+                <es-checkbox-group
+                  v-else-if="item.type == 'checkbox'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-checkbox-group>
+                <es-select
+                  v-else-if="item.type == 'select'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @blur="
+                    event => {
+                      handleBlur(item, event);
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus(item, event);
+                    }
+                  "
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-select>
+                <es-cascader
+                  v-else-if="item.type == 'cascader'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @blur="
+                    event => {
+                      handleBlur(item, event);
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus(item, event);
+                    }
+                  "
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                >
+                </es-cascader>
+                <es-select-ganged
+                  v-else-if="
+                    item.type == 'ganged' ||
+                      (item.type == 'select' && item.ganged)
+                  "
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-select-ganged>
+                <es-switch
+                  v-else-if="item.type == 'switch'"
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-switch>
+                <es-date-picker
+                  v-else-if="
+                    item.date ||
+                      item.type == 'date' ||
+                      item.type == 'year' ||
+                      item.type == 'month' ||
+                      item.type == 'date' ||
+                      item.type == 'dates' ||
+                      item.type == 'week' ||
+                      item.type == 'datetime' ||
+                      item.type == 'datetimerange' ||
+                      item.type == 'daterange' ||
+                      item.type == 'monthrange' ||
+                      item.type == 'quarter' ||
+                      item.type == 'halfyear'
+                  "
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @blur="
+                    event => {
+                      handleBlur(item, event);
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus(item, event);
+                    }
+                  "
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-date-picker>
+                <es-upload
+                  v-else-if="item.type == 'attachment' || item.type == 'upload'"
+                  v-bind="
+                    handleExclAttribute({
+                      data: item,
+                      attrs: ['value', 'ownId']
+                    })
+                  "
+                  :ownId="item.ownId || models.id"
+                  btn-size="medium"
+                  v-model="models[item.name]"
+                  :readonly="readonly ? readonly : item.readonly"
+                  :rules="item.rules"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-upload>
+                <es-selector
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  v-else-if="item.type == 'selector'"
+                  :readonly="readonly ? readonly : item.readonly"
+                  :plain="item.plain || item.name === undefined"
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-selector>
+                <template v-else-if="item.type === 'table'">
+                  <es-data-table-form
+                    v-if="item.lazy"
+                    :data="models[item.name]"
+                    :full="item.height != undefined || item.height != null"
+                    v-bind="
+                      handleExclAttribute({ data: item, attrs: ['value'] })
+                    "
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      (val, data) => {
+                        handleBlur(item, val, data);
+                      }
+                    "
+                    @focus="
+                      (val, data) => {
+                        handleFocus(item, val, data);
+                      }
+                    "
+                    @edit="
+                      (val, data) => {
+                        handleChange(item, val, data);
+                      }
+                    "
+                    @clear="handleClear"
+                    @btnClick="handleClick"
+                    @dataChange="handleDataChange"
+                  >
+                  </es-data-table-form>
+                  <es-data-table
+                    v-else
+                    :data="models[item.name]"
+                    :full="item.height != undefined || item.height != null"
+                    v-bind="
+                      handleExclAttribute({
+                        data: item,
+                        attrs: ['value', 'events']
+                      })
+                    "
+                    v-on="item.events"
+                    :readonly="readonly ? readonly : item.readonly"
+                    @blur="
+                      (val, data) => {
+                        handleBlur(item, val, data);
+                      }
+                    "
+                    @focus="
+                      (val, data) => {
+                        handleFocus(item, val, data);
+                      }
+                    "
+                    @edit="
+                      (val, data) => {
+                        handleChange(item, val, data);
+                      }
+                    "
+                    @btnClick="handleClick"
+                    @dataChange="handleDataChange"
+                  >
+                  </es-data-table>
+                </template>
+                <es-input
+                  v-else
+                  v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+                  v-model="models[item.name]"
+                  :plain="item.plain || item.name === undefined"
+                  :readonly="readonly ? readonly : item.readonly"
+                  @blur="
+                    event => {
+                      handleBlur(item, event);
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus(item, event);
+                    }
+                  "
+                  @input="
+                    val => {
+                      handleInput(item, val);
+                    }
+                  "
+                  @clear="
+                    () => {
+                      handleClear(item);
+                    }
+                  "
+                  @change="
+                    val => {
+                      handleChange(item, val);
+                    }
+                  "
+                ></es-input>
+                <template v-if="item.inline">
+                  <template v-if="Array.isArray(item.inline)">
+                    <div
+                      class="es-form-inline"
+                      v-for="(inline, k) in item.inline"
+                      :key="k"
+                    >
+                      <div class="es-range" v-if="inline.range !== false">
+                        —
+                      </div>
+                      <es-input-number
+                        v-if="inline.type == 'number'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[inline.name]"
+                        :plain="inline.plain || inline.name === undefined"
+                        :readonly="readonly ? readonly : inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(inline, val);
+                          }
+                        "
+                      ></es-input-number>
+                      <es-select
+                        v-else-if="inline.type == 'select'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[inline.name]"
+                        :plain="inline.plain || inline.name === undefined"
+                        :readonly="readonly ? readonly : inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(inline, val);
+                          }
+                        "
+                      ></es-select>
+                      <es-cascader
+                        v-else-if="inline.type == 'cascader'"
+                        v-bind="
+                          handleExclAttribute({
+                            data: inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[inline.name]"
+                        :plain="inline.plain || inline.name === undefined"
+                        :readonly="readonly ? readonly : inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(inline, val);
+                          }
+                        "
+                      >
+                      </es-cascader>
+                      <es-date-picker
+                        v-else-if="
+                          inline.date ||
+                            inline.type == 'date' ||
+                            inline.type == 'year' ||
+                            inline.type == 'month' ||
+                            inline.type == 'date' ||
+                            inline.type == 'dates' ||
+                            inline.type == 'week' ||
+                            inline.type == 'datetime' ||
+                            inline.type == 'datetimerange' ||
+                            inline.type == 'daterange' ||
+                            inline.type == 'monthrange' ||
+                            inline.type == 'quarter' ||
+                            inline.type == 'halfyear'
+                        "
+                        v-bind="
+                          handleExclAttribute({
+                            data: inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[inline.name]"
+                        :plain="inline.plain || inline.name === undefined"
+                        :readonly="readonly ? readonly : inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(inline, event);
+                          }
+                        "
+                        @change="
+                          val => {
+                            handleChange(inline, val);
+                          }
+                        "
+                      ></es-date-picker>
+                      <template
+                        v-else-if="
+                          inline.type == 'image' || inline.type == 'img'
+                        "
+                      >
+                        <img
+                          v-if="inline.url || inline.src"
+                          v-bind="
+                            handleExclAttribute({
+                              data: inline,
+                              attrs: ['value']
+                            })
+                          "
+                          height="100%"
+                          :src="inline.url || inline.src"
+                          @click="inline.event"
+                        />
+                      </template>
+                      <es-input
+                        v-else
+                        v-bind="
+                          handleExclAttribute({
+                            data: inline,
+                            attrs: ['value']
+                          })
+                        "
+                        v-model="models[inline.name]"
+                        :plain="inline.plain || inline.name === undefined"
+                        :readonly="readonly ? readonly : inline.readonly"
+                        @blur="
+                          event => {
+                            handleBlur(inline, event);
+                          }
+                        "
+                        @focus="
+                          event => {
+                            handleFocus(inline, event);
+                          }
+                        "
+                        @input="
+                          val => {
+                            handleInput(inline, val);
+                          }
+                        "
+                        @clear="handleClear(inline)"
+                        @change="
+                          val => {
+                            handleChange(inline, val);
+                          }
+                        "
+                      ></es-input>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="es-range" v-if="item.inline.range !== false">
+                      —
+                    </div>
+                    <es-input-number
+                      v-if="item.inline.type == 'number'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item.inline,
+                          attrs: ['value']
+                        })
+                      "
+                      v-model="models[item.inline.name]"
+                      :plain="
+                        item.inline.plain || item.inline.name === undefined
+                      "
+                      :readonly="readonly ? readonly : item.inline.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item.inline, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item.inline, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item.inline, val);
+                        }
+                      "
+                    ></es-input-number>
+                    <es-select
+                      v-else-if="item.inline.type == 'select'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item.inline,
+                          attrs: ['value']
+                        })
+                      "
+                      v-model="models[item.inline.name]"
+                      :plain="
+                        item.inline.plain || item.inline.name === undefined
+                      "
+                      :readonly="readonly ? readonly : item.inline.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item.inline, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item.inline, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item.inline, val);
+                        }
+                      "
+                    ></es-select>
+                    <es-cascader
+                      v-else-if="item.inline.type == 'cascader'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item.inline,
+                          attrs: ['value']
+                        })
+                      "
+                      v-model="models[item.inline.name]"
+                      :plain="
+                        item.inline.plain || item.inline.name === undefined
+                      "
+                      :readonly="readonly ? readonly : item.inline.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item.inline, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item.inline, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item.inline, val);
+                        }
+                      "
+                    >
+                    </es-cascader>
+                    <es-date-picker
+                      v-else-if="
+                        item.inline.date ||
+                          item.inline.type == 'date' ||
+                          item.inline.type == 'year' ||
+                          item.inline.type == 'month' ||
+                          item.inline.type == 'date' ||
+                          item.inline.type == 'dates' ||
+                          item.inline.type == 'week' ||
+                          item.inline.type == 'datetime' ||
+                          item.inline.type == 'datetimerange' ||
+                          item.inline.type == 'daterange' ||
+                          item.inline.type == 'monthrange' ||
+                          item.inline.type == 'quarter' ||
+                          item.inline.type == 'halfyear'
+                      "
+                      v-bind="
+                        handleExclAttribute({
+                          data: item.inline,
+                          attrs: ['value']
+                        })
+                      "
+                      v-model="models[item.inline.name]"
+                      :plain="
+                        item.inline.plain || item.inline.name === undefined
+                      "
+                      :readonly="readonly ? readonly : item.inline.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item.inline, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item.inline, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item.inline, val);
+                        }
+                      "
+                    ></es-date-picker>
+                    <es-input
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item.inline,
+                          attrs: ['value', 'events']
+                        })
+                      "
+                      v-model="models[item.inline.name]"
+                      :plain="
+                        item.inline.plain || item.inline.name === undefined
+                      "
+                      :readonly="readonly ? readonly : item.inline.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item.inline, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item.inline, event);
+                        }
+                      "
+                      @input="
+                        val => {
+                          handleInput(item.inline, val);
+                        }
+                      "
+                      @clear="handleClear(item.inline)"
+                      @change="
+                        val => {
+                          handleChange(item.inline, val);
+                        }
+                      "
+                    ></es-input>
+                  </template>
+                </template>
+              </el-form-item>
+            </template>
+          </template>
+          <el-form-item
+            v-show="labelWidth"
+            v-if="inline && !readonly && showButton"
+          >
+            <el-button
+              v-for="(item, index) in buttons"
+              v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+              size="medium"
+              :key="index"
+              v-show="!item.hide"
+              @click="handleClick(item)"
+              >{{ item.label || item.text || item.name }}</el-button
+            >
+          </el-form-item>
+        </div>
+      </template>
+      <div
+        v-show="labelWidth"
+        v-if="!inline && !readonly && showButton"
+        class="es-form-button"
+      >
+        <el-button
+          v-for="(item, index) in buttons"
+          v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
+          size="medium"
+          :key="index"
+          v-show="!item.hide"
+          @click="handleClick(item)"
+          >{{ item.label || item.text || item.name }}</el-button
+        >
+      </div>
+    </slot>
+    <slot name="dialog"></slot>
+    <slot name="other"></slot>
+  </el-form>
+</template>
+<script>
+import { formContents } from 'eoss-ui/src/config/api.js';
+import util from 'eoss-ui/src/utils/util';
+import rules from 'eoss-ui/src/utils/rules.js';
+export default {
+  name: 'EsForm',
+  inheritAttrs: false,
+  provide() {
+    return {
+      esForm: this
+    };
+  },
+  inject: {
+    esDialog: {
+      default: ''
+    },
+    esTabs: {
+      default: ''
+    },
+    esPage: {
+      default: ''
+    }
+  },
+  props: {
+    model: {
+      type: [Object, String],
+      default: () => {
+        return {};
+      }
+    },
+    steps: Object,
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    value: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    action: [String, Object],
+    actionType: String,
+    formatSubmit: [Boolean, String],
+    method: {
+      type: String,
+      default: 'post'
+    },
+    modelMethod: {
+      type: String,
+      default: 'get'
+    },
+    format: {
+      type: Boolean,
+      default: true
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    labelPosition: String,
+    labelWidth: {
+      type: String,
+      default: '120px'
+    },
+    // 列数
+    span: Number,
+    readonly: Boolean,
+    // 渲染表单的内容
+    contents: [Array, String, Object],
+    // 显示提交按钮
+    submit: {
+      type: Boolean,
+      default: true
+    },
+    // 显示取消按钮
+    reset: {
+      type: Boolean,
+      default() {
+        return this.submit;
+      }
+    },
+    // 间隔
+    space: {
+      type: Boolean,
+      default: true
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    search: {
+      type: Boolean,
+      default: false
+    },
+    isReset: {
+      type: Boolean,
+      default: false
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    },
+    height: String,
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    table: {
+      type: Boolean,
+      default: false
+    },
+    thead: Array,
+    tableAttrs: {},
+    showButton: {
+      type: Boolean,
+      default: true
+    },
+    after: {
+      type: Boolean,
+      default: true
+    },
+    tableAfter: {
+      type: Boolean,
+      default: true
+    },
+    closeDialog: {
+      type: Boolean,
+      default: true
+    },
+    itemClass: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    parseData: Function,
+    formatTable: Object,
+    full: Boolean,
+    within: [String, Object],
+    display: Boolean,
+    submitLoading: {
+      type: Boolean,
+      default: true
+    },
+    //操作配置
+    handles: Object,
+    //业务id
+    businessId: String,
+    //表格样式表单的宽度
+    widths: Array,
+    parseValue: [Object, Function],
+    //是否自动生成id
+    autoId: [Boolean, String],
+    paramId: String
+  },
+  data() {
+    return {
+      stepContent: null,
+      stepActive: 0,
+      align: { left: 'start', center: 'center', right: 'end' },
+      forbid: false,
+      content: '',
+      button: null,
+      activeNames: '',
+      isCollapse: false,
+      loading: false,
+      values: {},
+      newHeight: null,
+      uuid: util.uuid(32),
+      dialog: false
+    };
+  },
+  computed: {
+    models: {
+      get() {
+        if (this.model && typeof this.model !== 'string') {
+          return this.model;
+        }
+        return this.values;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    _value() {
+      let data = {};
+      if (this.businessId !== undefined) {
+        data = { id: this.businessId };
+      } else if (typeof this.model !== 'string' && this.autoId) {
+        if (typeof this.autoId === 'boolean' && !this.model.id) {
+          data = { id: this.uuid };
+          this.$emit('update:businessId', this.uuid);
+        } else if (!this.model[this.autoId]) {
+          data[this.autoId] = this.uuid;
+          this.$emit('update:businessId', this.uuid);
+        }
+      }
+      return util.extend({}, data, this.value);
+    },
+    stepContents() {
+      if (this.stepContent) {
+        return this.stepContent;
+      }
+      if (
+        this.steps &&
+        Object.prototype.hasOwnProperty.call(this.steps, 'contents')
+      ) {
+        return this.steps.contents;
+      }
+      return null;
+    },
+    formContent() {
+      if (this.stepContents) {
+        return this.content[this.stepActive];
+      }
+      return this.content;
+    },
+    formHeight() {
+      return this.height ? this.height : this.newHeight;
+    },
+    width() {
+      return this.span > 0 ? 100 / this.span : null;
+    },
+    construction() {
+      if (Array.isArray(this.contents)) {
+        return this.contents;
+      }
+    },
+    buttons() {
+      let buttons = [];
+      if (this.stepContents) {
+        if (this.stepActive > 0 && this.stepActive < this.stepContents.length) {
+          buttons.push({
+            text: '上一步',
+            event: 'stepPrev'
+          });
+        }
+        if (this.stepActive < this.stepContents.length - 1) {
+          buttons.push({
+            type: 'primary',
+            text: '下一步',
+            event: 'stepNext'
+          });
+        } else if (this.showButton) {
+          if (this.button) {
+            buttons = buttons.concat(this.button);
+          }
+          if (this.submit) {
+            buttons.push({
+              type: 'primary',
+              text: '确定',
+              event: 'submit'
+            });
+          }
+          if (this.reset) {
+            buttons.push({
+              type: 'reset',
+              text: '取消',
+              event: 'cancel'
+            });
+          }
+        }
+      } else {
+        if (!this.showButton) {
+          return null;
+        }
+        if (this.button) {
+          return this.button;
+        }
+        if (this.search) {
+          buttons.push({
+            type: 'primary',
+            text: '搜索',
+            event: 'submit'
+          });
+          if (this.isReset) {
+            buttons.push({
+              type: 'reset',
+              text: '重置',
+              event: 'reset'
+            });
+          }
+        } else {
+          if (this.submit) {
+            buttons.push({
+              type: 'primary',
+              text: '确定',
+              event: 'submit'
+            });
+          }
+          if (this.reset) {
+            buttons.push({
+              type: 'reset',
+              text: '取消',
+              event: 'cancel'
+            });
+          }
+        }
+      }
+      return buttons;
+    }
+  },
+  watch: {
+    steps: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && Object.prototype.hasOwnProperty.call(val, 'active')) {
+          this.stepActive = val.active;
+        }
+      }
+    },
+    param: {
+      deep: true,
+      handler() {
+        if (this.model && typeof this.model === 'string') {
+          this.getValue();
+        }
+      }
+    },
+    construction: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.forbid = false;
+          if (val.length > 0) {
+            let contents = [];
+            let names = [];
+            val.forEach((item, index) => {
+              if (item.type === 'submit' || item.type === 'button') {
+                this.button = item.contents;
+              } else {
+                if (
+                  Object.prototype.hasOwnProperty.call(item, 'title') &&
+                  Object.prototype.hasOwnProperty.call(item, 'contents')
+                ) {
+                  this.isCollapse = true;
+                  if (this.accordion) {
+                    if (index === 0) {
+                      names = item.name || String(index);
+                    }
+                  } else {
+                    names.push(item.name || String(index));
+                  }
+                } else {
+                  this.isCollapse = false;
+                }
+                contents.push(item);
+              }
+            });
+            this.activeNames = names;
+            this.content = contents;
+            if (this.content.length === 1) {
+              if (
+                Object.prototype.hasOwnProperty.call(
+                  this.content[0],
+                  'title'
+                ) &&
+                Object.prototype.hasOwnProperty.call(
+                  this.content[0],
+                  'contents'
+                )
+              ) {
+                if (
+                  this.content[0].contents.length === 1 &&
+                  (this.content[0].contents[0].type === 'text' ||
+                    this.content[0].contents[0].type === 'textarea' ||
+                    this.content[0].contents[0].type === undefined)
+                ) {
+                  this.forbid = true;
+                }
+              } else {
+                if (
+                  this.content[0].type === 'text' ||
+                  this.content[0].type === 'textarea' ||
+                  this.content[0].type === undefined
+                ) {
+                  this.forbid = true;
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    model: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          if (typeof val === 'string') {
+            this.getValue();
+          }
+        }
+      }
+    },
+    values: {
+      deep: true,
+      handler(val) {
+        //this.$emit('input', val);
+        if (this.esTabs && val.id) {
+          this.esTabs.id = val.id;
+        }
+        if (this.esPage) {
+          this.esPage.handleChangeData(this.models);
+        }
+      }
+    },
+    display(val) {
+      if (val && !this.height) {
+        this.getHeight();
+      }
+    },
+    readonly() {
+      !this.height && this.getHeight();
+    }
+  },
+  created() {
+    this.dialog =
+      window.$wujie && window.$wujie.props
+        ? window.$wujie.props._dialog
+        : false;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      !this.height && this.getHeight();
+    });
+  },
+  methods: {
+    getHeight() {
+      if (
+        util.hasClass(this.$parent.$el, 'el-dialog__wrapper') ||
+        this.full ||
+        (this.$el.parentNode.children.length == 1 &&
+          util.getStyle(this.$el.parentNode, 'height'))
+      ) {
+        let pt =
+          parseInt(util.getStyle(this.$el.parentNode, 'padding-top'), 10) || 0;
+        let pb =
+          parseInt(util.getStyle(this.$el.parentNode, 'padding-bottom'), 10) ||
+          0;
+        let btn = this.readonly || !this.showButton ? 0 : 48;
+        this.newHeight =
+          this.$el.parentNode.offsetHeight - pt - pb - btn + 'px';
+      }
+    },
+    getContent() {
+      if (
+        typeof this.contents === 'string' ||
+        (util.isObject(this.contents) &&
+          Object.prototype.hasOwnProperty.call(this.contents, 'formId'))
+      ) {
+        this.loading = true;
+        let params =
+          typeof this.contents === 'string'
+            ? { formId: this.contents }
+            : this.contents;
+        util
+          .ajax({
+            url: formContents,
+            data: params,
+            params: params
+          })
+          .then(res => {
+            this.loading = false;
+            if (res.rCode === 0) {
+              let results = JSON.parse(JSON.stringify(res.results));
+              if (Array.isArray(results)) {
+                this.resolution(results);
+              } else {
+                this.resolution(results.contents || results.content || []);
+                let data = {};
+                if (this.businessId !== undefined) {
+                  data = { id: this.businessId };
+                } else if (this.autoId) {
+                  if (typeof this.autoId === 'boolean') {
+                    data = { id: this.uuid };
+                  } else {
+                    data[this.autoId] = this.uuid;
+                  }
+                }
+                this.values = util.extend(
+                  {},
+                  data,
+                  results.value || results.data || {}
+                );
+              }
+            }
+          })
+          .catch(err => {
+            this.loading = false;
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    resolution(res) {
+      this.forbid = false;
+      if (res.length > 0) {
+        let contents = [];
+        let names = [];
+        res.forEach((item, index) => {
+          if (item.type === 'submit' || item.type === 'button') {
+            this.$set(this, 'button', item.contents);
+          } else {
+            if (
+              Object.prototype.hasOwnProperty.call(item, 'title') &&
+              Object.prototype.hasOwnProperty.call(item, 'contents')
+            ) {
+              this.isCollapse = true;
+              if (this.accordion) {
+                if (index === 0) {
+                  names = item.name || String(index);
+                }
+              } else {
+                names.push(item.name || String(index));
+              }
+            } else {
+              this.isCollapse = false;
+            }
+            contents.push(util.extend({}, item));
+          }
+        });
+        this.activeNames = names;
+        this.content = contents;
+        if (
+          this.content.length === 1 &&
+          (this.content[0].type === 'text' ||
+            this.content[0].type === 'textarea' ||
+            this.content[0].type === undefined ||
+            (Object.prototype.hasOwnProperty.call(this.content[0], 'title') &&
+              Object.prototype.hasOwnProperty.call(
+                this.content[0],
+                'contents'
+              ) &&
+              this.content[0].contents.length === 1 &&
+              (this.content[0].contents[0].type === 'text' ||
+                this.content[0].contents[0].type === 'textarea' ||
+                this.content[0].contents[0].type === undefined)))
+        ) {
+          this.forbid = true;
+        }
+      }
+    },
+    getValue() {
+      if (typeof this.model === 'string') {
+        this.loading = true;
+        let param = this.paramId
+          ? { ...this.param, id: this.paramId }
+          : this.param;
+        util
+          .ajax({
+            method: this.modelMethod || this.method,
+            url: this.model,
+            data: param,
+            params: param
+          })
+          .then(res => {
+            this.loading = false;
+            if (res.rCode === 0) {
+              let value = res.results
+                ? this.parseData
+                  ? this.parseData(JSON.parse(JSON.stringify(res.results)))
+                  : JSON.parse(JSON.stringify(res.results))
+                : {};
+
+              let data = {};
+              if (this.autoId) {
+                if (typeof this.autoId === 'boolean') {
+                  if (value.id) {
+                    this.$emit('update:businessId', value.id);
+                  } else {
+                    if (this.businessId !== undefined) {
+                      data = { id: this.businessId };
+                    } else {
+                      data = { id: this.uuid };
+                    }
+                    this.$emit('update:businessId', data.id);
+                  }
+                } else {
+                  if (value[this.autoId]) {
+                    this.$emit('update:businessId', value[this.autoId]);
+                  } else {
+                    if (this.businessId !== undefined) {
+                      data[this.autoId] = this.businessId;
+                    } else {
+                      data[this.autoId] = this.uuid;
+                    }
+                    this.$emit('update:businessId', data[this.autoId]);
+                  }
+                }
+              }
+              this.values = util.extend({}, data, value);
+              this.$emit('valueSuccess', this.values);
+              this.$emit('result', this.values);
+            }
+          })
+          .catch(err => {
+            this.loading = false;
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    },
+    style(item, res) {
+      const { col, row } = item;
+      if (this.inline) {
+        if (Object.prototype.hasOwnProperty.call(item, 'width')) {
+          return { width: item.width };
+        }
+        return '';
+      }
+      if (this.width != null) {
+        if (col && col > 0 && col < this.span && this.width < 100) {
+          return {
+            width: row
+              ? '100%'
+              : Math.floor(this.width * col * 10000) / 10000 + '%',
+            float: 'left',
+            display: 'inline-block',
+            clear: 'both'
+          };
+        } else {
+          return { width: '100%', float: 'left', display: 'inline-block' };
+        }
+      } else {
+        if (col > 0) {
+          return {
+            width: row
+              ? '100%'
+              : Math.floor((100 / 12) * col * 10000) / 10000 + '%',
+            float: 'left',
+            display: 'inline-block'
+          };
+        } else {
+          return { width: '100%', float: 'left', display: 'inline-block' };
+        }
+      }
+    },
+    handleClick(res, index) {
+      if (res.event && typeof res.event === 'function') {
+        if (res.validate) {
+          this.$refs.esForm.validate(async (valid, fields, triggers) => {
+            if (valid) {
+              res.event(res, this.models);
+            } else {
+              this.setScroll(valid, triggers, this.$refs.scrollbar);
+            }
+          });
+        } else {
+          res.event(res, this.models);
+        }
+      } else if (res.type === 'step') {
+        if (this.stepActive < index) {
+          this.$refs.esForm.validate((valid, fields, triggers) => {
+            if (valid) {
+              this.stepActive = index;
+              this.$emit('stepChange', this.stepActive);
+            } else {
+              this.setScroll(valid, triggers, this.$refs.scrollbar);
+            }
+          });
+        } else {
+          this.stepActive = index;
+          this.$emit('stepChange', this.stepActive);
+        }
+      } else if (
+        res.event === 'submit' ||
+        res.event === 'confirm' ||
+        res.type === 'submit'
+      ) {
+        if (this.action) {
+          this.submitData(res);
+        } else {
+          this.$refs.esForm.validate(async (valid, fields, triggers) => {
+            if (valid) {
+              this.$emit('submit', this.models, res);
+            } else {
+              this.setScroll(valid, triggers, this.$refs.scrollbar);
+            }
+          });
+        }
+      } else if (
+        res.event === 'reset' ||
+        res.event === 'cancel' ||
+        res.type === 'reset'
+      ) {
+        this.resetFields();
+        if (this.closeDialog && this.esDialog) {
+          this.esDialog.handleClose(res.reload || false);
+        }
+        this.$emit('reset', res);
+      } else if (res.event === 'stepPrev') {
+        this.stepActive -= 1;
+        this.$emit('stepChange', this.stepActive);
+        this.$emit(
+          'stepPrev',
+          res,
+          this.models,
+          this.getNewValue(this.models, res)
+        );
+      } else if (res.event === 'stepNext') {
+        this.$refs.esForm.validate((valid, fields, triggers) => {
+          if (valid) {
+            this.stepActive += 1;
+            this.$emit('stepChange', this.stepActive);
+            this.$emit(
+              'stepNext',
+              res,
+              this.models,
+              this.getNewValue(this.models, res)
+            );
+          } else {
+            this.setScroll(valid, triggers, this.$refs.scrollbar);
+          }
+        });
+      } else if (res.verify === false) {
+        this.$emit(
+          'click',
+          res,
+          this.models,
+          this.getNewValue(this.models, res)
+        );
+      } else {
+        this.$emit(
+          'click',
+          res,
+          this.models,
+          this.getNewValue(this.models, res)
+        );
+      }
+    },
+    IdCardToInfo(id, res, type) {
+      let reg = new RegExp('(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)');
+      // 校验身份证：
+      if (reg.test(id)) {
+        let birthday =
+          id.substring(6, 10) +
+          '-' +
+          id.substring(10, 12) +
+          '-' +
+          id.substring(12, 14);
+        let sex = parseInt(id.substr(16, 2)) % 2 === 1 ? '男' : '女';
+        let ageDate = new Date();
+        let month = ageDate.getMonth() + 1;
+        let day = ageDate.getDate();
+        let age = ageDate.getFullYear() - id.substring(6, 10) - 1;
+        if (
+          id.substring(10, 12) < month ||
+          (id.substring(10, 12) === month && id.substring(12, 14) <= day)
+        ) {
+          age++;
+        }
+        if (age <= 0) {
+          age = 1;
+        }
+        if (type === 1) {
+          //获取出生日期
+          return birthday;
+        } else if (type === 2) {
+          //获取性别
+          return sex;
+        } else if (type === 3) {
+          //获取年龄
+          return age;
+        } else {
+          return { birthday: birthday, sex: sex, age: age };
+        }
+      } else {
+        this.$refs.esForm.validateField(res.name);
+        console.error('身份证号码错误');
+        return null;
+      }
+    },
+    handleDataChange(res, data) {
+      this.$emit('dataChange', res, data);
+    },
+    handleCollapse() {},
+    handleChange(a, b, c) {
+      if (Object.prototype.hasOwnProperty.call(a, 'idCard')) {
+        let obj = this.IdCardToInfo(b, a);
+        if (obj) {
+          if (Array.isArray(a.idCard)) {
+            a.idCard.forEach(item => {
+              if (typeof item === 'object') {
+                for (let i in item) {
+                  if (typeof item[i] === 'string') {
+                    this.$set(this.models, i, obj[item[i]]);
+                  } else {
+                    this.$set(this.models, i, item[i][obj.sex]);
+                  }
+                }
+              } else {
+                this.$set(this.models, item, obj[item]);
+              }
+            });
+          } else {
+            this.$set(this.models, 'age', obj.age);
+            this.$set(this.models, 'sex', obj.sex);
+          }
+        }
+      }
+      if (a.portrait) {
+        let adjunctId = b[0].response.adjunctId;
+        this.$set(
+          this.models,
+          a.name,
+          a.previewUrl ? a.previewUrl + adjunctId : adjunctId
+        );
+      }
+      if (
+        Object.prototype.hasOwnProperty.call(a, 'setValues') &&
+        typeof b === 'object'
+      ) {
+        if (Array.isArray(a.setValues)) {
+          a.setValues.forEach(item => {
+            this.$set(this.models, item, b[item]);
+          });
+        } else {
+          for (let i in a.setValues) {
+            let item = a.setValues[i];
+            this.$set(this.models, i, b[item]);
+          }
+        }
+      }
+      if (a.events && a.events.change) {
+        a.events.change(a.name, b, c, this.models, a);
+      } else {
+        this.$emit('change', a.name, b, c, this.models, a);
+      }
+    },
+    handleInput(a, b, c) {
+      this.$emit('input', a.name, b, c, this.models);
+    },
+    handleFocus(a, b, c) {
+      if (a.events && a.events.focus) {
+        a.events.focus(a.name, b, c, this.models);
+      } else {
+        this.$emit('focus', a.name, b, c, this.models);
+      }
+    },
+    handleBlur(a, b, c) {
+      if (a.events && a.events.blur) {
+        a.events.blur(a.name, b, c, this.models);
+      } else {
+        this.$emit('blur', a.name, b, c, this.models);
+      }
+    },
+    handleClear(a, b, c) {
+      if (a.events && a.events.clear) {
+        a.events.clear(a.name, b, c, this.models);
+      } else {
+        this.$emit('clear', a.name, b, c, this.models);
+      }
+    },
+    validate(callback) {
+      let promise;
+      if (typeof callback !== 'function' && window.Promise) {
+        promise = new window.Promise((resolve, reject) => {
+          callback = function(valid) {
+            valid ? resolve(valid) : reject(valid);
+          };
+        });
+      }
+      this.$refs.esForm.validate((val, fields, triggers) => {
+        this.setScroll(val, triggers, this.$refs.scrollbar);
+        callback(val, fields, triggers);
+      });
+      if (promise) {
+        return promise;
+      }
+    },
+    setScroll(val, triggers, scrollbar) {
+      if (!val && scrollbar && scrollbar.wrap) {
+        let trigger = triggers[0];
+        let top = trigger.offsetTop;
+        let left = trigger.offsetLeft;
+        scrollbar.wrap.scrollTop = top - 10 < 0 ? 0 : top;
+        scrollbar.wrap.scrollLeft = left - 10 < 0 ? 0 : left;
+      }
+    },
+    validateField(props, callback) {
+      return this.$refs.esForm.validateField(props, callback);
+    },
+    resetFields() {
+      for (let i in this.models) {
+        this.$set(this.models, i, '');
+      }
+      this.$nextTick(() => {
+        this.clearValidate();
+      });
+      //this.$refs.esForm.resetFields();
+    },
+    clearValidate() {
+      this.$refs.esForm && this.$refs.esForm.clearValidate();
+    },
+    submitData(handle, close = true, type) {
+      if (!handle) {
+        handle = this.handles || {};
+      }
+      return new Promise((resolve, reject) => {
+        this.$refs.esForm.validate(async (valid, fields, triggers) => {
+          if (valid) {
+            let models = this.getNewValue(
+              util.extend({}, this._value, this.models),
+              handle,
+              type
+            );
+            let param = this.param;
+            if (handle.param) {
+              param = util.extend({}, this.param, handle.param);
+            }
+            let loading;
+            if (this.submitLoading) {
+              loading = util.loading(
+                this.$loading,
+                handle.loadingText ? `${handle.loadingText}...` : '提交中...'
+              );
+            }
+            await util
+              .ajax({
+                url:
+                  typeof this.action === 'object'
+                    ? this.action[this.actionType]
+                    : this.action,
+                format: handle.format || this.format,
+                data: { ...models, ...param },
+                method: this.method,
+                loading: loading
+              })
+              .then(res => {
+                loading && loading.close();
+                if (res.rCode === 0) {
+                  this.$message.success(res.msg || res.message || '成功！');
+                  this.$emit('success', res, models);
+                  this.models = {};
+                  if (this.esTabs) {
+                    this.esTabs.handleTabState(true);
+                  }
+                  if (this.closeDialog) {
+                    if (
+                      window.$wujie &&
+                      window.$wujie.props &&
+                      window.$wujie.props._dialog
+                    ) {
+                      window.$wujie.bus.$emit(
+                        'dialogClose',
+                        handle.reload,
+                        window.$wujie.props
+                      );
+                    }
+                    if (this.esDialog && close) {
+                      this.esDialog.handleClose(handle.reload);
+                    }
+                  }
+                  resolve();
+                } else {
+                  this.$message.error(
+                    res.msg || res.message || '系统错误，请联系管理员！'
+                  );
+                  this.$emit('error', res);
+                }
+              })
+              .catch(err => {
+                if (err.message && err.message !== 'canceled') {
+                  this.$message.error(err.message);
+                }
+                reject(err);
+              });
+          } else {
+            this.setScroll(valid, triggers, this.$refs.scrollbar);
+            console.error(valid);
+            return false;
+          }
+        });
+      });
+    },
+    getVal(value, keys) {
+      if (typeof keys === 'string') {
+        if (Array.isArray(value)) {
+          let val = value.map(item => {
+            return item[keys];
+          });
+          return this.format ? val.join(',') : val;
+        }
+        return this.format && Array.isArray(value[keys])
+          ? value[keys].join(',')
+          : value[keys];
+      } else if (!Array.isArray(keys)) {
+        for (let i in keys) {
+          if (typeof keys[i] === 'string') {
+            if (Array.isArray(value[i])) {
+              let val = value[i].map(item => {
+                return item[keys[i]];
+              });
+              return this.format ? val.join(',') : val;
+            }
+            return this.format && Array.isArray(value[i][keys[i]])
+              ? value[i][keys[i]].join(',')
+              : value[i][keys[i]];
+          } else {
+            return this.getVal(value[i], keys[i]);
+          }
+        }
+      }
+      return null;
+    },
+    getNewValue(value, handle, type) {
+      let models = JSON.parse(JSON.stringify(value));
+      if (this.parseValue) {
+        if (typeof this.parseValue === 'function') {
+          models = this.parseValue(value, type);
+        } else {
+          for (let i in this.parseValue) {
+            models[i] = this.getVal(value, this.parseValue[i]);
+          }
+        }
+      }
+      if (handle && handle.table) {
+        //table：取数据表中id或者指定的值作为提交值
+        if (util.isObject(handle.table)) {
+          let tval = models[handle.table.valueKey];
+          for (let i in handle.table) {
+            if (i !== 'valueKey') {
+              models[i] = tval.map(item => {
+                return item[handle.table[i]];
+              });
+              if (handle.join) {
+                models[i] = models[i].join(',');
+              }
+            }
+          }
+        } else {
+          let tval = models[handle.table];
+          let ids = tval.map(item => {
+            return item.id;
+          });
+          //join：提交值是否拼接
+          models[handle.table] = handle.join ? ids.join(',') : ids;
+        }
+      }
+
+      if (this.within) {
+        //within:把提交数据装到指定属性中
+        let newData = {};
+        if (typeof this.within === 'string') {
+          newData[this.within] = obj;
+        } else {
+          for (let i in this.within) {
+            let names = this.within[i];
+            let itemData;
+            if (Array.isArray(names)) {
+              itemData = names.map(item => {
+                let val = obj[item];
+                delete obj[item];
+                return val;
+              });
+            }
+            newData[i] = itemData;
+          }
+        }
+        models = { ...newData, ...obj };
+      }
+      if (this.formatSubmit) {
+        //formatSubmit:提交数据装到masterData或者指定属性中
+        let masterData = {};
+        let obj = JSON.parse(JSON.stringify(models));
+        if (typeof this.formatSubmit === 'string') {
+          masterData[this.formatSubmit] = obj;
+        } else {
+          masterData['masterData'] = obj;
+        }
+        models = masterData;
+      }
+      return models;
+    },
+    getRules(res) {
+      if (res.rules && !res.hide) {
+        if (Array.isArray(res.rules)) {
+          return res.rules.map(item => {
+            if (rules[item.type]) {
+              return {
+                pattern: rules[item.type]['pattern'],
+                message: item.message
+                  ? item.message
+                  : rules[item.type]['message'],
+                trigger: item.trigger
+                  ? item.trigger
+                  : res.fetchSuggestions ||
+                    res.url ||
+                    (res.data && res.data.length)
+                  ? 'change'
+                  : 'blur'
+              };
+            }
+            return item;
+          });
+        }
+        if (rules[res.rules.type]) {
+          return {
+            pattern: rules[res.rules.type]['pattern'],
+            message: res.rules.message
+              ? res.rules.message
+              : rules[res.rules.type]['message'],
+            trigger: res.rules.trigger
+              ? res.rules.trigger
+              : res.fetchSuggestions || res.url || (res.data && res.data.length)
+              ? 'change'
+              : 'blur'
+          };
+        }
+        return res.rules;
+      }
+      return undefined;
+    },
+    handleExclAttribute({ data, attrs }) {
+      return util.exclAttribute({
+        data: data,
+        attrs: attrs
+      });
+    }
+  }
+};
+</script>