md-iview 1.0.12

package/src/components/md-table/drop-down-cell.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="drop-down-cell display-flex justify-content-space-around">
+    <Dropdown trigger="click" @on-click="onClickItem">
+      <div>
+        <!--{{ items[cell.row[cell.column.key]] }}-->
+        <!--    <template v-if="mapItems">
+            {{ mapItems[cell.row[cell.column.key]] }}
+          </template>
+          <template v-else>
+            {{ cell.row[cell.column.key] }}
+        </template>-->
+        {{ mapItems[cell.row[cell.column.key]] }}
+        <md-icon type="baseline-arrow_drop_down" v-show="editable"></md-icon>
+      </div>
+      <DropdownMenu slot="list" v-show="editable">
+        <template v-if="mapItems">
+          <DropdownItem v-for="(item, key) in keys" :key="key" :name="item">{{ mapItems[item] }}</DropdownItem>
+        </template>
+        <!--<template v-else>-->
+        <!--<DropdownItem v-for="(item, key) in cell.column.dropdownList" :key="key" :name="item">{{ item }}</DropdownItem>-->
+        <!--</template>-->
+      </DropdownMenu>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "drop-down-cell",
+  model: {
+    prop: "cell"
+  },
+  props: {
+    mapItems: Object,
+    cell: Object,
+    editable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    keys() {
+      return Object.keys(this.mapItems);
+    }
+  },
+  watch: {
+    editable(to) {
+      console.log(to);
+    },
+    mapItems(to) {}
+  },
+  created() {
+    // console.log(this.mapItems, this.cell.row[this.cell.column.key]);
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClickItem(val) {
+      this.$nextTick(() => {
+        this.cell["row"][this.cell["column"]["key"]] = val;
+        console.log("dropdown cell", this.cell);
+        this.$emit("on-change", this.cell);
+      });
+    }
+  }
+};
+</script>
+<style>
+.ivu-select-dropdown {
+  border-radius: 0;
+  max-height: 200px !important;
+  overflow: auto !important;
+}
+</style>
+
+<style lang="less" scoped>
+.drop-down-cell {
+  cursor: pointer;
+}
+</style>

