From a6fc94382c517e6e78441a30ecc7ea06e64e6f92 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 5 Apr 2017 12:31:49 +0800
Subject: [PATCH] fixed #461

---
 examples/routers/select.vue      |   2 +-
 examples/routers/slider.vue      |   4 ++--
 examples/routers/table.vue       | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------
 src/components/slider/slider.vue |  25 ++++++++++++++-----------
 4 files changed, 101 insertions(+), 55 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index a97b620..b716b2c 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -192,7 +192,7 @@
 <!--</script>-->
 
 <template>
-    <div>
+    <div style="margin: 1000px 0 0 ">
         <Select v-model="model1" style="width:200px">
             <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
         </Select>
diff --git a/examples/routers/slider.vue b/examples/routers/slider.vue
index 8ce65ae..a513a07 100644
--- a/examples/routers/slider.vue
+++ b/examples/routers/slider.vue
@@ -1,6 +1,6 @@
 <template>
-    <div style="margin: 100px;">
-        <Slider v-model="value1" :step="5" show-input></Slider>
+    <div style="margin: 0 400px;">
+        <Slider v-model="value1" show-input></Slider>
         <Slider v-model="value2" range></Slider>
         <Slider v-model="value3" range disabled></Slider>
         {{ value1 }}{{value2}}
diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index c7ba3df..dc902be 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,70 +1,113 @@
 <template>
-    <Table border :context="self" :columns="columns7" :data="data6"></Table>
+    <div>
+        <Table :context="self" :data="tableData1" :columns="tableColumns1" stripe></Table>
+        <div style="margin: 10px;overflow: hidden">
+            <div style="float: right;">
+                <Page :total="100" :current="1" @on-change="changePage"></Page>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
                 self: this,
-                columns7: [
+                tableData1: this.mockTableData1(),
+                tableColumns1: [
                     {
-                        title: '姓名',
-                        key: 'name',
-                        render (row, column, index) {
-                            return `<div style="white-space:nowrap;"><Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker></div>`;
-                        }
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age'
+                        title: '名称',
+                        key: 'name'
                     },
                     {
-                        title: '地址',
-                        key: 'address'
+                        title: '状态',
+                        key: 'status',
+                        render (row) {
+                            const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red';
+                            const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败';
+                            return `<tag type="dot" color="${color}">${text}</tag>`;
+                        }
                     },
                     {
-                        title: '操作',
-                        key: 'action',
-                        width: 150,
-                        align: 'center',
+                        title: '画像内容',
+                        key: 'portrayal',
                         render (row, column, index) {
-                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
+                            return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
+                                        <tag>${row.portrayal.length}</tag>
+                                        <div slot="content">
+                                            <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
+                                        </div>
+                                    </Poptip>`;
                         }
-                    }
-                ],
-                data6: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
                     },
                     {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
+                        title: '选定人群数',
+                        key: 'people',
+                        render (row, column, index) {
+                            return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom">
+                                        <tag>${row.people.length}</tag>
+                                        <div slot="content">
+                                            <ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul>
+                                        </div>
+                                    </Poptip>`;
+                        }
                     },
                     {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
+                        title: '取样时段',
+                        key: 'time',
+                        render (row) {
+                            return `近${row.time}天`
+                        }
                     },
                     {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
+                        title: '更新时间',
+                        key: 'update',
+                        render (row, column, index) {
+                            return `{{ formatDate(tableData1[${index}].update) }}`;
+                        }
                     }
                 ]
             }
         },
         methods: {
-            show (index) {
-                this.$Modal.info({
-                    title: '用户信息',
-                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
-                })
+            mockTableData1 () {
+                let data = [];
+                for (let i = 0; i < 10; i++) {
+                    data.push({
+                        name: '商圈' + Math.floor(Math.random () * 100 + 1),
+                        status: Math.floor(Math.random () * 3 + 1),
+                        portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'],
+                        people: [
+                            {
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
+                            },
+                            {
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
+                            },
+                            {
+                                n: '客群' + Math.floor(Math.random () * 100 + 1),
+                                c: Math.floor(Math.random () * 1000000 + 100000)
+                            }
+                        ],
+                        time: Math.floor(Math.random () * 7 + 1),
+                        update: new Date()
+                    })
+                }
+                return data;
+            },
+            formatDate (date) {
+                const y = date.getFullYear();
+                let m = date.getMonth() + 1;
+                m = m < 10 ? '0' + m : m;
+                let d = date.getDate();
+                d = d < 10 ? ('0' + d) : d;
+                return y + '-' + m + '-' + d;
             },
-            remove (index) {
-                this.data6.splice(index, 1);
+            changePage () {
+                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
+                this.tableData1 = this.mockTableData1();
             }
         }
     }
diff --git a/src/components/slider/slider.vue b/src/components/slider/slider.vue
index 1531ad2..e6e55b5 100644
--- a/src/components/slider/slider.vue
+++ b/src/components/slider/slider.vue
@@ -301,18 +301,21 @@
                 }
             },
             changeSinglePosition (newPos) {
-                if (newPos >= 0 && (newPos <= 100)) {
-                    const lengthPerStep = 100 / ((this.max - this.min) / this.step);
-                    const steps = Math.round(newPos / lengthPerStep);
+                if (newPos < 0) {
+                    newPos = 0;
+                } else if (newPos > 100) {
+                    newPos = 100;
+                }
+                const lengthPerStep = 100 / ((this.max - this.min) / this.step);
+                const steps = Math.round(newPos / lengthPerStep);
 
-                    this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
-                    this.setSinglePosition(this.currentValue);
-                    if (!this.dragging) {
-                        if (this.currentValue !== this.oldSingleValue) {
-                            this.$emit('on-change', this.currentValue);
-                            this.dispatch('FormItem', 'on-form-change', this.currentValue);
-                            this.oldSingleValue = this.currentValue;
-                        }
+                this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
+                this.setSinglePosition(this.currentValue);
+                if (!this.dragging) {
+                    if (this.currentValue !== this.oldSingleValue) {
+                        this.$emit('on-change', this.currentValue);
+                        this.dispatch('FormItem', 'on-form-change', this.currentValue);
+                        this.oldSingleValue = this.currentValue;
                     }
                 }
             },
--
libgit2 0.21.4