jobsys-newbie 2.2.1 → 2.2.2

package/components/pagination/NewbiePagination.jsx

@@ -0,0 +1,272 @@
+import { defineComponent, inject, reactive, ref } from "vue"
+import { isBoolean, isUndefined } from "lodash-es"
+import { useCache, useFetch, useProcessStatusSuccess, useSm3 } from "../../hooks"
+
+import "./index.less"
+import NewbieSearch from "../search/NewbieSearch.jsx"
+import { Divider } from "ant-design-vue"
+import { NEWBIE_PAGINATION } from "../provider/NewbieProvider.jsx"
+/**
+ * 分页组件
+ *
+ *
+ * @version 2.1.0
+ */
+export default defineComponent({
+	name: "NewbiePagination",
+	props: {
+		/**
+		 * 是否使用分页，为 Object 时时使用自定义分页
+		 */
+		pagination: { type: [Boolean, Object], default: true },
+
+		/**
+		 * 原生翻页事件
+		 */
+		pageEvents: { type: Object, default: () => ({}) },
+
+		/**
+		 * 是否使用表单搜索
+		 */
+		filterable: { type: Boolean, default: true },
+
+		/**
+		 * 请求数据URL
+		 *
+		 */
+		url: { type: String, default: "" },
+
+		/**
+		 * 请求方式，默认为 GET
+		 *
+		 * @values get, post
+		 */
+		method: { type: String, default: "get" },
+
+		/**
+		 * 请求数据时额外提交的参数
+		 */
+		extraData: { type: Object, default: () => ({}) },
+
+		/**
+		 * 加载后数据的回调函数
+		 */
+		afterFetched: { type: Function, default: null },
+
+		/**
+		 * 数据为空文案
+		 */
+		emptyText: { type: String, default: "暂无内容" },
+
+		/**
+		 * 加载错误文案
+		 */
+		errorText: { type: String, default: "加载失败，点击重新加载" },
+
+		/**
+		 * 持久化，传入 localStorage 的 key，如果为 true, 将会以 URL Hash 为 key
+		 */
+		persistence: { type: [Boolean, String], default: false },
+	},
+	emits: [
+		/**
+		 * 未传入 `url` 时的手动请求方法
+		 */
+		"fetch",
+	],
+
+	setup(props, { slots, emit, expose }) {
+		const searchRef = ref()
+		const footerElemRef = ref()
+
+		const paginationProvider = inject(NEWBIE_PAGINATION, () => {})
+
+		const genPersistenceKey = (prefix) => {
+			if (!props.persistence) {
+				return null
+			}
+			prefix = prefix || ""
+			if (isBoolean(props.persistence)) {
+				return `newbiePagination_${prefix}` + useSm3(location.href)
+			}
+
+			return `newbiePagination_${prefix}` + useSm3(location.pathname + "_" + props.persistence)
+		}
+
+		let persistencePagination = props.persistence ? useCache(genPersistenceKey()).get({}) : {}
+
+		const state = reactive({
+			pagination: {
+				// 翻页数据
+				totalSize: 0,
+				currentPage: persistencePagination.currentPage || 1,
+				pageSize: persistencePagination.pageSize || props.pagination?.pageSize || 10,
+			},
+
+			isLoading: { loading: false }, // 翻页Loading
+
+			items: [], // 页面数据
+			searchFormData: {}, // 搜索表单数据
+		})
+
+		/**
+		 * 持久化翻页与滚动
+		 */
+		const onPersistence = () => {
+			if (!props.persistence) {
+				return
+			}
+
+			const data = {
+				...state.pagination,
+			}
+			useCache(genPersistenceKey()).set(data)
+		}
+
+		const getQueryData = () => {
+			let params = { ...state.searchFormData, ...props.extraData }
+			if (props.pagination) {
+				if (state.pagination.pageSize) {
+					params[NEWBIE_PAGINATION.pageSizeKey] = state.pagination.pageSize
+				}
+				params[NEWBIE_PAGINATION.pageKey] = state.pagination.currentPage
+			}
+			return params
+		}
+
+		const setQueryData = (fields) => {
+			if (searchRef.value) {
+				searchRef.value?.setQueryForm(fields)
+			}
+		}
+
+		const fetchItems = async () => {
+			let data = {},
+				params = getQueryData()
+
+			const method = props.method
+
+			if (method === "get") {
+				data = { params }
+			} else if (method === "post") {
+				data = { ...params }
+			}
+
+			const res = await useFetch(state.isLoading)[method](props.url, data)
+			useProcessStatusSuccess(res, () => {
+				const fetched = props.afterFetched || paginationProvider.afterFetched
+				const result = fetched(res)
+				if (props.pagination) {
+					state.pagination.totalSize = result.totalSize
+				}
+				state.items = result.items
+			})
+		}
+
+		/**
+		 * 执行获取数据
+		 * @param {boolean} refresh 是否刷新
+		 * @return {*}
+		 */
+		const doFetch = async (refresh) => {
+			if (refresh === true) {
+				state.pagination.currentPage = 1
+			}
+
+			if (props.url) {
+				await fetchItems()
+			} else {
+				emit("fetch")
+			}
+
+			onPersistence()
+		}
+
+		const onSearch = (searchData) => {
+			state.searchFormData = searchData
+			doFetch(!searchData.persistence)
+		}
+		/**
+		 * 获取当前页的数据
+		 * @returns {*[]}
+		 */
+		const getData = () => {
+			return [].concat(state.items)
+		}
+
+		/**
+		 * 设置数据
+		 * @param items
+		 */
+		const setData = (items) => {
+			state.items = items
+		}
+
+		/**
+		 * 设置翻页数据
+		 * @param {int} total
+		 * @param {int} currentPage
+		 * @param {int} pageSize
+		 */
+		const setPagination = (total, currentPage, pageSize) => {
+			if (!isUndefined(total)) {
+				state.pagination.totalSize = total
+			}
+			if (!isUndefined(currentPage)) {
+				state.pagination.currentPage = currentPage
+			}
+			if (!isUndefined(pageSize)) {
+				state.pagination.pageSize = pageSize
+			}
+		}
+
+		/**
+		 * 获取翻页数据
+		 * @returns {*}
+		 */
+		const getPagination = () => state.pagination
+
+		expose({
+			getData,
+			setData,
+			setPagination,
+			getPagination,
+			getQueryData,
+			setQueryData,
+			doFetch,
+		})
+		/********** render **********/
+
+		const prependElem = () => (slots.prepend ? <div class={"newbie-pagination-prepend-wrapper"}>{slots.prepend()}</div> : null)
+
+		const filterElem = () =>
+			props.filterable
+				? [
+						<NewbieSearch
+							ref={searchRef}
+							persistence={props.persistence}
+							filterableColumns={state.filterableColumns}
+							sortableColumns={state.sortableColumns}
+							onSearch={onSearch}
+						>
+							{{
+								...props.searchSlots,
+							}}
+						</NewbieSearch>,
+						<Divider></Divider>,
+					]
+				: null
+
+		const footerElem = () =>
+			slots.append || props.pagination ? (
+				<div ref={footerElemRef} class={`newbie-pagination-footer`}>
+					<div class={"newbie-pagination-append-wrapper"}>{slots.append ? slots.append() : null}</div>
+					<div class={"newbie-pagination-pagination-wrapper"}></div>
+				</div>
+			) : null
+
+		const contentElem = () => <div class={"newbie-pagination-content-wrapper"}>{slots.default?.()}</div>
+
+		return () => <div class={"newbie-pagination"}>{[prependElem(), filterElem(), contentElem(), footerElem()]}</div>
+	},
+})

