eoss-ui 0.5.83 → 0.5.85

package/packages/form/src/main.vue

@@ -25,6 +25,12 @@
     v-on="$listeners"
   >
     <input type="text" style="display: none" v-if="forbid" />
+    <input
+      type="password"
+      class="hidden-input"
+      autocomplete="new-password"
+      v-if="!autocomplete"
+    />
     <es-steps
       v-if="steps"
       class="es-steps-group"
@@ -36,2059 +42,35 @@
       @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"
-          >
-            <template v-for="(items, indexs) in content">
-              <el-collapse-item
-                class="es-collapse-item"
-                v-if="!items.hide"
-                v-show="items.show !== false"
-                v-bind="items.config"
-                :class="{
-                  'es-collapse-readonly': accordion ? false : !collapse,
-                  'es-collapse-caption': items.caption
-                }"
-                :show-title="items.showTitle"
-                :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
-                          v-if="item.label"
-                          v-bind="getLabel(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>
-                        <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, items);
-                            }
-                          "
-                        ></es-switch>
-                      </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"
-                  :after="after"
-                  :thead="thead"
-                  :readonly="readonly"
-                  :contents="items.contents"
-                  :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 items.contents">
-                    <div
-                      v-if="item.type === 'caption' && !item.hide"
-                      class="es-form-item-caption"
-                      :key="item.name"
-                    >
-                      {{ item.text }}
-                    </div>
-                    <el-form-item
-                      v-else-if="!item.hide && !hides.includes(item.name)"
-                      ref="es-form-pane"
-                      :key="item.name"
-                      :label-width="
-                        item.showLabel !== false &&
-                        item.label &&
-                        !item.labelHide &&
-                        showLabel
-                          ? labelWidth
-                          : '0'
-                      "
-                      :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.label &&
-                          !item.labelHide &&
-                          showLabel
-                        "
-                        v-bind="getLabel(item.label)"
-                      ></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"
-                        v-on="
-                          handleExclAttribute({
-                            data: item.events,
-                            attrs: 'change'
-                          })
-                        "
-                        @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"
-                        v-on="
-                          handleExclAttribute({
-                            data: item.events,
-                            attrs: 'change'
-                          })
-                        "
-                        @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"
-                        v-on="
-                          handleExclAttribute({
-                            data: item.events,
-                            attrs: 'change'
-                          })
-                        "
-                        @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-flow-list
-                        v-else-if="
-                          (item.type === 'flow-list' ||
-                            item.type === 'flowList') &&
-                          _businessId
-                        "
-                        :businessId="_businessId"
-                        v-bind="
-                          handleExclAttribute({
-                            data: item,
-                            attrs: ['events', 'visible', 'type']
-                          })
-                        "
-                        v-on="item.events"
-                      ></es-flow-list>
-                      <es-icons
-                        v-else-if="item.type === 'icon'"
-                        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-icons>
-                      <component
-                        v-else-if="item.type === 'component'"
-                        v-model="models[item.name]"
-                        v-bind="
-                          handleExclAttribute({
-                            data: item,
-                            attrs: ['value', 'type']
-                          })
-                        "
-                        v-on="item.events"
-                      ></component>
-                      <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)">
-                          <template v-for="(inline, k) in item.inline">
-                            <es-button
-                              v-if="inline.type == 'button' && !inline.hide"
-                              class="es-button-inline"
-                              :disabled="disabled || inline.disabled"
-                              v-bind="
-                                handleExclAttribute({
-                                  data: inline,
-                                  attrs: ['disabled', 'type']
-                                })
-                              "
-                              @click="handleClick(inline)"
-                            ></es-button>
-                            <div
-                              class="es-form-inline es-form-item-inline"
-                              :key="k"
-                              v-else-if="!inline.hide"
-                            >
-                              <div
-                                class="es-range"
-                                v-if="inline.range !== false"
-                              >
-                                —
-                              </div>
-                              <el-form-item
-                                label-width="0"
-                                :class="{ 'fixed-width': inline.width }"
-                                :prop="inline.name"
-                                :rules="getRules(inline)"
-                              >
-                                <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-icons
-                                  v-else-if="inline.type === 'icon'"
-                                  v-bind="
-                                    handleExclAttribute({
-                                      data: inline,
-                                      attrs: ['value']
-                                    })
-                                  "
-                                  v-model="models[inline.name]"
-                                  :plain="
-                                    inline.plain || inline.name === undefined
-                                  "
-                                  :readonly="
-                                    readonly ? readonly : inline.readonly
-                                  "
-                                  @change="
-                                    (val) => {
-                                      handleChange(inline, val);
-                                    }
-                                  "
-                                ></es-icons>
-                                <component
-                                  v-else-if="inline.type === 'component'"
-                                  v-model="models[inline.name]"
-                                  v-bind="
-                                    handleExclAttribute({
-                                      data: inline,
-                                      attrs: ['value', 'type']
-                                    })
-                                  "
-                                  v-on="inline.events"
-                                ></component>
-                                <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>
-                              </el-form-item>
-                            </div>
-                          </template>
-                        </template>
-                        <template v-else-if="!item.inline.hide">
-                          <div
-                            class="es-range"
-                            v-if="item.inline.range !== false"
-                          >
-                            —
-                          </div>
-                          <el-form-item
-                            label-width="0"
-                            :class="{ 'fixed-width': item.inline.width }"
-                            :prop="item.inline.name"
-                            :rules="getRules(item.inline)"
-                          >
-                            <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-icons
-                              v-else-if="item.inline.type === 'icon'"
-                              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
-                              "
-                              @change="
-                                (val) => {
-                                  handleChange(item.inline, val);
-                                }
-                              "
-                            ></es-icons>
-                            <component
-                              v-else-if="inline.type === 'component'"
-                              v-model="models[inline.name]"
-                              v-bind="
-                                handleExclAttribute({
-                                  data: inline,
-                                  attrs: ['value', 'type']
-                                })
-                              "
-                              v-on="inline.events"
-                            ></component>
-                            <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>
-                          </el-form-item>
-                        </template>
-                      </template>
-                    </el-form-item>
-                  </template>
-                </template>
-              </el-collapse-item>
-            </template>
-          </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' && !item.hide"
-                  class="es-form-item-caption"
-                  :key="item.name"
-                >
-                  {{ item.text }}
-                </div>
-                <el-form-item
-                  v-else-if="!item.hide && !hides.includes(item.name)"
-                  ref="es-form-pane"
-                  :key="item.name"
-                  :label-width="
-                    item.showLabel !== false &&
-                    item.label &&
-                    !item.labelHide &&
-                    showLabel
-                      ? labelWidth
-                      : '0'
-                  "
-                  :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.label &&
-                      !item.labelHide &&
-                      showLabel
-                    "
-                    v-bind="getLabel(item.label)"
-                  ></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"
-                    v-on="
-                      handleExclAttribute({
-                        data: item.events,
-                        attrs: 'change'
-                      })
-                    "
-                    @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"
-                    v-on="
-                      handleExclAttribute({
-                        data: item.events,
-                        attrs: 'change'
-                      })
-                    "
-                    @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-flow-list
-                    v-else-if="
-                      (item.type === 'flow-list' || item.type === 'flowList') &&
-                      _businessId
-                    "
-                    :businessId="_businessId"
-                    v-bind="
-                      handleExclAttribute({
-                        data: item,
-                        attrs: ['events', 'visible', 'type']
-                      })
-                    "
-                    v-on="item.events"
-                  ></es-flow-list>
-                  <es-icons
-                    v-else-if="item.type === 'icon'"
-                    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-icons>
-                  <component
-                    v-else-if="item.type === 'component'"
-                    v-model="models[item.name]"
-                    v-bind="
-                      handleExclAttribute({
-                        data: item,
-                        attrs: ['value', 'type']
-                      })
-                    "
-                    v-on="item.events"
-                  ></component>
-                  <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)">
-                      <template v-for="(inline, k) in item.inline">
-                        <es-button
-                          v-if="inline.type == 'button' && !inline.hide"
-                          class="es-button-inline"
-                          :disabled="disabled || inline.disabled"
-                          v-bind="
-                            handleExclAttribute({
-                              data: inline,
-                              attrs: ['disabled', 'type']
-                            })
-                          "
-                          @click="handleClick(inline)"
-                        ></es-button>
-                        <div
-                          class="es-form-inline es-form-item-inline"
-                          :key="k"
-                          v-else-if="!inline.hide"
-                        >
-                          <div class="es-range" v-if="inline.range !== false">
-                            —
-                          </div>
-                          <el-form-item
-                            label-width="0"
-                            :class="{ 'fixed-width': inline.width }"
-                            :prop="inline.name"
-                            :rules="getRules(inline)"
-                          >
-                            <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-icons
-                              v-else-if="inline.type === 'icon'"
-                              v-bind="
-                                handleExclAttribute({
-                                  data: inline,
-                                  attrs: ['value']
-                                })
-                              "
-                              v-model="models[inline.name]"
-                              :plain="inline.plain || inline.name === undefined"
-                              :readonly="readonly ? readonly : inline.readonly"
-                              @change="
-                                (val) => {
-                                  handleChange(inline, val);
-                                }
-                              "
-                            ></es-icons>
-                            <component
-                              v-else-if="inline.type === 'component'"
-                              v-model="models[inline.name]"
-                              v-bind="
-                                handleExclAttribute({
-                                  data: inline,
-                                  attrs: ['value', 'type']
-                                })
-                              "
-                              v-on="inline.events"
-                            ></component>
-                            <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>
-                          </el-form-item>
-                        </div>
-                      </template>
-                    </template>
-                    <template v-else-if="!item.inline.hide">
-                      <div class="es-range" v-if="item.inline.range !== false">
-                        —
-                      </div>
-                      <el-form-item
-                        label-width="0"
-                        :class="{ 'fixed-width': item.inline.width }"
-                        :prop="item.inline.name"
-                        :rules="getRules(item.inline)"
-                      >
-                        <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-icons
-                          v-else-if="item.inline.type === 'icon'"
-                          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"
-                          @change="
-                            (val) => {
-                              handleChange(item.inline, val);
-                            }
-                          "
-                        ></es-icons>
-                        <component
-                          v-else-if="item.inline.type === 'component'"
-                          v-model="models[item.inline.name]"
-                          v-bind="
-                            handleExclAttribute({
-                              data: item.inline,
-                              attrs: ['value', 'type']
-                            })
-                          "
-                          v-on="item.inline.events"
-                        ></component>
-                        <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>
-                      </el-form-item>
-                    </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
+        v-if="isCollapse"
+        v-model="activeNames"
+        class="es-collapse"
+        :accordion="accordion"
+        @change="handleCollapse"
+      >
+        <el-scrollbar
+          class="es-scrollbar"
+          :style="{ height: formHeight }"
+          ref="scrollbar"
         >
