mali-applet-ui 0.1.97 → 0.1.99
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/components/ml-col/ml-col.vue +1 -1
- package/components/ml-date-quick-range-picker/ml-date-quick-range-picker.vue +119 -0
- package/components/ml-date-range-picker/ml-date-range-picker.vue +2 -5
- package/components/ml-datetime-picker/ml-datetime-picker.vue +2 -1
- package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue +2 -1
- package/components/ml-select-picker/ml-select-picker.vue +21 -3
- package/package.json +1 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-date-quick-range-picker" :class="className">
|
|
3
|
+
<view class="ml-date-quick-range-picker-left">
|
|
4
|
+
<ml-select-picker v-model="selectType" :options="typeList" :border="border" @change="changeTypeEvent"></ml-select-picker>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-date-quick-range-picker-right">
|
|
7
|
+
<uni-datetime-picker v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable"/>
|
|
8
|
+
</view>
|
|
9
|
+
</view>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
import XEUtils from 'xe-utils'
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
name: 'MlDateQuickRangePicker',
|
|
17
|
+
options: {
|
|
18
|
+
virtualHost: true
|
|
19
|
+
},
|
|
20
|
+
props: {
|
|
21
|
+
defaultType: Number,
|
|
22
|
+
border: Boolean,
|
|
23
|
+
startDate: String,
|
|
24
|
+
endDate: String,
|
|
25
|
+
minDate: [String, Number],
|
|
26
|
+
maxDate: [String, Number],
|
|
27
|
+
clearable: Boolean,
|
|
28
|
+
className: String
|
|
29
|
+
},
|
|
30
|
+
data () {
|
|
31
|
+
return {
|
|
32
|
+
selectType: 0,
|
|
33
|
+
selectDates: []
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
computed: {
|
|
37
|
+
typeList () {
|
|
38
|
+
return [
|
|
39
|
+
{ label: '周', value: 1 },
|
|
40
|
+
{ label: '月', value: 2 },
|
|
41
|
+
{ label: '年', value: 3 },
|
|
42
|
+
{ label: '自定义', value: 0 }
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
watch: {
|
|
47
|
+
startDate () {
|
|
48
|
+
this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
created () {
|
|
52
|
+
if (this.startDate) {
|
|
53
|
+
this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
|
|
54
|
+
}
|
|
55
|
+
if (this.defaultType) {
|
|
56
|
+
this.selectType = this.defaultType
|
|
57
|
+
this.$nextTick(() => {
|
|
58
|
+
if (!this.startDate) {
|
|
59
|
+
this.changeTypeEvent()
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
methods: {
|
|
65
|
+
changeTypeEvent () {
|
|
66
|
+
let startStr = ''
|
|
67
|
+
let enStr = ''
|
|
68
|
+
if (this.selectType === 0) {
|
|
69
|
+
return
|
|
70
|
+
}
|
|
71
|
+
if (this.selectType !== null) {
|
|
72
|
+
let startDate = new Date()
|
|
73
|
+
const endDate = new Date()
|
|
74
|
+
switch (this.selectType) {
|
|
75
|
+
case 1:
|
|
76
|
+
startDate = XEUtils.getWhatWeek(endDate, -1)
|
|
77
|
+
break
|
|
78
|
+
case 2:
|
|
79
|
+
startDate = XEUtils.getWhatDay(XEUtils.getWhatMonth(endDate, -1), 1)
|
|
80
|
+
break
|
|
81
|
+
case 3:
|
|
82
|
+
startDate = XEUtils.getWhatDay(XEUtils.getWhatYear(endDate, -1), 1)
|
|
83
|
+
break
|
|
84
|
+
}
|
|
85
|
+
startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd')
|
|
86
|
+
enStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd')
|
|
87
|
+
}
|
|
88
|
+
this.selectDates = startStr && enStr ? [startStr, enStr] : []
|
|
89
|
+
this.$emit('update:startDate', startStr)
|
|
90
|
+
this.$emit('update:endDate', enStr)
|
|
91
|
+
this.$emit('change', { startDate: startStr, endDate: enStr })
|
|
92
|
+
},
|
|
93
|
+
changeEvent (value) {
|
|
94
|
+
const [startDate, endDate] = value
|
|
95
|
+
if (!startDate || !endDate) {
|
|
96
|
+
this.selectType = 0
|
|
97
|
+
}
|
|
98
|
+
this.$emit('update:startDate', startDate || '')
|
|
99
|
+
this.$emit('update:endDate', endDate || '')
|
|
100
|
+
this.$emit('change', { startDate, endDate })
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style lang="scss">
|
|
107
|
+
.ml-date-quick-range-picker {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
.ml-date-quick-range-picker-left {
|
|
111
|
+
width: 170rpx;
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
}
|
|
114
|
+
.ml-date-quick-range-picker-right {
|
|
115
|
+
flex-grow: 1;
|
|
116
|
+
margin-left: 16rpx;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable"/>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -14,10 +14,7 @@ export default {
|
|
|
14
14
|
endDate: String,
|
|
15
15
|
minDate: [String, Number],
|
|
16
16
|
maxDate: [String, Number],
|
|
17
|
-
|
|
18
|
-
type: Boolean,
|
|
19
|
-
default: true
|
|
20
|
-
},
|
|
17
|
+
clearable: Boolean,
|
|
21
18
|
className: String
|
|
22
19
|
},
|
|
23
20
|
data () {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="minDate" :end="maxDate" :hide-second="hideSecond" @change="changeEvent" :border="border"/>
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="minDate" :end="maxDate" :hide-second="hideSecond" @change="changeEvent" :border="border" :clear-icon="clearable" />
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -13,6 +13,7 @@ export default {
|
|
|
13
13
|
border: Boolean,
|
|
14
14
|
minDate: [String, Number],
|
|
15
15
|
maxDate: [String, Number],
|
|
16
|
+
clearable: Boolean,
|
|
16
17
|
hideSecond: Boolean,
|
|
17
18
|
className: String
|
|
18
19
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable" />
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -15,6 +15,7 @@ export default {
|
|
|
15
15
|
endDate: String,
|
|
16
16
|
minDate: [String, Number],
|
|
17
17
|
maxDate: [String, Number],
|
|
18
|
+
clearable: Boolean,
|
|
18
19
|
className: String
|
|
19
20
|
},
|
|
20
21
|
data () {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<view v-if="isFromReadonly" class="ml-select-picker is-readonly">
|
|
3
3
|
<view class="ml-select-picker-readonly-content">{{ selectLabel }}</view>
|
|
4
4
|
</view>
|
|
5
|
-
<picker v-else class="ml-select-picker" mode="selector" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
|
|
5
|
+
<picker v-else class="ml-select-picker" mode="selector" :value="selectIndex" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
|
|
6
6
|
<view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border, 'is-clear': value !== null}]">
|
|
7
7
|
<view class="ml-select-picker-text">
|
|
8
8
|
<text v-if="value !== null">{{ selectLabel }}</text>
|
|
@@ -49,6 +49,7 @@ export default {
|
|
|
49
49
|
},
|
|
50
50
|
data () {
|
|
51
51
|
return {
|
|
52
|
+
selectIndex: 0
|
|
52
53
|
}
|
|
53
54
|
},
|
|
54
55
|
computed: {
|
|
@@ -83,10 +84,29 @@ export default {
|
|
|
83
84
|
return this.optOptions.value || 'value'
|
|
84
85
|
}
|
|
85
86
|
},
|
|
87
|
+
watch: {
|
|
88
|
+
value () {
|
|
89
|
+
this.updateSelectStatus()
|
|
90
|
+
},
|
|
91
|
+
optionList () {
|
|
92
|
+
this.updateSelectStatus()
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
created () {
|
|
96
|
+
this.updateSelectStatus()
|
|
97
|
+
},
|
|
86
98
|
methods: {
|
|
99
|
+
updateSelectStatus () {
|
|
100
|
+
const index = XEUtils.findIndexOf(this.optionList, item => String(item[this.optValueField]) === String(this.value))
|
|
101
|
+
this.selectIndex = index === -1 ? 0 : index
|
|
102
|
+
},
|
|
87
103
|
changeEvent (e) {
|
|
88
104
|
const index = e.detail.value
|
|
105
|
+
if (index === this.selectIndex) {
|
|
106
|
+
return
|
|
107
|
+
}
|
|
89
108
|
const item = this.optionList[index]
|
|
109
|
+
this.selectIndex = index
|
|
90
110
|
let value = null
|
|
91
111
|
if (item) {
|
|
92
112
|
value = item[this.optValueField]
|
|
@@ -135,7 +155,6 @@ export default {
|
|
|
135
155
|
}
|
|
136
156
|
.ml-select-picker-text {
|
|
137
157
|
flex-grow: 1;
|
|
138
|
-
padding-right: 10rpx;
|
|
139
158
|
overflow: hidden;
|
|
140
159
|
text-overflow: ellipsis;
|
|
141
160
|
white-space: nowrap;
|
|
@@ -151,7 +170,6 @@ export default {
|
|
|
151
170
|
border-radius: 0 $ml-border-radius $ml-border-radius 0;
|
|
152
171
|
}
|
|
153
172
|
.ml-select-picker-icon {
|
|
154
|
-
width: 60rpx;
|
|
155
173
|
display: flex;
|
|
156
174
|
flex-shrink: 0;
|
|
157
175
|
align-items: center;
|