package/components/pagination/index.js

@@ -0,0 +1,5 @@
+import _NewbiePagination from "./NewbiePagination.jsx"
+import withInstall from "../../utils/withInstall"
+
+export const NewbiePagination = withInstall(_NewbiePagination)
+export default NewbiePagination

package/components/provider/NewbieProvider.jsx

@@ -7,6 +7,7 @@ export const NEWBIE_TABLE = Symbol("NEWBIE_TABLE")
 export const NEWBIE_UPLOADER = Symbol("NEWBIE_UPLOADER")
 export const NEWBIE_FORM = Symbol("NEWBIE_FORM")
 export const NEWBIE_SEARCH = Symbol("NEWBIE_SEARCH")
+export const NEWBIE_PAGINATION = Symbol("NEWBIE_PAGINATION")
 
 /**
  * Newbie 配置组件

package/components/table/NewbieTable.jsx

@@ -747,7 +747,7 @@ export default defineComponent({
 					showQuickJumper: true,
 					showSizeChanger: true,
 					showTotal: (total) => useT("table.total", { total }),
-					pageSizeOptions: ["10", "30", "50", "100"],
+					pageSizeOptions: ["10", "30", "50", "100", "300", "500"],
 					total: state.pagination.totalSize,
 					pageSize: state.pagination.pageSize,
 					current: state.pagination.currentPage,