-          <template v-for="(items, indexs) in formContent">
+          <template v-for="(items, indexs) in content">
             <el-collapse-item
               class="es-collapse-item"
               v-if="!items.hide"
               v-show="items.show !== false"
-              :class="{ 'es-collapse-readonly': accordion ? false : !collapse }"
+              v-bind="items.config"
+              :class="{
+                'es-collapse-readonly': accordion ? false : !collapse,
+                'es-collapse-caption': items.caption
+              }"
+              :show-title="items.showTitle"
               :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>
+              <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>
@@ -2115,7 +97,10 @@
                       <es-radio-group
                         v-else-if="item.type == 'radio'"
                         v-bind="
-                          handleExclAttribute({ data: item, attrs: ['value'] })
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
                         "
                         v-model="models[item.name]"
                         size="medium"
@@ -2130,7 +115,10 @@
                       <es-checkbox-group
                         v-else-if="item.type == 'checkbox'"
                         v-bind="
-                          handleExclAttribute({ data: item, attrs: ['value'] })
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
                         "
                         v-model="models[item.name]"
                         size="medium"
@@ -2145,7 +133,10 @@
                       <es-select
                         v-else-if="item.type == 'select'"
                         v-bind="
-                          handleExclAttribute({ data: item, attrs: ['value'] })
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
                         "
                         v-model="models[item.name]"
                         size="medium"
