eoss-mobiles 0.1.13

package/packages/table/src/main.vue

@@ -0,0 +1,830 @@
+<script>
+import { Table } from 'element-ui';
+import 'element-ui/lib/theme-chalk/table.css';
+import request from 'eoss-mobile/src/utils/http';
+import util from 'eoss-mobile/src/utils/util';
+export default {
+  name: 'EmTable',
+  components: { Table },
+  inheritAttrs: false,
+  props: {
+    thead: {
+      type: Array,
+      default: () => []
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    checkbox: {
+      type: Boolean,
+      default: false
+    },
+    // 开启分页
+    page: {
+      type: [Boolean, Object],
+      default() {
+        return false;
+      }
+    },
+    numbers: {
+      type: Boolean,
+      default: false
+    },
+    selectable: Function,
+    reserveSelection: Boolean,
+    full: {
+      type: Boolean,
+      default: true
+    },
+    height: [Number, String],
+    maxHeight: [Number, String],
+    form: {
+      type: Boolean,
+      default: false
+    },
+    optionData: Object,
+    //本地数据总条数差值
+    lose: {
+      type: Number,
+      default: 0
+    },
+    param: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    method: {
+      type: String,
+      default: 'get'
+    },
+    format: {
+      type: Boolean,
+      default: true
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    // 默认选中,类型为Boolean时默认全(不)选
+    checked: {
+      type: [Boolean, Array],
+      default: false
+    }
+  },
+  data() {
+    return {
+      selected: null,
+      pageChange: false,
+      tableHeight: 'auto',
+      options: {},
+      theadData: [],
+      list: null,
+      wheres: {},
+      config: {
+        pageNum: 1,
+        pageSize: 20,
+        totalCount: 0
+      },
+      isFirsetCheck: false
+    };
+  },
+  watch: {
+    checked(newVal) {
+      this.checkSelect(newVal);
+    },
+    page: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        this.config = util.extend({}, this.config, this.page);
+      }
+    },
+    thead: {
+      immediate: true,
+      handler(val) {
+        if (typeof val === 'string') {
+          this.getTheads();
+        }
+      }
+    },
+    height: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.tableHeight = val;
+        }
+      }
+    },
+    maxHeight: {
+      immediate: true,
+      handler(val) {
+        if (val && this.height === undefined) {
+          this.tableHeight = val;
+        }
+      }
+    }
+  },
+  mounted() {
+    // this.resetHeight();
+    this.getTableData();
+    this.checkSelect(this.checked);
+  },
+  computed: {
+    theads() {
+      return typeof this.thead === 'string' ? this.theadData : this.thead;
+    },
+    optionDatas() {
+      return this.optionData ? this.optionData : this.options;
+    },
+    datas: {
+      get() {
+        if (this.list) {
+          return this.list;
+        }
+        if (
+          this.page &&
+          this.data &&
+          this.data.length &&
+          this.config.totalCount < this.data.length + 1
+        ) {
+          this.config.totalCount = this.data.length - this.lose;
+          return this.data.filter((item, index) => {
+            return (
+              index > (this.config.pageNum - 1) * this.config.pageSize - 1 &&
+              index < this.config.pageNum * this.config.pageSize
+            );
+          });
+        }
+
+        return this.data;
+      },
+      set(val) {
+        return val;
+      }
+    }
+  },
+  methods: {
+    toggleAllSelection() {
+      this.$refs.oaTable.toggleAllSelection();
+    },
+    checkSelect(newVal) {
+      if (!this.isFirsetCheck && newVal) {
+        if (util.getObjectType(newVal) === 'array') {
+          newVal.forEach(row => {
+            this.$refs.oaTable.toggleRowSelection(row, true);
+          });
+        } else if (newVal === true) {
+          this.toggleAllSelection();
+        }
+        this.isFirsetCheck = true;
+      }
+    },
+    getTableData(res) {
+      let where;
+      let first;
+      if (res) {
+        where = res.where;
+        first = res.first;
+      }
+      if (!this.url) {
+        return;
+      }
+      if (first !== false) {
+        this.config.pageNum = 1;
+      }
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        overlay: true,
+        duration: 0
+      });
+      let reqData = util.extend({}, this.param, {
+        pageNum: this.config.pageNum,
+        pageSize: this.config.pageSize
+      });
+      if (where) {
+        reqData = util.extend({}, reqData, where);
+      }
+      util
+        .ajax({
+          url: this.url,
+          method: this.method,
+          format: this.format,
+          params: reqData,
+          data: reqData
+        })
+        .then(res => {
+          if (res.rCode === 0 || res.status === 'success') {
+            let results =
+              this.parseData !== undefined
+                ? this.parseData(res.results || res.data || res)
+                : res.results || res.data;
+            this.list = results.data || results.records || results.list || [];
+            this.config.totalCount =
+              results.count || results.total || results.totalCount;
+          } else {
+            this.list = [];
+          }
+          this.$toast.clear();
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          this.$toast.clear();
+          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
+            return;
+          }
+          if (util.getObjectType(err) === 'string') {
+            this.$toast(err);
+          } else {
+            this.$toast(err.message || '数据加载失败，请联系管理员！');
+          }
+        });
+    },
+    currentChange(res) {
+      this.pageChange = true;
+      setTimeout(() => {
+        this.pageChange = false;
+      }, 10);
+      this.config.pageNum = res;
+      this.$emit('page-current-change', res);
+      if (this.url) {
+        this.getTableData({ where: this.wheres, first: false });
+      }
+    },
+    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;
+            }
+          } else {
+            this.theadData = [];
+          }
+          this.$emit('success', res);
+        })
+        .catch(err => {
+          if (err && err.code && [64, 65, 67].indexOf(err.code) > -1) {
+            return;
+          }
+          if (util.getObjectType(err) === 'string') {
+            this.$message.error(err);
+          } else {
+            this.$message.error(err.message || '数据加载失败，请联系管理员！');
+          }
+        });
+    },
+    getTableColumns(data, name) {
+      this.optionDatas[name] = data;
+    },
+    formBlur(data) {
+      this.$emit('blur', data, this.datas);
+    },
+    formFocus(data) {
+      this.$emit('focus', data, this.datas);
+    },
+    formChange(data) {
+      if (this.pageChange) return;
+      if (data.type) {
+        this.pageChange = true;
+        setTimeout(() => {
+          this.pageChange = false;
+        }, 20);
+      }
+      this.$emit('edit', data, this.datas);
+    },
+    resetHeight() {
+      this.$nextTick(() => {
+        if (this.full && !this.height && !this.maxHeight) {
+          let height =
+            this.$el.parentNode.offsetHeight -
+            parseInt(util.getStyle(this.$el.parentNode, 'paddingTop'), 10) -
+            parseInt(util.getStyle(this.$el.parentNode, 'paddingBottom'), 10);
+          for (let i = 0; i < this.$el.parentNode.childNodes.length; i++) {
+            let ele = this.$el.parentNode.childNodes[i];
+            if (ele !== this.$el) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          for (let i = 0; i < this.$el.childNodes.length; i++) {
+            let ele = this.$el.childNodes[i];
+            if (ele !== this.$refs.esTableContent) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          this.styles = { height: height + 'px' };
+          const loadingDom = this.$refs.esTableContent.querySelector(
+            '.el-loading-mask'
+          );
+          for (
+            let i = 0;
+            i < this.$refs.esTableContent.childNodes.length;
+            i++
+          ) {
+            let ele = this.$refs.esTableContent.childNodes[i];
+            if (
+              ele !== this.$refs.oaTable.$el &&
+              (!loadingDom || ele !== loadingDom)
+            ) {
+              height -= ele.offsetHeight === undefined ? 0 : ele.offsetHeight;
+            }
+          }
+          let pt = parseInt(
+            util.getStyle(this.$refs.esTableContent, 'paddingTop'),
+            10
+          );
+          let pb = parseInt(
+            util.getStyle(this.$refs.esTableContent, 'paddingBottom'),
+            10
+          );
+          this.tableHeight = height - pt - pb + (this.page ? 2 : 1) + 'px';
+        }
+      });
+    },
+    handleAjax(handle, row) {
+      this.$toast.loading({
+        message: '加载中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        overlay: true,
+        duration: 0
+      });
+      let params = handle.param || {};
+      if (handle.syncKeys) {
+        if (typeof handle.syncKeys === 'string') {
+          params[handle.syncKeys] = row[handle.syncKeys];
+        } else if (Array.isArray(handle.syncKeys)) {
+          for (let i in handle.syncKeys) {
+            if (Array.isArray(row)) {
+              let param = row.map(item => {
+                return item[handle.syncKeys[i]];
+              });
+              params[handle.syncKeys[i]] = param.join(',');
+            } else {
+              params[handle.syncKeys[i]] = row[handle.syncKeys[i]];
+            }
+          }
+        } else {
+          for (let i in handle.syncKeys) {
+            if (Array.isArray(row)) {
+              let param = row.map(item => {
+                return item[handle.syncKeys[i]];
+              });
+              params[i] = param.join(',');
+            } else {
+              params[i] = row[handle.syncKeys[i]];
+            }
+          }
+        }
+      } else {
+        if (Array.isArray(row)) {
+          let param = row.map(item => {
+            return item.id;
+          });
+          params.id = param.join(',');
+        } else {
+          params.id = row.id;
+        }
+      }
+      let keys = Object.keys(params);
+      request({
+        url: handle.action,
+        data:
+          keys.length == 1 && handle.format === false
+            ? params[keys[0]].split(',')
+            : params,
+        params:
+          keys.length == 1 && handle.format === false
+            ? params[keys[0]].split(',')
+            : params,
+        method: handle.method,
+        format: handle.format
+      })
+        .then(res => {
+          this.$toast.clear();
+          if (res.rCode === 0) {
+            this.$message({
+              message: `${handle.text}成功`,
+              duration: 2000,
+              type: 'success',
+              onClose: () => {
+                let first = Object.prototype.hasOwnProperty.call(
+                  handle,
+                  'first'
+                )
+                  ? handle.first
+                  : false;
+                let reload = handle.reload || true;
+                if (reload) {
+                  this.reload({}, first);
+                }
+              }
+            });
+          } else {
+            this.$toast(res.msg || `${handle.text}失败，请联系管理员！`);
+          }
+        })
+        .catch(() => {});
+    },
+    handleClick(res) {
+      let { row, handle } = res;
+      let rows;
+      if (handle.checkbox) {
+        if (!this.selected || !this.selected.length) {
+          this.$alert('请选择数据', '提示', { type: 'warning' });
+          return;
+        } else {
+          row = this.selected;
+        }
+      }
+      if (this.checkboxParseData) {
+        rows = this.checkboxParseData(JSON.parse(JSON.stringify(row)));
+      } else if (this.checkboxParse) {
+        rows = this.checkParse(row, this.checkboxParse);
+      } else if (handle.checkboxParse) {
+        rows = this.checkParse(row, handle.checkboxParse);
+      } else if (row) {
+        rows = JSON.parse(JSON.stringify(row));
+      }
+      let thead = this.thead;
+      if (this.$refs.oaTable) {
+        thead = this.$refs.oaTable.getThead();
+      }
+      if (handle.action) {
+        let isConfirm = handle.confirm || true;
+        if (isConfirm) {
+          let msg = handle.field ? row[handle.field] : '';
+          this.$dialog
+            .confirm({
+              message: `确定要${handle.text}${msg}吗`,
+              title: '提示',
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+            .then(() => {
+              this.handleAjax(handle, rows);
+            })
+            .catch(() => {});
+        } else {
+          this.handleAjax(handle, rows);
+        }
+      } else if (handle.event) {
+        if (typeof handle.event === 'function') {
+          handle.event({
+            ele: this,
+            thead: thead,
+            data: this.datas,
+            ...res
+          });
+        } else if (
+          handle.event === 'add' ||
+          handle.event === 'edit' ||
+          handle.event === 'look'
+        ) {
+          let changes = {
+            event: handle.event,
+            title: handle.title || handle.text,
+            values: handle.event === 'add' ? {} : rows,
+            readonly: handle.event === 'look',
+            actionType: handle.actionType
+              ? handle.actionType
+              : handle.event === 'add'
+              ? 'save'
+              : 'update'
+          };
+          if (handle.dialog && this.$parent.$attrs[handle.dialog]) {
+            this.$parent.$attrs[handle.dialog].handleShow();
+          } else {
+            changes['visible'] = true;
+          }
+          if (handle.tabs) {
+            this.esTabs && this.esTabs.handleChangeData(changes);
+          } else if (handle.flowGroup) {
+            this.esFlowGroup && this.esFlowGroup.handleChangeData(changes);
+          } else {
+            this.esPage && this.esPage.handleChangeData(changes);
+          }
+        }
+      } else if (handle.changeData) {
+        let changeData = {};
+        if (Array.isArray(handle.changeData)) {
+          handle.changeData.forEach(item => {
+            if (util.isObject(item)) {
+              for (let i in item) {
+                if (typeof item[i] === 'boolean') {
+                  changeData[i] = item[i];
+                } else {
+                  changeData[i] = handle[item[i]] || item[i];
+                }
+              }
+            } else {
+              changeData[item] =
+                handle[item] || (Array.isArray(rows) ? rows : rows[item]);
+            }
+          });
+        } else {
+          for (let i in handle.changeData) {
+            let item = handle.changeData[i];
+            if (util.isObject(item)) {
+              let obj = {};
+              for (let e in item) {
+                obj[e] =
+                  handle[item[e]] ||
+                  (Array.isArray(rows) ? rows : rows[item[e]]);
+              }
+              changeData[i] = obj;
+            } else {
+              if (typeof item === 'boolean') {
+                changeData[i] = item;
+              } else {
+                changeData[i] =
+                  handle[item] || (Array.isArray(rows) ? rows : rows[item]);
+              }
+            }
+          }
+        }
+        if (handle.actionType) {
+          changeData['actionType'] = handle.actionType;
+        }
+        if (handle.tabs) {
+          this.esTabs && this.esTabs.handleChangeData(changeData);
+        } else if (handle.flowGroup) {
+          this.esFlowGroup && this.esFlowGroup.handleChangeData(changeData);
+        } else {
+          this.esPage && this.esPage.handleChangeData(changeData);
+        }
+      } else {
+        if (handle.exportXls) {
+          let text = '操作';
+          if (
+            this.thead[this.thead.length - 1] &&
+            this.thead[this.thead.length - 1].type === 'handle'
+          ) {
+            text = this.thead[this.thead.length - 1].title;
+          }
+          thead = thead.map(item => {
+            return item.filter(ele => {
+              return ele.label !== text && ele.label;
+            });
+          });
+          util.exportXls({
+            thead: thead,
+            data: this.datas,
+            name: this.fileName
+          });
+        }
+        this.$emit('btnClick', res, this.datas, thead);
+        this.$emit('btn-click', res, this.datas, thead);
+      }
+    },
+    selectionChange(data) {
+      this.selected = JSON.parse(JSON.stringify(data));
+      this.$emit('selection-change', data);
+    },
+    rowClick(row, column, event) {
+      this.$emit('click', row, column, event);
+      this.$emit('row-click', row, column, event);
+    },
+    getChildrens(h, items) {
+      let doms = [];
+      items.childHead.forEach((item, index) => {
+        if (!item.hide) {
+          let childs = [];
+          if (item.childHead && item.childHead.length) {
+            childs = this.getChildrens(h, item);
+          }
+          doms.push(
+            h(
+              'em-table-column',
+              {
+                props: {
+                  name: this.name,
+                  item: item,
+                  prop: item.field,
+                  label: item.title,
+                  width: item.width,
+                  index: index + 1000,
+                  readonly: this.readonly,
+                  optionData: this.optionDatas,
+                  form: this.form,
+                  minWidth: this.minWidth
+                },
+                on: {
+                  handleClick: this.handleClick,
+                  formBlur: this.formBlur,
+                  formFocus: this.formFocus,
+                  tableColumns: this.getTableColumns,
+                  formChange: this.formChange
+                }
+              },
+              childs
+            )
+          );
+        }
+      });
+      return doms;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return 'em-row';
+      }
+      return '';
+    },
+    tableHeader() {
+      return 'em-table-header';
+    }
+  },
+  render(h) {
+    let tag = 'div';
+    let dom = [];
+    if (this.$slots.prepend) {
+      dom.push(this.$slots.prepend);
+    }
+    if (this.$slots.default) {
+      dom.push(this.$slots.default);
+    }
+    // 开启多选
+    if (this.checkbox) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            type: 'selection',
+            width: '55',
+            align: 'center',
+            fixed: 'left',
+            selectable: this.selectable,
+            reserveSelection: this.reserveSelection
+          }
+        })
+      );
+    }
+    // 开启索引
+    if (this.numbers) {
+      dom.push(
+        h('el-table-column', {
+          props: {
+            type: 'index',
+            label: '序号',
+            width: '60',
+            align: 'center',
+            fixed: 'left'
+          }
+        })
+      );
+    }
+    this.theads.forEach((items, indexs) => {
+      if (
+        items.type &&
+        (items.type === 'selection' || items.type === 'index')
+      ) {
+        if (items.type === 'index') {
+          dom.push(
+            h('em-table-column', {
+              props: util.extend(
+                {},
+                {
+                  type: 'index',
+                  label: '序号',
+                  width: '60',
+                  align: 'center',
+                  fixed: 'left'
+                },
+                items
+              ),
+
+              key: indexs
+            })
+          );
+        } else {
+          dom.push(
+            h('em-table-column', {
+              props: util.extend(
+                {},
+                {
+                  type: 'selection',
+                  width: '55',
+                  align: 'center',
+                  fixed: 'left'
+                },
+                items
+              ),
+
+              key: indexs
+            })
+          );
+        }
+      } else if (!items.hide) {
+        let tds = [];
+        if (items.childHead && items.childHead.length) {
+          tds = this.getChildrens(h, items);
+        }
+        dom.push(
+          h(
+            'em-table-column',
+            {
+              props: {
+                name: this.name,
+                prop: items.field,
+                label: items.title,
+                item: items,
+                width: items.width,
+                index: indexs,
+                readonly: this.readonly,
+                optionData: this.optionDatas,
+                form: this.form,
+                minWidth: this.minWidth
+              },
+              on: {
+                handleClick: this.handleClick,
+                formBlur: this.formBlur,
+                formFocus: this.formFocus,
+                tableColumns: this.getTableColumns,
+                formChange: this.formChange
+              },
+              key: indexs
+            },
+            tds
+          )
+        );
+      }
+    });
+    let tableContents = [];
+    tableContents.push(
+      h(
+        'el-table',
+        {
+          // ref: ref,
+          class: 'em-table',
+          attrs: {
+            'row-class-name': this.tableRowClassName,
+            'header-row-class-name': this.tableHeader,
+            data: this.datas,
+            ...this.$attrs,
+            height: this.tableHeight !== 'auto' ? this.tableHeight : undefined
+          },
+          on: {
+            ...this.$listeners,
+            'row-click': this.rowClick,
+            'selection-change': this.selectionChange
+          },
+          ref: 'oaTable'
+        },
+        dom
+      )
+    );
+    if (this.page) {
+      tableContents.push(
+        h('em-pagination', {
+          attrs: {
+            // ...this.config,
+            value: this.config.pageNum,
+            'items-per-page': this.config.pageSize,
+            'total-items': this.config.totalCount
+          },
+          class: 'em-table-page',
+          style: { 'text-align': this.page.position || 'center' },
+          on: {
+            change: this.currentChange
+          }
+        })
+      );
+    }
+    return h(
+      'div',
+      {
+        // ref: ref,
+        // attrs: {
+        //   'row-class-name': this.tableRowClassName,
+        //   'header-row-class-name': this.tableHeader,
+        //   data: this.data,
+        //   ...this.$attrs,
+        //   height: this.tableHeight !== 'auto' ? this.tableHeight : undefined
+        // },
+        // on: {
+        //   ...this.$listeners,
+        //   'row-click': this.rowClick,
+        //   'selection-change': this.selectionChange
+        // }
+      },
+      tableContents
+    );
+  }
+};
+</script>