wl-design-mobile 0.1.5 → 0.1.7
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/btn/lambo-btn-group.vue +1 -1
- package/card-item/lambo-card-head.vue +1 -1
- package/card-item/lambo-card-row.vue +2 -2
- package/list/components/table/lambo-table-footer.vue +0 -0
- package/list/components/table/lambo-table-head.vue +47 -0
- package/list/components/table/lambo-table-row.vue +0 -0
- package/list/lambo-list.vue +5 -4
- package/list/lambo-table-list.vue +50 -30
- package/nav/lambo-top-nav.vue +14 -13
- package/package.json +1 -1
- package/search/lambo-multi-select.vue +15 -11
- package/search/lambo-search-box.vue +6 -0
- package/search/lambo-single-select.vue +15 -11
- package/search/styles/css/index.css +26 -16
package/btn/lambo-btn-group.vue
CHANGED
|
File without changes
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="table-header" ref="listRowDiv">
|
|
4
|
+
<div v-for="(item, index) in columns" :key="index" class="header-cell" :style="{
|
|
5
|
+
gridColumn: index + 1,
|
|
6
|
+
minWidth: item.minWidth,
|
|
7
|
+
textAlign: item.align || 'left' }">
|
|
8
|
+
{{ item.title }}
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</template>
|
|
13
|
+
<script>
|
|
14
|
+
export default {
|
|
15
|
+
name: 'LamboTableHead',
|
|
16
|
+
props: {
|
|
17
|
+
columns: {
|
|
18
|
+
type: Array,
|
|
19
|
+
required: true
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
data() {
|
|
23
|
+
return {}
|
|
24
|
+
},
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
<style scoped lang="css">
|
|
28
|
+
.table-header {
|
|
29
|
+
width: 100%;
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-auto-rows: 30px;
|
|
32
|
+
gap: 1px;
|
|
33
|
+
align-items: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.header-cell {
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
border: 1px solid #ddd;
|
|
39
|
+
border-radius: 3px;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
place-items: center;
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
|
|
File without changes
|
package/list/lambo-list.vue
CHANGED
|
@@ -55,7 +55,7 @@ export default {
|
|
|
55
55
|
finishedTxt: "",
|
|
56
56
|
pageNum: 1, // 当前页数
|
|
57
57
|
pageSize: 10, // 每页数据条数
|
|
58
|
-
listHeight: '100vh',
|
|
58
|
+
listHeight: '100vh',
|
|
59
59
|
refreshing: false,
|
|
60
60
|
offset: 0,
|
|
61
61
|
limit: 10,
|
|
@@ -100,14 +100,14 @@ export default {
|
|
|
100
100
|
{title: "盐城市亭湖区大树酒业商行", time: "2024-01-01", person:"01", dpt: "储配部", note: "测试"},
|
|
101
101
|
{title: "盐城市亭湖区大树酒业商行", time: "2024-01-02", person:"02", dpt: "储配部", note: "测试"},
|
|
102
102
|
]
|
|
103
|
-
this.list.push(arr)
|
|
103
|
+
this.list.push(...arr)
|
|
104
104
|
this.finished = false
|
|
105
105
|
this.offset = this.pageNum * 10
|
|
106
106
|
this.pageNum++;
|
|
107
107
|
}else{
|
|
108
108
|
let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
|
|
109
109
|
axios.get(this.url, {params}).then(res => {
|
|
110
|
-
console.log("lambo-
|
|
110
|
+
console.log("lambo-list -- onLoad -- loadData:", res)
|
|
111
111
|
if (res && res.code === 1) {
|
|
112
112
|
let pageData = res.data
|
|
113
113
|
|
|
@@ -184,6 +184,7 @@ export default {
|
|
|
184
184
|
overflow-y: auto;
|
|
185
185
|
background-color: var(--scl-white-1);
|
|
186
186
|
padding: 0 8px 0 14px;
|
|
187
|
+
margin-top: -6px;
|
|
187
188
|
}
|
|
188
189
|
|
|
189
190
|
.list-item {
|
|
@@ -191,7 +192,7 @@ export default {
|
|
|
191
192
|
}
|
|
192
193
|
|
|
193
194
|
.card-item {
|
|
194
|
-
padding:
|
|
195
|
+
padding: 10px 0 0 0;
|
|
195
196
|
background-color: var(--scl-white-1);
|
|
196
197
|
}
|
|
197
198
|
|
|
@@ -76,37 +76,57 @@ export default {
|
|
|
76
76
|
this.list = [];
|
|
77
77
|
this.refreshing = false;
|
|
78
78
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
this.finishedTxt = "没有更多了"
|
|
98
|
-
} else {
|
|
99
|
-
this.finished = true; // 数据加载完毕
|
|
100
|
-
}
|
|
101
|
-
this.loading = false; // 加载状态结束
|
|
102
|
-
} else {
|
|
103
|
-
console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
|
|
104
|
-
Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
|
|
79
|
+
this.list = [
|
|
80
|
+
{
|
|
81
|
+
"distCtId": "000000000000O0000000000000000051",
|
|
82
|
+
"carCode": "JN2408220001",
|
|
83
|
+
"carName": "123",
|
|
84
|
+
"distCtName": "济南烟草卷烟配送中心"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"distCtId": "000000000000O0000000000000000051",
|
|
88
|
+
"carCode": "JN2408220002",
|
|
89
|
+
"carName": "1",
|
|
90
|
+
"distCtName": "济南烟草卷烟配送中心"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"distCtId": "000000000000O0000000000000000051",
|
|
94
|
+
"carCode": "JN2408290001",
|
|
95
|
+
"carName": "14",
|
|
96
|
+
"distCtName": "济南烟草卷烟配送中心"
|
|
105
97
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
})
|
|
98
|
+
]
|
|
99
|
+
|
|
100
|
+
// let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
|
|
101
|
+
// axios.get(this.url, {params}).then(res => {
|
|
102
|
+
// console.log("lambo-init-table-list -- onLoad -- loadData:", res)
|
|
103
|
+
// if (res && res.code === 1) {
|
|
104
|
+
// let pageData = res.data
|
|
105
|
+
//
|
|
106
|
+
// if (pageData && pageData.rows.length > 0) {
|
|
107
|
+
// for (let item of pageData.rows) {
|
|
108
|
+
// if (this.list.length < pageData.total) {
|
|
109
|
+
// this.list.push(item)
|
|
110
|
+
// this.finished = false
|
|
111
|
+
// } else {
|
|
112
|
+
// this.finished = true // 数据加载完毕
|
|
113
|
+
// }
|
|
114
|
+
// }
|
|
115
|
+
// this.offset = this.pageNum * 10
|
|
116
|
+
// this.pageNum++;
|
|
117
|
+
// this.finishedTxt = "没有更多了"
|
|
118
|
+
// } else {
|
|
119
|
+
// this.finished = true; // 数据加载完毕
|
|
120
|
+
// }
|
|
121
|
+
// this.loading = false; // 加载状态结束
|
|
122
|
+
// } else {
|
|
123
|
+
// console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
|
|
124
|
+
// Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
|
|
125
|
+
// }
|
|
126
|
+
// }).catch(err => {
|
|
127
|
+
// console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
|
|
128
|
+
// Toast.fail("查询[" + this.url + "]数据异常")
|
|
129
|
+
// })
|
|
110
130
|
},
|
|
111
131
|
getListHeight() {
|
|
112
132
|
const windowHeight = window.innerHeight;
|
package/nav/lambo-top-nav.vue
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<van-nav-bar :title="title">
|
|
2
|
+
<div>
|
|
3
|
+
<van-nav-bar :title="title" fixed>
|
|
4
4
|
<template #left>
|
|
5
|
-
<
|
|
5
|
+
<van-icon name="arrow-left" color="#FFFFFF" size="20px" @click="back"/>
|
|
6
6
|
</template>
|
|
7
7
|
<template v-if="hasExtend" #right>
|
|
8
8
|
<div class="arrow-right-search" @click="more"></div>
|
|
9
9
|
</template>
|
|
10
10
|
</van-nav-bar>
|
|
11
|
-
|
|
11
|
+
<div style="height: 46px;"></div>
|
|
12
|
+
</div>
|
|
12
13
|
</template>
|
|
13
14
|
<script>
|
|
14
15
|
|
|
@@ -35,7 +36,7 @@ export default {
|
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
</script>
|
|
38
|
-
<style scoped>
|
|
39
|
+
<style lang="less" scoped>
|
|
39
40
|
@import "../styles/index.less";
|
|
40
41
|
|
|
41
42
|
.arrow-right-search {
|
|
@@ -47,20 +48,20 @@ export default {
|
|
|
47
48
|
background-image: url("../assets/icon/search-right.png");
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
.arrow-left {
|
|
51
|
-
width: 14px;
|
|
52
|
-
height: 14px;
|
|
53
|
-
line-height: 48px;
|
|
54
|
-
background-image: url("../assets/icon/arrow-left.png");
|
|
55
|
-
background-repeat: no-repeat;
|
|
56
|
-
background-size: 100% auto;
|
|
57
|
-
}
|
|
58
51
|
|
|
59
52
|
.van-nav-bar {
|
|
60
53
|
background-color: #0070D2;
|
|
61
54
|
height: 48px;
|
|
62
55
|
}
|
|
63
56
|
|
|
57
|
+
.van-sticky {
|
|
58
|
+
position: fixed;
|
|
59
|
+
top: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
z-index: 100;
|
|
63
|
+
}
|
|
64
|
+
|
|
64
65
|
::v-deep .van-nav-bar__left {
|
|
65
66
|
padding: 0px 8px 0px 14px;
|
|
66
67
|
}
|
package/package.json
CHANGED
|
@@ -9,18 +9,22 @@
|
|
|
9
9
|
<div>
|
|
10
10
|
<van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
|
|
11
11
|
<van-checkbox-group v-model="selectItem.K">
|
|
12
|
-
<div class="
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
<div class="bottom-div">
|
|
13
|
+
<div class="search-top-div">
|
|
14
|
+
<van-button class="search-cancel-btn" size="normal" @click="cancel">取消</van-button>
|
|
15
|
+
<span class="search-select-title">请选择</span>
|
|
16
|
+
<van-button class="search-confirm-btn" size="normal" @click="onConfirm">确认</van-button>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="cell-group-div">
|
|
19
|
+
<van-cell-group>
|
|
20
|
+
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="checkboxClick(c)">
|
|
21
|
+
<template #right-icon>
|
|
22
|
+
<van-checkbox :name="c.K" shape="square" ref="checkboxes" checked-color="#0070D2"/>
|
|
23
|
+
</template>
|
|
24
|
+
</van-cell>
|
|
25
|
+
</van-cell-group>
|
|
26
|
+
</div>
|
|
16
27
|
</div>
|
|
17
|
-
<van-cell-group>
|
|
18
|
-
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="checkboxClick(c)">
|
|
19
|
-
<template #right-icon>
|
|
20
|
-
<van-checkbox :name="c.K" shape="square" ref="checkboxes" checked-color="#0070D2"/>
|
|
21
|
-
</template>
|
|
22
|
-
</van-cell>
|
|
23
|
-
</van-cell-group>
|
|
24
28
|
</van-checkbox-group>
|
|
25
29
|
</van-popup>
|
|
26
30
|
</div>
|
|
@@ -9,18 +9,22 @@
|
|
|
9
9
|
<div>
|
|
10
10
|
<van-popup v-model:show="showBottom" :style="{ height: '31%' }" position="bottom">
|
|
11
11
|
<van-radio-group v-model="selectItem.K">
|
|
12
|
-
<div class="
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
<div class="bottom-div">
|
|
13
|
+
<div class="search-top-div">
|
|
14
|
+
<van-button class="search-cancel-btn" size="normal" @click="cancel">取消</van-button>
|
|
15
|
+
<span class="search-select-title">请选择</span>
|
|
16
|
+
<van-button class="search-confirm-btn" size="normal" @click="onConfirm">确认</van-button>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="cell-group-div">
|
|
19
|
+
<van-cell-group>
|
|
20
|
+
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="radioClick(c)">
|
|
21
|
+
<template #right-icon>
|
|
22
|
+
<van-radio :name="c.K" checked-color="#0070D2"/>
|
|
23
|
+
</template>
|
|
24
|
+
</van-cell>
|
|
25
|
+
</van-cell-group>
|
|
26
|
+
</div>
|
|
16
27
|
</div>
|
|
17
|
-
<van-cell-group>
|
|
18
|
-
<van-cell v-for="(c, index) in data" :key="index" :title="`${c.V}`" clickable @click="radioClick(c)">
|
|
19
|
-
<template #right-icon>
|
|
20
|
-
<van-radio :name="c.K" checked-color="#0070D2"/>
|
|
21
|
-
</template>
|
|
22
|
-
</van-cell>
|
|
23
|
-
</van-cell-group>
|
|
24
28
|
</van-radio-group>
|
|
25
29
|
</van-popup>
|
|
26
30
|
</div>
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
.search-top-pop {
|
|
2
|
-
min-height:
|
|
3
|
-
max-height:
|
|
2
|
+
min-height: 112px;
|
|
3
|
+
max-height: 33%;
|
|
4
4
|
background-color: var(--scl-white-1)
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.search-body {
|
|
8
8
|
border-top: none;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
overflow: auto;
|
|
9
|
+
overflow-y: auto;
|
|
10
|
+
flex: 1
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
.search-bottom-btn {
|
|
15
|
-
padding:
|
|
14
|
+
padding: 12px 14px 12px 14px;
|
|
15
|
+
box-shadow: 0 -2px 10px rgba(125, 126, 128, .16);
|
|
16
|
+
background-color: rgb(255, 255, 255, 1);
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
|
|
19
19
|
/*日期选择*/
|
|
20
20
|
.search-row {
|
|
21
21
|
display: flex;
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
flex-wrap: nowrap;
|
|
25
25
|
align-items: center;
|
|
26
26
|
align-content: center;
|
|
27
|
-
height:
|
|
28
|
-
padding:
|
|
27
|
+
height: 50px;
|
|
28
|
+
padding: 10px 0;
|
|
29
29
|
margin: 0 14px;
|
|
30
30
|
border-bottom: 1px solid var(--scl-white-2);
|
|
31
31
|
border-top: none;
|
|
@@ -56,16 +56,12 @@
|
|
|
56
56
|
flex: 1;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
|
|
60
59
|
/*输入框*/
|
|
61
|
-
|
|
62
60
|
.search-lambo-input .van-cell {
|
|
63
61
|
padding: 10px 0;
|
|
64
62
|
}
|
|
65
63
|
|
|
66
|
-
|
|
67
64
|
/*多选*/
|
|
68
|
-
|
|
69
65
|
.search-top-div {
|
|
70
66
|
display: flex;
|
|
71
67
|
justify-content: space-between;
|
|
@@ -73,7 +69,9 @@
|
|
|
73
69
|
line-height: 44px;
|
|
74
70
|
width: 100%;
|
|
75
71
|
position: fixed;
|
|
76
|
-
z-index:
|
|
72
|
+
z-index: 2;
|
|
73
|
+
box-shadow: 0 2px 10px rgba(125, 126, 128, .16);
|
|
74
|
+
background-color: rgb(255, 255, 255, 1);
|
|
77
75
|
}
|
|
78
76
|
|
|
79
77
|
.search-cancel-btn {
|
|
@@ -106,7 +104,6 @@
|
|
|
106
104
|
padding-top: 10px;
|
|
107
105
|
}
|
|
108
106
|
|
|
109
|
-
|
|
110
107
|
/*滚动条样式*/
|
|
111
108
|
/deep/ ::-webkit-scrollbar {
|
|
112
109
|
width: 6px;
|
|
@@ -123,4 +120,17 @@
|
|
|
123
120
|
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
|
|
124
121
|
border-radius: var(--ind-border-radius-xl);
|
|
125
122
|
background: rgba(231, 242, 250, 0.4);
|
|
126
|
-
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.bottom-div {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.cell-group-div {
|
|
131
|
+
flex: 1;
|
|
132
|
+
overflow-y: auto;
|
|
133
|
+
margin-top: 44px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
|