@@ -2160,7 +151,10 @@
                       <es-switch
                         v-else-if="item.type == 'switch'"
                         v-bind="
-                          handleExclAttribute({ data: item, attrs: ['value'] })
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
                         "
                         v-model="models[item.name]"
                         :plain="item.plain || item.name === undefined"
@@ -2174,6 +168,7 @@
                     </div>
                   </template>
                 </template>
+                <template v-else>{{ items.title }}</template>
               </div>
               <es-table-form
                 v-if="table || items.table"
@@ -2182,11 +177,12 @@
                 :span="items.span || span"
                 :tableAfter="tableAfter"
                 v-bind="items"
+                :after="after"
                 :thead="thead"
-                :model.sync="models"
                 :readonly="readonly"
                 :contents="items.contents"
                 :widths="widths"
+                :model.sync="models"
                 @click="handleClick"
                 @change="handleChange"
                 @dataChange="handleDataChange"
@@ -2220,10 +216,6 @@
                     :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',
@@ -2250,7 +242,7 @@
                             ? align[item.label.align]
                             : labelPosition
                             ? labelPosition == 'top'
-                              ? 'left'
+                              ? 'start'
                               : align[labelPosition]
                             : 'end'),
                         !Array.isArray(item.labelClass) ? item.labelClass : ''
