bi-element-ui 0.1.51 → 0.1.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.browserslistrc +3 -3
- package/.eslintrc.js +287 -287
- package/.prettierrc +7 -7
- package/README.md +148 -148
- package/cypress.json +3 -3
- package/lib/bi-element-ui.common.js +24760 -24638
- package/lib/bi-element-ui.css +1 -1
- package/lib/bi-element-ui.umd.js +24760 -24638
- package/lib/bi-element-ui.umd.min.js +2 -279
- package/lib/static/img/swiperBg.png +0 -0
- package/package.json +57 -57
- package/src/App.vue +42 -42
- package/src/components/BiDatePicker/datePickerOption.js +229 -229
- package/src/components/BiDatePicker/index.vue +74 -74
- package/src/components/BiTable/columu.vue +104 -104
- package/src/components/BiTable/forced.js +76 -76
- package/src/components/BiTable/index.js +6 -6
- package/src/components/BiTable/render.vue +13 -13
- package/src/components/BiTable/table.vue +202 -202
- package/src/components/BiTableColumn/Group.vue +277 -277
- package/src/components/BiTableColumn/api.js +16 -16
- package/src/components/BiTableColumn/index.vue +614 -614
- package/src/components/BiTooltipIcon/index.vue +71 -71
- package/src/components/EditBtn.vue +15 -15
- package/src/components/FreeButton/index.vue +69 -69
- package/src/components/Pagination/index.vue +104 -104
- package/src/components/Pagination/scrollTo.js +69 -69
- package/src/main.js +18 -18
- package/src/router/index.js +39 -39
- package/src/store/index.js +11 -11
- package/src/table.js +463 -463
- package/src/views/Date.vue +132 -132
- package/src/views/Home.vue +330 -330
- package/src/views/Scene.vue +140 -140
- package/src/views/Table.vue +220 -220
- package/src/views/showData.vue +455 -455
- package/tests/e2e/.eslintrc.js +10 -10
- package/tests/e2e/plugins/index.js +25 -25
- package/tests/e2e/specs/test.js +8 -8
- package/tests/e2e/support/commands.js +25 -25
- package/tests/e2e/support/index.js +20 -20
- package/tests/unit/example.spec.js +13 -13
- package//345/211/215/347/253/257ui/346/240/267/345/274/217/350/247/204/350/214/203.md +101 -101
@@ -1,74 +1,74 @@
|
|
1
|
-
<template>
|
2
|
-
<el-date-picker
|
3
|
-
v-if="true"
|
4
|
-
v-model="date"
|
5
|
-
:picker-options="componentPickerOptions"
|
6
|
-
:format="format"
|
7
|
-
:value-format="valueFormat"
|
8
|
-
v-bind="$attrs"
|
9
|
-
v-on="$listeners"
|
10
|
-
>
|
11
|
-
</el-date-picker>
|
12
|
-
<el-date-picker
|
13
|
-
v-else
|
14
|
-
v-model="date"
|
15
|
-
type="date"
|
16
|
-
placeholder="选择日期"
|
17
|
-
>
|
18
|
-
</el-date-picker>
|
19
|
-
</template>
|
20
|
-
|
21
|
-
<script>
|
22
|
-
import datePickerOption from './datePickerOption'
|
23
|
-
export default {
|
24
|
-
name: 'BiDatepicker',
|
25
|
-
props: {
|
26
|
-
pickerOption: {
|
27
|
-
type: Object,
|
28
|
-
default: () => {
|
29
|
-
return {}
|
30
|
-
}
|
31
|
-
},
|
32
|
-
format: {
|
33
|
-
type: String,
|
34
|
-
default: 'yyyy-MM-dd'
|
35
|
-
},
|
36
|
-
valueFormat: {
|
37
|
-
type: String,
|
38
|
-
default: 'yyyy-MM-dd'
|
39
|
-
},
|
40
|
-
value: {
|
41
|
-
type: String || Array,
|
42
|
-
default: ''
|
43
|
-
}
|
44
|
-
},
|
45
|
-
computed: {
|
46
|
-
date: {
|
47
|
-
get() {
|
48
|
-
return this.value
|
49
|
-
},
|
50
|
-
set(val) {
|
51
|
-
this.$emit('input', val)
|
52
|
-
}
|
53
|
-
},
|
54
|
-
componentPickerOptions() {
|
55
|
-
const type = this.$attrs.type
|
56
|
-
if (type === 'daterange') {
|
57
|
-
return Object.assign(datePickerOption.daterange, this.pickerOption)
|
58
|
-
} else if (type === 'monthrange') {
|
59
|
-
return Object.assign(datePickerOption.monthrange, this.pickerOption)
|
60
|
-
} else if (type === 'datetimerange') {
|
61
|
-
return Object.assign(datePickerOption.datetimerange, this.pickerOption)
|
62
|
-
} else {
|
63
|
-
return this.pickerOption
|
64
|
-
}
|
65
|
-
}
|
66
|
-
},
|
67
|
-
methods: {}
|
68
|
-
}
|
69
|
-
</script>
|
70
|
-
<style>
|
71
|
-
.free-button {
|
72
|
-
margin: 10px 0;
|
73
|
-
}
|
74
|
-
</style>
|
1
|
+
<template>
|
2
|
+
<el-date-picker
|
3
|
+
v-if="true"
|
4
|
+
v-model="date"
|
5
|
+
:picker-options="componentPickerOptions"
|
6
|
+
:format="format"
|
7
|
+
:value-format="valueFormat"
|
8
|
+
v-bind="$attrs"
|
9
|
+
v-on="$listeners"
|
10
|
+
>
|
11
|
+
</el-date-picker>
|
12
|
+
<el-date-picker
|
13
|
+
v-else
|
14
|
+
v-model="date"
|
15
|
+
type="date"
|
16
|
+
placeholder="选择日期"
|
17
|
+
>
|
18
|
+
</el-date-picker>
|
19
|
+
</template>
|
20
|
+
|
21
|
+
<script>
|
22
|
+
import datePickerOption from './datePickerOption'
|
23
|
+
export default {
|
24
|
+
name: 'BiDatepicker',
|
25
|
+
props: {
|
26
|
+
pickerOption: {
|
27
|
+
type: Object,
|
28
|
+
default: () => {
|
29
|
+
return {}
|
30
|
+
}
|
31
|
+
},
|
32
|
+
format: {
|
33
|
+
type: String,
|
34
|
+
default: 'yyyy-MM-dd'
|
35
|
+
},
|
36
|
+
valueFormat: {
|
37
|
+
type: String,
|
38
|
+
default: 'yyyy-MM-dd'
|
39
|
+
},
|
40
|
+
value: {
|
41
|
+
type: String || Array,
|
42
|
+
default: ''
|
43
|
+
}
|
44
|
+
},
|
45
|
+
computed: {
|
46
|
+
date: {
|
47
|
+
get() {
|
48
|
+
return this.value
|
49
|
+
},
|
50
|
+
set(val) {
|
51
|
+
this.$emit('input', val)
|
52
|
+
}
|
53
|
+
},
|
54
|
+
componentPickerOptions() {
|
55
|
+
const type = this.$attrs.type
|
56
|
+
if (type === 'daterange') {
|
57
|
+
return Object.assign(datePickerOption.daterange, this.pickerOption)
|
58
|
+
} else if (type === 'monthrange') {
|
59
|
+
return Object.assign(datePickerOption.monthrange, this.pickerOption)
|
60
|
+
} else if (type === 'datetimerange') {
|
61
|
+
return Object.assign(datePickerOption.datetimerange, this.pickerOption)
|
62
|
+
} else {
|
63
|
+
return this.pickerOption
|
64
|
+
}
|
65
|
+
}
|
66
|
+
},
|
67
|
+
methods: {}
|
68
|
+
}
|
69
|
+
</script>
|
70
|
+
<style>
|
71
|
+
.free-button {
|
72
|
+
margin: 10px 0;
|
73
|
+
}
|
74
|
+
</style>
|
@@ -1,104 +1,104 @@
|
|
1
|
-
<template>
|
2
|
-
<el-table-column
|
3
|
-
v-bind="column"
|
4
|
-
v-on="$listeners"
|
5
|
-
>
|
6
|
-
<template
|
7
|
-
slot="header"
|
8
|
-
slot-scope="scope"
|
9
|
-
>
|
10
|
-
<bi-render
|
11
|
-
v-if="column.renderHeader"
|
12
|
-
:scope="scope"
|
13
|
-
:render="column.renderHeader"
|
14
|
-
/>
|
15
|
-
<span v-else>{{ scope.column.label }}</span>
|
16
|
-
</template>
|
17
|
-
|
18
|
-
<template slot-scope="scope">
|
19
|
-
<component
|
20
|
-
:is="column.component"
|
21
|
-
v-if="column.component"
|
22
|
-
v-bind="getCptBind(scope, column)"
|
23
|
-
v-on="column.listeners"
|
24
|
-
/>
|
25
|
-
|
26
|
-
<!-- 嵌套表格 -->
|
27
|
-
<template v-else-if="column.children">
|
28
|
-
<free-column
|
29
|
-
v-for="col in column.children"
|
30
|
-
:key="col.prop"
|
31
|
-
:column="col"
|
32
|
-
/>
|
33
|
-
</template>
|
34
|
-
|
35
|
-
<bi-render
|
36
|
-
v-else
|
37
|
-
:scope="scope"
|
38
|
-
:render="column.render"
|
39
|
-
/>
|
40
|
-
</template>
|
41
|
-
</el-table-column>
|
42
|
-
</template>
|
43
|
-
|
44
|
-
<script>
|
45
|
-
import BiRender from './render'
|
46
|
-
import CellForced from './forced'
|
47
|
-
|
48
|
-
export default {
|
49
|
-
name: 'BiColumn',
|
50
|
-
components: {
|
51
|
-
BiRender
|
52
|
-
},
|
53
|
-
props: {
|
54
|
-
column: {
|
55
|
-
type: Object,
|
56
|
-
default: () => {}
|
57
|
-
}
|
58
|
-
},
|
59
|
-
watch: {
|
60
|
-
column: {
|
61
|
-
handler: 'renderColumn',
|
62
|
-
immediate: true
|
63
|
-
}
|
64
|
-
},
|
65
|
-
methods: {
|
66
|
-
renderColumn() {
|
67
|
-
const { column } = this
|
68
|
-
// 多选:selection / 索引:index / 展开的按钮:expand
|
69
|
-
if (column.type) {
|
70
|
-
column.renderHeader = CellForced[column.type].renderHeader
|
71
|
-
column.render = column.render || CellForced[column.type].renderCell
|
72
|
-
}
|
73
|
-
// 格式化内容
|
74
|
-
if (column.formatter) {
|
75
|
-
column.render = (h, scope) => {
|
76
|
-
return <span>{scope.column.formatter(scope.row, scope.column, scope.row[scope.column.property], scope.$index)}</span>
|
77
|
-
}
|
78
|
-
}
|
79
|
-
// 渲染成text
|
80
|
-
if (!column.render) {
|
81
|
-
column.render = (h, scope) => {
|
82
|
-
return <span>{scope.row[scope.column.property]}</span>
|
83
|
-
}
|
84
|
-
}
|
85
|
-
|
86
|
-
return column
|
87
|
-
},
|
88
|
-
|
89
|
-
getColBind(col) {
|
90
|
-
const bind = Object.assign({}, this.$attrs, col)
|
91
|
-
delete bind.component
|
92
|
-
delete bind.listeners
|
93
|
-
delete bind.propsHandler
|
94
|
-
return bind
|
95
|
-
},
|
96
|
-
|
97
|
-
getCptBind({ row, column }, col) {
|
98
|
-
const props = { row, col, column }
|
99
|
-
const handler = col.propsHandler
|
100
|
-
return (handler && handler(props)) || props
|
101
|
-
}
|
102
|
-
}
|
103
|
-
}
|
104
|
-
</script>
|
1
|
+
<template>
|
2
|
+
<el-table-column
|
3
|
+
v-bind="column"
|
4
|
+
v-on="$listeners"
|
5
|
+
>
|
6
|
+
<template
|
7
|
+
slot="header"
|
8
|
+
slot-scope="scope"
|
9
|
+
>
|
10
|
+
<bi-render
|
11
|
+
v-if="column.renderHeader"
|
12
|
+
:scope="scope"
|
13
|
+
:render="column.renderHeader"
|
14
|
+
/>
|
15
|
+
<span v-else>{{ scope.column.label }}</span>
|
16
|
+
</template>
|
17
|
+
|
18
|
+
<template slot-scope="scope">
|
19
|
+
<component
|
20
|
+
:is="column.component"
|
21
|
+
v-if="column.component"
|
22
|
+
v-bind="getCptBind(scope, column)"
|
23
|
+
v-on="column.listeners"
|
24
|
+
/>
|
25
|
+
|
26
|
+
<!-- 嵌套表格 -->
|
27
|
+
<template v-else-if="column.children">
|
28
|
+
<free-column
|
29
|
+
v-for="col in column.children"
|
30
|
+
:key="col.prop"
|
31
|
+
:column="col"
|
32
|
+
/>
|
33
|
+
</template>
|
34
|
+
|
35
|
+
<bi-render
|
36
|
+
v-else
|
37
|
+
:scope="scope"
|
38
|
+
:render="column.render"
|
39
|
+
/>
|
40
|
+
</template>
|
41
|
+
</el-table-column>
|
42
|
+
</template>
|
43
|
+
|
44
|
+
<script>
|
45
|
+
import BiRender from './render'
|
46
|
+
import CellForced from './forced'
|
47
|
+
|
48
|
+
export default {
|
49
|
+
name: 'BiColumn',
|
50
|
+
components: {
|
51
|
+
BiRender
|
52
|
+
},
|
53
|
+
props: {
|
54
|
+
column: {
|
55
|
+
type: Object,
|
56
|
+
default: () => {}
|
57
|
+
}
|
58
|
+
},
|
59
|
+
watch: {
|
60
|
+
column: {
|
61
|
+
handler: 'renderColumn',
|
62
|
+
immediate: true
|
63
|
+
}
|
64
|
+
},
|
65
|
+
methods: {
|
66
|
+
renderColumn() {
|
67
|
+
const { column } = this
|
68
|
+
// 多选:selection / 索引:index / 展开的按钮:expand
|
69
|
+
if (column.type) {
|
70
|
+
column.renderHeader = CellForced[column.type].renderHeader
|
71
|
+
column.render = column.render || CellForced[column.type].renderCell
|
72
|
+
}
|
73
|
+
// 格式化内容
|
74
|
+
if (column.formatter) {
|
75
|
+
column.render = (h, scope) => {
|
76
|
+
return <span>{scope.column.formatter(scope.row, scope.column, scope.row[scope.column.property], scope.$index)}</span>
|
77
|
+
}
|
78
|
+
}
|
79
|
+
// 渲染成text
|
80
|
+
if (!column.render) {
|
81
|
+
column.render = (h, scope) => {
|
82
|
+
return <span>{scope.row[scope.column.property]}</span>
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
return column
|
87
|
+
},
|
88
|
+
|
89
|
+
getColBind(col) {
|
90
|
+
const bind = Object.assign({}, this.$attrs, col)
|
91
|
+
delete bind.component
|
92
|
+
delete bind.listeners
|
93
|
+
delete bind.propsHandler
|
94
|
+
return bind
|
95
|
+
},
|
96
|
+
|
97
|
+
getCptBind({ row, column }, col) {
|
98
|
+
const props = { row, col, column }
|
99
|
+
const handler = col.propsHandler
|
100
|
+
return (handler && handler(props)) || props
|
101
|
+
}
|
102
|
+
}
|
103
|
+
}
|
104
|
+
</script>
|
@@ -1,76 +1,76 @@
|
|
1
|
-
// 这些选项不应该被覆盖
|
2
|
-
export default {
|
3
|
-
selection: {
|
4
|
-
renderHeader: function(h, { store }) {
|
5
|
-
return (
|
6
|
-
<el-checkbox
|
7
|
-
disabled={store.states.data && store.states.data.length === 0}
|
8
|
-
indeterminate={
|
9
|
-
store.states.selection.length > 0 && !this.isAllSelected
|
10
|
-
}
|
11
|
-
nativeOn-click={this.toggleAllSelection}
|
12
|
-
value={this.isAllSelected}
|
13
|
-
/>
|
14
|
-
)
|
15
|
-
},
|
16
|
-
renderCell: function(h, { row, column, store, $index }) {
|
17
|
-
return (
|
18
|
-
<el-checkbox
|
19
|
-
nativeOn-click={event => event.stopPropagation()}
|
20
|
-
value={store.isSelected(row)}
|
21
|
-
disabled={
|
22
|
-
column.selectable
|
23
|
-
? !column.selectable.call(null, row, $index)
|
24
|
-
: false
|
25
|
-
}
|
26
|
-
on-input={() => {
|
27
|
-
store.commit('rowSelectedChanged', row)
|
28
|
-
}}
|
29
|
-
/>
|
30
|
-
)
|
31
|
-
},
|
32
|
-
sortable: false,
|
33
|
-
resizable: false
|
34
|
-
},
|
35
|
-
index: {
|
36
|
-
renderHeader: function(h, { column }) {
|
37
|
-
return column.label || '#'
|
38
|
-
},
|
39
|
-
renderCell: function(h, { $index, column }) {
|
40
|
-
let i = $index + 1
|
41
|
-
const index = column.index
|
42
|
-
|
43
|
-
if (typeof index === 'number') {
|
44
|
-
i = $index + index
|
45
|
-
} else if (typeof index === 'function') {
|
46
|
-
i = index($index)
|
47
|
-
}
|
48
|
-
|
49
|
-
return <div>{i}</div>
|
50
|
-
},
|
51
|
-
sortable: false
|
52
|
-
},
|
53
|
-
expand: {
|
54
|
-
renderHeader: function(h, { column }) {
|
55
|
-
return column.label || ''
|
56
|
-
},
|
57
|
-
renderCell: function(h, { row, store }) {
|
58
|
-
const classes = ['el-table__expand-icon']
|
59
|
-
if (store.states.expandRows.indexOf(row) > -1) {
|
60
|
-
classes.push('el-table__expand-icon--expanded')
|
61
|
-
}
|
62
|
-
const callback = function(e) {
|
63
|
-
e.stopPropagation()
|
64
|
-
store.toggleRowExpansion(row)
|
65
|
-
}
|
66
|
-
return (
|
67
|
-
<div class={classes} on-click={callback}>
|
68
|
-
<i class="el-icon el-icon-arrow-right"></i>
|
69
|
-
</div>
|
70
|
-
)
|
71
|
-
},
|
72
|
-
sortable: false,
|
73
|
-
resizable: false,
|
74
|
-
className: 'el-table__expand-column'
|
75
|
-
}
|
76
|
-
}
|
1
|
+
// 这些选项不应该被覆盖
|
2
|
+
export default {
|
3
|
+
selection: {
|
4
|
+
renderHeader: function(h, { store }) {
|
5
|
+
return (
|
6
|
+
<el-checkbox
|
7
|
+
disabled={store.states.data && store.states.data.length === 0}
|
8
|
+
indeterminate={
|
9
|
+
store.states.selection.length > 0 && !this.isAllSelected
|
10
|
+
}
|
11
|
+
nativeOn-click={this.toggleAllSelection}
|
12
|
+
value={this.isAllSelected}
|
13
|
+
/>
|
14
|
+
)
|
15
|
+
},
|
16
|
+
renderCell: function(h, { row, column, store, $index }) {
|
17
|
+
return (
|
18
|
+
<el-checkbox
|
19
|
+
nativeOn-click={event => event.stopPropagation()}
|
20
|
+
value={store.isSelected(row)}
|
21
|
+
disabled={
|
22
|
+
column.selectable
|
23
|
+
? !column.selectable.call(null, row, $index)
|
24
|
+
: false
|
25
|
+
}
|
26
|
+
on-input={() => {
|
27
|
+
store.commit('rowSelectedChanged', row)
|
28
|
+
}}
|
29
|
+
/>
|
30
|
+
)
|
31
|
+
},
|
32
|
+
sortable: false,
|
33
|
+
resizable: false
|
34
|
+
},
|
35
|
+
index: {
|
36
|
+
renderHeader: function(h, { column }) {
|
37
|
+
return column.label || '#'
|
38
|
+
},
|
39
|
+
renderCell: function(h, { $index, column }) {
|
40
|
+
let i = $index + 1
|
41
|
+
const index = column.index
|
42
|
+
|
43
|
+
if (typeof index === 'number') {
|
44
|
+
i = $index + index
|
45
|
+
} else if (typeof index === 'function') {
|
46
|
+
i = index($index)
|
47
|
+
}
|
48
|
+
|
49
|
+
return <div>{i}</div>
|
50
|
+
},
|
51
|
+
sortable: false
|
52
|
+
},
|
53
|
+
expand: {
|
54
|
+
renderHeader: function(h, { column }) {
|
55
|
+
return column.label || ''
|
56
|
+
},
|
57
|
+
renderCell: function(h, { row, store }) {
|
58
|
+
const classes = ['el-table__expand-icon']
|
59
|
+
if (store.states.expandRows.indexOf(row) > -1) {
|
60
|
+
classes.push('el-table__expand-icon--expanded')
|
61
|
+
}
|
62
|
+
const callback = function(e) {
|
63
|
+
e.stopPropagation()
|
64
|
+
store.toggleRowExpansion(row)
|
65
|
+
}
|
66
|
+
return (
|
67
|
+
<div class={classes} on-click={callback}>
|
68
|
+
<i class="el-icon el-icon-arrow-right"></i>
|
69
|
+
</div>
|
70
|
+
)
|
71
|
+
},
|
72
|
+
sortable: false,
|
73
|
+
resizable: false,
|
74
|
+
className: 'el-table__expand-column'
|
75
|
+
}
|
76
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import BiTable from './table.vue'
|
2
|
-
|
3
|
-
BiTable.install = function(Vue) {
|
4
|
-
Vue.component(BiTable.name, BiTable)
|
5
|
-
}
|
6
|
-
export default BiTable
|
1
|
+
import BiTable from './table.vue'
|
2
|
+
|
3
|
+
BiTable.install = function(Vue) {
|
4
|
+
Vue.component(BiTable.name, BiTable)
|
5
|
+
}
|
6
|
+
export default BiTable
|
@@ -1,13 +1,13 @@
|
|
1
|
-
<script>
|
2
|
-
export default {
|
3
|
-
name: 'BiRender',
|
4
|
-
functional: true,
|
5
|
-
props: {
|
6
|
-
scope: Object,
|
7
|
-
render: Function
|
8
|
-
},
|
9
|
-
render: (h, ctx) => {
|
10
|
-
return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
|
11
|
-
}
|
12
|
-
}
|
13
|
-
</script>
|
1
|
+
<script>
|
2
|
+
export default {
|
3
|
+
name: 'BiRender',
|
4
|
+
functional: true,
|
5
|
+
props: {
|
6
|
+
scope: Object,
|
7
|
+
render: Function
|
8
|
+
},
|
9
|
+
render: (h, ctx) => {
|
10
|
+
return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
|
11
|
+
}
|
12
|
+
}
|
13
|
+
</script>
|