eoss-ui 0.7.76 → 0.7.77

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

@@ -1,233 +1,233 @@
-<template>
-  <div class="es-data-form" :class="{ 'es-data-form-haspage': page }">
-    <el-scrollbar class="es-scrollbar" :style="{ height: height }">
-      <table
-        class="es-data-table-form"
-        border="1"
-        cellspacing="0"
-        cellpadding="0"
-      >
-        <eo-colgroup :cols="cols" :numbers="numbers"></eo-colgroup>
-        <eo-thead :thead="thead" :numbers="numbers"></eo-thead>
-        <eo-tbody
-          :readonly="readonly"
-          :numbers="numbers"
-          :cols="cols"
-          :data="data"
-          :options="options"
-        ></eo-tbody>
-      </table>
-    </el-scrollbar>
-    <es-pagination
-      v-if="page"
-      v-bind="config"
-      class="es-table-page"
-      @change="sizeChange"
-      @current="currentChange"
-      @prev="preClick"
-      @next="nextClick"
-    ></es-pagination>
-    <template v-if="types && options">
-      <template v-for="(item, index) in types">
-        <es-dialog
-          v-if="item.type === 'selector' && selectorShow"
-          :title="item.title || '公用选择器'"
-          :visible.sync="selectorShow"
-          :css="false"
-          :append-to-body="true"
-          :close-on-click-modal="false"
-          class="es-selector-dialog"
-        >
-          <es-selector-panel
-            v-model="selectorValue"
-            v-bind="exclAttribute({ data: item, attrs: 'type' })"
-            width="100%"
-            height="100%"
-            @confirm="handleConfirm"
-          ></es-selector-panel>
-        </es-dialog>
-        <es-select
-          v-else-if="item.type === 'select' && selectShow"
-          class="es-data-table-form-handle"
-          :suffix="false"
-          v-bind="exclAttribute({ data: item, attrs: 'width' })"
-          v-model="selectValue"
-          ref="tableSelect"
-          :style="styles"
-          :data="options[item.field || item.prop]"
-          @hide-menu="selectShow = false"
-          @change="
-            (value) => {
-              handleChange('select', value);
-            }
-          "
-        ></es-select>
-        <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') &&
-            dateShow
-          "
-          class="es-data-table-form-handle"
-          v-bind="exclAttribute({ data: item, attrs: 'width' })"
-          v-model="dateValue"
-          ref="tableDate"
-          :style="styles"
-          @hidePicker="dateShow = false"
-          @change="
-            (value) => {
-              handleChange('date', value);
-            }
-          "
-        ></es-date-picker>
-      </template>
-    </template>
-  </div>
-</template>
-<script>
-import util from 'eoss-ui/src/utils/util';
-//import rules from 'eoss-ui/src/utils/rules.js';
-import eoColgroup from './colgroup.vue';
-import eoThead from './thead.vue';
-import eoTbody from './tbody.vue';
-export default {
-  name: 'EoTable',
-  inheritAttrs: false,
-  components: {
-    [eoColgroup.name]: eoColgroup,
-    [eoThead.name]: eoThead,
-    [eoTbody.name]: eoTbody
-  },
-  provide() {
-    return {
-      eoTable: this
-    };
-  },
-  inject: {
-    esDialog: {
-      default: ''
-    }
-  },
-  props: {
-    height: String,
-    readonly: Boolean,
-    numbers: Boolean,
-    data: Array,
-    cols: Array,
-    thead: Array,
-    types: Array,
-    options: Object,
-    page: [Boolean, Object]
-  },
-  computed: {
-    config() {
-      let config = {
-        pageNum: 1,
-        pageSize: 20,
-        totalCount: 0
-      };
-      return this.page && typeof this.page === 'boolean'
-        ? config
-        : { ...config, ...this.page };
-    }
-  },
-  data() {
-    return {
-      selectValue: '',
-      selectShow: false,
-      target: null,
-      field: null,
-      styles: {},
-      dateValue: '',
-      dateShow: false,
-      selectorShow: false,
-      selectorValue: ''
-    };
-  },
-  watch: {
-    selectShow(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.tableSelect[0].toggleMenu();
-        });
-      }
-    },
-    dateShow(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.tableDate[0].showPicker();
-        });
-      }
-    }
-  },
-  methods: {
-    exclAttribute({ data, attrs }) {
-      return util.exclAttribute({ data, attrs });
-    },
-    changeData(type, value) {
-      switch (type) {
-        case 'select':
-          this.selectValue = value;
-          this.selectShow = true;
-          break;
-        case 'date':
-          this.dateValue = value;
-          this.dateShow = true;
-          break;
-        case 'selector':
-          this.selectorValue = value;
-          this.selectorShow = true;
-          break;
-      }
-    },
-    setStyle(res, data, field) {
-      let left = 0;
-      let top = 0;
-      if (this.esDialog) {
-        let style = this.esDialog.getDialog().getBoundingClientRect();
-        left = style.left;
-        top = style.top;
-      }
-      this.styles.left = res ? res.left - left + 'px' : '';
-      this.styles.top = res ? res.top - top + 'px' : '';
-      this.styles.width = res ? res.width + 'px' : '';
-      this.target = data;
-      this.field = field;
-    },
-    handleBlur() {},
-    handleChange(type, res) {
-      this.target[this.field] = res;
-      switch (type) {
-        case 'select':
-          this.selectShow = false;
-          this.selectValue = '';
-          break;
-        case 'date':
-          this.dateShow = false;
-          this.dateValue = '';
-          break;
-      }
-    },
-    handleConfirm(res) {
-      this.selectorValue = '';
-      this.selectorShow = false;
-      this.target[this.field] = res;
-    },
-    sizeChange() {},
-    currentChange() {},
-    preClick() {},
-    nextClick() {}
-  }
-};
-</script>
+<template>
+  <div class="es-data-form" :class="{ 'es-data-form-haspage': page }">
+    <el-scrollbar class="es-scrollbar" :style="{ height: height }">
+      <table
+        class="es-data-table-form"
+        border="1"
+        cellspacing="0"
+        cellpadding="0"
+      >
+        <eo-colgroup :cols="cols" :numbers="numbers"></eo-colgroup>
+        <eo-thead :thead="thead" :numbers="numbers"></eo-thead>
+        <eo-tbody
+          :readonly="readonly"
+          :numbers="numbers"
+          :cols="cols"
+          :data="data"
+          :options="options"
+        ></eo-tbody>
+      </table>
+    </el-scrollbar>
+    <es-pagination
+      v-if="page"
+      v-bind="config"
+      class="es-table-page"
+      @change="sizeChange"
+      @current="currentChange"
+      @prev="preClick"
+      @next="nextClick"
+    ></es-pagination>
+    <template v-if="types && options">
+      <template v-for="(item, index) in types">
+        <es-dialog
+          v-if="item.type === 'selector' && selectorShow"
+          :title="item.title || '公用选择器'"
+          :visible.sync="selectorShow"
+          :css="false"
+          :append-to-body="true"
+          :close-on-click-modal="false"
+          class="es-selector-dialog"
+        >
+          <es-selector-panel
+            v-model="selectorValue"
+            v-bind="exclAttribute({ data: item, attrs: 'type' })"
+            width="100%"
+            height="100%"
+            @confirm="handleConfirm"
+          ></es-selector-panel>
+        </es-dialog>
+        <es-select
+          v-else-if="item.type === 'select' && selectShow"
+          class="es-data-table-form-handle"
+          :suffix="false"
+          v-bind="exclAttribute({ data: item, attrs: 'width' })"
+          v-model="selectValue"
+          ref="tableSelect"
+          :style="styles"
+          :data="options[item.field || item.prop]"
+          @hide-menu="selectShow = false"
+          @change="
+            (value) => {
+              handleChange('select', value);
+            }
+          "
+        ></es-select>
+        <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') &&
+            dateShow
+          "
+          class="es-data-table-form-handle"
+          v-bind="exclAttribute({ data: item, attrs: 'width' })"
+          v-model="dateValue"
+          ref="tableDate"
+          :style="styles"
+          @hidePicker="dateShow = false"
+          @change="
+            (value) => {
+              handleChange('date', value);
+            }
+          "
+        ></es-date-picker>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util';
+//import rules from 'eoss-ui/src/utils/rules.js';
+import eoColgroup from './colgroup.vue';
+import eoThead from './thead.vue';
+import eoTbody from './tbody.vue';
+export default {
+  name: 'EoTable',
+  inheritAttrs: false,
+  components: {
+    [eoColgroup.name]: eoColgroup,
+    [eoThead.name]: eoThead,
+    [eoTbody.name]: eoTbody
+  },
+  provide() {
+    return {
+      eoTable: this
+    };
+  },
+  inject: {
+    esDialog: {
+      default: ''
+    }
+  },
+  props: {
+    height: String,
+    readonly: Boolean,
+    numbers: Boolean,
+    data: Array,
+    cols: Array,
+    thead: Array,
+    types: Array,
+    options: Object,
+    page: [Boolean, Object]
+  },
+  computed: {
+    config() {
+      let config = {
+        pageNum: 1,
+        pageSize: 20,
+        totalCount: 0
+      };
+      return this.page && typeof this.page === 'boolean'
+        ? config
+        : { ...config, ...this.page };
+    }
+  },
+  data() {
+    return {
+      selectValue: '',
+      selectShow: false,
+      target: null,
+      field: null,
+      styles: {},
+      dateValue: '',
+      dateShow: false,
+      selectorShow: false,
+      selectorValue: ''
+    };
+  },
+  watch: {
+    selectShow(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.tableSelect[0].toggleMenu();
+        });
+      }
+    },
+    dateShow(val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.$refs.tableDate[0].showPicker();
+        });
+      }
+    }
+  },
+  methods: {
+    exclAttribute({ data, attrs }) {
+      return util.exclAttribute({ data, attrs });
+    },
+    changeData(type, value) {
+      switch (type) {
+        case 'select':
+          this.selectValue = value;
+          this.selectShow = true;
+          break;
+        case 'date':
+          this.dateValue = value;
+          this.dateShow = true;
+          break;
+        case 'selector':
+          this.selectorValue = value;
+          this.selectorShow = true;
+          break;
+      }
+    },
+    setStyle(res, data, field) {
+      let left = 0;
+      let top = 0;
+      if (this.esDialog) {
+        let style = this.esDialog.getDialog().getBoundingClientRect();
+        left = style.left;
+        top = style.top;
+      }
+      this.styles.left = res ? res.left - left + 'px' : '';
+      this.styles.top = res ? res.top - top + 'px' : '';
+      this.styles.width = res ? res.width + 'px' : '';
+      this.target = data;
+      this.field = field;
+    },
+    handleBlur() {},
+    handleChange(type, res) {
+      this.target[this.field] = res;
+      switch (type) {
+        case 'select':
+          this.selectShow = false;
+          this.selectValue = '';
+          break;
+        case 'date':
+          this.dateShow = false;
+          this.dateValue = '';
+          break;
+      }
+    },
+    handleConfirm(res) {
+      this.selectorValue = '';
+      this.selectorShow = false;
+      this.target[this.field] = res;
+    },
+    sizeChange() {},
+    currentChange() {},
+    preClick() {},
+    nextClick() {}
+  }
+};
+</script>