eoss-ui 0.5.13 → 0.5.15

package/packages/data-table/src/column.vue

@@ -1,455 +1,308 @@
 <template>
-  <el-table-column
-    v-if="showTemplate(item)"
-    v-show="!item.hide"
-    :filter-icon="filterIcon"
-    :label="item.title || item.label"
-    :label-key="item.labelKey"
-    :value-key="item.valueKey"
-    :prop="item.field || item.prop"
-    :fixed="item.fixed"
-    :sortable="item.sortable || item.sort"
-    :column-key="item.columnKey"
-    :width="width"
-    :min-width="item.minWidth"
-    :render-header="item.renderHeader"
-    :sort-method="item.sortMethod"
-    :sort-by="item.sortBy"
-    :sort-orders="item.sortOrders"
-    :resizable="item.resizable"
-    :formatter="item.formatter"
-    :show-overflow-tooltip="item.showOverflowTooltip"
-    :align="item.align"
-    :header-align="item.headerAlign"
-    :class-name="
-      (item.className
-        ? item.className + (item.type ? ' es-table-' + item.type + '-box' : '')
-        : item.type
-        ? 'es-table-' + item.type + '-box'
-        : '') + (item.showOverflowTooltip ? ' es-text-ellipsis' : '')
-    "
-    :label-class-name="
-      item.required
-        ? 'es-required' + (item.labelClassName ? ' ' + item.labelClassName : '')
-        : item.labelClassName
-    "
-    :selectable="item.selectable"
-    :reserve-selection="item.reserveSelection"
-    :filters="item.filters"
-    :filter-placement="item.filterPlacement"
-    :filter-multiple="item.filterMultiple"
-    :filter-method="item.filterMethod"
-    :filtered-value="item.filteredValue"
-    :colspan="item.colspan"
-    :rowspan="item.rowspan"
-    :total="item.total"
-  >
+  <el-table-column v-bind="config">
+    <slot> </slot>
     <template slot-scope="scope">
-      <template v-if="form && item.type !== 'handle'">
-        <template v-if="isReadOnly(item, scope)">
-          <expand-dom
-            v-if="item.render"
-            :column="item"
-            :row="scope.row"
-            :render="item.render"
-            :index="index"
-          >
-          </expand-dom>
-          <template v-else>{{ format(scope.row, item) }}</template>
-        </template>
-        <template v-else>
-          <section v-if="item.type === 'slot'">
-            <slot :name="item.prop"></slot>
-          </section>
-          <el-form-item
-            :name="name"
-            :prop="item.field"
-            :rules="isNotRule(item, scope) ? [] : item.rules"
-            :index="scope.$index"
-            v-else
+      <template v-if="isForm && !isReadOnly(scope)">
+        <el-form-item
+          :name="name"
+          :prop="field || prop"
+          :rules="isNotRule(scope) ? [] : rules"
+          :index="scope.$index"
+        >
+          <es-select
+            v-if="type === 'select'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-select>
+          <es-cascader
+            v-else-if="type == 'cascader'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
           >
