eoss-ui 0.5.81-beta8 → 0.5.82

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

@@ -10,10 +10,49 @@
           :rules="isNotRule(scope) ? [] : rules"
           :index="scope.$index"
         >
+          <component
+            v-if="getType(scope.row.formConfigs, 'component')"
+            :is="tag"
+            v-bind="getOptions(scope.row.formConfigs)"
+            v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
+            @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
+                });
+              }
+            "
+          ></component>
           <es-select
-            v-if="type === 'select'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'select')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
             @blur="
               (event) => {
                 handleBlur({
@@ -45,11 +84,13 @@
                 });
               }
             "
-          ></es-select>
+          >
+          </es-select>
           <es-cascader
-            v-else-if="type == 'cascader'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'cascader')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
             @blur="
               (event) => {
                 handleBlur({
@@ -84,10 +125,10 @@
           >
           </es-cascader>
           <es-select-ganged
-            v-else-if="type === 'ganged'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'ganged')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
-            :data="init(option, config)"
+            :data="init(getData(scope.row.formOptions), config)"
             @change="
               (value) => {
                 handleChange({
@@ -98,11 +139,13 @@
                 });
               }
             "
-          ></es-select-ganged>
+          >
+          </es-select-ganged>
           <es-radio-group
-            v-else-if="type === 'radio'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'radio')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
             @change="
               (value) => {
                 handleChange({
@@ -113,11 +156,13 @@
                 });
               }
             "
-          ></es-radio-group>
+          >
+          </es-radio-group>
           <es-checkbox-group
-            v-else-if="type === 'checkbox'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'checkbox')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
             @change="
               (value) => {
                 handleChange({
@@ -128,11 +173,13 @@
                 });
               }
             "
-          ></es-checkbox-group>
+          >
+          </es-checkbox-group>
           <es-switch
-            v-else-if="type === 'switch'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'switch')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
+            :data="getData(scope.row.formOptions)"
             @change="
               (value) => {
                 handleChange({
@@ -143,24 +190,27 @@
                 });
               }
             "
-          ></es-switch>
+          >
+          </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'
+              getType(scope.row.formConfigs, [
+                'date',
+                'year',
+                'month',
+                'date',
+                'dates',
+                'week',
+                'datetime',
+                'datetimerange',
+                'daterange',
+                'monthrange',
+                'quarter',
+                'halfyear'
+              ])
             "
-            v-bind="formOption"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
             :type="type"
             @blur="
@@ -194,10 +244,11 @@
                 });
               }
             "
-          ></es-date-picker>
+          >
+          </es-date-picker>
           <es-input-number
-            v-else-if="type == 'number'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'number')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
             @blur="
               (event) => {
@@ -230,10 +281,11 @@
                 });
               }
             "
-          ></es-input-number>
+          >
+          </es-input-number>
           <es-selector
-            v-else-if="type == 'selector'"
-            v-bind="formOption"
+            v-else-if="getType(scope.row.formConfigs, 'selector')"
+            v-bind="getOptions(scope.row.formConfigs)"
             v-model="scope.row[field || prop]"
             v-on="
               exclAttribute({
@@ -251,17 +303,18 @@
                 });
               }
             "
-          ></es-selector>
+          >
+          </es-selector>
           <template
             v-else-if="
-              type === 'text' || type === 'input' || type === 'textarea'
+              getType(scope.row.formConfigs, ['text', 'input', 'textarea'])
             "
           >
             <template v-if="config.lazy">
               <input
-                v-if="type === 'text' || type === 'input'"
+                v-if="getType(scope.row.formConfigs, ['text', 'input'])"
                 class="el-input__inner"
-                v-bind="formOption"
+                v-bind="getOptions(scope.row.formConfigs)"
                 v-model.lazy="scope.row[field]"
                 @blur="
                   (event) => {
@@ -298,7 +351,7 @@
               <textarea
                 v-else
                 class="el-textarea__inner"
-                v-bind="formOption"
+                v-bind="getOptions(scope.row.formConfigs)"
                 v-model.lazy="scope.row[field]"
                 @blur="
                   (event) => {
@@ -335,7 +388,7 @@
             </template>
             <es-input
               v-else
-              v-bind="formOption"
+              v-bind="getOptions(scope.row.formConfigs)"
               :type="type"
               :scope="scope"
               v-model="scope.row[field || prop]"
@@ -370,7 +423,8 @@
                   });
                 }
               "