@@ -2370,6 +362,26 @@
                       "
                     >
                     </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"
+                      v-on="
+                        handleExclAttribute({
+                          data: item.events,
+                          attrs: 'change'
+                        })
+                      "
+                      @change="
+                        (val) => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-selector>
                     <es-select-ganged
                       v-else-if="
                         item.type == 'ganged' ||
@@ -2450,8 +462,8 @@
                         })
                       "
                       :ownId="item.ownId || models.id"
-                      btn-size="medium"
                       v-model="models[item.name]"
+                      btn-size="medium"
                       :readonly="readonly ? readonly : item.readonly"
                       :rules="item.rules"
                       v-on="
@@ -2467,11 +479,11 @@
                       "
                     ></es-upload>
                     <es-selector
-                      v-else-if="item.type == '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"
                       v-on="
@@ -2492,7 +504,10 @@
                         :data="models[item.name]"
                         :full="item.height != undefined || item.height != null"
                         v-bind="
-                          handleExclAttribute({ data: item, attrs: ['value'] })
+                          handleExclAttribute({
+                            data: item,
+                            attrs: ['value']
+                          })
                         "
                         :readonly="readonly ? readonly : item.readonly"
                         @blur="
@@ -2565,10 +580,7 @@
                     <es-icons
                       v-else-if="item.type === 'icon'"
                       v-bind="
-                        handleExclAttribute({
-                          data: item,
-                          attrs: ['value']
-                        })
+                        handleExclAttribute({ data: item, attrs: ['value'] })
                       "
                       v-model="models[item.name]"
                       :plain="item.plain || item.name === undefined"
@@ -3039,6 +1051,25 @@
                               }
                             "
                           ></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-icons
                             v-else-if="item.inline.type === 'icon'"
                             v-bind="
@@ -3062,15 +1093,15 @@
                             "
                           ></es-icons>
                           <component
-                            v-else-if="item.inline.type === 'component'"
-                            v-model="models[item.inline.name]"
+                            v-else-if="inline.type === 'component'"
+                            v-model="models[inline.name]"
                             v-bind="
                               handleExclAttribute({
-                                data: item.inline,
+                                data: inline,
                                 attrs: ['value', 'type']
                               })
                             "
-                            v-on="item.inline.events"
+                            v-on="inline.events"
                           ></component>
                           <es-input
                             v-else
@@ -3103,11 +1134,7 @@
                                 handleInput(item.inline, val);
                               }
                             "
