mali-applet-ui 0.0.77 → 0.0.79
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.
|
@@ -1,64 +1,72 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-table" :class="className"
|
|
3
|
-
<view class="table-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</view>
|
|
12
|
-
<view class="
|
|
13
|
-
<
|
|
2
|
+
<view class="ml-table" :class="className">
|
|
3
|
+
<view v-if="$slots.top" class="ml-table-top-warpper">
|
|
4
|
+
<slot name="top"></slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-table-warpper" :style="tableStyle">
|
|
7
|
+
<view class="table-header">
|
|
8
|
+
<view class="table-column-header">
|
|
9
|
+
<view class="table-tr">
|
|
10
|
+
<view v-for="(column, columnIndex) in tableColumn" :key="columnIndex" class="table-th" :class="{'is-sort': !!column.sortable}" :style="{width: getColWidth(column)}" @click="chickThEvent({ column, columnIndex })">
|
|
11
|
+
<view class="th-title">{{column.title}}</view>
|
|
12
|
+
<view class="th-sort" v-if="column.sortable">
|
|
13
|
+
<view class="asc-btn" :class="{active: column.order === 'asc'}" @click.stop="sortEvent({column, columnIndex}, 'asc')">
|
|
14
|
+
<ml-icon name="arrow-up-filling"></ml-icon>
|
|
15
|
+
</view>
|
|
16
|
+
<view class="desc-btn" :class="{active: column.order === 'desc'}" @click.stop="sortEvent({column, columnIndex}, 'desc')">
|
|
17
|
+
<ml-icon name="arrow-down-filling"></ml-icon>
|
|
18
|
+
</view>
|
|
14
19
|
</view>
|
|
15
20
|
</view>
|
|
16
21
|
</view>
|
|
17
22
|
</view>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
<view v-if="headerData && headerData.length" class="table-body-top">
|
|
24
|
+
<view class="table-tr" v-for="(row, rowIndex) in headerData" :key="rowIndex">
|
|
25
|
+
<view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellHeaderTdClick({ type: 'header', row, rowIndex, column, columnIndex })">
|
|
26
|
+
<view :class="['table-cell', column.align ? `align-${column.align}` : '', getHeaderCellClass({ type: 'header', row, rowIndex, column, columnIndex })]">
|
|
27
|
+
<ml-amount-text v-if="column.cellRender && column.cellRender.name === 'MlAmountText'" :value="row[column.field]" :simplify="column.cellRender.props ? column.cellRender.props.simplify : false"></ml-amount-text>
|
|
28
|
+
<text v-else>{{ getHeaderCellValue({ type: 'header', row, rowIndex, column, columnIndex }) }}</text>
|
|
29
|
+
</view>
|
|
25
30
|
</view>
|
|
26
31
|
</view>
|
|
27
32
|
</view>
|
|
28
33
|
</view>
|
|
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
|
-
|
|
34
|
+
<view class="table-body-contnet">
|
|
35
|
+
<view class="table-tr" v-for="(row, rowIndex) in tableData" :key="rowIndex">
|
|
36
|
+
<view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellTdClick({ type: 'body', row, rowIndex, column, columnIndex })">
|
|
37
|
+
<view :class="['table-cell', column.align ? `align-${column.align}` : '', getCellClass({ type: 'body', row, rowIndex, column, columnIndex })]">
|
|
38
|
+
<text v-if="column.type === 'seq'">{{ rowIndex + 1 }}</text>
|
|
39
|
+
<text v-else-if="column.cellRender && column.cellRender.name === 'Underline'" class="underline">{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
|
|
40
|
+
<ml-amount-text v-else-if="column.cellRender && column.cellRender.name === 'MlAmountText'" :value="row[column.field]" :simplify="column.cellRender.props ? column.cellRender.props.simplify : false"></ml-amount-text>
|
|
41
|
+
<ml-progress-bar
|
|
42
|
+
v-else-if="column.cellRender && column.cellRender.name === 'MlProgressBar'"
|
|
43
|
+
:value="row[column.cellRender.field || column.field]"
|
|
44
|
+
:title="row[column.cellRender.titleField] || ''"
|
|
45
|
+
:titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
|
|
46
|
+
:showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
|
|
47
|
+
:max="column.cellRender.props && column.cellRender.props.max ? column.cellRender.props.max : 100"
|
|
48
|
+
:activeColor="barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : column.cellRender.props ? column.cellRender.props.activeColor : ''"
|
|
49
|
+
:backgroundColor="column.cellRender.props ? column.cellRender.props.backgroundColor : ''">
|
|
50
|
+
</ml-progress-bar>
|
|
51
|
+
<ml-progress-bar
|
|
52
|
+
v-else-if="column.cellRender && column.cellRender.name === 'MlProgressDiffBar'"
|
|
53
|
+
:value="row[column.cellRender.field || column.field]"
|
|
54
|
+
:title="row[column.cellRender.titleField] || ''"
|
|
55
|
+
:max="row[column.cellRender.maxField] || ''"
|
|
56
|
+
:titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
|
|
57
|
+
:showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
|
|
58
|
+
:activeColor="(barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : (column.cellRender.props ? column.cellRender.props.activeColor : '')) || '#FA8C16'"
|
|
59
|
+
:backgroundColor="(column.cellRender.props ? column.cellRender.props.backgroundColor : '') || '#1890FF'">
|
|
60
|
+
</ml-progress-bar>
|
|
61
|
+
<text v-else>{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
|
|
62
|
+
</view>
|
|
58
63
|
</view>
|
|
59
64
|
</view>
|
|
60
65
|
</view>
|
|
61
66
|
</view>
|
|
67
|
+
<view v-if="$slots.bottom" class="ml-table-bottom-warpper">
|
|
68
|
+
<slot name="bottom"></slot>
|
|
69
|
+
</view>
|
|
62
70
|
</view>
|
|
63
71
|
</template>
|
|
64
72
|
|
|
@@ -96,6 +104,9 @@ export default {
|
|
|
96
104
|
computed: {
|
|
97
105
|
sortOpts () {
|
|
98
106
|
return this.sortConfig ? { ...this.sortConfig } : {}
|
|
107
|
+
},
|
|
108
|
+
tableStyle () {
|
|
109
|
+
return `height:${this.height ? (isNaN(this.height) ? this.height : `${this.height}rpx`) : ''}`
|
|
99
110
|
}
|
|
100
111
|
},
|
|
101
112
|
watch: {
|
|
@@ -230,12 +241,15 @@ export default {
|
|
|
230
241
|
<style lang="scss">
|
|
231
242
|
.ml-table {
|
|
232
243
|
margin-top: 20rpx;
|
|
233
|
-
overflow: auto;
|
|
234
244
|
width: 100%;
|
|
235
245
|
font-size: 26rpx;
|
|
236
246
|
box-shadow: 0rpx 0rpx 10rpx -3rpx rgba(0, 0, 0, 0.2);
|
|
237
247
|
background: #fff;
|
|
238
248
|
|
|
249
|
+
.ml-table-warpper {
|
|
250
|
+
overflow: auto;
|
|
251
|
+
}
|
|
252
|
+
|
|
239
253
|
// height: 90vh;
|
|
240
254
|
.table-header {
|
|
241
255
|
position: sticky;
|
|
@@ -316,5 +330,12 @@ export default {
|
|
|
316
330
|
.underline {
|
|
317
331
|
text-decoration: underline;
|
|
318
332
|
}
|
|
333
|
+
|
|
334
|
+
.ml-table-bottom-warpper {
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-direction: column;
|
|
337
|
+
min-height: 70rpx;
|
|
338
|
+
justify-content: center;
|
|
339
|
+
}
|
|
319
340
|
}
|
|
320
341
|
</style>
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<text class="ml-text" :class="[className || '', status ? `status-${status}` : '', {'is-underline': underline}]">
|
|
3
|
-
<
|
|
3
|
+
<text v-if="prefixIcon && prefixIcon !== 'none'" class="ml-text-left-icon">
|
|
4
|
+
<ml-icon :className="prefixIcon"></ml-icon>
|
|
5
|
+
</text>
|
|
6
|
+
<text class="ml-text-content">
|
|
7
|
+
<slot>{{ content }}</slot>
|
|
8
|
+
</text>
|
|
9
|
+
<text v-if="suffixIcon && suffixIcon !== 'none'" class="ml-text-right-icon">
|
|
10
|
+
<ml-icon :className="suffixIcon"></ml-icon>
|
|
11
|
+
</text>
|
|
4
12
|
</text>
|
|
5
13
|
</template>
|
|
6
14
|
|
|
@@ -10,6 +18,8 @@ export default {
|
|
|
10
18
|
props: {
|
|
11
19
|
status: String,
|
|
12
20
|
content: String,
|
|
21
|
+
prefixIcon: String,
|
|
22
|
+
suffixIcon: String,
|
|
13
23
|
underline: Boolean,
|
|
14
24
|
className: String
|
|
15
25
|
}
|