md-iview 1.0.12

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

@@ -0,0 +1,93 @@
+import { deepCopy } from 'iview/src/utils/assist';
+
+const convertColumnOrder = (columns, fixedType) => {
+    let list = [];
+    let other = [];
+    columns.forEach((col) => {
+        if (col.fixed && col.fixed === fixedType) {
+            list.push(col);
+        } else {
+            other.push(col);
+        }
+    });
+    return list.concat(other);
+};
+
+export {convertColumnOrder};
+
+// set forTableHead to true when convertToRows, false in normal cases like table.vue
+const getAllColumns = (cols, forTableHead = false) => {
+    const columns = deepCopy(cols);
+    const result = [];
+    columns.forEach((column) => {
+        if (column.children) {
+            if (forTableHead) result.push(column);
+            result.push.apply(result, getAllColumns(column.children, forTableHead));
+        } else {
+            result.push(column);
+        }
+    });
+    return result;
+};
+
+export {getAllColumns};
+
+const convertToRows = (columns, fixedType = false) => {
+    const originColumns = fixedType ? fixedType === 'left' ? deepCopy(convertColumnOrder(columns, 'left')) : deepCopy(convertColumnOrder(columns, 'right')) : deepCopy(columns);
+    let maxLevel = 1;
+    const traverse = (column, parent) => {
+        if (parent) {
+            column.level = parent.level + 1;
+            if (maxLevel < column.level) {
+                maxLevel = column.level;
+            }
+        }
+        if (column.children) {
+            let colSpan = 0;
+            column.children.forEach((subColumn) => {
+                traverse(subColumn, column);
+                colSpan += subColumn.colSpan;
+            });
+            column.colSpan = colSpan;
+        } else {
+            column.colSpan = 1;
+        }
+    };
+
+    originColumns.forEach((column) => {
+        column.level = 1;
+        traverse(column);
+    });
+
+    const rows = [];
+    for (let i = 0; i < maxLevel; i++) {
+        rows.push([]);
+    }
+
+    const allColumns = getAllColumns(originColumns, true);
+
+    allColumns.forEach((column) => {
+        if (!column.children) {
+            column.rowSpan = maxLevel - column.level + 1;
+        } else {
+            column.rowSpan = 1;
+        }
+        rows[column.level - 1].push(column);
+    });
+
+    return rows;
+};
+
+export {convertToRows};
+
+const getRandomStr = function (len = 32) {
+    const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+    const maxPos = $chars.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        str += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str;
+};
+
+export {getRandomStr};

package/src/components/md-table/libs/table2excel.js

@@ -0,0 +1,100 @@
+var idTmr;
+function getExplorer () {
+    var explorer = window.navigator.userAgent;
+    if (explorer.indexOf('MSIE') >= 0) {
+        // ie
+        return 'ie';
+    } else if (explorer.indexOf('Firefox') >= 0) {
+        // firefox
+        return 'Firefox';
+    } else if (explorer.indexOf('Chrome') >= 0) {
+        // Chrome
+        return 'Chrome';
+    } else if (explorer.indexOf('Opera') >= 0) {
+        // Opera
+        return 'Opera';
+    } else if (explorer.indexOf('Safari') >= 0) {
+        // Safari
+        return 'Safari';
+    };
+};
+function tranform (table, aId, name) {
+    let tableHead = table.$children[0].$el;
+    let tableBody = table.$children[1].$el;
+    let tableInnerHTML = '<thead><tr>';
+    if (table.$children.length !== 1) {
+        let len = tableBody.rows.length;
+        let i = -1;
+        while (i < len) {
+            if (i === -1) {
+                Array.from(tableHead.rows[0].children).forEach((td) => {
+                    tableInnerHTML = tableInnerHTML + '<th>' + td.children[0].children[0].innerHTML + '</th>';
+                });
+                tableInnerHTML += '</tr><thead><tbody>';
+            } else {
+                tableInnerHTML += '<tr>';
+                Array.from(tableBody.rows[i].children).forEach((td) => {
+                    tableInnerHTML = tableInnerHTML + '<td>' + td.children[0].children[0].innerHTML + '</td>';
+                });
+                tableInnerHTML += '</tr>';
+            }
+            i++;
+        }
+        tableInnerHTML += '</tbody>';
+    }
+
+    if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
+        name += '.xls';
+    }
+
+    if (getExplorer() === 'ie') {
+        var curTbl = table;
+        var oXL = new ActiveXObject('Excel.Application');
+        var oWB = oXL.Workbooks.Add();
+        var xlsheet = oWB.Worksheets(1);
+        var sel = document.body.createTextRange();
+        sel.moveToElementText(curTbl);
+        sel.select();
+        sel.execCommand('Copy');
+        xlsheet.Paste();
+        oXL.Visible = true;
+
+        try {
+            var fname = oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls');
+        } catch (e) {
+            print('Nested catch caught ' + e);
+        } finally {
+            oWB.SaveAs(fname);
+            // oWB.Close(savechanges = false);
+            oXL.Quit();
+            oXL = null;
+            idTmr = setInterval(Cleanup(), 1);
+        }
+    } else {
+        tableToExcel(tableInnerHTML, aId, name);
+    }
+}
+function Cleanup () {
+    window.clearInterval(idTmr);
+    // CollectGarbage();
+}
+let tableToExcel = (function () {
+    let uri = 'data:application/vnd.ms-excel;base64,';
+    let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
+    let base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); };
+    let format = function (s, c) {
+        return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
+    };
+    return function (table, aId, name) {
+        let ctx = {worksheet: name || 'Worksheet', table: table};
+        document.getElementById(aId).href = uri + base64(format(template, ctx));
+        document.getElementById(aId).download = name;
+        document.getElementById(aId).click();
+    };
+})();
+
+const table2excel = {};
+
+table2excel.transform = tranform;
+
+export default table2excel;