-                            @clear="
-                              () => {
-                                handleClear(item);
-                              }
-                            "
+                            @clear="handleClear(item.inline)"
                             @change="
                               (val) => {
                                 handleChange(item.inline, val);
@@ -3122,8 +1149,14 @@
               </template>
             </el-collapse-item>
           </template>
-        </el-collapse>
-        <div class="es-form-content es-form-padding" v-else>
+        </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"
@@ -3396,7 +1429,7 @@
                 <es-selector
                   v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
                   v-model="models[item.name]"
-                  v-else-if="item.type == 'selector'"
+                  v-else-if="item.type === 'selector'"
                   :readonly="readonly ? readonly : item.readonly"
                   :plain="item.plain || item.name === undefined"
                   v-on="
@@ -3522,24 +1555,20 @@
                   :readonly="readonly ? readonly : item.readonly"
                   @blur="
                     (event) => {
-                      handleBlur(item, event);
+                      handleBlur(item.name, event);
                     }
                   "
                   @focus="
                     (event) => {
-                      handleFocus(item, event);
+                      handleFocus(item.name, event);
                     }
                   "
                   @input="
                     (val) => {
-                      handleInput(item, val);
-                    }
-                  "
-                  @clear="
-                    () => {
-                      handleClear(item);
+                      handleInput(item.name, val);
                     }
                   "
+                  @clear="handleClear(item.name)"
                   @change="
                     (val) => {
                       handleChange(item, val);
@@ -3550,11 +1579,7 @@
                   <template v-if="Array.isArray(item.inline)">
                     <template v-for="(inline, k) in item.inline">
                       <es-button
-                        v-if="
-                          inline.type == 'button' &&
-                          !inline.readonly &&
-                          !readonly
-                        "
+                        v-if="inline.type == 'button' && !inline.hide"
                         class="es-button-inline"
                         :disabled="disabled || inline.disabled"
                         v-bind="
@@ -3573,16 +1598,6 @@
                         <div class="es-range" v-if="inline.range !== false">
                           —
                         </div>
-                        <es-button
-                          v-if="inline.type == 'button'"
-                          v-bind="
-                            handleExclAttribute({
-                              data: inline,
-                              attrs: ['text']
-                            })
-                          "
-                          >{{ inline.text }}</es-button
-                        >
                         <el-form-item
                           label-width="0"
                           :class="{ 'fixed-width': inline.width }"
@@ -3971,7 +1986,7 @@
                         v-bind="
                           handleExclAttribute({
                             data: item.inline,
-                            attrs: ['value', 'events']
+                            attrs: ['value']
                           })
                         "
                         v-model="models[item.inline.name]"
@@ -4007,10 +2022,7 @@
               </el-form-item>
             </template>
           </template>
-          <el-form-item
-            v-show="labelWidth"
-            v-if="inline && !readonly && showButton"
-          >
+          <el-form-item v-show="labelWidth" v-if="inline">
             <el-button
               v-for="(item, index) in buttons"
               v-bind="handleExclAttribute({ data: item, attrs: ['value'] })"
@@ -4021,8 +2033,8 @@
               >{{ item.label || item.text || item.name }}</el-button
             >
           </el-form-item>
-        </div>
-      </template>
+        </el-scrollbar>
+      </div>
       <div
         v-show="labelWidth"
         v-if="!inline && !readonly && showButton"
@@ -4048,6 +2060,7 @@ import { formContents } from 'eoss-ui/src/config/api.js';
 import { debounce } from 'throttle-debounce';
 import util from 'eoss-ui/src/utils/util';
 import rules from 'eoss-ui/src/utils/rules.js';
+const pageView = util.getParams('pageView');
 export default {
   name: 'EsForm',
   inheritAttrs: false,
@@ -4071,6 +2084,18 @@ export default {
     }
   },
   props: {
+    viewCode: {
+      type: String,
+      default: pageView
+    },
+    contentsUrl: {
+      type: String,
+      default: formContents
+    },
+    autocomplete: {
+      type: Boolean,
+      default: true
+    },
     hides: {
       type: Array,
       default() {
@@ -4316,6 +2341,7 @@ export default {
       return this.content;
     },
     formHeight() {
+      console.log(this.height ? this.height : this.newHeight);
       return this.height ? this.height : this.newHeight;
     },
     width() {