jobsys-mpower/components/provider/MpProvider.jsx

Enhanced component based on Taro & NutUI

import { defineComponent, provide } from "vue"

export const MP_UPLOADER = Symbol("MP_UPLOADER")
export const MP_FORM = Symbol("MP_FORM")
export const MP_SEARCH = Symbol("MP_SEARCH")
export const MP_PAGINATION = Symbol("MP_PAGINATION")

/**
 * Mpplore 配置组件
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpProvider",
	/**
	 * @typedef {Object} ProviderProps
	 * @property {UploaderProviderProps} [uploader] `MpUploader` 配置
	 * @property {FormProviderProps} [form] `MpForm` 配置
	 * @property {SearchProviderProps} [search] `MpSearch` 配置
	 * @property {PaginationProviderProps} [pagination] `MpPagination` 配置
	 *
	 */
	props: {
		/**
		 * @typedef {Object} UploaderProviderProps `MpUploader` 配置
		 * @property {string} uploadUrl 上传地址
		 * @property {UploadFileItem} defaultFileItem 默认文件项
		 *
		 * @typedef {Object} UploadFileItem 文件项
		 * @property {string} [id] 文件 ID
		 * @property {string} [name] 文件名
		 * @property {string} defaultFileItem.url 文件地址
		 * @property {string} defaultFileItem.path 文件路径
		 * @property {string} [thumbUrl] 缩略图地址
		 */
		uploader: {
			type: Object,
			default: () => ({
				uploadUrl: "",
				defaultFileItem: {
					id: "id",
					name: "name",
					url: "url",
					path: "path",
					thumbUrl: "thumbUrl",
				},
			}),
		},

		/**
		 * @typedef {Object} FormProviderProps `MpForm` 配置
		 * @property {Object} [format] 格式化配置, 如 {date: true} 表示在提交表单时使用 `useFormFormat` 格式所有日期字段
		 * @property {Function} [afterFetched] 处理接口返回数据的函数
		 */
		form: {
			type: Object,
			default: () => ({
				format: {},
				afterFetched: null,
			}),
		},

		/**
		 * @typedef {Object} SearchProviderProps `MpSearch` 配置
		 * @property {Object} [maskClass] 定制伪 Input 样式
		 * @property {Object} [inputClass] 弹层中 Input 的样式
		 */
		search: {
			type: Object,
			default: () => ({
				maskClass: "",
				inputClass: "",
			}),
		},

		/**
		 * @typedef {Object} PaginationRes
		 * @property {Array} items 数据
		 * @property {number} currentPage 当前页码
		 * @property {number} totalSize 总条数
		 * @property {String} [errorMessage] 错误信息
		 */

		/**
         * @typedef {Object} PaginationProviderProps `MpPagination` 配置
         * @property {function():PaginationRes} [afterFetched] 处理接口返回数据的函数
         * @property {PaginationRequestKeys} [requestKeys] 请求参数键名
         * /

         /**
         * @typedef {Object} PaginationRequestKeys 请求参数键名
         * @property {string} [currentPage] 当前页码
         * @property {string} [pageSize] 每页条数
         */
		pagination: {
			type: Object,
			default: () => ({
				afterFetched: null,
				requestKeys: {
					currentPage: "currentPage",
					pageSize: "pageSize",
				},
			}),
		},
	},
	setup(props, { slots }) {
		provide(MP_UPLOADER, {
			uploadUrl: props.uploader?.uploadUrl || "",
			defaultFileItem: {
				id: "id",
				name: "name",
				url: "url",
				path: "path",
				thumbUrl: "thumbUrl",
				...props.uploader?.defaultFileItem,
			},
		})
		provide(MP_FORM, { format: {}, ...props.form })
		provide(MP_SEARCH, {
			maskClass: "",
			inputClass: "",
			...props.search,
		})
		provide(MP_PAGINATION, {
			afterFetched: props.pagination?.afterFetched,
			requestKeys: {
				currentPage: "currentPage",
				pageSize: "pageSize",
				...props.pagination?.requestKeys,
			},
		})

		return () => <div>{slots.default?.()}</div>
	},
})