eoss-ui 0.3.97

package/packages/form/src/table.vue

@@ -0,0 +1,1196 @@
+<template>
+  <div>
+    <table
+      class="es-table-form"
+      border="1"
+      cellspacing="0"
+      cellpadding="0"
+      v-if="content.length"
+    >
+      <colgroup>
+        <template v-for="(item, index) in cols">
+          <col :width="labelWidth" :key="'label' + index" />
+          <col :width="item" :key="index" />
+        </template>
+      </colgroup>
+      <caption v-if="caption" class="es-table-caption">
+        {{
+          caption
+        }}
+      </caption>
+      <tbody>
+        <tr v-for="(items, indexs) in content" :key="indexs">
+          <template v-for="(item, index) in items">
+            <td
+              v-if="item.type === 'caption'"
+              :colspan="col * 2"
+              class="es-table-td-caption"
+            >
+              <div class="es-table-caption">{{ item.text }}</div>
+            </td>
+            <td
+              v-else-if="item.type === 'table'"
+              :colspan="col * 2"
+              class="es-table-form-data"
+            >
+              <es-data-table-form
+                v-if="item.lazy"
+                class="es-form-table-data"
+                :data="model[item.name]"
+                :full="false"
+                v-bind="item"
+                :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-form>
+              <es-data-table
+                v-else
+                class="es-form-item-table"
+                ref="dataTable"
+                :data="model[item.name]"
+                :full="false"
+                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>
+            </td>
+            <template v-else>
+              <td
+                v-if="item.label !== false"
+                class="es-table-form-label"
+                :class="{ 'es-align-middle': item.labelRow }"
+                :key="'label' + index"
+                :align="item.type === 'label' ? item.align : ''"
+                :colspan="
+                  item.labelCol
+                    ? item.labelCol
+                    : item.type === 'label'
+                    ? item.colspan
+                    : ''
+                "
+                :rowspan="item.labelRow"
+              >
+                <es-label
+                  :contents="item.label"
+                  :plain="item.plain"
+                  :rules="item.rules"
+                  v-if="item.type !== 'table'"
+                ></es-label>
+              </td>
+              <td
+                v-if="
+                  item.type !== 'label' &&
+                    !(item.type === 'empty' && item.labelRow)
+                "
+                :align="
+                  item.type === 'label' || item.type === 'empty'
+                    ? item.align
+                    : ''
+                "
+                :class="
+                  item.type === 'label' || item.type === 'empty'
+                    ? 'es-table-form-label'
+                    : 'es-table-form-item'
+                "
+                :key="index"
+                :colspan="
+                  item.colspan
+                    ? item.colspan
+                    : item.colspan !== false && items.length < col
+                    ? col * 2 - items.length
+                    : item.label === false
+                    ? 2
+                    : ''
+                "
+                :rowspan="item.rowspan"
+              >
+                <expand-dom
+                  v-if="item.render"
+                  :item="item"
+                  :model="models"
+                  :render="item.render"
+                ></expand-dom>
+                <template v-else>
+                  <es-label
+                    v-if="item.type === 'label' || item.type === 'empty'"
+                    :contents="item.text"
+                  ></es-label>
+                  <el-form-item
+                    v-else
+                    label-width="0"
+                    :prop="item.name"
+                    :rules="getRules(item)"
+                    :class="{
+                      'es-form-item-inline': item.inline
+                    }"
+                  >
+                    <es-input-number
+                      v-if="item.type == 'number'"
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :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-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: ['value', 'ownId']
+                        })
+                      "
+                      :ownId="item.ownId || models.id"
+                      v-model="model[item.name]"
+                      v-else-if="
+                        item.type == 'attachment' || item.type == 'upload'
+                      "
+                      :readonly="readonly ? readonly : item.readonly"
+                      :rules="item.rules"
+                      btnSize="small"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-upload>
+                    <es-selector
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      v-else-if="item.type == 'selector'"
+                      :readonly="readonly ? readonly : item.readonly"
+                      :plain="item.plain"
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                    ></es-selector>
+                    <es-input
+                      v-else
+                      v-bind="
+                        handleExclAttribute({
+                          data: item,
+                          attrs: 'label'
+                        })
+                      "
+                      v-model="model[item.name]"
+                      :plain="item.plain"
+                      :readonly="readonly ? readonly : item.readonly"
+                      @blur="
+                        event => {
+                          handleBlur(item, event);
+                        }
+                      "
+                      @focus="
+                        event => {
+                          handleFocus(item, event);
+                        }
+                      "
+                      @change="
+                        val => {
+                          handleChange(item, val);
+                        }
+                      "
+                      @input="
+                        val => {
+                          handleInput(item, val);
+                        }
+                      "
+                      @clear="
+                        () => {
+                          handleClear(item);
+                        }
+                      "
+                    >
+                      <template v-if="item.prefix" slot="prefix">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.suffix" slot="suffix">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.prepend" slot="prepend">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                      <template v-if="item.append" slot="append">
+                        <expand-dom
+                          v-if="item.render"
+                          :item="item"
+                          :model="models"
+                          :render="item.render"
+                        ></expand-dom>
+                      </template>
+                    </es-input>
+                    <template v-if="item.inline">
+                      <template v-if="Array.isArray(item.inline)">
+                        <div
+                          class="es-form-inline"
+                          v-for="(inline, k) in item.inline"
+                          :key="k"
+                        >
+                          <div class="es-range" v-if="inline.range !== false">
+                            —
+                          </div>
+                          <es-input-number
+                            v-if="inline.type == 'number'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-input-number>
+                          <es-select
+                            v-else-if="inline.type == 'select'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-select>
+                          <es-cascader
+                            v-else-if="inline.type == 'cascader'"
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          >
+                          </es-cascader>
+                          <es-date-picker
+                            v-else-if="
+                              inline.date ||
+                                inline.type == 'date' ||
+                                inline.type == 'year' ||
+                                inline.type == 'month' ||
+                                inline.type == 'date' ||
+                                inline.type == 'dates' ||
+                                inline.type == 'week' ||
+                                inline.type == 'datetime' ||
+                                inline.type == 'datetimerange' ||
+                                inline.type == 'daterange' ||
+                                inline.type == 'monthrange' ||
+                                inline.type == 'quarter' ||
+                                inline.type == 'halfyear'
+                            "
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-date-picker>
+                          <template
+                            v-else-if="
+                              inline.type == 'image' || inline.type == 'img'
+                            "
+                          >
+                            <img
+                              v-if="inline.url || inline.src"
+                              v-bind="
+                                handleExclAttribute({
+                                  data: inline,
+                                  attrs: ['value']
+                                })
+                              "
+                              height="100%"
+                              :src="inline.url || inline.src"
+                              @click="inline.event"
+                            />
+                          </template>
+                          <es-input
+                            v-else
+                            v-bind="
+                              handleExclAttribute({
+                                data: inline,
+                                attrs: ['value']
+                              })
+                            "
+                            v-model="models[inline.name]"
+                            :plain="inline.plain || inline.name === undefined"
+                            :readonly="readonly ? readonly : inline.readonly"
+                            @blur="
+                              event => {
+                                handleBlur(inline, event);
+                              }
+                            "
+                            @focus="
+                              event => {
+                                handleFocus(inline, event);
+                              }
+                            "
+                            @input="
+                              val => {
+                                handleInput(inline, val);
+                              }
+                            "
+                            @clear="handleClear(inline)"
+                            @change="
+                              val => {
+                                handleChange(inline, val);
+                              }
+                            "
+                          ></es-input>
+                        </div>
+                      </template>
+                      <template v-else>
+                        <div
+                          class="es-range"
+                          v-if="item.inline.range !== false"
+                        >
+                          —
+                        </div>
+                        <es-input-number
+                          v-if="item.inline.type == 'number'"
+                          v-bind="item.inline"
+                          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,
+                              attrs: 'label'
+                            })
+                          "
+                          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,
+                              attrs: 'label'
+                            })
+                          "
+                          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="item.inline"
+                          v-model="models[item.inline.name]"
+                          :plain="
+                            item.inline.plain || item.inline.name === undefined
+                          "
+                          :readonly="readonly ? readonly : item.inline.readonly"
+                          @blur="
+                            event => {
+                              handleBlur(item.inline, event);
+                            }
+                          "
+                          @focus="
+                            event => {
+                              handleFocus(item.inline, event);
+                            }
+                          "
+                          @change="
+                            val => {
+                              handleChange(item.inline, val);
+                            }
+                          "
+                        ></es-date-picker>
+                        <es-input
+                          v-else
+                          v-bind="item.inline"
+                          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);
+                            }
+                          "
+                          @input="
+                            val => {
+                              handleInput(item.inline, val);
+                            }
+                          "
+                          @clear="
+                            () => {
+                              handleClear(item.inline);
+                            }
+                          "
+                        >
+                          <template v-if="item.inline.prefix" slot="prefix">
+                            <expand-dom
+                              v-if="item.inline.render"
+                              :item="item"
+                              :model="models"
+                              :render="item.inline.render"
+                            ></expand-dom>
+                          </template>
+                          <template slot="suffix" v-if="item.inline.suffix">
+                            <expand-dom
+                              v-if="item.inline.render"
+                              :item="item"
+                              :model="models"
+                              :render="item.inline.render"
+                            ></expand-dom>
+                          </template>
+                          <template v-if="item.inline.prepend" slot="prepend">
+                            <expand-dom
+                              v-if="item.inline.render"
+                              :item="item"
+                              :model="models"
+                              :render="item.inline.render"
+                            ></expand-dom>
+                          </template>
+                          <template v-if="item.inline.append" slot="append">
+                            <expand-dom
+                              v-if="item.inline.render"
+                              :item="item"
+                              :model="models"
+                              :render="item.inline.render"
+                            ></expand-dom>
+                          </template>
+                        </es-input>
+                      </template>
+                    </template>
+                  </el-form-item>
+                </template>
+              </td>
+            </template>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+    <template v-for="(item, index) in table">
+      <es-data-table-form
+        v-if="item.lazy"
+        class="es-form-item-table"
+        :data="model[item.name]"
+        :full="false"
+        v-bind="item"
+        :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-form>
+      <es-data-table
+        v-else
+        class="es-form-item-table"
+        ref="dataTable"
+        :data="model[item.name]"
+        :full="false"
+        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>
+  </div>
+</template>
+<script>
+import rules from 'eoss-ui/src/utils/rules.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsTableForm',
+  components: {
+    expandDom: {
+      functional: true,
+      props: {
+        item: Object,
+        model: Object,
+        render: [Function, String]
+      },
+      render: (h, ctx) => {
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, ctx.props.item, ctx.props.model);
+      }
+    }
+  },
+  props: {
+    model: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    span: Number,
+    contents: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    labelWidth: {
+      type: [Number, String],
+      default: 120
+    },
+    readonly: Boolean,
+    tableAfter: {
+      type: Boolean,
+      default: true
+    },
+    caption: String,
+    widths: Array,
+    thead: Array
+  },
+  computed: {
+    content() {
+      let content = [];
+      let items = [];
+      let n = 0;
+      let table = [];
+      let formList;
+      if (this.tableAfter) {
+        formList = this.contents.filter(items => {
+          if (Array.isArray(items)) {
+            return items.filter(item => {
+              if (item.type === 'table' && item.after !== false) {
+                table.push(item);
+              }
+              return item.type !== 'table' || item.after === false;
+            });
+          }
+          if (items.type === 'table' && items.after !== false) {
+            table.push(items);
+          }
+          return items.type !== 'table' || items.after === false;
+        });
+        this.table = table;
+      } else {
+        formList = this.contents;
+      }
+      if (Array.isArray(formList[0])) {
+        return formList;
+      } else {
+        const contents = formList.filter(item => {
+          if (!item.hide) {
+            return item;
+          }
+        });
+        contents.forEach((item, index) => {
+          let i = (index - n) % this.col;
+          let cover = false;
+          if (i == 0) {
+            items = [];
+          }
+          if (
+            (item.colspan && item.colspan > 1) ||
+            item.col === 12 ||
+            item.col === 0 ||
+            item.type === 'table' ||
+            item.type === 'caption'
+          ) {
+            cover = true;
+            n++;
+          }
+          if (cover) {
+            if (items.length) {
+              content.push(items);
+              content.push([item]);
+              items = [];
+            } else {
+              content.push([item]);
+            }
+          } else {
+            if (i < this.col) {
+              items.push(item);
+            }
+            if (i + 1 === this.col) {
+              content.push(items);
+            }
+          }
+        });
+        return content;
+      }
+    },
+    models: {
+      get() {
+        return this.model;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  data() {
+    return {
+      col: this.span ? this.span : 2,
+      cols: [],
+      table: []
+    };
+  },
+  created() {},
+  mounted() {
+    this.getWidth();
+  },
+  methods: {
+    getRules(res) {
+      if (res.rules && !res.hide) {
+        if (Array.isArray(res.rules)) {
+          return res.rules.map(item => {
+            if (rules[item.type]) {
+              return {
+                pattern: rules[item.type]['pattern'],
+                message: item.message
+                  ? item.message
+                  : rules[item.type]['message'],
+                trigger: item.trigger
+                  ? item.trigger
+                  : res.fetchSuggestions ||
+                    res.url ||
+                    (res.data && res.data.length)
+                  ? 'change'
+                  : 'blur'
+              };
+            }
+            return item;
+          });
+        }
+        if (rules[res.rules.type]) {
+          return {
+            pattern: rules[res.rules.type]['pattern'],
+            message: res.rules.message
+              ? res.rules.message
+              : rules[res.rules.type]['message'],
+            trigger: res.rules.trigger
+              ? res.rules.trigger
+              : res.fetchSuggestions || res.url || (res.data && res.data.length)
+              ? 'change'
+              : 'blur'
+          };
+        }
+        return res.rules;
+      }
+      return undefined;
+    },
+    getWidth() {
+      this.$nextTick(() => {
+        this.nextTickd();
+      });
+    },
+    nextTickd() {
+      let widths = [];
+      let surplus = 0;
+      let divisor = this.col;
+      let getWidth = this.$refs.dataTable
+        ? this.$refs.dataTable.$el
+          ? this.$refs.dataTable.$el.offsetWidth
+          : this.$refs.dataTable[0].$el.offsetWidth
+        : this.$parent.$el.offsetWidth;
+      if (getWidth < this.$parent.$el.offsetWidth) {
+        getWidth = this.$parent.$el.offsetWidth;
+      }
+      let allWidth = getWidth - parseInt(this.labelWidth, 10) * this.col;
+      if (this.widths && this.widths.length === this.col) {
+        this.widths.forEach(item => {
+          let num = parseInt(item, 10);
+          if (item && num) {
+            allWidth -= item ? num : 0;
+            divisor--;
+          }
+        });
+      }
+      let width = allWidth / divisor;
+      if (width - Math.floor(width) > 0) {
+        surplus =
+          (getWidth - parseInt(this.labelWidth, 10) * this.col) % this.col;
+      }
+      if (this.col > 1) {
+        for (let i = 0; i < this.col; i++) {
+          if (this.widths && this.widths[i]) {
+            widths.push(parseInt(this.widths[i], 10) + 'px');
+          } else if (i < surplus) {
+            widths.push(Math.floor(width) + 1 + 'px');
+          } else {
+            widths.push(Math.floor(width) + 'px');
+          }
+        }
+      } else {
+        widths = [''];
+      }
+      this.cols = widths;
+    },
+    handleClick(res) {
+      this.$emit('click', res, this.models);
+    },
+    handleChange(res, value, data) {
+      if (res.events && res.events.change) {
+        res.events.change(res, value, data);
+      } else {
+        this.$emit('change', res, value, data);
+      }
+    },
+    handleInput(res, value, data) {
+      this.$emit('input', res, value, data);
+    },
+    handleFocus(res, value, data) {
+      if (res.events && res.events.focus) {
+        res.events.focus(res, value, data);
+      } else {
+        this.$emit('focus', res, value, data);
+      }
+    },
+    handleBlur(res, value, data) {
+      if (res.events && res.events.blur) {
+        res.events.blur(res, value, data);
+      } else {
+        this.$emit('blur', res, value, data);
+      }
+    },
+    handleClear(res, value) {
+      this.$emit('clear', res, value);
+    },
+    handleDataChange(res, data) {
+      if (res.events && res.events.dataChange) {
+        res.events.dataChange(res, value, data);
+      } else {
+        this.$emit('dataChange', res, data);
+      }
+    },
+    handleExclAttribute({ data, attrs }) {
+      return util.exclAttribute({
+        data: data,
+        attrs: attrs
+      });
+    }
+  }
+};
+</script>