package/src/components/md-table/editable-expand.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="table-expand">
+    <!--<Table :columns="col"-->
+    <!--:data="row"-->
+    <!--:show-header="false"-->
+    <!--@on-row-click="memberTrclick"-->
+    <!--ref="selection"-->
+    <!--&gt;-->
+    <!--</Table>-->
+    <can-edit-table
+      refs="tableCustom"
+      :border="false"
+      :columns-list="col"
+      @on-change="onChangeTable"
+      @on-selection-change ="onSelectionChangeTable"
+      ref="selection"
+      @on-delete="onDelete"
+      @on-change-input="onChangeInput"
+      v-on="$listeners"
+      v-model="cloneRow"></can-edit-table>
+
+
+<!--    <md-table-draggable
+      v-model="row"
+      :columns-list="col"
+      :show-header="false"
+      @on-start="handleOnstart1"
+      @on-end="handleOnend1"
+      ref="selection"
+    ></md-table-draggable>-->
+
+  </div>
+
+</template>
+
+<script>
+  import CanEditTable from './can-edit'
+
+  export default {
+    name: "editable-expand",
+    props:{
+      row:Array,
+      col:Array,
+      isSelectedAll:Boolean
+    },
+    components:{
+      CanEditTable
+    },
+    watch:{
+      row:{
+        immediate:true,
+        handler(to) {
+          this.cloneRow = JSON.parse(JSON.stringify(to));
+        }
+      },
+      isSelectedAll:{
+        immediate:true,
+        handler(to) {
+          /*this.$nextTick(()=>{
+            setTimeout(()=>{
+              this.$refs.selection.selectAll(to);
+            })
+          })*/
+        }
+      }
+     /* "$refs.selection":{
+        immediate:true,
+        handler(to) {
+          console.log("$refs.selection",to);
+          to && this.$refs.selection.selectAll(this.isSelectedAll);
+        }
+      }*/
+    },
+    data(){
+      return{
+        //行数据
+        trRow: '',
+        cloneRow:{}
+      }
+    },
+    created() {
+      // this.cloneRow = JSON.parse(JSON.stringify(this.row));
+    },
+    mounted() {
+    /*  this.$nextTick(()=>{
+        this.$refs.selection.selectAll(this.isSelectedAll);
+      })*/
+    },
+    methods:{
+      onDelete(val, index, currentRow) {
+        this.$emit('on-delete-expand-table', val, index, currentRow)
+      },
+      onSelectionChangeTable(selection) {
+        this.$emit('on-selection-change-expand-table', selection)
+      },
+      onChangeTable(data, index, currentRow) {
+        // console.log("<<<<<<,onChangeTable")
+        this.$emit('on-change-expand-table', data, index, currentRow);
+      },
+      handleOnend1() {
+
+      },
+      memberTrclick(row){
+        this.trRow = row;
+        window.getApp.$emit('APP_EXPAND_MODIFY',this.trRow);
+      },
+      onChangeInput(row, index, key) {
+        this.$emit('on-change-input', row , index, key)
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  .ivu-table td, .ivu-table th {
+    height: 36px !important;
+  }
+
+</style>
+
+<style lang="less">
+  td.ivu-table-expanded-cell {
+    padding: 0  !important;
+    background: white;
+
+  }
+  .table-expand {
+
+
+    .ivu-table-wrapper {
+      border: 0;
+      .ivu-table-header {
+        display: none;
+      }
+    }
+    .ivu-table-row {
+      td{
+        /*padding-left: 36px;*/
+      }
+    }
+  }
+
+</style>

package/src/components/md-table/expand.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="table-expand">
+    <!--<Table :columns="col"-->
+    <!--:data="row"-->
+    <!--:show-header="false"-->
+    <!--@on-row-click="memberTrclick"-->
+    <!--ref="selection"-->
+    <!--&gt;-->
+    <!--</Table>-->
+    <md-table-draggable
+      v-model="row"
+      :columns-list="col"
+      :show-header="false"
+      @on-start="handleOnstart1"
+      @on-end="handleOnend1"
+      ref="selection"
+      :row-class-name="rowClassName"
+    ></md-table-draggable>
+  </div>
+</template>
+
+<script>
+import MdTableDraggable from "@/components/md-table/draggable";
+export default {
+  name: "table-expand",
+  props: {
+    row: Array,
+    col: Array,
+    isSelectedAll: Boolean
+  },
+  components: {
+    MdTableDraggable
+  },
+  watch: {
+    isSelectedAll(to, from) {
+      this.$refs.selection.selectAll(to);
+    }
+  },
+  data() {
+    return {
+      //行数据
+      trRow: ""
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.selection.selectAll(this.isSelectedAll);
+    });
+  },
+  methods: {
+    rowClassName(row, index) {
+      console.log(".>>>>", row.name, row.childList);
+
+      if (!row.childList) {
+        return "display-none-expand";
+      }
+    },
+    handleOnstart1() {},
+    handleOnend1() {},
+    memberTrclick(row) {
+      this.trRow = row;
+      window.getApp.$emit("APP_EXPAND_MODIFY", this.trRow);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ivu-table .display-none-expand .ivu-table-cell-expand {
+  display: none;
+}
+
+.ivu-table td,
+.ivu-table th {
+  height: 36px !important;
+}
+</style>
+
+<style lang="less">
+td.ivu-table-expanded-cell {
+  padding: 0 !important;
+  background: white;
+}
+.table-expand {
+  .ivu-table-wrapper {
+    border: 0;
+    .ivu-table-header {
+      display: none;
+    }
+  }
+  .ivu-table-row {
+    td {
+      /*padding-left: 36px;*/
+    }
+  }
+}
+</style>

package/src/components/md-table/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <i-table v-bind="$attrs" v-on="$listeners">
+    <!--  <template slot="header">
+        <md-filter-bar :columns="columnsList" @on-change="$emit('on-filter-change')" style="border: 0;width: 100%"></md-filter-bar>
+      </template>-->
+    </i-table>
+    <Page :total="totalSize"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+          v-if="paging"
+          class="table-page"
+          @on-change="$emit('on-page-change')"
+          @on-page-size-change="$emit('on-page-size-change')" style="margin-top: 20px;text-align: right;z-index: 1005;"></Page>
+  </div>
+</template>
+
+<script>
+  // import MdFilterBar from '../md-filter-bar/index'
+  import iTable from './iview-table/table'
+
+  export default {
+    name:'md-table',
+    props:{
+      totalSize:{
+        type:Number,
+        default:0
+      },
+      columnsList: Array,
+      paging:{
+        type:Boolean,
+        default:false,
+      }
+    },
+    computed:{
+    },
+    components:{
+      // MdFilterBar,
+      iTable
+    },
+    data () {
+      return {
+      };
+    },
+    created() {
+    },
+    methods:{
+    }
+
+  };
+</script>

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

@@ -0,0 +1,99 @@
+<template>
+    <div :class="classes" ref="cell">
+        <template v-if="renderType === 'index'"><span>{{naturalIndex + 1}}</span></template>
+        <template v-if="renderType === 'selection'">
+            <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
+        </template>
+        <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
+        <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
+        <template v-if="renderType === 'expand' && !row._disableExpand">
+            <div :class="expandCls" @click="toggleExpand">
+                <Icon type="ios-arrow-right"></Icon>
+            </div>
+        </template>
+        <Cell
+            v-if="renderType === 'render'"
+            :row="row"
+            :column="column"
+            :index="index"
+            :render="column.render"></Cell>
+    </div>
+</template>
+<script>
+    import Cell from './expand';
+    // import Icon from '../icon/icon.vue';
+    // import Checkbox from '../checkbox/checkbox.vue';
+
+    export default {
+        name: 'TableCell',
+        // components: { Icon, Checkbox, Cell },
+        components: { Cell },
+        props: {
+            prefixCls: String,
+            row: Object,
+            column: Object,
+            naturalIndex: Number,    // index of rebuildData
+            index: Number,           // _index of data
+            checked: Boolean,
+            disabled: Boolean,
+            expanded: Boolean,
+            fixed: {
+                type: [Boolean, String],
+                default: false
+            }
+        },
+        data () {
+            return {
+                renderType: '',
+                uid: -1,
+                context: this.$parent.$parent.$parent.currentContext
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${this.prefixCls}-cell`,
+                    {
+                        [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
+                        [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
+                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
+                    }
+                ];
+            },
+            expandCls () {
+                return [
+                    `${this.prefixCls}-cell-expand`,
+                    {
+                        [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
+                    }
+                ];
+            }
+        },
+        methods: {
+            toggleSelect () {
+                this.$parent.$parent.$parent.toggleSelect(this.index);
+            },
+            toggleExpand () {
+                this.$parent.$parent.$parent.toggleExpand(this.index);
+            },
+            handleClick () {
+                // 放置 Checkbox 冒泡
+            }
+        },
+        created () {
+            if (this.column.type === 'index') {
+                this.renderType = 'index';
+            } else if (this.column.type === 'selection') {
+                this.renderType = 'selection';
+            } else if (this.column.type === 'html') {
+                this.renderType = 'html';
+            } else if (this.column.type === 'expand') {
+                this.renderType = 'expand';
+            } else if (this.column.render) {
+                this.renderType = 'render';
+            } else {
+                this.renderType = 'normal';
+            }
+        }
+    };
+</script>

package/src/components/md-table/iview-table/expand.js

@@ -0,0 +1,21 @@
+export default {
+    name: 'TableExpand',
+    functional: true,
+    props: {
+        row: Object,
+        render: Function,
+        index: Number,
+        column: {
+            type: Object,
+            default: null
+        }
+    },
+    render: (h, ctx) => {
+        const params = {
+            row: ctx.props.row,
+            index: ctx.props.index
+        };
+        if (ctx.props.column) params.column = ctx.props.column;
+        return ctx.props.render(h, params);
+    }
+};

package/src/components/md-table/iview-table/export-csv.js

@@ -0,0 +1,76 @@
+function has (browser) {
+    const ua = navigator.userAgent;
+    if (browser === 'ie') {
+        const isIE = ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1;
+        if (isIE) {
+            const reIE = new RegExp('MSIE (\\d+\\.\\d+);');
+            reIE.test(ua);
+            return parseFloat(RegExp['$1']);
+        } else {
+            return false;
+        }
+    } else {
+        return ua.indexOf(browser) > -1;
+    }
+}
+
+const csv = {
+    _isIE11 () {
+        let iev = 0;
+        const ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
+        const trident = !!navigator.userAgent.match(/Trident\/7.0/);
+        const rv = navigator.userAgent.indexOf('rv:11.0');
+
+        if (ieold) {
+            iev = Number(RegExp.$1);
+        }
+        if (navigator.appVersion.indexOf('MSIE 10') !== -1) {
+            iev = 10;
+        }
+        if (trident && rv !== -1) {
+            iev = 11;
+        }
+
+        return iev === 11;
+    },
+
+    _isEdge () {
+        return /Edge/.test(navigator.userAgent);
+    },
+
+    _getDownloadUrl (text) {
+        const BOM = '\uFEFF';
+        // Add BOM to text for open in excel correctly
+        if (window.Blob && window.URL && window.URL.createObjectURL) {
+            const csvData = new Blob([BOM + text], { type: 'text/csv' });
+            return URL.createObjectURL(csvData);
+        } else {
+            return 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text);
+        }
+    },
+
+    download (filename, text) {
+        if (has('ie') && has('ie') < 10) {
+            // has module unable identify ie11 and Edge
+            const oWin = window.top.open('about:blank', '_blank');
+            oWin.document.charset = 'utf-8';
+            oWin.document.write(text);
+            oWin.document.close();
+            oWin.document.execCommand('SaveAs', filename);
+            oWin.close();
+        } else if (has('ie') === 10 || this._isIE11() || this._isEdge()) {
+            const BOM = '\uFEFF';
+            const csvData = new Blob([BOM + text], { type: 'text/csv' });
+            navigator.msSaveBlob(csvData, filename);
+        } else {
+            const link = document.createElement('a');
+            link.download = filename;
+            link.href = this._getDownloadUrl(text);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+};
+
+export default csv;

package/src/components/md-table/iview-table/header.js

@@ -0,0 +1,16 @@
+export default {
+    name: 'TableRenderHeader',
+    functional: true,
+    props: {
+        render: Function,
+        column: Object,
+        index: Number
+    },
+    render: (h, ctx) => {
+        const params = {
+            column: ctx.props.column,
+            index: ctx.props.index
+        };
+        return ctx.props.render(h, params);
+    }
+};

package/src/components/md-table/iview-table/index.js

@@ -0,0 +1,2 @@
+import Table from './table.vue';
+export default Table;

package/src/components/md-table/iview-table/mixin.js

@@ -0,0 +1,31 @@
+export default {
+    methods: {
+        alignCls (column, row = {}) {
+            let cellClassName = '';
+            if (row.cellClassName && column.key && row.cellClassName[column.key]) {
+                cellClassName = row.cellClassName[column.key];
+            }
+            return [
+                {
+                    [`${cellClassName}`]: cellClassName,    // cell className
+                    [`${column.className}`]: column.className,    // column className
+                    [`${this.prefixCls}-column-${column.align}`]: column.align,
+                    [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
+                }
+            ];
+        },
+        isPopperShow (column) {
+            return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
+        },
+        setCellWidth (column) {
+            let width = '';
+            if (column.width) {
+                width = column.width;
+            } else if (this.columnsWidth[column._index]) {
+                width = this.columnsWidth[column._index].width;
+            }
+            if (width === '0') width = '';
+          return width;
+        }
+    }
+};