1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| 'use strict';
|
| // 页面中的表格
| Vue.component('b-table', {
| props: {
| columns: {
| type: Array,
| default: function _default() {
| return [];
| }
| },
| data: {
| type: Array,
| default: function _default() {
| return [];
| }
| },
| title: String,
| default: ''
| },
| template: '\n <div class="tbl-container ml8 mr8">\n <div class="tbl-container-header" v-show="showHeader">{{title}}</div>\n <div class="tbl-content">\n <table class="bui-table bui-table-odd">\n <thead>\n <tr>\n <th v-for="column in columns" :key="column.key">{{column.title}}</th>\n </tr>\n </thead>\n <tbody>\n <tr v-for="(item, key) in data" @click="handerTrClick(item)">\n <td v-for="column in columns" :key="column.key">{{item[column.key]}}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n ',
| data: function data() {
| return {};
| },
|
| methods: {
| handerTrClick: function handerTrClick(item) {
| this.$emit('on-click-tr', item);
| }
| },
| computed: {
| showHeader: function showHeader() {
| var result = this.title ? true : false;
| return result;
| }
| }
| });
| // iview的table
| Vue.component('iview-table', {
| props: {
| columns: {
| type: Array,
| default: function _default() {
| return [];
| }
| },
| data: {
| type: Array,
| default: function _default() {
| return [];
| }
| },
| height: {
| type: [String, Number],
| default: 'auto'
| },
| title: String,
| default: ''
| },
| template: '\n <div class="tbl-container ml8 mr8">\n <div class="tbl-container-header" v-show="showHeader">{{title}}</div>\n <div class="tbl-content">\n <i-table\n :columns="columns"\n :data="data"\n :height="height"\n stripe\n border></i-table>\n </div>\n </div>\n ',
| data: function data() {
| return {};
| },
|
| methods: {
| handerTrClick: function handerTrClick(item) {
| this.$emit('on-click-tr', item);
| }
| },
| computed: {
| showHeader: function showHeader() {
| var result = this.title ? true : false;
| return result;
| }
| }
| });
|
| Vue.component('bui-list', {
| props: {
| data: {
| type: Array,
| default: function _default() {
| return [];
| }
| }
| },
| template: '\n <div class="bui-list-container">\n <div class="bui-list-header">\u8BBE\u5907\u4FE1\u606F\u5217\u8868</div>\n <div class="bui-list-content">\n <ul class="bui-list">\n <li \n v-for="(item, key) in data"\n :key="key"\n class="bui-btn bui-box"\n @click="handlerClick(item, key)">\n <div class="span1">\n <h3 class="item-title" :style="getTStyle(item)">{{item.title}}</h3>\n <p\n v-for="(list, lkey) in item.list"\n :key="lkey" \n class="item-text">\n <span class="bui-label">{{list.label}}</span>\n <span class="bui-value">{{list.value}}</span>\n </p>\n </div>\n <i class="icon-listright"></i>\n </li>\n </ul>\n </div>\n </div>\n ',
| methods: {
| getTStyle: function getTStyle(item) {
| var style = {};
| if (typeof item.list == 'undefined' || item.list.length == 0) {
| style = {
| marginBottom: 0
| };
| }
| return style;
| },
| handlerClick: function handlerClick(data, key) {
| this.$emit('on-click', data);
| }
| },
| computed: {}
| });
|
|
