md-iview 1.0.12

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="table-custom-cell">
+    <slot></slot>
+    <div v-if="iconType" style="display: flex">
+      <md-icon class="icon" :size="size" color="#000" :type="iconType"></md-icon>
+    </div>
+    <template v-if="text"><span class="text" @click="onclickText" :class="{'is-open':isOpen}">{{ text }}</span></template>
+    <template v-else>
+      <ul class="text-list">
+        <li class="text" v-for="(text, key) in texts" :key="key">{{ text }}</li>
+      </ul>
+      <!--<div class="text" style="display: block" @click="onclickText" v-for="text in texts">{{ text }}</div>-->
+    </template>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "custom-cell",
+    props:{
+      text:String,
+      texts:Array,
+      iconType:String,
+      size:{
+        type:Number|String,
+        default:16,
+      },
+      isOpen:{
+        type:Boolean,
+        default:false,
+      },
+      row:Object,
+    },
+    methods:{
+      onclickText() {
+        window.getApp.$emit('APP_TABLE_CUSTOM_CELL_CLICK', this.row);
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.table-custom-cell {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .text-list{
+    list-style: none;
+    padding-left: 0 !important;
+    /*margin-bottom: 0 !important;;*/
+    margin:8px 0 !important;
+  }
+  .icon {
+    margin-right: 4px;
+
+  }
+
+  .is-open {
+    &:hover{
+      text-decoration: underline;
+    }
+  }
+
+  .text {
+    font-size: 13px;
+    color: #000;
+
+  }
+}
+</style>

package/src/components/md-table/date-picker-cell-v2.vue

@@ -0,0 +1,48 @@
+<template>
+  <DatePicker class="table-cell-date-picker" type="datetime" :dateFormat="dateFormat" placeholder="" :value="value" :transfer="transfer"  v-bind="$attrs" v-on="$listeners"></DatePicker>
+</template>
+
+<script>
+  import dayjs from 'dayjs';
+
+  export default {
+    name: "date-picker-cell",
+    props:{
+      date:String,
+      transfer:Boolean,
+      dateFormat:{
+        type:String,
+        default:'yyyy-MM-dd HH:mm:ss'
+      }
+    },
+    watch:{
+      date:{
+        immediate:true,
+        handler(to) {
+          this.value = dayjs(to).format(this.dateFormat);
+        }
+      },
+      value:{
+        immediate:true,
+        handler(to) {
+          to&&this.$emit('on-change', to);
+        }
+      }
+    },
+    data() {
+      return {
+        value: ''
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+.table-cell-date-picker {
+    border: 1px solid #d9d9d9;
+    .ivu-date-picker-editor {
+        height: 46px;
+        line-height: 46px;
+    }
+}
+</style>

package/src/components/md-table/date-picker-cell.vue

@@ -0,0 +1,39 @@
+<template>
+  <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="" v-model="value" :transfer="transfer"  v-bind="$attrs" v-on="$listeners"></DatePicker>
+</template>
+
+<script>
+  import dayjs from 'dayjs';
+
+  export default {
+    name: "date-picker-cell",
+    props:{
+      date:String,
+      transfer:Boolean
+    },
+    watch:{
+      date:{
+        immediate:true,
+        handler(to) {
+          this.value = dayjs(to).format("YYYY-MM-DD HH:mm:ss");
+        }
+      },
+      value:{
+        immediate:true,
+        handler(to) {
+          // console.log("vaue:",to);
+          to&&this.$emit('on-change', to);
+        }
+      }
+    },
+    data() {
+      return {
+        value: ''
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/md-table/demo/data/search.js

@@ -0,0 +1,67 @@
+export const columns1 = [
+    {
+        key: 'name',
+        title: '姓名'
+    },
+    {
+        key: 'tel',
+        title: '电话号码'
+    }
+];
+
+export const searchTable1 = [
+    {
+        name: 'Aresn',
+        tel: '17712345678'
+    },
+    {
+        name: 'Lison',
+        tel: '17787654321'
+    },
+    {
+        name: 'Lili',
+        tel: '12212345678'
+    },
+    {
+        name: 'Lucy',
+        tel: '13312345678'
+    }
+];
+
+export const searchTable2 = [
+    {
+        name: 'Aresn',
+        tel: '17712345678'
+    },
+    {
+        name: 'Lison',
+        tel: '17787654321'
+    },
+    {
+        name: 'Lili',
+        tel: '12212345678'
+    },
+    {
+        name: 'Lucy',
+        tel: '13312345678'
+    }
+];
+
+export const searchTable3 = [
+    {
+        name: 'Aresn',
+        tel: '17712345678'
+    },
+    {
+        name: 'Lison',
+        tel: '17787654321'
+    },
+    {
+        name: 'Lili',
+        tel: '12212345678'
+    },
+    {
+        name: 'Lucy',
+        tel: '13312345678'
+    }
+];

package/src/components/md-table/demo/data/table2csv.js

@@ -0,0 +1,200 @@
+export const table2csvData = [
+    {
+        'name': '推广名称1',
+        'fav': 0,
+        'show': 7302,
+        'weak': 5627,
+        'signin': 1563,
+        'click': 4254,
+        'active': 1438,
+        'day7': 274,
+        'day30': 285,
+        'tomorrow': 1727,
+        'day': 558,
+        'week': 4440,
+        'month': 5610
+    },
+    {
+        'name': '推广名称2',
+        'fav': 0,
+        'show': 4720,
+        'weak': 4086,
+        'signin': 3792,
+        'click': 8690,
+        'active': 8470,
+        'day7': 8172,
+        'day30': 5197,
+        'tomorrow': 1684,
+        'day': 2593,
+        'week': 2507,
+        'month': 1537
+    },
+    {
+        'name': '推广名称3',
+        'fav': 0,
+        'show': 7181,
+        'weak': 8007,
+        'signin': 8477,
+        'click': 1879,
+        'active': 16,
+        'day7': 2249,
+        'day30': 3450,
+        'tomorrow': 377,
+        'day': 1561,
+        'week': 3219,
+        'month': 1588
+    },
+    {
+        'name': '推广名称4',
+        'fav': 0,
+        'show': 9911,
+        'weak': 8976,
+        'signin': 8807,
+        'click': 8050,
+        'active': 7668,
+        'day7': 1547,
+        'day30': 2357,
+        'tomorrow': 7278,
+        'day': 5309,
+        'week': 1655,
+        'month': 9043
+    },
+    {
+        'name': '推广名称5',
+        'fav': 0,
+        'show': 934,
+        'weak': 1394,
+        'signin': 6463,
+        'click': 5278,
+        'active': 9256,
+        'day7': 209,
+        'day30': 3563,
+        'tomorrow': 8285,
+        'day': 1230,
+        'week': 4840,
+        'month': 9908
+    },
+    {
+        'name': '推广名称6',
+        'fav': 0,
+        'show': 6856,
+        'weak': 1608,
+        'signin': 457,
+        'click': 4949,
+        'active': 2909,
+        'day7': 4525,
+        'day30': 6171,
+        'tomorrow': 1920,
+        'day': 1966,
+        'week': 904,
+        'month': 6851
+    },
+    {
+        'name': '推广名称7',
+        'fav': 0,
+        'show': 5107,
+        'weak': 6407,
+        'signin': 4166,
+        'click': 7970,
+        'active': 1002,
+        'day7': 8701,
+        'day30': 9040,
+        'tomorrow': 7632,
+        'day': 4061,
+        'week': 4359,
+        'month': 3676
+    }
+];
+
+export const csvColumns = [
+    {
+        'title': '名称',
+        'key': 'name',
+        'fixed': 'left',
+        'width': 200
+    },
+    {
+        'title': '展示',
+        'key': 'show',
+        'width': 150,
+        'sortable': true,
+        filters: [
+            {
+                label: '大于4000',
+                value: 1
+            },
+            {
+                label: '小于4000',
+                value: 2
+            }
+        ],
+        filterMultiple: false,
+        filterMethod (value, row) {
+            if (value === 1) {
+                return row.show > 4000;
+            } else if (value === 2) {
+                return row.show < 4000;
+            }
+        }
+    },
+    {
+        'title': '唤醒',
+        'key': 'weak',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '登录',
+        'key': 'signin',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '点击',
+        'key': 'click',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '激活',
+        'key': 'active',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '7日留存',
+        'key': 'day7',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '30日留存',
+        'key': 'day30',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '次日留存',
+        'key': 'tomorrow',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '日活跃',
+        'key': 'day',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '周活跃',
+        'key': 'week',
+        'width': 150,
+        'sortable': true
+    },
+    {
+        'title': '月活跃',
+        'key': 'month',
+        'width': 150,
+        'sortable': true
+    }
+];

package/src/components/md-table/demo/data/table2excel.js

@@ -0,0 +1,239 @@
+export const table2excelData = [
+  {
+    'name': '推广名称1',
+    'fav': 0,
+    'show': 7302,
+    'weak': 5627,
+    'signin': 1563,
+    'click': 4254,
+    'active': 1438,
+    'day7': 274,
+    'day30': 285,
+    'tomorrow': 1727,
+    'day': 558,
+    'week': 4440,
+    'month': 5610
+  },
+  {
+    'name': '推广名称2',
+    'fav': 0,
+    'show': 4720,
+    'weak': 4086,
+    'signin': 3792,
+    'click': 8690,
+    'active': 8470,
+    'day7': 8172,
+    'day30': 5197,
+    'tomorrow': 1684,
+    'day': 2593,
+    'week': 2507,
+    'month': 1537
+  },
+  {
+    'name': '推广名称3',
+    'fav': 0,
+    'show': 7181,
+    'weak': 8007,
+    'signin': 8477,
+    'click': 1879,
+    'active': 16,
+    'day7': 2249,
+    'day30': 3450,
+    'tomorrow': 377,
+    'day': 1561,
+    'week': 3219,
+    'month': 1588
+  },
+  {
+    'name': '推广名称4',
+    'fav': 0,
+    'show': 9911,
+    'weak': 8976,
+    'signin': 8807,
+    'click': 8050,
+    'active': 7668,
+    'day7': 1547,
+    'day30': 2357,
+    'tomorrow': 7278,
+    'day': 5309,
+    'week': 1655,
+    'month': 9043
+  },
+  {
+    'name': '推广名称5',
+    'fav': 0,
+    'show': 934,
+    'weak': 1394,
+    'signin': 6463,
+    'click': 5278,
+    'active': 9256,
+    'day7': 209,
+    'day30': 3563,
+    'tomorrow': 8285,
+    'day': 1230,
+    'week': 4840,
+    'month': 9908
+  },
+  {
+    'name': '推广名称6',
+    'fav': 0,
+    'show': 6856,
+    'weak': 1608,
+    'signin': 457,
+    'click': 4949,
+    'active': 2909,
+    'day7': 4525,
+    'day30': 6171,
+    'tomorrow': 1920,
+    'day': 1966,
+    'week': 904,
+    'month': 6851
+  },
+  {
+    'name': '推广名称7',
+    'fav': 0,
+    'show': 5107,
+    'weak': 6407,
+    'signin': 4166,
+    'click': 7970,
+    'active': 1002,
+    'day7': 8701,
+    'day30': 9040,
+    'tomorrow': 7632,
+    'day': 4061,
+    'week': 4359,
+    'month': 3676
+  },
+  {
+    'name': '推广名称8',
+    'fav': 0,
+    'show': 5107,
+    'weak': 6407,
+    'signin': 4166,
+    'click': 7970,
+    'active': 1002,
+    'day7': 8701,
+    'day30': 9040,
+    'tomorrow': 7632,
+    'day': 4061,
+    'week': 4359,
+    'month': 3676
+  },
+  {
+    'name': '推广名称9',
+    'fav': 0,
+    'show': 5107,
+    'weak': 6407,
+    'signin': 4166,
+    'click': 7970,
+    'active': 1002,
+    'day7': 8701,
+    'day30': 9040,
+    'tomorrow': 7632,
+    'day': 4061,
+    'week': 4359,
+    'month': 3676
+  },
+  {
+    'name': '推广名称10',
+    'fav': 0,
+    'show': 5107,
+    'weak': 6407,
+    'signin': 4166,
+    'click': 7970,
+    'active': 1002,
+    'day7': 8701,
+    'day30': 9040,
+    'tomorrow': 7632,
+    'day': 4061,
+    'week': 4359,
+    'month': 3676
+  }
+];
+
+import HeaderSearch from '../widgets/header-search'
+export const excelColumns = [
+  {
+    'title': '名称',
+    'key': 'name',
+    renderHeader:(h, param)=>{
+      let nodeTitle = h('span',param.column.title);
+      let cityList= [
+        {
+          value: 'New York',
+          label: 'New York'
+        },
+        {
+          value: 'London',
+          label: 'London'
+        },
+        {
+          value: 'Sydney',
+          label: 'Sydney'
+        }];
+
+      let nodeDropdown = h(HeaderSearch, {
+        props:{
+          items:cityList,
+        }
+      })
+      return h('div',[
+        nodeTitle,
+        nodeDropdown
+      ])
+    }
+  },
+  {
+    'title': '展示',
+    'key': 'show',
+    'sortable': true,
+    filters: [
+      {
+        label: '大于4000',
+        value: 1
+      },
+      {
+        label: '小于4000',
+        value: 2
+      }
+    ],
+    filterMultiple: false,
+    filterMethod (value, row) {
+      if (value === 1) {
+        return row.show > 4000;
+      } else if (value === 2) {
+        return row.show < 4000;
+      }
+    }
+  },
+  {
+    'title': '唤醒',
+    'key': 'weak',
+    'sortable': true
+  },
+  {
+    'title': '登录',
+    'key': 'signin',
+    'sortable': true
+  },
+  {
+    'title': '点击',
+    'key': 'click',
+    'sortable': true
+  },
+  {
+    'title': '激活',
+    'key': 'active',
+    'sortable': true
+  },
+  {
+    'title': '30日留存',
+    'key': 'day30',
+    'sortable': true
+  },
+  {
+    'title': '月活跃',
+    'key': 'month',
+    'sortable': true
+  }
+];