-            ></es-input>
+            >
+            </es-input>
           </template>
         </el-form-item>
       </template>
@@ -402,6 +456,7 @@
           })
         "
         stop
+        :mode="mode"
         :contents="contents || events"
         :data="scope"
         @handleClick="handleClick"
@@ -459,6 +514,8 @@ export default {
     }
   },
   props: {
+    tag: String,
+    mode: String,
     service: String,
     form: Boolean,
     readonly: Boolean,
@@ -484,6 +541,10 @@ export default {
     contents: Array,
     events: [Array, Object],
     dateFormat: String,
+    dateValue: {
+      type: String,
+      default: ''
+    },
     styles: [Array, Object],
     sysCode: String,
     valueToString: Boolean,
@@ -582,8 +643,7 @@ export default {
           : this.valueKey,
         rules: this.rules,
         events: this.events,
-        ...this.$attrs,
-        data: this.option
+        ...this.$attrs
       };
       return config;
     },
@@ -725,6 +785,25 @@ export default {
       }
       return data;
     },
+    getType(config, types) {
+      let type =
+        config && config[this.field || this.prop]
+          ? config[this.field || this.prop]['type'] ||
+            config[this.field || this.prop]
+          : this.type;
+      return Array.isArray(types) ? types.includes(type) : type == types;
+    },
+    getOptions(config) {
+      let option = config && config[this.field || this.prop];
+      return option && typeof option == 'object'
+        ? { ...this.formOption, ...option }
+        : this.formOption;
+    },
+    getData(res) {
+      return res && res[this.field || this.prop]
+        ? res[this.field || this.prop]
+        : this.option;
+    },
     exclAttribute({ data, attrs }) {
       return util.exclAttribute({ data, attrs });
     },
@@ -824,10 +903,14 @@ export default {
       this.$emit('formFocus', data);
       this.$emit('form-focus', data);
     },
-    handleChange(data) {
-      let { item } = data;
-      if (item && this.type == 'ganged') {
-        let { index, value } = data.value;
+    handleChange(datas) {
+      let { item, name, data } = datas;
+      if (
+        item &&
+        ((data.formConfigs && data.formConfigs[name] == 'ganged') ||
+          this.type == 'ganged')
+      ) {
+        let { index, value } = datas.value;
         if (
           (item.url || this.sysCode) &&
           ((item.ganged && index > item.ganged - 1) || value.hasSub)
@@ -888,16 +971,16 @@ export default {
           }
         }
       }
-      this.events && this.events.change && this.events.change(data);
-      this.$emit('formChange', data);
-      this.$emit('form-change', data);
+      this.events && this.events.change && this.events.change(datas);
+      this.$emit('formChange', datas);
+      this.$emit('form-change', datas);
     },
     handleClick(data) {
       this.$emit('handleClick', data);
       this.$emit('handle-click', data);
     },
     formatDate(date, fmt) {
-      return util.formatDate(date, fmt);
+      return date ? util.formatDate(date, fmt) : this.dateValue;
     }
   }
 };

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

@@ -12,6 +12,9 @@
     <es-toolbar
       v-if="showToolbar"
       ref="toolbar"
+      :class="{
+        'es-table-toolbar-plus': mode == 'plus'
+      }"
       v-bind="{
         contents: toolbars,
         showLabel: showLabel,
@@ -35,7 +38,10 @@
     <div
       style="styles"
       class="es-data-table-content"
-      :class="border == 'none' ? 'es-table-border-none' : ''"
+      :class="{
+        'es-table-border-none': border == 'none',
+        'es-table-plus': mode == 'plus'
+      }"
       ref="esTableContent"
       v-if="show"
     >
@@ -71,11 +77,6 @@
           (theadBorder && border != 'none' ? ' es-thead-border' : '')
         "
       >
-        <!-- <el-table-column v-if="dragSort" width="32" fixed>
-          <template slot-scope="scope">
-            <es-icon :contents="dragSortIcon"></es-icon>
-          </template>
-        </el-table-column> -->
         <slot name="prepend"></slot>
         <slot></slot>
         <template v-for="(item, index) in theads">
