md-iview 1.0.12

package/src/components/md-table/iview-table/table-body.vue

@@ -0,0 +1,101 @@
+<template>
+    <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
+        <colgroup>
+            <col v-for="(column, index) in columns" :width="setCellWidth(column)">
+        </colgroup>
+        <tbody :class="[prefixCls + '-tbody']">
+            <template v-for="(row, index) in data">
+                <table-tr
+                    :row="row"
+                    :key="row._rowKey"
+                    :prefix-cls="prefixCls"
+                    @mouseenter.native.stop="handleMouseIn(row._index)"
+                    @mouseleave.native.stop="handleMouseOut(row._index)"
+                    @click.native="clickCurrentRow(row._index)"
+                    @dblclick.native.stop="dblclickCurrentRow(row._index)">
+                    <td v-for="column in columns" :class="alignCls(column, row)">
+                        <Cell
+                            :fixed="fixed"
+                            :prefix-cls="prefixCls"
+                            :row="row"
+                            :key="column._columnKey"
+                            :column="column"
+                            :natural-index="index"
+                            :index="row._index"
+                            :checked="rowChecked(row._index)"
+                            :disabled="rowDisabled(row._index)"
+                            :expanded="rowExpanded(row._index)"
+                        ></Cell>
+                    </td>
+                </table-tr>
+                <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}">
+                    <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
+                        <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
+                    </td>
+                </tr>
+            </template>
+        </tbody>
+    </table>
+</template>
+<script>
+    // todo :key="row"
+    import TableTr from './table-tr.vue';
+    import Cell from './cell.vue';
+    import Expand from './expand.js';
+    import Mixin from './mixin';
+
+    export default {
+        name: 'TableBody',
+        mixins: [ Mixin ],
+        components: { Cell, Expand, TableTr },
+        props: {
+            prefixCls: String,
+            styleObject: Object,
+            columns: Array,
+            data: Array,    // rebuildData
+            objData: Object,
+            columnsWidth: Object,
+            fixed: {
+                type: [Boolean, String],
+                default: false
+            }
+        },
+        computed: {
+            expandRender () {
+                let render = function () {
+                    return '';
+                };
+                for (let i = 0; i < this.columns.length; i++) {
+                    const column = this.columns[i];
+                    if (column.type && column.type === 'expand') {
+                        if (column.render) render = column.render;
+                    }
+                }
+                return render;
+            }
+        },
+        methods: {
+            rowChecked (_index) {
+                return this.objData[_index] && this.objData[_index]._isChecked;
+            },
+            rowDisabled(_index){
+                return this.objData[_index] && this.objData[_index]._isDisabled;
+            },
+            rowExpanded(_index){
+                return this.objData[_index] && this.objData[_index]._isExpanded;
+            },
+            handleMouseIn (_index) {
+                this.$parent.handleMouseIn(_index);
+            },
+            handleMouseOut (_index) {
+                this.$parent.handleMouseOut(_index);
+            },
+            clickCurrentRow (_index) {
+                this.$parent.clickCurrentRow(_index);
+            },
+            dblclickCurrentRow (_index) {
+                this.$parent.dblclickCurrentRow(_index);
+            }
+        }
+    };
+</script>

package/src/components/md-table/iview-table/table-head.vue

