mali-applet-ui 0.0.41 → 0.0.45
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-amount-text/ml-amount-text.vue +22 -1
- package/components/ml-approval-record/ml-approval-record.vue +155 -0
- package/components/ml-approval-select/ml-approval-select.vue +107 -0
- package/components/ml-approval-type/ml-approval-type.vue +1 -1
- package/components/ml-checkbox/ml-checkbox.vue +6 -1
- package/components/ml-col/ml-col.vue +10 -2
- package/components/ml-date-picker/ml-date-picker.vue +24 -4
- package/components/ml-date-range-picker/ml-date-range-picker.vue +3 -3
- package/components/ml-datetime-picker/ml-datetime-picker.vue +3 -3
- package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue +7 -3
- package/components/ml-dict-type/ml-dict-type.vue +59 -0
- package/components/ml-form/ml-form.vue +2 -1
- package/components/ml-form-item/ml-form-item.vue +13 -1
- package/components/ml-full-watermark/ml-full-watermark.vue +1 -1
- package/components/ml-input/ml-input.vue +18 -1
- package/components/ml-list-item/ml-list-item.vue +1 -1
- package/components/ml-radio/ml-radio.vue +5 -1
- package/components/ml-select-picker/ml-select-picker.vue +20 -5
- package/components/ml-text/ml-text.vue +41 -0
- package/components/ml-textarea/ml-textarea.vue +18 -1
- package/components/ml-upload/ml-upload.vue +47 -6
- package/config/index.js +9 -0
- package/config/store.js +22 -0
- package/index.js +11 -4
- package/package.json +2 -1
- package/utils/date.js +19 -0
- package/utils/file.js +21 -0
- package/utils/index.js +3 -157
- package/utils/number.js +139 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-amount-text" :class="className">
|
|
2
|
+
<view class="ml-amount-text" :class="[className || '', status ? `status-${status}` : '', {'is-underline': underline}]">
|
|
3
3
|
<slot name="symbol">
|
|
4
4
|
<view v-if="symbol" class="amount-flag">￥</view>
|
|
5
5
|
</slot>
|
|
@@ -23,6 +23,7 @@ export default {
|
|
|
23
23
|
props: {
|
|
24
24
|
value: [String, Number],
|
|
25
25
|
simplify: Boolean,
|
|
26
|
+
status: String,
|
|
26
27
|
symbol: {
|
|
27
28
|
type: Boolean,
|
|
28
29
|
default: true
|
|
@@ -31,6 +32,7 @@ export default {
|
|
|
31
32
|
type: Boolean,
|
|
32
33
|
default: false
|
|
33
34
|
},
|
|
35
|
+
underline: Boolean,
|
|
34
36
|
className: String
|
|
35
37
|
},
|
|
36
38
|
computed: {
|
|
@@ -53,6 +55,10 @@ export default {
|
|
|
53
55
|
<style lang="scss">
|
|
54
56
|
.ml-amount-text {
|
|
55
57
|
display: inline;
|
|
58
|
+
padding: 0 4rpx;
|
|
59
|
+
&.is-underline {
|
|
60
|
+
text-decoration: underline;
|
|
61
|
+
}
|
|
56
62
|
.amount-flag,
|
|
57
63
|
.amount-num,
|
|
58
64
|
.amount-unit {
|
|
@@ -62,5 +68,20 @@ export default {
|
|
|
62
68
|
font-size: 0.65em;
|
|
63
69
|
color: rgba(39, 42, 48, 0.45);
|
|
64
70
|
}
|
|
71
|
+
&.status-primary {
|
|
72
|
+
color: $uni-color-primary;
|
|
73
|
+
}
|
|
74
|
+
&.status-success {
|
|
75
|
+
color: $uni-color-success;
|
|
76
|
+
}
|
|
77
|
+
&.status-info {
|
|
78
|
+
color: #909399;
|
|
79
|
+
}
|
|
80
|
+
&.status-warning {
|
|
81
|
+
color: $uni-color-warning;
|
|
82
|
+
}
|
|
83
|
+
&.status-danger {
|
|
84
|
+
color: $uni-color-error;
|
|
85
|
+
}
|
|
65
86
|
}
|
|
66
87
|
</style>
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-approval-record">
|
|
3
|
+
<view class="ml-approval-record-header">
|
|
4
|
+
<view class="ml-approval-record-header-title">审批记录</view>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-approval-record-body">
|
|
7
|
+
<view class="ml-approval-record-list" v-for="(group, index) in options" :key="index">
|
|
8
|
+
<view class="ml-approval-record-flow-line"></view>
|
|
9
|
+
<view class="ml-approval-record-item">
|
|
10
|
+
<view class="ml-approval-record-item-title">{{ group.name }}</view>
|
|
11
|
+
</view>
|
|
12
|
+
<view class="ml-approval-record-users">
|
|
13
|
+
<view class="ml-approval-record-user-item" v-for="(item, index) in group.users" :key="index">
|
|
14
|
+
<view class="ml-approval-record-user-item-info">
|
|
15
|
+
<view class="ml-approval-record-user-item-left">
|
|
16
|
+
<image class="ml-approval-record-user-picture" :src="item.picture" mode="scaleToFill"></image>
|
|
17
|
+
</view>
|
|
18
|
+
<view class="ml-approval-record-user-item-content">
|
|
19
|
+
<view class="ml-approval-record-user-item-top">
|
|
20
|
+
<view class="ml-approval-record-user-name">{{ item.name }}</view>
|
|
21
|
+
<ml-approval-type :value="item.status"></ml-approval-type>
|
|
22
|
+
</view>
|
|
23
|
+
<view class="ml-approval-record-user-role">{{ item.role }}</view>
|
|
24
|
+
</view>
|
|
25
|
+
<view class="ml-approval-record-user-item-right">
|
|
26
|
+
<view class="ml-approval-record-user-date">{{ item.date }}</view>
|
|
27
|
+
</view>
|
|
28
|
+
</view>
|
|
29
|
+
<view class="ml-approval-record-user-item-comment">
|
|
30
|
+
<text>{{ item.comment }}</text>
|
|
31
|
+
</view>
|
|
32
|
+
</view>
|
|
33
|
+
</view>
|
|
34
|
+
</view>
|
|
35
|
+
</view>
|
|
36
|
+
</view>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
export default {
|
|
41
|
+
name: 'MlApprovalRecord',
|
|
42
|
+
props: {
|
|
43
|
+
value: Array,
|
|
44
|
+
options: Array
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style lang="scss">
|
|
50
|
+
.ml-approval-record {
|
|
51
|
+
background: #ffffff;
|
|
52
|
+
padding: 20rpx;
|
|
53
|
+
border-radius: 10rpx;
|
|
54
|
+
font-size: 30rpx;
|
|
55
|
+
}
|
|
56
|
+
.ml-approval-record-header-title {
|
|
57
|
+
font-weight: 700;
|
|
58
|
+
line-height: 60rpx;
|
|
59
|
+
}
|
|
60
|
+
.ml-approval-record-list {
|
|
61
|
+
position: relative;
|
|
62
|
+
padding-bottom: 10rpx;
|
|
63
|
+
.ml-approval-record-flow-line {
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: 0;
|
|
66
|
+
left: 0;
|
|
67
|
+
height: 100%;
|
|
68
|
+
width: 4rpx;
|
|
69
|
+
background: #D9D9D9;
|
|
70
|
+
&::before {
|
|
71
|
+
content: "";
|
|
72
|
+
position: absolute;
|
|
73
|
+
top: 16rpx;
|
|
74
|
+
left: -8rpx;
|
|
75
|
+
width: 20rpx;
|
|
76
|
+
height: 20rpx;
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
background: #D9D9D9;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
&:first-child {
|
|
82
|
+
.ml-approval-record-flow-line {
|
|
83
|
+
top: 16rpx;
|
|
84
|
+
&::before {
|
|
85
|
+
top: 0;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
&:last-child {
|
|
90
|
+
.ml-approval-record-flow-line {
|
|
91
|
+
height: 30rpx;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
.ml-approval-record-item-title {
|
|
96
|
+
padding-left: 40rpx;
|
|
97
|
+
line-height: 50rpx;
|
|
98
|
+
}
|
|
99
|
+
.ml-approval-record-users {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
padding-left: 40rpx;
|
|
103
|
+
}
|
|
104
|
+
.ml-approval-record-user-item {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-direction: column;
|
|
107
|
+
padding: 10rpx;
|
|
108
|
+
.ml-approval-record-user-item-info {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: row;
|
|
111
|
+
}
|
|
112
|
+
.ml-approval-record-user-item-left {
|
|
113
|
+
flex-shrink: 0;
|
|
114
|
+
}
|
|
115
|
+
.ml-approval-record-user-item-content {
|
|
116
|
+
flex-grow: 1;
|
|
117
|
+
padding: 0 10rpx;
|
|
118
|
+
}
|
|
119
|
+
.ml-approval-record-user-item-right {
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
}
|
|
122
|
+
.ml-approval-record-user-item-top {
|
|
123
|
+
line-height: 40rpx;
|
|
124
|
+
}
|
|
125
|
+
.ml-approval-record-user-picture {
|
|
126
|
+
width: 100rpx;
|
|
127
|
+
height: 100rpx;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
}
|
|
130
|
+
.ml-approval-record-user-name {
|
|
131
|
+
display: inline-block;
|
|
132
|
+
vertical-align: middle;
|
|
133
|
+
max-width: 150rpx;
|
|
134
|
+
overflow: hidden;
|
|
135
|
+
text-overflow: ellipsis;
|
|
136
|
+
white-space: nowrap;
|
|
137
|
+
margin-right: 10rpx;
|
|
138
|
+
color: rgba(0, 0, 0, 0.85);
|
|
139
|
+
}
|
|
140
|
+
.ml-approval-record-user-role {
|
|
141
|
+
font-size: 24rpx;
|
|
142
|
+
color: rgba(0, 0, 0, 0.86);
|
|
143
|
+
}
|
|
144
|
+
.ml-approval-record-user-date {
|
|
145
|
+
font-size: 24rpx;
|
|
146
|
+
}
|
|
147
|
+
.ml-approval-record-user-item-comment{
|
|
148
|
+
padding: 20rpx;
|
|
149
|
+
background: #F0F2F5;
|
|
150
|
+
height: 160rpx;
|
|
151
|
+
border-radius: 10rpx;
|
|
152
|
+
overflow: auto;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
</style>
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="ml-approval-select">
|
|
3
|
+
<view class="ml-approval-select-header">
|
|
4
|
+
<view class="ml-approval-select-header-title">审批流程</view>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-approval-select-body">
|
|
7
|
+
<view class="ml-approval-select-list" v-for="(group, index) in options" :key="index">
|
|
8
|
+
<view class="ml-approval-select-item">
|
|
9
|
+
<view class="ml-approval-select-item-title">{{ group.name }}</view>
|
|
10
|
+
</view>
|
|
11
|
+
<view class="ml-approval-select-users">
|
|
12
|
+
<view class="ml-approval-select-user-item" v-for="(item, index) in group.users" :key="index">
|
|
13
|
+
<image class="ml-approval-select-user-picture" :src="item.picture" mode="scaleToFill"></image>
|
|
14
|
+
<view class="ml-approval-select-user-name">{{ item.name }}</view>
|
|
15
|
+
<view class="ml-approval-select-user-remove">
|
|
16
|
+
<ml-icon name="close"></ml-icon>
|
|
17
|
+
</view>
|
|
18
|
+
</view>
|
|
19
|
+
<view class="ml-approval-select-user-add">
|
|
20
|
+
<view class="ml-approval-select-user-add-icon">
|
|
21
|
+
<ml-icon name="add"></ml-icon>
|
|
22
|
+
</view>
|
|
23
|
+
</view>
|
|
24
|
+
</view>
|
|
25
|
+
</view>
|
|
26
|
+
</view>
|
|
27
|
+
</view>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
export default {
|
|
32
|
+
name: 'MlApprovalSelect',
|
|
33
|
+
props: {
|
|
34
|
+
value: Array,
|
|
35
|
+
options: Array
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<style lang="scss">
|
|
41
|
+
.ml-approval-select {
|
|
42
|
+
background: #ffffff;
|
|
43
|
+
padding: 20rpx;
|
|
44
|
+
border-radius: 10rpx;
|
|
45
|
+
font-size: 30rpx;
|
|
46
|
+
}
|
|
47
|
+
.ml-approval-select-header-title {
|
|
48
|
+
font-weight: 700;
|
|
49
|
+
line-height: 60rpx;
|
|
50
|
+
}
|
|
51
|
+
.ml-approval-select-list {
|
|
52
|
+
padding-bottom: 10rpx;
|
|
53
|
+
}
|
|
54
|
+
.ml-approval-select-item-title {
|
|
55
|
+
padding-left: 20rpx;
|
|
56
|
+
line-height: 50rpx;
|
|
57
|
+
}
|
|
58
|
+
.ml-approval-select-users {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: row;
|
|
61
|
+
flex-wrap: wrap;
|
|
62
|
+
}
|
|
63
|
+
.ml-approval-select-user-item {
|
|
64
|
+
position: relative;
|
|
65
|
+
padding: 10rpx;
|
|
66
|
+
width: 150rpx;
|
|
67
|
+
text-align: center;
|
|
68
|
+
.ml-approval-select-user-picture {
|
|
69
|
+
width: 100rpx;
|
|
70
|
+
height: 100rpx;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
}
|
|
73
|
+
.ml-approval-select-user-name {
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
text-overflow: ellipsis;
|
|
76
|
+
white-space: nowrap;
|
|
77
|
+
font-size: 24rpx;
|
|
78
|
+
}
|
|
79
|
+
.ml-approval-select-user-remove {
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 0;
|
|
82
|
+
right: 10rpx;
|
|
83
|
+
width: 40rpx;
|
|
84
|
+
height: 40rpx;
|
|
85
|
+
line-height: 40rpx;
|
|
86
|
+
border-radius: 50%;
|
|
87
|
+
text-align: center;
|
|
88
|
+
color: #ffffff;
|
|
89
|
+
background: rgba(0, 0, 0, 0.45);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
.ml-approval-select-user-add {
|
|
93
|
+
padding: 10rpx;
|
|
94
|
+
width: 160rpx;
|
|
95
|
+
text-align: center;
|
|
96
|
+
.ml-approval-select-user-add-icon {
|
|
97
|
+
width: 100rpx;
|
|
98
|
+
height: 100rpx;
|
|
99
|
+
line-height: 100rpx;
|
|
100
|
+
border-radius: 50%;
|
|
101
|
+
font-size: 50rpx;
|
|
102
|
+
color: $uni-color-primary;
|
|
103
|
+
background: #DAE6FF;
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
@@ -61,8 +61,13 @@ export default {
|
|
|
61
61
|
.ml-checkbox-icon {
|
|
62
62
|
display: inline-block;
|
|
63
63
|
width: 40rpx;
|
|
64
|
-
margin-right:
|
|
64
|
+
margin-right: 10rpx;
|
|
65
65
|
text-align: center;
|
|
66
|
+
font-size: 1.3em;
|
|
67
|
+
}
|
|
68
|
+
.ml-checkbox-icon,
|
|
69
|
+
.ml-checkbox-content {
|
|
70
|
+
vertical-align: middle;
|
|
66
71
|
}
|
|
67
72
|
}
|
|
68
73
|
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-flex': flex,'is-fixed': width || shrink}]" :style="styles">
|
|
2
|
+
<view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', verticalAling ? `vertical-${verticalAling}` : '', {'is-light': light, 'is-flex': verticalAling || flex,'is-fixed': width || shrink}]" :style="styles">
|
|
3
3
|
<slot></slot>
|
|
4
4
|
</view>
|
|
5
5
|
</template>
|
|
@@ -12,15 +12,17 @@ export default {
|
|
|
12
12
|
},
|
|
13
13
|
props: {
|
|
14
14
|
span: [String, Number],
|
|
15
|
+
light: Boolean,
|
|
15
16
|
flex: Boolean,
|
|
16
17
|
shrink: Boolean,
|
|
17
18
|
align: String,
|
|
19
|
+
verticalAling: String,
|
|
18
20
|
width: String,
|
|
19
21
|
className: String
|
|
20
22
|
},
|
|
21
23
|
computed: {
|
|
22
24
|
styles () {
|
|
23
|
-
return this.width ? `width: ${this.width};` : ''
|
|
25
|
+
return this.width ? `width: ${this.width};` : ''
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
}
|
|
@@ -31,6 +33,9 @@ export default {
|
|
|
31
33
|
$spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
|
|
32
34
|
37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
|
|
33
35
|
70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
|
|
36
|
+
&.is-light {
|
|
37
|
+
color: rgba(0, 0, 0, 0.45);
|
|
38
|
+
}
|
|
34
39
|
&.is-flex {
|
|
35
40
|
display: flex;
|
|
36
41
|
flex-direction: row;
|
|
@@ -43,6 +48,9 @@ export default {
|
|
|
43
48
|
&.align-right {
|
|
44
49
|
justify-content: right;
|
|
45
50
|
}
|
|
51
|
+
&.vertical-center {
|
|
52
|
+
align-items: center;
|
|
53
|
+
}
|
|
46
54
|
}
|
|
47
55
|
&.align-left {
|
|
48
56
|
text-align: left;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
<view v-if="isFromReadonly" class="ml-date-picker is-readonly">
|
|
3
|
+
<view class="ml-date-picker-readonly-content">{{ value }}</view>
|
|
4
|
+
</view>
|
|
5
|
+
<uni-datetime-picker v-else :class="className" v-model="selectVal" type="date" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
|
|
3
6
|
</template>
|
|
4
7
|
|
|
5
8
|
<script>
|
|
@@ -11,15 +14,26 @@ export default {
|
|
|
11
14
|
props: {
|
|
12
15
|
value: String,
|
|
13
16
|
border: Boolean,
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
minDate: [String, Number],
|
|
18
|
+
maxDate: [String, Number],
|
|
16
19
|
className: String
|
|
17
20
|
},
|
|
21
|
+
inject: {
|
|
22
|
+
form: {
|
|
23
|
+
from: 'mlForm',
|
|
24
|
+
default: null
|
|
25
|
+
}
|
|
26
|
+
},
|
|
18
27
|
data () {
|
|
19
28
|
return {
|
|
20
29
|
selectVal: ''
|
|
21
30
|
}
|
|
22
31
|
},
|
|
32
|
+
computed: {
|
|
33
|
+
isFromReadonly () {
|
|
34
|
+
return this.form ? this.form.readonly : false
|
|
35
|
+
}
|
|
36
|
+
},
|
|
23
37
|
watch: {
|
|
24
38
|
value (value) {
|
|
25
39
|
this.selectVal = value
|
|
@@ -37,4 +51,10 @@ export default {
|
|
|
37
51
|
}
|
|
38
52
|
}
|
|
39
53
|
}
|
|
40
|
-
</script>
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<style lang="scss">
|
|
57
|
+
.ml-date-picker-readonly-content {
|
|
58
|
+
padding: 20rpx;
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clear"/>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -12,8 +12,8 @@ export default {
|
|
|
12
12
|
border: Boolean,
|
|
13
13
|
startDate: String,
|
|
14
14
|
endDate: String,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
minDate: [String, Number],
|
|
16
|
+
maxDate: [String, Number],
|
|
17
17
|
clear: {
|
|
18
18
|
type: Boolean,
|
|
19
19
|
default: true
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -11,8 +11,8 @@ export default {
|
|
|
11
11
|
props: {
|
|
12
12
|
value: String,
|
|
13
13
|
border: Boolean,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
minDate: [String, Number],
|
|
15
|
+
maxDate: [String, Number],
|
|
16
16
|
className: String
|
|
17
17
|
},
|
|
18
18
|
data () {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="
|
|
2
|
+
<uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -9,11 +9,12 @@ export default {
|
|
|
9
9
|
virtualHost: true
|
|
10
10
|
},
|
|
11
11
|
props: {
|
|
12
|
+
value: Array,
|
|
12
13
|
border: Boolean,
|
|
13
14
|
startDate: String,
|
|
14
15
|
endDate: String,
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
minDate: [String, Number],
|
|
17
|
+
maxDate: [String, Number],
|
|
17
18
|
className: String
|
|
18
19
|
},
|
|
19
20
|
data () {
|
|
@@ -29,11 +30,14 @@ export default {
|
|
|
29
30
|
created () {
|
|
30
31
|
if (this.startDate) {
|
|
31
32
|
this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
|
|
33
|
+
} else if (this.value && this.value.length) {
|
|
34
|
+
this.selectDates = this.value
|
|
32
35
|
}
|
|
33
36
|
},
|
|
34
37
|
methods: {
|
|
35
38
|
changeEvent (value) {
|
|
36
39
|
const [startDate, endDate] = value
|
|
40
|
+
this.$emit('input', value)
|
|
37
41
|
this.$emit('update:startDate', startDate)
|
|
38
42
|
this.$emit('update:endDate', endDate)
|
|
39
43
|
this.$emit('change', { startDate, endDate })
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<text class="ml-dict-type" :class="[className || '', status ? `status-${status}` : '', {'is-underline': underline}]">{{ selectLabel }}</text>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
export default {
|
|
7
|
+
name: 'MlDictType',
|
|
8
|
+
options: {
|
|
9
|
+
virtualHost: true
|
|
10
|
+
},
|
|
11
|
+
props: {
|
|
12
|
+
value: [Number, String],
|
|
13
|
+
options: Array,
|
|
14
|
+
status: String,
|
|
15
|
+
underline: Boolean,
|
|
16
|
+
optionProps: Object,
|
|
17
|
+
className: String
|
|
18
|
+
},
|
|
19
|
+
computed: {
|
|
20
|
+
selectLabel () {
|
|
21
|
+
const item = this.options ? this.options.find(item => item[this.optValueField] === this.value) : null
|
|
22
|
+
return item ? item[this.optLabelField] : this.value
|
|
23
|
+
},
|
|
24
|
+
optOptions () {
|
|
25
|
+
return Object.assign({}, this.optionProps)
|
|
26
|
+
},
|
|
27
|
+
optLabelField () {
|
|
28
|
+
return this.optOptions.label || 'label'
|
|
29
|
+
},
|
|
30
|
+
optValueField () {
|
|
31
|
+
return this.optOptions.value || 'value'
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<style lang="scss">
|
|
38
|
+
.ml-dict-type {
|
|
39
|
+
padding: 0 4rpx;
|
|
40
|
+
&.is-underline {
|
|
41
|
+
text-decoration: underline;
|
|
42
|
+
}
|
|
43
|
+
&.status-primary {
|
|
44
|
+
color: $uni-color-primary;
|
|
45
|
+
}
|
|
46
|
+
&.status-success {
|
|
47
|
+
color: $uni-color-success;
|
|
48
|
+
}
|
|
49
|
+
&.status-info {
|
|
50
|
+
color: #909399;
|
|
51
|
+
}
|
|
52
|
+
&.status-warning {
|
|
53
|
+
color: $uni-color-warning;
|
|
54
|
+
}
|
|
55
|
+
&.status-danger {
|
|
56
|
+
color: $uni-color-error;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
@@ -77,7 +77,7 @@ export default {
|
|
|
77
77
|
return {}
|
|
78
78
|
})
|
|
79
79
|
},
|
|
80
|
-
updateModel ({ field, value}) {
|
|
80
|
+
updateModel ({ field, value }) {
|
|
81
81
|
this.$emit('input', { ...this.value, [field]: value })
|
|
82
82
|
}
|
|
83
83
|
}
|
|
@@ -87,5 +87,6 @@ export default {
|
|
|
87
87
|
<style lang="scss">
|
|
88
88
|
.ml-form {
|
|
89
89
|
display: block;
|
|
90
|
+
font-size: $uni-font-size-base;
|
|
90
91
|
}
|
|
91
92
|
</style>
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
<ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
|
|
13
13
|
<ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
|
|
14
14
|
<ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" border @change="modelEvent"></ml-textarea>
|
|
15
|
+
<ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
|
|
15
16
|
<view v-else>{{ itemValue }}</view>
|
|
16
17
|
</slot>
|
|
17
18
|
</uni-forms-item>
|
|
@@ -42,6 +43,15 @@ export default {
|
|
|
42
43
|
}
|
|
43
44
|
},
|
|
44
45
|
computed: {
|
|
46
|
+
isRequired () {
|
|
47
|
+
if (this.form && this.form.formRules) {
|
|
48
|
+
const rules = this.form.formRules[this.field]
|
|
49
|
+
if (rules && rules.some(item => item.required)) {
|
|
50
|
+
return true
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return false
|
|
54
|
+
},
|
|
45
55
|
itemValue () {
|
|
46
56
|
return this.formData[this.field]
|
|
47
57
|
},
|
|
@@ -80,7 +90,9 @@ export default {
|
|
|
80
90
|
methods: {
|
|
81
91
|
init () {
|
|
82
92
|
this.$nextTick(() => {
|
|
83
|
-
this.$refs.uniFormItem
|
|
93
|
+
if (this.$refs.uniFormItem) {
|
|
94
|
+
this.$refs.uniFormItem.localLabelPos = this.itemVertical
|
|
95
|
+
}
|
|
84
96
|
})
|
|
85
97
|
},
|
|
86
98
|
matchComponent (name) {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view
|
|
2
|
+
<view v-if="isFromReadonly" class="ml-input is-readonly">
|
|
3
|
+
<view class="ml-input-readonly-content">{{ inpVal }}</view>
|
|
4
|
+
</view>
|
|
5
|
+
<view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}]">
|
|
3
6
|
<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
|
|
4
7
|
<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
|
|
5
8
|
<ml-icon v-else name="search"></ml-icon>
|
|
@@ -38,11 +41,22 @@ export default {
|
|
|
38
41
|
},
|
|
39
42
|
className: String
|
|
40
43
|
},
|
|
44
|
+
inject: {
|
|
45
|
+
form: {
|
|
46
|
+
from: 'mlForm',
|
|
47
|
+
default: null
|
|
48
|
+
}
|
|
49
|
+
},
|
|
41
50
|
data () {
|
|
42
51
|
return {
|
|
43
52
|
inpVal: ''
|
|
44
53
|
}
|
|
45
54
|
},
|
|
55
|
+
computed: {
|
|
56
|
+
isFromReadonly () {
|
|
57
|
+
return this.form ? this.form.readonly : false
|
|
58
|
+
}
|
|
59
|
+
},
|
|
46
60
|
watch: {
|
|
47
61
|
value (val) {
|
|
48
62
|
this.inpVal = val
|
|
@@ -69,6 +83,9 @@ export default {
|
|
|
69
83
|
.ml-input {
|
|
70
84
|
display: flex;
|
|
71
85
|
flex-direction: row;
|
|
86
|
+
.ml-input-readonly-content {
|
|
87
|
+
padding: 20rpx;
|
|
88
|
+
}
|
|
72
89
|
.ml-input-inp {
|
|
73
90
|
padding: 0 20rpx;
|
|
74
91
|
height: 70rpx;
|