eoss-ui 0.3.97

package/packages/data-table/src/mixins/table.js

@@ -0,0 +1,12 @@
+export default {
+  methods: {
+    showTemplate(item) {
+      if (item.type) {
+        item.type.toLowerCase();
+      }
+      return (
+        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(item.type) > -1) ||
+        ['space', 'slot', 'handle', 'template'].indexOf(item.type) > -1);
+    }
+  }
+};

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

@@ -0,0 +1,160 @@
+<template>
+  <es-dialog v-if="theads.length" title="设置" :visible.sync="visible">
+    <es-data-table
+      v-if="visible"
+      numbers
+      form
+      row-key="id"
+      default-expand-all
+      height="500px"
+      :data="theads"
+      :thead="thead"
+      :tree-props="{ children: 'childHead' }"
+      @change="handleChange"
+    >
+    </es-data-table>
+    <div class="sizer-btn-box">
+      <el-button type="primary" size="medium" @click="handleConfirm"
+        >确定</el-button
+      >
+    </div>
+  </es-dialog>
+</template>
+
+<script type="text/babel">
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'Sizer',
+  props: {
+    data: Array
+  },
+  computed: {
+    theads: {
+      get() {
+        if (this.data && this.data.length) {
+          let thead = [];
+          this.getThead(this.data, thead);
+          return thead;
+        }
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      thead: [
+        {
+          title: '标题',
+          field: 'title'
+        },
+        {
+          title: '列固定位置',
+          field: 'fixed',
+          type: 'select',
+          clearable: true,
+          width: 160,
+          data: [
+            {
+              value: 'left',
+              name: '左'
+            },
+            {
+              value: 'right',
+              name: '右'
+            }
+          ]
+        },
+        {
+          title: '显示列',
+          field: 'hide',
+          type: 'switch',
+          width: 160,
+          align: 'center',
+          data: [
+            {
+              value: false,
+              name: '隐藏'
+            },
+            {
+              value: true,
+              name: '显示'
+            }
+          ]
+        }
+      ],
+      id: 1,
+      newThead: []
+    };
+  },
+  mounted() {
+    this.newThead = util.extend(true, [], this.data);
+  },
+  methods: {
+    show() {
+      this.visible = true;
+    },
+    getThead(res, data) {
+      res.forEach(item => {
+        if (
+          item.type !== 'index' &&
+          item.type !== 'selection' &&
+          item.type !== 'handle'
+        ) {
+          let { fixed, hide, childHead, children, title, ...other } = item;
+          let items = {
+            title: title ? title : item.label,
+            fixed:
+              fixed === true
+                ? 'left'
+                : fixed === undefined || fixed === false
+                ? ''
+                : fixed,
+            hide: hide ? false : true,
+            id: this.id,
+            ...other
+          };
+          this.id++;
+          if (childHead && childHead.length) {
+            let childHeads = [];
+            this.getThead(childHead, childHeads);
+            items.childHead = childHeads;
+          }
+          if (children && children.length) {
+            let childHeads = [];
+            this.getThead(children, childHeads);
+            items.children = childHeads;
+          }
+          data.push(items);
+        }
+      });
+    },
+    setThead(res, thead) {
+      let { name, value, data } = res;
+      for (let i in thead) {
+        let item = thead[i];
+        if (data.field === item.field) {
+          thead[i][name] = name === 'hide' ? !value : value;
+          thead[i].hide === false && delete thead[i].hide;
+          break;
+        } else {
+          if (item.childHead && item.childHead.length) {
+            this.setThead(res, item.childHead);
+          }
+          if (item.children && item.children.length) {
+            this.setThead(res, item.children);
+          }
+        }
+      }
+    },
+    handleChange(res) {
+      this.setThead(res, this.newThead);
+    },
+    handleConfirm() {
+      this.visible = false;
+      this.$parent.show = false;
+      this.$parent.mergeThead(this.newThead);
+    }
+  }
+};
+</script>

package/packages/data-table-form/index.js

@@ -0,0 +1,5 @@
+import EsDataTableForm from './src/main';
+
+EsDataTableForm.install = Vue => Vue.component(EsDataTableForm.name, EsDataTableForm);
+
+export default EsDataTableForm;

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

@@ -0,0 +1,17 @@
+<template>
+  <colgroup>
+    <col v-if="numbers" width="56" />
+    <template v-for="(item, index) in cols">
+      <col :width="item.width" :key="index" />
+    </template>
+  </colgroup>
+</template>
+<script>
+export default {
+  name: 'EoColgroup',
+  props: {
+    numbers: Boolean,
+    cols: Array
+  }
+};
+</script>

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

