jobsys-explore 4.2.6 → 4.2.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/.changeset/curly-buttons-smash.md +5 -0
- package/CHANGELOG.md +12 -0
- package/components/pagination/ExPagination.jsx +73 -44
- package/dist/jobsys-explore.cjs +6 -6
- package/dist/jobsys-explore.cjs.map +1 -1
- package/dist/jobsys-explore.js +696 -669
- package/dist/jobsys-explore.js.map +1 -1
- package/package.json +1 -1
- package/playground/App.vue +2 -2
- package/playground/TestPagination.vue +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, inject, reactive, nextTick } from "vue"
|
|
2
2
|
import { useFetch } from "../../hooks"
|
|
3
|
-
import { Empty, List, Sticky } from "vant"
|
|
3
|
+
import { Empty, List, PullRefresh, Sticky } from "vant"
|
|
4
4
|
import ExSearch from "../search/ExSearch.jsx"
|
|
5
5
|
import "./index.less"
|
|
6
6
|
import { EX_PAGINATION } from "../provider/ExProvider.jsx"
|
|
@@ -13,6 +13,14 @@ import { isFunction, isObject, pick } from "lodash-es"
|
|
|
13
13
|
export default defineComponent({
|
|
14
14
|
name: "ExPagination",
|
|
15
15
|
props: {
|
|
16
|
+
/**
|
|
17
|
+
* 下拉刷新的配置
|
|
18
|
+
* true:表示启用下拉刷新
|
|
19
|
+
* Object:用于PullRefresh组件的配置
|
|
20
|
+
* [PullRefresh配置](https://vant-contrib.gitee.io/vant/#/zh-CN/pull-refresh)
|
|
21
|
+
*/
|
|
22
|
+
pullRefresh: { type: [Boolean, Object], default: true },
|
|
23
|
+
|
|
16
24
|
/**
|
|
17
25
|
* ExSearch 搜索的 columns 配置
|
|
18
26
|
*/
|
|
@@ -98,6 +106,7 @@ export default defineComponent({
|
|
|
98
106
|
empty: false,
|
|
99
107
|
searchParams: {},
|
|
100
108
|
offsetTop: 0,
|
|
109
|
+
refreshLoading: false,
|
|
101
110
|
})
|
|
102
111
|
|
|
103
112
|
/*if (props.useStore?.initPagination) {
|
|
@@ -113,7 +122,7 @@ export default defineComponent({
|
|
|
113
122
|
})
|
|
114
123
|
}*/
|
|
115
124
|
|
|
116
|
-
const loadMore = async (refresh) => {
|
|
125
|
+
const loadMore = async (refresh, callback) => {
|
|
117
126
|
if (refresh) {
|
|
118
127
|
state.items = []
|
|
119
128
|
state.currentPage = 0
|
|
@@ -164,14 +173,12 @@ export default defineComponent({
|
|
|
164
173
|
state.errorMessage = ""
|
|
165
174
|
}
|
|
166
175
|
|
|
176
|
+
callback && callback()
|
|
177
|
+
|
|
167
178
|
state.items = [...state.items, ...res.items]
|
|
168
179
|
state.currentPage = res.currentPage
|
|
169
180
|
state.empty = res.totalSize === 0
|
|
170
181
|
state.finished = res.totalSize <= state.items.length
|
|
171
|
-
// 等待渲染完成后再设置 loading
|
|
172
|
-
/* setTimeout(() => {
|
|
173
|
-
state.loading = false
|
|
174
|
-
}, 300) */
|
|
175
182
|
nextTick(() => {
|
|
176
183
|
state.loading = false
|
|
177
184
|
})
|
|
@@ -182,6 +189,12 @@ export default defineComponent({
|
|
|
182
189
|
loadMore(true)
|
|
183
190
|
}
|
|
184
191
|
|
|
192
|
+
const onPullRefresh = () => {
|
|
193
|
+
loadMore(true, () => {
|
|
194
|
+
state.refreshLoading = false
|
|
195
|
+
})
|
|
196
|
+
}
|
|
197
|
+
|
|
185
198
|
/****************** exposed ******************/
|
|
186
199
|
|
|
187
200
|
const items = () => {
|
|
@@ -194,6 +207,7 @@ export default defineComponent({
|
|
|
194
207
|
pagination: pick(state, ["loading", "finished", "empty", "error", "currentPage"]),
|
|
195
208
|
})
|
|
196
209
|
|
|
210
|
+
/****************** render ******************/
|
|
197
211
|
const searchElem = () => {
|
|
198
212
|
if (props.search) {
|
|
199
213
|
if (props.searchFixed) {
|
|
@@ -221,44 +235,59 @@ export default defineComponent({
|
|
|
221
235
|
}
|
|
222
236
|
}
|
|
223
237
|
|
|
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
|
-
|
|
238
|
+
const paginationElem = () => {
|
|
239
|
+
return (
|
|
240
|
+
<div class={`ex-pagination`}>
|
|
241
|
+
{searchElem()}
|
|
242
|
+
|
|
243
|
+
<div class={`ex-pagination__list`} style={{ paddingTop: `${state.offsetTop}px` }}>
|
|
244
|
+
{state.empty ? (
|
|
245
|
+
<Empty description={props.emptyText}></Empty>
|
|
246
|
+
) : (
|
|
247
|
+
<List
|
|
248
|
+
v-model:loading={state.loading}
|
|
249
|
+
v-model:error={state.error}
|
|
250
|
+
immediateCheck={props.autoLoad}
|
|
251
|
+
finished={state.finished}
|
|
252
|
+
finishedText={props.finishText}
|
|
253
|
+
errorText={state.errorMessage || props.errorText}
|
|
254
|
+
onLoad={() => loadMore(false)}
|
|
255
|
+
offset={props.offset}
|
|
256
|
+
{...props.defaultProps}
|
|
257
|
+
>
|
|
258
|
+
{{
|
|
259
|
+
default: () =>
|
|
260
|
+
state.items
|
|
261
|
+
? state.items.map((item, index) =>
|
|
262
|
+
slots.renderItem
|
|
263
|
+
? slots.renderItem({
|
|
264
|
+
item,
|
|
265
|
+
index,
|
|
266
|
+
})
|
|
267
|
+
: null,
|
|
268
|
+
)
|
|
269
|
+
: null,
|
|
270
|
+
}}
|
|
271
|
+
</List>
|
|
272
|
+
)}
|
|
273
|
+
</div>
|
|
260
274
|
</div>
|
|
261
|
-
|
|
262
|
-
|
|
275
|
+
)
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
const refreshElem = () => {
|
|
279
|
+
if (props.pullRefresh) {
|
|
280
|
+
const pullRefreshObj = isObject(props.pullRefresh) ? props.pullRefresh : {}
|
|
281
|
+
return (
|
|
282
|
+
<PullRefresh v-model={state.refreshLoading} onRefresh={onPullRefresh} {...pullRefreshObj}>
|
|
283
|
+
{() => paginationElem()}
|
|
284
|
+
</PullRefresh>
|
|
285
|
+
)
|
|
286
|
+
} else {
|
|
287
|
+
return paginationElem()
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
return () => refreshElem()
|
|
263
292
|
},
|
|
264
293
|
})
|