@@ -0,0 +1,311 @@
+<template>
+    <table cellspacing="0" cellpadding="0" border="0" :style="styles">
+        <colgroup>
+            <col v-for="(column, index) in columns" :width="setCellWidth(column)">
+            <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
+        </colgroup>
+        <thead>
+        <tr v-for="(cols, rowIndex) in headRows">
+            <th
+                    @mouseup.stop="handleMouseUp($event)"
+                    @mousemove.stop="handleMouseMove($event)"
+                    @mousedown.stop="handleMouseDown($event, column)"
+                    :style="cursorResize"
+                    v-for="(column, index) in cols"
+                    :colspan="column.colSpan"
+                    :rowspan="column.rowSpan"
+                    :class="alignCls(column)">
+                <div :class="cellClasses(column)">
+                    <template v-if="column.type === 'expand'">
+                        <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
+                        <render-header v-else :render="column.renderHeader" :column="column"
+                                       :index="index"></render-header>
+                    </template>
+                    <template v-else-if="column.type === 'selection'">
+                        <Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox>
+                    </template>
+                    <template v-else>
+                        <span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}"
+                              @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
+                        <render-header v-else :render="column.renderHeader" :column="column"
+                                       :index="index"></render-header>
+                        <span :class="[prefixCls + '-sort']" v-if="column.sortable">
+                                <i class="ivu-icon ivu-icon-arrow-up-b"
+                                   :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}"
+                                   @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
+                                <i class="ivu-icon ivu-icon-arrow-down-b"
+                                   :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}"
+                                   @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
+                            </span>
+                        <Poptip
+                                v-if="isPopperShow(column)"
+                                v-model="getColumn(rowIndex, index)._filterVisible"
+                                placement="bottom"
+                                popper-class="ivu-table-popper"
+                                transfer
+                                @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
+                                <span :class="[prefixCls + '-filter']">
+                                    <i class="ivu-icon ivu-icon-funnel"
+                                       :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
+                                </span>
+
+                            <div slot="content" :class="[prefixCls + '-filter-list']"
+                                 v-if="getColumn(rowIndex, index)._filterMultiple">
+                                <div :class="[prefixCls + '-filter-list-item']">
+                                    <checkbox-group v-model="getColumn(rowIndex, index)._filterChecked">
+                                        <checkbox v-for="(item, index) in column.filters" :key="index"
+                                                  :label="item.value">{{ item.label }}
+                                        </checkbox>
+                                    </checkbox-group>
+                                </div>
+                                <div :class="[prefixCls + '-filter-footer']">
+                                    <i-button type="text" size="small"
+                                              :disabled="!getColumn(rowIndex, index)._filterChecked.length"
+                                              @click.native="handleFilter(getColumn(rowIndex, index)._index)">{{
+                                        t('i.table.confirmFilter') }}
+                                    </i-button>
+                                    <i-button type="text" size="small"
+                                              @click.native="handleReset(getColumn(rowIndex, index)._index)">{{
+                                        t('i.table.resetFilter') }}
+                                    </i-button>
+                                </div>
+                            </div>
+                            <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
+                                <ul :class="[prefixCls + '-filter-list-single']">
+                                    <li
+                                            :class="itemAllClasses(getColumn(rowIndex, index))"
+                                            @click="handleReset(getColumn(rowIndex, index)._index)">{{
+                                        t('i.table.clearFilter') }}
+                                    </li>
+                                    <li
+                                            :class="itemClasses(getColumn(rowIndex, index), item)"
+                                            v-for="item in column.filters"
+                                            @click="handleSelect(getColumn(rowIndex, index)._index, item.value)">{{
+                                        item.label }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </Poptip>
+                    </template>
+                </div>
+            </th>
+
+            <th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()'
+                :rowspan="headRows.length"></th>
+        </tr>
+        </thead>
+    </table>
+</template>
+<script>
+  // import CheckboxGroup from '../checkbox/checkbox-group.vue';
+  // import Checkbox from '../checkbox/checkbox.vue';
+  // import Poptip from '../poptip/poptip.vue';
+  // import iButton from '../button/button.vue';
+  import iButton from 'iview/src/components/button/button';
+  import renderHeader from './header';
+  import Mixin from './mixin';
+  import Locale from 'iview/src/mixins/locale';
+
+  export default {
+    name: 'TableHead',
+    mixins: [Mixin, Locale],
+    // components: { CheckboxGroup, Checkbox, Poptip, iButton, renderHeader },
+    components: {iButton, renderHeader},
+    props: {
+      prefixCls: String,
+      styleObject: Object,
+      columns: Array,
+      objData: Object,
+      data: Array,    // rebuildData
+      columnsWidth: Object,
+      fixed: {
+        type: [Boolean, String],
+        default: false
+      },
+      columnRows: Array,
+      fixedColumnRows: Array
+    },
+    computed: {
+      styles() {
+        const style = Object.assign({}, this.styleObject);
+        const width = parseInt(this.styleObject.width);
+        style.width = `${width}px`;
+        return style;
+      },
+      isSelectAll() {
+        let isSelectAll = true;
+        if (!this.data.length) isSelectAll = false;
+        if (!this.data.find(item => !item._disabled)) isSelectAll = false;    // #1751
+        for (let i = 0; i < this.data.length; i++) {
+          if (!this.objData[this.data[i]._index]._isChecked && !this.objData[this.data[i]._index]._isDisabled) {
+            isSelectAll = false;
+            break;
+          }
+        }
+
+        return isSelectAll;
+      },
+      headRows() {
+        const isGroup = this.columnRows.length > 1;
+        if (isGroup) {
+          return this.fixed ? this.fixedColumnRows : this.columnRows;
+        } else {
+          return [this.columns];
+        }
+      }
+    },
+    data() {
+      return {
+        isDragging: false,
+        dragIndex: null,
+        dragX: 0,
+        dragWidth: 0,
+        cursorResize: false
+      }
+    },
+    mounted() {
+      document.onmouseup = (e, val) => {
+        if (this.isDragging) {
+          this.handleMouseUp(e)
+        }
+      }
+    },
+    methods: {
+      handleMouseUp(e) {
+        this.isDragging = false;
+        let offset = e.clientX - this.dragX;
+        let columnWidth = this.columnsWidth[this.dragIndex].width;
+        let width = columnWidth + offset;
+        width = width <= 60 ? 60 : width;
+        this.dragWidth = width;
+
+        this.columnsWidth[this.dragIndex].width = this.dragWidth;
+        this.columns[this.dragIndex].width = this.dragWidth;
+        this.columns[this.dragIndex]._width = this.dragWidth;
+        this.$emit('on-drag-up', e.clientX)
+      },
+      handleMouseMove(e) {
+        let rect = e.target.getBoundingClientRect()
+        if (e.clientX - rect.left < 10) {
+          this.cursorResize = "cursor:col-resize";
+        }
+        if (this.isDragging) {
+
+          let left = document.getElementsByClassName('ivu-table-header')[0].getBoundingClientRect().left;
+          let offset = e.clientX - left;
+          this.$emit('on-drag-move', offset)
+        }
+      },
+      handleMouseDown(e, val) {
+        this.isDragging = true;
+        this.dragIndex = val._index;
+        this.dragX = e.clientX;
+        let left = document.getElementsByClassName('ivu-table-header')[0].getBoundingClientRect().left;
+        this.$emit('on-drag-down', e.clientX - left)
+      },
+      cellClasses(column) {
+        return [
+          `${this.prefixCls}-cell`,
+          {
+            [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
+          }
+        ];
+      },
+      scrollBarCellClass() {
+        let hasRightFixed = false;
+        for (let i in this.headRows) {
+          for (let j in this.headRows[i]) {
+            if (this.headRows[i][j].fixed === 'right') {
+              hasRightFixed = true;
+              break;
+            }
+            if (hasRightFixed) break;
+          }
+        }
+        return [
+          {
+            [`${this.prefixCls}-hidden`]: hasRightFixed
+          }
+        ];
+      },
+      itemClasses(column, item) {
+        return [
+          `${this.prefixCls}-filter-select-item`,
+          {
+            [`${this.prefixCls}-filter-select-item-selected`]: column._filterChecked[0] === item.value
+          }
+        ];
+      },
+      itemAllClasses(column) {
+        return [
+          `${this.prefixCls}-filter-select-item`,
+          {
+            [`${this.prefixCls}-filter-select-item-selected`]: !column._filterChecked.length
+          }
+        ];
+      },
+      selectAll() {
+        const status = !this.isSelectAll;
+        this.$parent.selectAll(status);
+      },
+      handleSort(index, type) {
+        const column = this.columns[index];
+        const _index = column._index;
+
+        if (column._sortType === type) {
+          type = 'normal';
+        }
+        this.$parent.handleSort(_index, type);
+      },
+      handleSortByHead(index) {
+        const column = this.columns[index];
+        if (column.sortable) {
+          const type = column._sortType;
+          if (type === 'normal') {
+            this.handleSort(index, 'asc');
+          } else if (type === 'asc') {
+            this.handleSort(index, 'desc');
+          } else {
+            this.handleSort(index, 'normal');
+          }
+        }
+      },
+      handleFilter(index) {
+        this.$parent.handleFilter(index);
+      },
+      handleSelect(index, value) {
+        this.$parent.handleFilterSelect(index, value);
+      },
+      handleReset(index) {
+        this.$parent.handleFilterReset(index);
+      },
+      handleFilterHide(index) {
+        this.$parent.handleFilterHide(index);
+      },
+      // 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
+      getColumn(rowIndex, index) {
+        const isGroup = this.columnRows.length > 1;
+
+        if (isGroup) {
+          const id = this.headRows[rowIndex][index].__id;
+          return this.columns.filter(item => item.__id === id)[0];
+        } else {
+          return this.headRows[rowIndex][index];
+        }
+      }
+    }
+  };
+</script>
+
+<style>
+    .no-selected {
+        -webkit-user-select: none; /*Chrome/ Safari/ Opear新版本*/
+        -moz-user-select: none; /*Foxfire */
+        -ms-user-select: none; /*Internet Explorer/ Edge*/
+        -o-user-select: none; /*Opear老版本*/
+        -khtml-user-select: none; /* Konqueror */
+        -webkit-touch-callout: none; /* iOS Safari */
+        user-select: none;
+        /* Nonprefixed version, currently not supported by any browser */
+    }
+</style>

package/src/components/md-table/iview-table/table-tr.vue

@@ -0,0 +1,31 @@
+<template>
+    <tr :class="rowClasses(row._index)"><slot></slot></tr>
+</template>
+<script>
+    export default {
+        props: {
+            row: Object,
+            prefixCls: String
+        },
+        computed: {
+            objData () {
+                return this.$parent.objData;
+            }
+        },
+        methods: {
+            rowClasses (_index) {
+                return [
+                    `${this.prefixCls}-row`,
+                    this.rowClsName(_index),
+                    {
+                        [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
+                        [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
+                    }
+                ];
+            },
+            rowClsName (_index) {
+                return this.$parent.$parent.rowClassName(this.objData[_index], _index);
+            },
+        }
+    };
+</script>