package/src/components/md-table/select-cell-v2.vue

@@ -0,0 +1,64 @@
+<template>
+    <Select v-model="cloneValue"
+            :multiple="multiple"
+            :disabled="readonly"
+            v-bind="$attrs" v-on="$listeners"
+            :transfer="transfer"
+            class="table-cell-select"
+            filterable>
+        <Option v-for="item in option" :value="item.value" :key="item.value">{{ item.label }}</Option>
+    </Select>
+</template>
+
+<script>
+export default {
+  name: "select-cell",
+  props: {
+    option: Array | Object,
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    transfer:Boolean,
+    value: Array | Object
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(to) {
+        this.cloneValue = to;
+      }
+    },
+    cloneValue: {
+      immediate: true,
+      handler(to) {
+        this.$emit("on-change", to);
+      }
+    }
+  },
+  data() {
+    return {
+      cloneValue: null
+    };
+  }
+};
+</script>
+
+<style lang="less">
+    .table-cell-select{
+        border: 1px solid #d9d9d9;
+        &:hover{
+            border-color: #1890ff;
+        }
+        .ivu-select-selection {
+            height: 45px !important;
+            line-height: 45px;
+            border: 0 !important;
+            border-radius: 0px !important;
+        }
+    }
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+    <Select v-model="cloneValue" :multiple="multiple" :disabled="readonly"  v-bind="$attrs" v-on="$listeners":transfer="transfer" filterable>
+        <Option v-for="item in option" :value="item.value" :key="item.value">{{ item.label }}</Option>
+    </Select>
+</template>
+
+<script>
+export default {
+  name: "select-cell",
+  props: {
+    option: Array | Object,
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    transfer:Boolean,
+    value: Array | Object
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(to) {
+        this.cloneValue = to;
+      }
+    },
+    cloneValue: {
+      immediate: true,
+      handler(to) {
+        this.$emit("on-change", to);
+      }
+    }
+  },
+  data() {
+    return {
+      cloneValue: null
+    };
+  }
+};
+</script>
+
+<style scoped>
+</style>

package/src/components/md-table/table.less

@@ -0,0 +1,76 @@
+.dragging-tip-enter-active{
+    opacity: 1;
+    transition: opacity .3s;
+}
+.dragging-tip-enter, .dragging-tip-leave-to{
+    opacity: 0;
+    transition: opacity .3s
+}
+.dragging-tip-con{
+    display: block;
+    text-align: center;
+    width: 100%;
+    height: 50px;
+}
+.dragging-tip-con span{
+    font-size: 18px;
+}
+.record-tip-con{
+    display: block;
+    width: 100%;
+    height: 292px;
+    overflow: auto;
+}
+.record-item{
+    box-sizing: content-box;
+    display: block;
+    overflow: hidden;
+    height: 24px;
+    line-height: 24px;
+    padding: 8px 10px;
+    border-bottom: 1px dashed gainsboro;
+}
+.record-tip-con span{
+    font-size: 14px;
+}
+.edittable-test-con{
+    height: 160px;
+}
+.edittable-table-height-con{
+    height: 190px;
+}
+.edittable-con-1{
+    box-sizing: content-box;
+    padding: 15px 0 0;
+    height: 196px;
+}
+.edittable-table-get-currentdata-con{
+    height: 190px !important;
+}
+.exportable-table-download-con1{
+    padding: 16px 0 16px 20px;
+    border-bottom: 1px dashed #c3c3c3;
+    margin-bottom: 16px;
+}
+.exportable-table-download-con2{
+    padding-left: 20px;
+}
+.show-image{
+    padding: 20px 0px;
+}
+.show-image img{
+    display: block;
+    width: 100%;
+    height: auto;
+}
+.searchable-table{
+    &-con1{
+        height: 230px !important;
+    }
+}
+
+.table-page {
+    margin-top: 20px;
+    text-align: right;
+    z-index: 1005;
+}

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