-            <es-select
-              v-if="item.type === 'select'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :ajax="false"
-              :data="
-                item.data
-                  ? item.data
-                  : item.optionData
-                  ? scope.row[item.optionData]
-                  : optionDatas[item.field || item.prop]
-              "
-              @blur="
-                (event) => {
-                  handleBlur({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @focus="
-                (event) => {
-                  handleFocus({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-            ></es-select>
-            <es-cascader
-              v-else-if="item.type == 'cascader'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.data
-                  ? item.data
-                  : item.optionData
-                  ? scope.row[item.optionData]
-                  : optionDatas[item.field || item.prop]
-              "
-              @blur="
-                (event) => {
-                  handleBlur({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @focus="
-                (event) => {
-                  handleFocus({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-            >
-            </es-cascader>
-            <es-select-ganged
-              v-else-if="item.type === 'ganged'"
-              v-bind="
-                exclAttribute({
-                  data: item,
-                  attrs: ['width', 'url', 'sysCode']
-                })
-              "
-              v-model="scope.row[item.field]"
-              :data="
-                init(
-                  item.data
-                    ? item.data
-                    : item.optionData
-                    ? scope.row[item.optionData]
-                    : optionDatas[item.field || item.prop],
-                  scope.row[item.field],
-                  item
-                )
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    item: item
-                  });
-                }
-              "
-            ></es-select-ganged>
-            <es-radio-group
-              v-else-if="item.type === 'radio'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.data
-                  ? item.data
-                  : item.optionData
-                  ? scope.row[item.optionData]
-                  : optionDatas[item.field || item.prop]
-              "
-              :ajax="false"
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-radio-group>
-            <es-checkbox-group
-              v-else-if="item.type === 'checkbox'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.data
-                  ? item.data
-                  : item.optionData
-                  ? scope.row[item.optionData]
-                  : optionDatas[item.field || item.prop]
-              "
-              :ajax="false"
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-checkbox-group>
-            <es-switch
-              v-else-if="item.type === 'switch'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.data
-                  ? item.data
-                  : item.optionData
-                  ? scope.row[item.optionData]
-                  : optionDatas[item.field || item.prop]
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></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="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              @blur="
-                (event) => {
-                  handleBlur({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @focus="
-                (event) => {
-                  handleFocus({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-            ></es-date-picker>
-            <es-input-number
-              v-else-if="item.type == 'number'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              @blur="
-                (event) => {
-                  handleBlur({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @focus="
-                (event) => {
-                  handleFocus({
-                    item: item,
-                    event: event,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    scope: scope
-                  });
-                }
-              "
-            ></es-input-number>
-            <es-selector
-              v-else-if="item.type == 'selector'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              v-on="
-                exclAttribute({
-                  data: item.events,
-                  attrs: 'change'
-                })
-              "
-              @change="
-                (value) => {
-                  handleChange({
-                    item: item,
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-selector>
-            <template
-              v-else-if="item.type === 'text' || item.type === 'textarea'"
-            >
-              <template v-if="item.lazy">
-                <input
-                  v-if="item.type === 'text'"
-                  class="el-input__inner"
-                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                  v-model.lazy="scope.row[item.field]"
-                  @blur="
-                    (event) => {
-                      handleBlur({
-                        item: item,
-                        event: event,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                  @focus="
-                    (event) => {
-                      handleFocus({
-                        item: item,
-                        event: event,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                  @change="
-                    (value) => {
-                      handleChange({
-                        item: item,
-                        name: item.field || item.prop,
-                        value: value,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                />
-                <textarea
-                  v-else
-                  class="el-textarea__inner"
-                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                  v-model.lazy="scope.row[item.field]"
-                  @blur="
-                    (event) => {
-                      handleBlur({
-                        item: item,
-                        event: event,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                  @focus="
-                    (event) => {
-                      handleFocus({
-                        item: item,
-                        event: event,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                  @change="
-                    (value) => {
-                      handleChange({
-                        item: item,
-                        name: item.field || item.prop,
-                        value: value,
-                        data: scope.row,
-                        scope: scope
-                      });
-                    }
-                  "
-                ></textarea>
-              </template>
-              <es-input
+          </es-cascader>
+          <es-select-ganged
+            v-else-if="type === 'ganged'"
+            v-bind="
+              exclAttribute({
+                data: config,
+                attrs: ['width', 'url', 'sysCode']
+              })
+            "
+            v-model="scope.row[field || prop]"
+            :data="init(option, config)"
+            @change="
+              (value) => {
+                handleChange({
+                  name: field || prop,
+                  value: value,
+                  data: scope.row,
+                  item: item
+                });
+              }
+            "
+          ></es-select-ganged>
+          <es-radio-group
+            v-else-if="type === 'radio'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-radio-group>
+          <es-checkbox-group
+            v-else-if="type === 'checkbox'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-checkbox-group>
+          <es-switch
+            v-else-if="type === 'switch'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-switch>
+          <es-date-picker
+            v-else-if="
+              config.date ||
+              type == 'date' ||
+              type == 'year' ||
+              type == 'month' ||
+              type == 'date' ||
+              type == 'dates' ||
+              type == 'week' ||
+              type == 'datetime' ||
+              type == 'datetimerange' ||
+              type == 'daterange' ||
+              type == 'monthrange' ||
+              type == 'quarter' ||
+              type == 'halfyear'
+            "
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-date-picker>
+          <es-input-number
+            v-else-if="type == 'number'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            @blur="
+              (event) => {
+                handleBlur({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @focus="
+              (event) => {
+                handleFocus({
+                  item: config,
+                  event: event,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row,
+                  scope: scope
+                });
+              }
+            "
+          ></es-input-number>
+          <es-selector
+            v-else-if="type == 'selector'"
+            v-bind="formOption"
+            v-model="scope.row[field || prop]"
+            v-on="
+              exclAttribute({
+                data: events,
+                attrs: 'change'
+              })
+            "
+            @change="
+              (value) => {
+                handleChange({
+                  item: config,
+                  name: field || prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          ></es-selector>
+          <template v-else-if="type === 'text' || type === 'textarea'">
+            <template v-if="config.lazy">
+              <input
+                v-if="type === 'text'"
+                class="el-input__inner"
+                v-bind="formOption"
+                v-model.lazy="scope.row[field]"
+                @blur="
+                  (event) => {
+                    handleBlur({
+                      item: config,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @focus="
+                  (event) => {
+                    handleFocus({
+                      item: config,
+                      event: event,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+                @change="
+                  (value) => {
+                    handleChange({
+                      item: config,
+                      name: field || prop,
+                      value: value,
+                      data: scope.row,
+                      scope: scope
+                    });
+                  }
+                "
+              />
+              <textarea
                 v-else
-                v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                :scope="scope"
-                v-model="scope.row[item.field]"
+                class="el-textarea__inner"
+                v-bind="formOption"
+                v-model.lazy="scope.row[field]"
                 @blur="
                   (event) => {
                     handleBlur({
-                      item: item,
+                      item: config,
                       event: event,
                       data: scope.row,
                       scope: scope
@@ -459,7 +312,7 @@
                 @focus="
                   (event) => {
                     handleFocus({
-                      item: item,
+                      item: config,
                       event: event,
                       data: scope.row,
                       scope: scope
@@ -469,95 +322,90 @@
                 @change="
                   (value) => {
                     handleChange({
-                      item: item,
-                      name: item.field || item.prop,
+                      item: config,
+                      name: field || prop,
                       value: value,
                       data: scope.row,
                       scope: scope
                     });
                   }
                 "
-              ></es-input>
+              ></textarea>
             </template>
-          </el-form-item>
-        </template>
+            <es-input
+              v-else
+              v-bind="formOption"
+              :scope="scope"
+              v-model="scope.row[field || prop]"
+              @blur="
+                (event) => {
+                  handleBlur({
+                    item: config,
+                    event: event,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+              @focus="
+                (event) => {
+                  handleFocus({
+                    item: config,
+                    event: event,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+              @change="
+                (value) => {
+                  handleChange({
+                    item: config,
+                    name: field || prop,
+                    value: value,
+                    data: scope.row,
+                    scope: scope
+                  });
+                }
+              "
+            ></es-input>
+          </template>
+        </el-form-item>
       </template>
-      <!-- 按钮区域 -->
       <es-button-group
-        v-if="item.type === 'handle' && !scope.row.hideHandle"
+        v-else-if="type === 'handle' && !scope.row.hideHandle"
         v-bind="
           exclAttribute({
-            data: item,
+            data: config,
             attrs: ['contents', 'events', 'type', 'width', 'template', 'title']
           })
         "
         stop
-        :contents="item.contents || item.events"
+        :contents="contents || events"
         :data="scope.row"
         @handleClick="handleClick"
-        v-model="width"
+        v-model="btnWidth"
       ></es-button-group>
-    </template>
-  </el-table-column>
-  <el-table-column
-    v-else
-    v-show="!item.hide"
-    :key="index"
-    :filter-icon="filterIcon"
-    :label="item.title || item.label"
-    :label-key="item.labelKey"
-    :value-key="item.valueKey"
-    :prop="item.field || item.prop"
-    :fixed="item.fixed"
-    :sortable="item.sortable || item.sort"
-    :index="item.index"
-    :column-key="item.columnKey"
-    :width="item.width"
-    :min-width="item.minWidth"
-    :render-header="item.renderHeader"
-    :sort-method="item.sortMethod"
-    :sort-by="item.sortBy"
-    :sort-orders="item.sortOrders"
-    :resizable="item.resizable"
-    :formatter="item.formatter"
-    :show-overflow-tooltip="item.showOverflowTooltip"
-    :align="item.align"
-    :header-align="item.headerAlign"
-    :class-name="item.className"
-    :label-class-name="item.labelClassName"
-    :selectable="item.selectable"
-    :reserve-selection="item.reserveSelection"
-    :filters="item.filters"
-    :filter-placement="item.filterPlacement"
-    :filter-multiple="item.filterMultiple"
-    :filter-method="item.filterMethod"
-    :filtered-value="item.filteredValue"
-    :colspan="item.colspan"
-    :rowspan="item.rowspan"
-    :total="item.total"
-  >
-    <slot></slot>
-    <template slot-scope="scope">
       <expand-dom
-        v-if="item.render"
-        :column="item"
+        v-else-if="render"
+        :column="config"
         :row="scope.row"
-        :render="item.render"
-        :index="index"
+        :render="render"
+        :index="indexs"
       >
       </expand-dom>
-      <template v-else>{{
-        item.formatDate
-          ? formatDate(scope.row[item.field || item.prop], item.formatDate)
-          : format(scope.row, item)
-      }}</template>
+      <template v-else-if="dateFormat">
+        {{ formatDate(scope.row[field || prop], dateFormat) }}
+      </template>
+      <span v-else :style="styles ? styles[scope.row[prop]] : {}">{{
+        format(scope.row)
+      }}</span>
     </template>
   </el-table-column>
 </template>
 
 <script type="text/babel">
 import { findSysCode } from 'eoss-ui/src/config/api.js';
-import tableMixin from './mixins/table';
 import util from 'eoss-ui/src/utils/util';
 export default {
   name: 'Column',
@@ -598,38 +446,52 @@ export default {
     },
     tableReload: {
       default: ''
+    },
+    table: {
+      default: ''
     }
   },
-  mixins: [tableMixin],
   props: {
+    form: Boolean,
     readonly: Boolean,
     name: String,
     filterIcon: [Boolean, String],
-    item: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    index: {
+    title: String,
+    label: String,
+    labelKey: String,
+    valueKey: String,
+    field: String,
+    prop: String,
+    sortable: [Boolean, String],
+    sort: [Boolean, String],
+    className: String,
+    labelClassName: String,
+    type: String,
+    required: Boolean,
+    width: String,
+    minWidth: String,
+    hide: Boolean,
+    showOverflowTooltip: Boolean,
+    render: [Function, String],
+    contents: Array,
+    events: [Array, Object],
+    dateFormat: String,
+    styles: [Array, Object],
+    sysCode: String,
+    valueToString: Boolean,
+    symbol: String,
+    rules: [Array, Object],
+    method: String,
+    indexs: {
       type: Number,
       default: null
     },
-    minWidth: {
-      type: String,
-      default() {
-        return this.form ? '180px' : undefined;
-      }
-    },
+    data: Object,
     optionData: {
       type: Object,
       default() {
         return {};
       }
-    },
-    form: {
-      type: Boolean,
-      default: false
     }
   },
   watch: {
@@ -638,14 +500,108 @@ export default {
       handler(val) {
         this.optionDatas = val;
       }
+    },
+    width: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.btnWidth = parseInt(val, 10) + 'px';
+        }
+      }
+    }
+  },
+  computed: {
+    config() {
+      let config = {
+        label: this.label || this.title,
+        width: this.btnWidth || this.width
+      };
+
+      if (this.type === 'expand') {
+        config = { type: this.type, ...config, ...this.$attrs };
+        return config;
+      }
+      let minWidth =
+        this.label || this.title
+          ? (this.label || this.title).length * 14 + 20
+          : this.width
+          ? ''
+          : '180px';
+      config = {
+        ...config,
+        filterIcon: this.icon,
+        sortable: this.sortable || this.sort,
+        minWidth: this.minWidth || this.table.minWidth || minWidth,
+        className: [
+          this.className ? this.className : '',
+          this.type ? ' es-table-' + this.type + '-box' : '',
+          this.showOverflowTooltip ? ' es-text-ellipsis' : ''
+        ].join(' '),
+        labelClassName: [
+          this.labelClassName ? this.labelClassName : '',
+          this.required ? 'es-required' : ''
+        ].join(' '),
+        prop: this.field || this.prop,
+        field: this.field,
+        ...this.$attrs
+      };
+      return config;
+    },
+    formOption() {
+      return {
+        labelKey: this.sysCode ? 'shortName' : this.labelKey,
+        valueKey: this.sysCode ? 'cciValue' : this.valueKey,
+        rules: this.rules,
+        events: this.events,
+        ...this.$attrs,
+        data: this.option
+      };
+    },
+    icon() {
+      if (this.filterIcon === true) {
+        return 'es-icon-biao';
+      }
+      return false;
+    },
+    isForm() {
+      let type = this.type ? this.type.toLowerCase() : '';
+      let flag =
+        (this.form &&
+          [
+            'text',
+            'textarea',
+            'checkbox',
+            'radio',
+            'select',
+            'handle',
+            'date',
+            'year',
+            'month',
+            'date',
+            'dates',
+            'week',
+            'datetime',
+            'datetimerange',
+            'daterange',
+            'monthrange',
+            'quarter',
+            'halfyear',
+            'switch',
+            'selector',
+            'ganged',
+            'number'
+          ].indexOf(type) > -1) ||
+        ['space', 'slot'].indexOf(type) > -1;
+      return flag;
+    },
+    option() {
+      const field = this.field || this.prop;
+      return this.data ? this.data : this.optionDatas[this.sysCode || field];
     }
   },
-  computed: {},
   data() {
     return {
-      width: Object.prototype.hasOwnProperty.call(this.item, 'width')
-        ? parseInt(this.item.width, 10) + 'px'
-        : undefined,
+      btnWidth: '',
       searchs: [],
       optionDatas: this.optionData
     };
@@ -655,20 +611,20 @@ export default {
     init(data, value, item) {
       if (data && value) {
         if (Array.isArray(value) && value.length) {
-          if (item.url || item.sysCode) {
+          if (item.url || this.sysCode) {
             value.forEach(async (val, index) => {
               if (
                 val.hasSub == false ||
-                this.searchs.indexOf(val[item.valueKey] || val.value) > -1
+                this.searchs.indexOf(val[this.valueKey] || val.value) > -1
               ) {
                 return;
               }
-              this.searchs.push(val[item.valueKey] || val.value);
+              this.searchs.push(val[this.valueKey] || val.value);
               if ((item.ganged && index < item.ganged - 1) || val.hasSub) {
                 let option = data[index + 1];
                 let lists = [];
                 if (option) {
-                  let v = val[item.valueKey] || val.value;
+                  let v = val[this.valueKey] || val.value;
                   lists = option.filter((list) => {
                     return list[item.filtrateKey] == v;
                   });
@@ -683,13 +639,13 @@ export default {
                   }
                   let params = util.extend(
                     true,
-                    item.sysCode ? { sysAppCode: item.sysCode } : {},
+                    this.sysCode ? { sysAppCode: this.sysCode } : {},
                     item.param ? item.param : {},
                     param
                   );
                   await util
                     .ajax({
-                      url: item.sysCode ? findSysCode : item.url,
+                      url: this.sysCode ? findSysCode : item.url,
                       method: this.method,
                       params: params,
                       data: params
@@ -733,16 +689,12 @@ export default {
     exclAttribute({ data, attrs }) {
       return util.exclAttribute({ data, attrs });
     },
-    format(rows, col) {
-      const field = col.field || col.prop;
-      let data = col.data
-        ? col.data
-        : col.optionData
-        ? rows[col.optionData]
-        : this.optionDatas[field];
+    format(rows) {
+      const field = this.field || this.prop;
+      let data = this.option;
       if (util.isObject(rows[field])) {
         return (
-          rows[field][col.labelKey] ||
+          rows[field][this.labelKey] ||
           rows[field]['name'] ||
           rows[field]['label'] ||
           rows[field]['shortName']
@@ -751,95 +703,92 @@ export default {
         const vals = rows[field].map((item) => {
           if (util.isObject(item)) {
             return (
-              item[col.labelKey] ||
+              item[this.labelKey] ||
               item['name'] ||
               item['label'] ||
               item['shortName']
             );
           } else {
             if (data && data.length && util.isObject(data[0])) {
-              return this.getLabel(data, item, col);
+              return this.getLabel(data, item);
             }
             return item;
           }
         });
-        return vals.join(col.symbol ? col.symbol : '-');
+        return vals.join(this.symbol ? this.symbol : '-');
       } else {
-        if (col.valueToString || col['value-to-string']) {
+        if (this.valueToString) {
           const vals = rows[field].split(',').map((item) => {
             if (data && data.length && util.isObject(data[0])) {
-              return this.getLabel(data, item, col);
+              return this.getLabel(data, item);
             }
             return item;
           });
-          return vals.join(col.symbol ? col.symbol : '-');
+          return vals.join(this.symbol ? this.symbol : '-');
         } else {
           if (data && data.length && util.isObject(data[0])) {
-            return this.getLabel(data, rows[field], col);
+            return this.getLabel(data, rows[field]);
           }
           return rows[field];
         }
       }
     },
-    getLabel(obj, val, col) {
+    getLabel(obj, val) {
       for (let i = 0; i < obj.length; i++) {
         let item = obj[i];
-        let value = item[col.valueKey || 'cciValue'] || item['value'];
+        let value = item[this.valueKey || 'cciValue'] || item['value'];
         if (value == val) {
           return (
-            item[col.labelKey] ||
+            item[this.labelKey] ||
             item['name'] ||
             item['label'] ||
             item['shortName']
           );
         } else if (item.children && item.children.length) {
-          return this.getLabel(item.children, val, col);
+          return this.getLabel(item.children, val);
         }
       }
     },
-    isReadOnly(item, scope) {
+    isReadOnly(scope) {
       return (
         scope.row.canEdit === false ||
         this.readonly ||
-        item.editable === false ||
+        this.$attrs.editable === false ||
         (scope.row.cantEditKey &&
-          scope.row.cantEditKey.indexOf(item.field || item.prop) > -1) ||
-        item.readonly
+          scope.row.cantEditKey.indexOf(this.field || this.prop) > -1)
       );
     },
-    isNotRule(item, scope) {
+    isNotRule(scope) {
       if (
         scope.row.canRule === false ||
         (scope.row.notRules &&
-          scope.row.notRules.indexOf(item.field || item.prop) > -1)
+          scope.row.notRules.indexOf(this.field || this.prop) > -1)
       ) {
-        this.elForm && this.elForm.clearValidate(item.field || item.prop);
+        this.elForm && this.elForm.clearValidate(this.field || this.prop);
         return true;
       }
       return false;
     },
     handleBlur(data) {
-      let { item } = data;
-      item.events && item.events.blur && item.events.blur(data);
+      this.events && this.events.blur && this.events.blur(data);
       this.$emit('formBlur', data);
     },
     handleFocus(data) {
-      let { item } = data;
-      item.events && item.events.focus && item.events.focus(data);
+      this.events && this.events.focus && this.events.focus(data);
       this.$emit('formFocus', data);
     },
     handleChange(data) {
       let { item } = data;
-      if (item && item.type == 'ganged') {
+      if (item && this.type == 'ganged') {
         let { index, value } = data.value;
         if (
-          (item.url || item.sysCode) &&
+          (item.url || this.sysCode) &&
           ((item.ganged && index > item.ganged - 1) || value.hasSub)
         ) {
-          let filte = value[item.valueKey] || value.value;
+          let filte = value[this.valueKey] || value.value;
           let datas = [];
-          if (this.optionDatas[item.field || item.prop][index + 1]) {
-            datas = this.optionDatas[item.field || item.prop][index + 1].filter(
+          if (this.optionDatas[this.field || this.prop][index + 1]) {
+            datas = this.optionDatas[this.field || this.prop][index + 1].filter(
               (items) => {
                 return filte == items[item.filtrateKey];
               }
@@ -855,13 +804,13 @@ export default {
             }
             let params = util.extend(
               true,
-              item.sysCode ? { sysAppCode: item.sysCode } : {},
+              this.sysCode ? { sysAppCode: this.sysCode } : {},
               item.param ? item.param : {},
               param
             );
             util
               .ajax({
-                url: item.sysCode ? findSysCode : item.url,
+                url: this.sysCode ? findSysCode : item.url,
                 method: this.method,
                 params: params,
                 data: params
@@ -869,7 +818,7 @@ export default {
               .then((res) => {
                 if (res.rCode === 0) {
                   let options = JSON.parse(
-                    JSON.stringify(this.optionDatas[item.field || item.prop])
+                    JSON.stringify(this.optionDatas[this.sysCode])
                   );
                   if (options[index + 1]) {
                     options[index + 1] = options[index + 1].concat(
@@ -878,7 +827,7 @@ export default {
                   } else {
                     options.push(JSON.parse(JSON.stringify(res.results)));
                   }
-                  this.$set(this.optionDatas, item.field || item.prop, options);
+                  this.$set(this.optionDatas, this.sysCode, options);
                 } else {
                   let msg = res.msg || '系统错误，请联系管理员！';
                   this.$message.error(msg);
@@ -892,7 +841,7 @@ export default {
           }
         }
       }
-      item.events && item.events.change && item.events.change(data);
+      this.events && this.events.change && this.events.change(data);
       this.$emit('formChange', data);
     },
     handleClick(data) {