w-ui-v1 1.1.24 → 1.1.26
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/package.json +1 -1
- package/w-login/w-login.vue +1 -1
- package/w-menu/w-menu.vue +253 -231
package/package.json
CHANGED
package/w-login/w-login.vue
CHANGED
package/w-menu/w-menu.vue
CHANGED
|
@@ -1,262 +1,284 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
//在自定义组件中使用 Wot Design Uni 组件时，需开启styleIsolation: 'shared'选项覆盖样式
|
|
3
|
-
export default {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
2
|
+
//在自定义组件中使用 Wot Design Uni 组件时，需开启styleIsolation: 'shared'选项覆盖样式
|
|
3
|
+
export default {
|
|
4
|
+
options: {
|
|
5
|
+
styleIsolation: 'shared'//使css :deep()生效
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
8
|
</script>
|
|
9
9
|
<script setup lang="ts">
|
|
10
|
-
import { cloneDeep } from 'lodash-es'
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
defineOptions({
|
|
19
|
-
name: 'WMenu',
|
|
20
|
-
})
|
|
21
|
-
const menuList = ref([])
|
|
22
|
-
const title = ref('')
|
|
23
|
-
const filtermenu = computed(() => {
|
|
24
|
-
return filterHiddenTree(menuList.value, 'items', true)
|
|
25
|
-
})
|
|
26
|
-
const sheetShow = ref(false)
|
|
27
|
-
const actions = ref([])
|
|
28
|
-
const paging = ref()
|
|
29
|
-
onMounted(() => {
|
|
10
|
+
import { cloneDeep } from 'lodash-es'
|
|
11
|
+
import {
|
|
12
|
+
computed,
|
|
13
|
+
onMounted,
|
|
14
|
+
ref,
|
|
15
|
+
defineProps
|
|
16
|
+
} from 'vue'
|
|
17
|
+
import { menu } from '../utils/apis/menu'
|
|
30
18
|
|
|
31
|
-
|
|
19
|
+
defineOptions({
|
|
20
|
+
name: 'WMenu',
|
|
21
|
+
})
|
|
22
|
+
const props = defineProps({
|
|
23
|
+
icons: {
|
|
24
|
+
type: Array,
|
|
25
|
+
default: []
|
|
26
|
+
}
|
|
27
|
+
})
|
|
28
|
+
const menuList = ref([])
|
|
29
|
+
const title = ref('')
|
|
30
|
+
const filtermenu = computed(() => {
|
|
31
|
+
let arr=filterHiddenTree(menuList.value, 'items', true)
|
|
32
|
+
return arr
|
|
33
|
+
})
|
|
34
|
+
const sheetShow = ref(false)
|
|
35
|
+
const actions = ref([])
|
|
36
|
+
const paging = ref()
|
|
37
|
+
onMounted(() => {
|
|
32
38
|
|
|
39
|
+
})
|
|
33
40
|
|
|
34
|
-
// 点击菜单跳转页面
|
|
35
|
-
function gotoPage(item: any) {
|
|
36
|
-
// 跳转页面
|
|
37
|
-
if (goto(item))
|
|
38
|
-
return
|
|
39
|
-
// 打开动作面板
|
|
40
|
-
openSheet(item)
|
|
41
|
-
}
|
|
42
41
|
|
|
43
|
-
//
|
|
44
|
-
function
|
|
42
|
+
// 点击菜单跳转页面
|
|
43
|
+
function gotoPage(item : any) {
|
|
44
|
+
// 跳转页面
|
|
45
|
+
if (goto(item))
|
|
46
|
+
return
|
|
47
|
+
// 打开动作面板
|
|
48
|
+
openSheet(item)
|
|
49
|
+
}
|
|
45
50
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
return
|
|
49
|
-
// 打开动作面板
|
|
50
|
-
openSheet(item, 300)
|
|
51
|
-
}
|
|
51
|
+
// 点击动作面板跳转页面
|
|
52
|
+
function sheetGotoPage(item : any) {
|
|
52
53
|
|
|
53
|
-
// 跳转页面
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
if(item.customPath){
|
|
59
|
-
uni.navigateTo({
|
|
60
|
-
url: `/${item.customPath}`,
|
|
61
|
-
})
|
|
62
|
-
}else{
|
|
63
|
-
uni.navigateTo({
|
|
64
|
-
url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
|
|
65
|
-
})
|
|
54
|
+
// 跳转页面
|
|
55
|
+
if (goto(item))
|
|
56
|
+
return
|
|
57
|
+
// 打开动作面板
|
|
58
|
+
openSheet(item, 300)
|
|
66
59
|
}
|
|
67
|
-
|
|
68
|
-
return true
|
|
69
|
-
|
|
70
|
-
case "报表":
|
|
71
|
-
uni.navigateTo({
|
|
72
|
-
url: `/pages/report-table/report-table?sourceId=${item.id}&pageTitle=${item.title}`,
|
|
73
|
-
})
|
|
74
|
-
return true
|
|
75
|
-
|
|
76
60
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
61
|
+
// 跳转页面
|
|
62
|
+
function goto(item : any) {
|
|
63
|
+
console.log(item.pageType)
|
|
64
|
+
switch (item.pageType) {
|
|
65
|
+
case "列表":
|
|
66
|
+
if (item.customPath) {
|
|
67
|
+
uni.navigateTo({
|
|
68
|
+
url: `/${item.customPath}`,
|
|
69
|
+
})
|
|
70
|
+
} else {
|
|
71
|
+
uni.navigateTo({
|
|
72
|
+
url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
|
|
73
|
+
})
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return true
|
|
83
77
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
? item.items.map((item: any) => {
|
|
90
|
-
return {
|
|
91
|
-
name: item.title,
|
|
92
|
-
// color: '#00000073',
|
|
93
|
-
...cloneDeep(item),
|
|
94
|
-
}
|
|
95
|
-
})
|
|
96
|
-
: []
|
|
78
|
+
case "报表":
|
|
79
|
+
uni.navigateTo({
|
|
80
|
+
url: `/pages/report-table/report-table?sourceId=${item.id}&pageTitle=${item.title}`,
|
|
81
|
+
})
|
|
82
|
+
return true
|
|
97
83
|
|
|
98
|
-
// 设置二次打开的过渡时间
|
|
99
|
-
const id = setTimeout(() => {
|
|
100
|
-
sheetShow.value = true
|
|
101
|
-
clearTimeout(id)
|
|
102
|
-
}, s)
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
84
|
|
|
106
|
-
|
|
107
|
-
* 根据 `disabled: true` 过滤树形数组（支持自定义子节点字段）
|
|
108
|
-
* @param {Array} tree 原始树形数据
|
|
109
|
-
* @param {string} [childKey] 子节点字段名
|
|
110
|
-
* @param {boolean} [deepClone] 是否深拷贝原数据
|
|
111
|
-
* @returns {Array} 过滤后的新树形数据
|
|
112
|
-
*/
|
|
113
|
-
function filterHiddenTree(tree: any, childKey = 'children', deepClone = false) {
|
|
114
|
-
// 深拷贝处理（可选）
|
|
115
|
-
const clone = (data: any) => {
|
|
116
|
-
if (!deepClone)
|
|
117
|
-
return data
|
|
118
|
-
return JSON.parse(JSON.stringify(data))
|
|
119
|
-
}
|
|
85
|
+
default:
|
|
120
86
|
|
|
121
|
-
|
|
122
|
-
.filter((node: any) => !node.disabled) // 过滤当前层隐藏节点
|
|
123
|
-
.map((node: any) => {
|
|
124
|
-
// 递归处理子节点
|
|
125
|
-
if (Array.isArray(node[childKey])) {
|
|
126
|
-
node[childKey] = filterHiddenTree(node[childKey], childKey, deepClone)
|
|
127
|
-
}
|
|
128
|
-
return node
|
|
129
|
-
})
|
|
130
|
-
}
|
|
87
|
+
return false
|
|
131
88
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// 打开wd-action-sheet动作面板
|
|
93
|
+
function openSheet(item : any, s = 0) {
|
|
94
|
+
if (item.items) {
|
|
95
|
+
title.value = item.title
|
|
96
|
+
actions.value = item.items
|
|
97
|
+
? item.items.map((item : any) => {
|
|
98
|
+
return {
|
|
99
|
+
name: item.title,
|
|
100
|
+
// color: '#00000073',
|
|
101
|
+
...cloneDeep(item),
|
|
102
|
+
}
|
|
103
|
+
})
|
|
104
|
+
: []
|
|
105
|
+
|
|
106
|
+
// 设置二次打开的过渡时间
|
|
107
|
+
const id = setTimeout(() => {
|
|
108
|
+
sheetShow.value = true
|
|
109
|
+
clearTimeout(id)
|
|
110
|
+
}, s)
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* 根据 `disabled: true` 过滤树形数组（支持自定义子节点字段）
|
|
116
|
+
* @param {Array} tree 原始树形数据
|
|
117
|
+
* @param {string} [childKey] 子节点字段名
|
|
118
|
+
* @param {boolean} [deepClone] 是否深拷贝原数据
|
|
119
|
+
* @returns {Array} 过滤后的新树形数据
|
|
120
|
+
*/
|
|
121
|
+
function filterHiddenTree(tree : any, childKey = 'children', deepClone = false) {
|
|
122
|
+
// 深拷贝处理（可选）
|
|
123
|
+
const clone = (data : any) => {
|
|
124
|
+
if (!deepClone)
|
|
125
|
+
return data
|
|
126
|
+
return JSON.parse(JSON.stringify(data))
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
return clone(tree)
|
|
130
|
+
.filter((node : any) => !node.disabled) // 过滤当前层隐藏节点
|
|
131
|
+
.map((node : any) => {
|
|
132
|
+
// 递归处理子节点
|
|
133
|
+
if (Array.isArray(node[childKey])) {
|
|
134
|
+
node[childKey] = filterHiddenTree(node[childKey], childKey, deepClone)
|
|
135
|
+
}
|
|
136
|
+
let icon= props.icons.find((item:any)=>{
|
|
137
|
+
return item.id===node.id
|
|
138
|
+
})
|
|
139
|
+
return {
|
|
140
|
+
...node,
|
|
141
|
+
iconPath:(icon as any)?.path
|
|
142
|
+
}
|
|
143
|
+
})
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
|
|
147
|
+
function queryList() {
|
|
148
|
+
// 此处请求仅为演示，请替换为自己项目中的请求
|
|
149
|
+
menu().then(res => {
|
|
150
|
+
// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
|
|
151
|
+
paging.value.complete(res.data?.blocks || []);
|
|
152
|
+
uni.setNavigationBarTitle({ title: res.data?.programName || '' })
|
|
153
|
+
}).catch(res => {
|
|
154
|
+
// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
|
|
155
|
+
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
156
|
+
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
157
|
+
paging.value.complete(false);
|
|
158
|
+
})
|
|
159
|
+
}
|
|
146
160
|
</script>
|
|
147
161
|
|
|
148
162
|
<template>
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
163
|
+
<z-paging :loading-more-enabled="false" ref="paging" v-model="menuList" @query="queryList">
|
|
164
|
+
<template #top>
|
|
165
|
+
<slot name="top"></slot>
|
|
166
|
+
</template>
|
|
167
|
+
<view>
|
|
168
|
+
<view v-if="filtermenu.length > 0" class="menu-list">
|
|
169
|
+
<slot name="topImg"></slot>
|
|
170
|
+
<wd-card v-for="(item, index) in filtermenu" :key="index">
|
|
171
|
+
<template #title>
|
|
172
|
+
<view class="menu-title-class">
|
|
173
|
+
<view class="title-icon"></view> {{item.title}}
|
|
174
|
+
</view>
|
|
175
|
+
</template>
|
|
176
|
+
<template #default>
|
|
177
|
+
<wd-grid :column="4" :clickable="true">
|
|
178
|
+
<wd-grid-item use-slot v-for="(subItem, subIndex) in item.items" :key="subIndex"
|
|
179
|
+
@itemclick="gotoPage(subItem)" use-text-slot>
|
|
180
|
+
<template #default>
|
|
181
|
+
<view class="grid-item">
|
|
182
|
+
<view v-if="subItem.iconPath" class="grid-item-icon"
|
|
183
|
+
style="display: flex;justify-content: center;align-items: center;">
|
|
184
|
+
<image style="height: 30px;width: 30px;" src="/static/home.png" mode="">
|
|
185
|
+
</image>
|
|
186
|
+
</view>
|
|
187
|
+
<text v-else class="grid-item-icon">
|
|
188
|
+
<text>{{ subItem.title }}</text>
|
|
189
|
+
</text>
|
|
190
|
+
<view class="grid-item-title">{{subItem.title}}</view>
|
|
191
|
+
</view>
|
|
172
192
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
193
|
+
</template>
|
|
194
|
+
</wd-grid-item>
|
|
195
|
+
</wd-grid>
|
|
196
|
+
</template>
|
|
197
|
+
</wd-card>
|
|
198
|
+
</view>
|
|
179
199
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
200
|
+
<wd-action-sheet v-model="sheetShow" :actions="actions" :title="title"
|
|
201
|
+
@select="({ item }) => { sheetGotoPage(item) }" />
|
|
202
|
+
</view>
|
|
203
|
+
<template #bottom>
|
|
204
|
+
<slot name="bottom"></slot>
|
|
205
|
+
</template>
|
|
206
|
+
</z-paging>
|
|
187
207
|
</template>
|
|
188
208
|
|
|
189
209
|
<style lang="scss" scoped>
|
|
190
|
-
.img_box {
|
|
191
|
-
|
|
192
|
-
}
|
|
210
|
+
.img_box {
|
|
211
|
+
padding: 25rpx;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.loading_box {
|
|
215
|
+
display: flex;
|
|
216
|
+
justify-content: center;
|
|
217
|
+
}
|
|
193
218
|
|
|
194
|
-
.
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
219
|
+
.grid-item {
|
|
220
|
+
position: relative;
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
justify-content: center;
|
|
224
|
+
align-items: center;
|
|
225
|
+
//实现...
|
|
226
|
+
overflow: hidden;
|
|
227
|
+
text-overflow: ellipsis;
|
|
228
|
+
white-space: nowrap;
|
|
198
229
|
|
|
199
|
-
.grid-item {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
230
|
+
.grid-item-icon {
|
|
231
|
+
margin-bottom: 5px;
|
|
232
|
+
width: 42px;
|
|
233
|
+
height: 42px;
|
|
234
|
+
line-height: 40px;
|
|
235
|
+
color: #4D81F1;
|
|
236
|
+
font-size: 18px;
|
|
237
|
+
font-weight: 700;
|
|
238
|
+
text-indent: 12px;
|
|
239
|
+
border-radius: 8px;
|
|
240
|
+
display: block;
|
|
241
|
+
float: left;
|
|
242
|
+
overflow: hidden;
|
|
243
|
+
background-color: #E6F4FF;
|
|
244
|
+
letter-spacing: 20px;
|
|
245
|
+
// margin-right: 15px;
|
|
246
|
+
}
|
|
209
247
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
border-radius: 8px;
|
|
220
|
-
display: block;
|
|
221
|
-
float: left;
|
|
222
|
-
overflow: hidden;
|
|
223
|
-
background-color: #E6F4FF;
|
|
224
|
-
letter-spacing: 20px;
|
|
225
|
-
// margin-right: 15px;
|
|
226
|
-
}
|
|
227
|
-
.grid-item-title{
|
|
228
|
-
color: #4D81F1;
|
|
229
|
-
width: 55px;
|
|
230
|
-
overflow: hidden;
|
|
231
|
-
// text-overflow: ellipsis;
|
|
232
|
-
white-space: pre-wrap;
|
|
233
|
-
// white-space: pre-wrap;
|
|
234
|
-
// text-align: left;
|
|
235
|
-
}
|
|
248
|
+
.grid-item-title {
|
|
249
|
+
color: #4D81F1;
|
|
250
|
+
width: 55px;
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
// text-overflow: ellipsis;
|
|
253
|
+
white-space: pre-wrap;
|
|
254
|
+
// white-space: pre-wrap;
|
|
255
|
+
// text-align: left;
|
|
256
|
+
}
|
|
236
257
|
|
|
237
|
-
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.menu-title-class {
|
|
261
|
+
display: flex;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: 4px;
|
|
264
|
+
font-weight: 700;
|
|
265
|
+
}
|
|
238
266
|
|
|
239
|
-
.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
.title-icon{
|
|
246
|
-
width: 3px;
|
|
247
|
-
height: 15px;
|
|
248
|
-
background-color: #4D81F1;
|
|
249
|
-
}
|
|
267
|
+
.title-icon {
|
|
268
|
+
width: 3px;
|
|
269
|
+
height: 15px;
|
|
270
|
+
background-color: #4D81F1;
|
|
271
|
+
}
|
|
250
272
|
|
|
251
|
-
.menu-list {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
273
|
+
.menu-list {
|
|
274
|
+
padding: 12px 0 1px 0;
|
|
275
|
+
// background-color: #F6F7FB;
|
|
276
|
+
background: linear-gradient(to top, #F6F7FB 0%, #2c5def 100%);
|
|
277
|
+
}
|
|
256
278
|
|
|
257
|
-
:deep(.wd-grid){
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
}
|
|
262
|
-
</style>
|
|
279
|
+
:deep(.wd-grid) {
|
|
280
|
+
float: unset;
|
|
281
|
+
display: flex;
|
|
282
|
+
flex-wrap: wrap;
|
|
283
|
+
}
|
|
284
|
+
</style>
|