@@ -0,0 +1,167 @@
+<script>
+import util from 'eoss-ui/src/utils/util';
+import { findSysCode } from 'eoss-ui/src/config/api.js';
+import store from 'eoss-ui/src/utils/store';
+//import rules from 'eoss-ui/src/utils/rules.js';
+import eoTable from './table.vue';
+export default {
+  name: 'EsDataTableForm',
+  inheritAttrs: false,
+  components: {
+    [eoTable.name]: eoTable
+  },
+  provide() {},
+  inject: {
+    elForm: {
+      default: ''
+    }
+  },
+  props: {
+    params: Object,
+    full: Boolean,
+    readonly: Boolean,
+    numbers: Boolean,
+    data: Array,
+    url: String,
+    thead: Array,
+    optionData: Object,
+    page: [Boolean, Object]
+  },
+  data() {
+    return {
+      result: null,
+      option: {}
+    };
+  },
+  computed: {
+    models: {
+      get() {
+        return this.data ? this.data : this.result;
+      },
+      set(val) {
+        return val;
+      }
+    },
+    cols() {
+      let col = [];
+      this.theads.forEach(items => {
+        if (Array.isArray(items)) {
+          items.forEach(item => {
+            if (!item.rowspan || item.rowspan < 2) {
+              col.push(item);
+            }
+          });
+        } else {
+          col.push(items);
+        }
+      });
+      return col;
+    },
+    theads() {
+      return this.thead && util.isObject(this.thead[0])
+        ? [this.thead]
+        : this.thead;
+    },
+    types() {
+      let types = [];
+      this.theads.forEach(items => {
+        if (Array.isArray(items)) {
+          items.forEach(item => {
+            if (item.type && item.type !== 'text' && item.type !== 'textarea') {
+              types.push(item);
+            }
+          });
+        } else if (
+          items.type &&
+          items.type !== 'text' &&
+          items.type !== 'textarea'
+        ) {
+          types.push(items);
+        }
+      });
+      return types;
+    },
+    options() {
+      return this.optionData ? this.optionData : this.option;
+    }
+  },
+  watch: {
+    theads: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val) {
+          val.forEach(items => {
+            if (Array.isArray(items)) {
+              items.forEach(item => {
+                this.getOptions(item);
+              });
+            } else {
+              this.getOptions(items);
+            }
+          });
+        }
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    getOptions(item) {
+      if (item.sysCode || item.url) {
+        let params = util.extend(
+          {},
+          item.sysCode ? { sysAppCode: item.sysCode } : {},
+          item.param ? item.param : {}
+        );
+        util
+          .ajax({
+            url: item.sysCode ? findSysCode : item.url,
+            method: this.method,
+            params: params,
+            data: params
+          })
+          .then(res => {
+            if (res.rCode === 0) {
+              this.option[item.field || item.prop] = JSON.parse(
+                JSON.stringify(res.results)
+              );
+              if (item.sysCode) {
+                store.set(
+                  item.sysCode,
+                  JSON.parse(JSON.stringify(res.results))
+                );
+              }
+            } else {
+              let msg = res.msg || '系统错误，请联系管理员！';
+              this.$message.error(msg);
+            }
+          })
+          .catch(err => {
+            if (err.message && err.message !== 'canceled') {
+              this.$message.error(err.message);
+            }
+          });
+      }
+    }
+  },
+  render(h) {
+    let tag = this.elForm ? 'div' : 'form';
+    return h(tag, {}, [
+      h('eo-table', {
+        props: {
+          cols: this.cols,
+          thead: this.theads,
+          numbers: this.numbers,
+          cols: this.cols,
+          data: this.models,
+          types: this.types,
+          options: this.options,
+          page: this.page
+        },
+        on: this.$listeners
+      })
+    ]);
+  }
+};
+</script>

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

@@ -0,0 +1,192 @@
+<template>
+  <div class="es-data-form">
+    <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-select
+          v-if="item.type === 'select' && selectShow"
+          class="es-data-table-form-handle"
+          v-bind="exclAttribute({ data: item, attrs: 'width' })"
+          v-model="selectValue"
+          ref="tableSelect"
+          :style="style"
+          :data="options[item.field || item.prop]"
+          @hideMenu="selectShow = false"
+          @change="
+            value => {
+              handleChange('date', 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="style"
+          @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
+    };
+  },
+  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,
+      style: {},
+      dateValue: '',
+      dateShow: false
+    };
+  },
+  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;
+      }
+    },
+    setStyle(res, data, field) {
+      this.style.left = res ? res.left + 'px' : '';
+      this.style.top = res ? res.top + 'px' : '';
+      this.style.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;
+      }
+    },
+    sizeChange() {},
+    currentChange() {},
+    preClick() {},
+    nextClick() {}
+  }
+};
+</script>