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