jobsys-newbie 2.2.0 → 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/search/NewbieSearch.jsx

@@ -40,7 +40,8 @@ export default defineComponent({
 		 * @property {Array} [conditions] 搜索项的条件，可选项为不同类型的内置条件
 		 * @property {*} [defaultValue] 默认搜索值
 		 * @property {*} [defaultCondition] 默认搜索条件
-		 * @property {Function} [collectItem] 收集搜索项的内容[内部使用]
+		 * @property {Function} [customRender] 自定义渲染搜索项， 接收 { item, queryForm, context } 作为参数，返回一个对象，包含 conditions, Component, displayValue, onComponentOpen 四个属性
+		 * @property {Function} [collectItem] 收集搜索项的内容]
 		 * */
 
 		/**
@@ -80,7 +81,7 @@ export default defineComponent({
 		 */
 		"search",
 	],
-	setup(props, { expose, emit }) {
+	setup(props, { expose, emit, slots }) {
 		const searchProvider = inject(NEWBIE_SEARCH, () => {})
 
 		const state = reactive({
@@ -333,7 +334,7 @@ export default defineComponent({
 			state.searchLabels = []
 
 			concat(state.fieldColumns, state.expandColumns).forEach((item) => {
-				let { value, searchLabel } = item.collectItem ? item.collectItem() : {}
+				let { value, searchLabel } = item.collectItem ? item.collectItem({ queryForm: state.queryForm, item }) : {}
 				const { condition, type } = state.queryForm[item.key]
 
 				if (
@@ -369,7 +370,13 @@ export default defineComponent({
 		 */
 		const setQueryForm = (fields) => {
 			Object.keys(fields).forEach((key) => {
-				state.queryForm[key].value = fields[key]
+				if (state.queryForm[key]) {
+					state.queryForm[key].value = fields[key]
+				} else {
+					state.queryForm[key] = {
+						value: fields[key],
+					}
+				}
 			})
 		}
 
@@ -398,6 +405,7 @@ export default defineComponent({
 			return state.fieldColumns.map((item) =>
 				createSearchItem(item, state.queryForm, searchState[item.key], {
 					props,
+					slots,
 					searchProvider,
 				}),
 			)

package/components/search/components/SearchItem.jsx

@@ -1,4 +1,4 @@
-import { find } from "lodash-es"
+import { find, isFunction } from "lodash-es"
 import { computed, nextTick, ref, Transition, withModifiers } from "vue"
 import { Dropdown, Menu, MenuItem, TypographyText } from "ant-design-vue"
 import { DownOutlined } from "@ant-design/icons-vue"
@@ -16,29 +16,44 @@ import { useT } from "../../../hooks/index.js"
  * @return {JSX.Element}
  */
 const render = (item, queryForm, itemState, context) => {
-	const { searchProvider, props } = context
+	const { searchProvider, props, slots } = context
 
 	const panelRef = ref(null)
 
 	let field = {}
 
-	if (!item.type || item.type === "input") {
-		field = Fields.createInput(item, queryForm, context)
-	} else if (item.type === "number") {
-		field = Fields.createNumber(item, queryForm, context)
-	} else if (item.type === "select") {
-		field = Fields.createSelect(item, queryForm, context)
-	} else if (item.type === "textarea") {
-		field = Fields.createTextarea(item, queryForm, context)
-	} else if (item.type === "date") {
-		field = Fields.createDate(item, queryForm, context)
-	} else if (item.type === "cascade") {
-		field = Fields.createCascader(item, queryForm, context)
-	} else if (item.type === "switch") {
-		field = Fields.createSwitch(item, queryForm, context)
+	if (item.customRender) {
+		field = item.customRender({ item, queryForm, context })
+	} else {
+		switch (item.type) {
+			case "number":
+				field = Fields.createNumber(item, queryForm, context)
+				break
+			case "select":
+				field = Fields.createSelect(item, queryForm, context)
+				break
+			case "textarea":
+				field = Fields.createTextarea(item, queryForm, context)
+				break
+			case "date":
+				field = Fields.createDate(item, queryForm, context)
+				break
+			case "cascade":
+				field = Fields.createCascader(item, queryForm, context)
+				break
+			case "switch":
+				field = Fields.createSwitch(item, queryForm, context)
+				break
+			default:
+				field = Fields.createInput(item, queryForm, context)
+				break
+		}
+	}
+	if (slots[item.key]) {
+		field.Component = slots[item.key]({ item, queryForm, context })
 	}
 
-	const { conditions, Component, displayValue, onComponentOpen } = field
+	const { conditions = [], Component, displayValue = "", onComponentOpen = null } = field
 
 	/**
 	 * 选择条件
@@ -144,7 +159,7 @@ const render = (item, queryForm, itemState, context) => {
 									</Dropdown>
 								)}
 							</div>
-							<div class={"newbie-search-input-container"}>{Component}</div>
+							<div class={"newbie-search-input-container"}>{isFunction(Component) ? Component() : Component}</div>
 						</div>
 					) : null}
 				</Transition>

package/components/table/NewbieTable.jsx

@@ -71,10 +71,15 @@ export default defineComponent({
 		tableEvents: { type: Object, default: () => ({}) },
 
 		/**
-		 * 原生 slot
+		 * 原生 slots
 		 */
 		tableSlots: { type: Object, default: () => ({}) },
 
+		/**
+		 * NewbieSearch slots
+		 */
+		searchSlots: { type: Object, default: () => ({}) },
+
 		/**
 		 * 是否使用分页，为 Object 时时使用自定义分页
 		 */
@@ -682,7 +687,11 @@ export default defineComponent({
 							filterableColumns={state.filterableColumns}
 							sortableColumns={state.sortableColumns}
 							onSearch={onSearch}
-						></NewbieSearch>,
+						>
+							{{
+								...props.searchSlots,
+							}}
+						</NewbieSearch>,
 						<Divider></Divider>,
 					]
 				: null
@@ -738,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,