@@ -99,7 +100,9 @@
             <children
               v-else
               :key="item.label || item.title"
+              :tag="item.tag"
               v-bind="{
+                mode: mode,
                 name: name,
                 indexs: index,
                 form: form,
@@ -153,9 +156,11 @@
       </div>
       <es-pagination
         v-else-if="page"
+        ref="pagination"
         v-bind="config"
         class="es-table-page"
-        :style="{ 'text-align': page.position || 'center' }"
+        :position="page.position"
+        :style="{ 'text-align': page.position }"
         v-on="{
           change: sizeChange,
           current: currentChange,
@@ -166,7 +171,7 @@
       <slot name="dialog"></slot>
       <slot name="other"></slot>
     </div>
-    <sizer ref="sizer" :data="theads"></sizer>
+    <sizer ref="sizer" :data="theads" :mode="mode"></sizer>
   </component>
 </template>
 <script>
@@ -177,6 +182,8 @@ import sizer from './sizer.vue';
 import util from 'eoss-ui/src/utils/util';
 import bus from 'eoss-ui/src/utils/bus';
 import qs from 'qs';
+const dataTableMode =
+  util.win.top.dataTableMode || util.win.dataTableMode || 'default';
 export default {
   name: 'EsDataTable',
   inheritAttrs: false,
@@ -202,6 +209,10 @@ export default {
     }
   },
   props: {
+    mode: {
+      type: String,
+      default: dataTableMode
+    },
     service: String,
     loading: {
       type: Boolean,
@@ -340,7 +351,7 @@ export default {
     },
     // 单元格配置
     thead: {
-      type: [Array, String],
+      type: Array,
       default() {
         return [];
       }
@@ -431,11 +442,13 @@ export default {
     dragSortIcon: {
       type: String,
       default: 'es-icon-caidan'
-    }
+    },
+    fields: Boolean
   },
   data() {
     return {
       requests: [],
+      toolbars: [],
       theadData: [],
       list: [],
       tableLoading: this.loading,
@@ -445,11 +458,14 @@ export default {
       editValue: {},
       restotalRow: null,
       showTotal: false,
-      toolbars: [],
       config: {
         pageNum: 1,
         pageSize: 20,
-        totalCount: 0
+        totalCount: 0,
+        layout:
+          this.mode == 'plus'
+            ? 'total, sizes, prev, pager, next, jumper'
+            : undefined
       },
       searchWhere: {},
       advanceWhere: {},
@@ -586,7 +602,6 @@ export default {
           this.$nextTick(() => {
             this.list = val;
           });
-          console.log(val, 7777788);
         }
         this.$emit('update:data', val);
         return val;
@@ -658,10 +673,6 @@ export default {
         this.list = this.setData();
       }
     },
-    page() {
-      this.resetHeight();
-      this.doLayout();
-    },
     scale: {
       deep: true,
       handler(val) {
@@ -676,7 +687,7 @@ export default {
       }
     },
     zoom: {
-      handler(val) {
+      handler() {
         if (
           this.tableHeight != 'auto' &&
           this.tableHeight !== false &&
@@ -693,10 +704,15 @@ export default {
     thead: {
       deep: true,
       handler(val) {
-        if (typeof val === 'string') {
-          this.getTheads();
-        } else {
-          this.getOptions(val);
+        this.getOptions(val);
+
+        if (
+          Array.isArray(val) &&
+          val.length &&
+          this.fields &&
+          this.datas.length == 0
+        ) {
+          this.getTableData();
         }
       }
     },
@@ -708,7 +724,7 @@ export default {
     },
     param: {
       deep: true,
-      handler(val) {
+      handler() {
         this.getTableData();
       }
     },
@@ -716,14 +732,12 @@ export default {
       immediate: true,
       deep: true,
       handler(val) {
+        if (this.$el) {
+          this.resetHeight();
+          this.doLayout();
+        }
         if (typeof val === 'object') {
           this.config = util.extend({}, this.config, val);
-        } else {
-          this.config = {
-            pageNum: 1,
-            pageSize: 20,
-            totalCount: 0
-          };
         }
       }
     },
@@ -766,9 +780,15 @@ export default {
   created() {
     if (Array.isArray(this.thead) && this.thead.length) {
       this.getOptions(this.thead);
+      if (this.fields) {
+        this.immediate && this.getTableData();
+        this.chekOpenTotalArea();
+      }
+    }
+    if (!this.fields) {
+      this.immediate && this.getTableData();
+      this.chekOpenTotalArea();
     }
-    this.immediate && this.getTableData();
-    this.chekOpenTotalArea();
   },
   mounted() {
     if (this.data.length) {
@@ -776,6 +796,9 @@ export default {
     }
     this.list.length && this.checkSelect(this.checked);
     this.resetHeight();
+    if (util.win.top != util.win.self) {
+      util.win.onresize = debounce(500, this.resetHeight);
+    }
   },
   methods: {
     setData() {
@@ -987,40 +1010,6 @@ export default {
         }
       });
     },
-    getTheads() {
-      util
-        .ajax({
-          url: this.thead,
-          method: this.method,
-          format: this.format,
-          params: this.param,
-          data: this.param
-        })
-        .then((res) => {
-          if (res.rCode === 0) {
-            let results = res.results;
-            if (Array.isArray(results)) {
-              this.theadData = results;
-            } else {
-              this.theadData = results.theadData || [];
-              this.list = results.data || results.records || [];
-              this.config.totalCount =
-                results.count || results.total || results.totalCount;
-              this.getOptions(this.theadData);
-            }
-          } else {
-            this.theadData = [];
-            let msg = res.msg || '系统错误，请联系管理员！';
-            this.$message.error(msg);
-          }
-          this.$emit('success', res);
-        })
-        .catch((err) => {
-          if (err.message && err.message !== 'canceled') {
-            this.$message.error(err.message);
-          }
-        });
-    },
     getTableDatas(res) {
       let where;
       let first;
@@ -1058,6 +1047,22 @@ export default {
           }
         }
       }
+      if (this.fields) {
+        let fields = [];
+        this.thead.forEach((item) => {
+          if (item.field || item.prop) {
+            fields.push(item.field || item.prop);
+          }
+        });
+        let initLogin = util.getStorage('initLogin');
+        initLogin && (initLogin = JSON.parse(initLogin));
+        reqData['fields'] = initLogin.secret
+          ? util.esmEncrypt({
+              data: fields.join(','),
+              key: initLogin.secret
+            })
+          : fields.join(',');
+      }
       this.tableLoading = true;
       util
         .ajax({
@@ -1094,6 +1099,7 @@ export default {
             }
             this.config.totalCount =
               results.count || results.total || results.totalCount;
+            this.config.pageCount = results.pageCount;
             this.checked &&
               this.$nextTick(() => {
                 this.checkSelect(this.checked);
@@ -1147,7 +1153,7 @@ export default {
       this.$refs.oaTable.clearFilter(columnKey);
     },
     doLayout() {
-      this.$refs.oaTable.doLayout();
+      this.$refs.oaTable && this.$refs.oaTable.doLayout();
     },
     sort(prop, order) {
       this.$refs.oaTable.sort(prop, order);
@@ -1537,8 +1543,11 @@ export default {
                   parseInt(util.getStyle(ele, 'margin-bottom'), 10);
               }
             }
-            height -= this.showToolbar ? 45 : 0;
-            height -= this.page === false ? 0 : 46;
+            height -= this.showToolbar
+              ? this.$refs.toolbar.$el.offsetHeight
+              : 0;
+            height -=
+              this.page === false ? 0 : this.$refs.pagination.$el.offsetHeight;
             height -= this.title ? this.$refs.title.offsetHeight : 0;
             height -= parseInt(
               util.getStyle(this.$refs.esTableContent, 'padding-top'),

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

@@ -7,6 +7,7 @@
       row-key="id"
       default-expand-all
       height="500px"
+      :mode="mode"
       :data="theads"
       :thead="thead"
       :tree-props="{ children: 'childHead' }"
@@ -26,6 +27,7 @@ import util from 'eoss-ui/src/utils/util';
 export default {
   name: 'Sizer',
   props: {
+    mode: String,
     data: Array
   },
   computed: {