@@ -0,0 +1,171 @@
+<template>
+    <div class="md-toolbar" :class="themeClassName">
+        <div class="md-toolbar__left" :class="[classNames]">
+           <!-- <md-icon type="menu" size="22" color="white" class="md-toolbar__left-item md-toolbar__left-menu cursor-pointer" v-if="!hideMenuBtn" @click="onClickMenuBtn"></md-icon>
+            <div class="md-toolbar__left-item md-toolbar__left-brand cursor-pointer" v-if="!collapsed">
+                <img src="../../../examples/assets/logo.png" alt="icon" v-if="icon">
+                <span class="title" v-if="title">{{ title }}</span>
+            </div>-->
+            <slot name="left">
+                <md-icon type="md-menu" size="22" color="white" class="md-toolbar__left-item md-toolbar__left-menu cursor-pointer" v-if="!hideMenuBtn" @click.native="onClickMenuBtn"></md-icon>
+                <div class="md-toolbar__left-item md-toolbar__left-brand cursor-pointer" v-if="!selfCollapsed">
+                    <img src="../../../examples/assets/logo.png" alt="icon" v-if="icon">
+                    <span class="md-toolbar__left-brand-title" v-if="title">{{ title }}</span>
+                </div>
+            </slot>
+        </div>
+        <div class="md-toolbar__content">
+            <slot></slot>
+        </div>
+        <div class="md-toolbar__right">
+            <slot name="right"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "md-toolbar",
+    props:{
+      icon:{
+        type:String,
+        default:''
+      },
+      title:{
+        type:String,
+        default:'',
+      },
+      hideMenuBtn:{
+        type:Boolean,
+        default:false,
+      },
+      collapsed:{
+        type:Boolean,
+        default:false,
+      },
+      theme:{
+        type:String,
+        default:'dark',
+        validator:value=>{
+          return ['dark', 'light'].indexOf(value) !== -1
+        }
+      }
+    },
+    computed:{
+      themeClassName() {
+        if (this.theme === 'dark') {
+          return ["md-toolbar--dark"]
+        }  else {
+          return ["md-toolbar--light"]
+        }
+      }
+    },
+    watch:{
+      collapsed:{
+        immediate:true,
+        handler(to) {
+          this.selfCollapsed = to;
+          if (to) {
+            this.classNames = [
+              'collapsed-width',
+              'display-flex',
+              'justify-main-center',
+              'align-item-center',
+            ]
+          } else {
+            this.classNames = ['expand-width']
+          }
+        }
+      }
+     /* collapsed(to) {
+        this.selfCollapsed = to;
+        console.log("=======", to);
+        if (to) {
+          this.classNames = [
+            'collapsed-width',
+            'display-flex',
+            'justify-main-center',
+            'align-item-center'
+          ]
+        } else {
+          this.classNames = ['expand-width']
+        }
+      }*/
+    },
+    data(){
+      return {
+        classNames:['expand-width'],
+        selfCollapsed:false,
+      }
+    },
+    methods:{
+      onClickMenuBtn() {
+        this.selfCollapsed = !this.selfCollapsed;
+        this.$emit('on-click-collapsed', this.selfCollapsed)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+/*    @import "../../style/theme.less";
+    .md-toolbar {
+    height: 48px;
+    align-items: center;
+    display: flex;
+        background: @blue-6;
+    justify-content: space-between;
+    !*padding: 0 16px;*!
+    .collapsed-width {
+        width: 80px;
+        justify-content: center;
+        .icon{
+            margin:0 auto;
+        }
+    }
+    .margin-0-auto{
+        margin: 0 auto;
+    }
+    .expand-width{
+        width: 250px;
+    }
+    &__left {
+        height: inherit;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        background: @primary-7;
+
+        !*background-color:darken(#1890ff, 10%);*!
+        &-item {
+
+        }
+        &-menu {
+
+        }
+        &-brand {
+            height: inherit;
+            margin: 0 8px;
+             display: flex;
+            align-items: center;
+            img {
+                height: 40px;
+                width: 40px;
+            }
+            &-title {
+                font-size: 20px;
+                font-weight: 500;
+                letter-spacing: 0.02em;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                color: white;
+            }
+        }
+
+    }
+    &__right {
+        padding: 0 16px;
+    }
+}*/
+</style>

package/src/components/md-tree/index.js

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