jobsys-explore 1.0.1

package/components/form/index.js

@@ -0,0 +1,37 @@
+import "./index.less"
+
+import withInstall from "../../utils/withInstall"
+import _ExField from "./ExField.jsx"
+import _ExAddress, { useAddressFullCode as _useAddressFullCode } from "./ExAddress.jsx"
+import _ExCascader from "./ExCascader.jsx"
+import _ExCheckbox from "./ExCheckbox.jsx"
+import _ExDate from "./ExDate.jsx"
+import _ExDatetime from "./ExDatetime.jsx"
+import _ExTime from "./ExTime.jsx"
+import _ExNumber from "./ExNumber.jsx"
+import _ExRadio from "./ExRadio.jsx"
+import _ExSelect from "./ExSelect.jsx"
+import _ExSwitch from "./ExSwitch.jsx"
+import _ExRate from "./ExRate.jsx"
+import _ExSlider from "./ExSlider.jsx"
+import _ExFieldUploader from "./ExFieldUploader.jsx"
+
+import _ExForm from "./ExForm.jsx"
+
+export const useAddressFullCode = _useAddressFullCode
+export const ExAddress = withInstall(_ExAddress)
+export const ExField = withInstall(_ExField)
+export const ExCascader = withInstall(_ExCascader)
+export const ExCheckbox = withInstall(_ExCheckbox)
+export const ExDate = withInstall(_ExDate)
+export const ExDatetime = withInstall(_ExDatetime)
+export const ExTime = withInstall(_ExTime)
+export const ExNumber = withInstall(_ExNumber)
+export const ExRadio = withInstall(_ExRadio)
+export const ExSelect = withInstall(_ExSelect)
+export const ExSwitch = withInstall(_ExSwitch)
+export const ExRate = withInstall(_ExRate)
+export const ExSlider = withInstall(_ExSlider)
+export const ExFieldUploader = withInstall(_ExFieldUploader)
+
+export const ExForm = withInstall(_ExForm)

package/components/form/index.less

@@ -0,0 +1,108 @@
+.ex-form {
+	
+	& > .van-cell-group {
+		margin-bottom: var(--van-padding-md);
+	}
+	
+	&.ex-form__fixed {
+		& > .van-cell-group {
+			margin-bottom: 100px;
+		}
+	}
+	
+	.ex-form__footer {
+		margin: var(--van-padding-md);
+	}
+	
+	.ex-form__submit-btn {
+		padding: var(--van-padding-md);
+	}
+	
+	.ex-form__submit-btn-fixed {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: var(--van-white);
+		padding: var(--van-padding-md);
+	}
+}
+
+.ex-field {
+	.ex-field__label {
+		display: inline-block;
+		
+		.ex-field__help-handler {
+			margin-left: 4px;
+		}
+	}
+}
+
+.ex-field__help {
+	padding: 4px 8px;
+	font-size: 13px;
+}
+
+.ex-field-popup {
+	background: var(--van-gray-1) !important;
+	
+	&.ex-field-popup-inset {
+		box-sizing: border-box;
+		padding: 0 var(--van-padding-md) 10px;
+	}
+	
+	
+	.ex-field-popup__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 48px;
+		padding: 0 var(--van-padding-md);
+		
+		.ex-field-popup__title {
+			font-weight: var(--vant-font-bold);
+			font-size: var(--van-font-size-lg);
+			line-height: 20px;
+		}
+	}
+	
+	.van-collapse {
+		border-radius: var(--van-radius-lg);
+		overflow: hidden;
+		
+		
+		&.ex-datetime_collapse {
+			.van-collapse-item {
+				.van-cell {
+					.van-cell__value {
+						color: var(--van-primary-color)
+					}
+				}
+			}
+		}
+	}
+	
+	.van-cascader {
+		border-radius: var(--van-radius-lg);
+		overflow: hidden;
+		background: var(--van-white);
+		
+	}
+	
+	.ex-field-popup__clear-btn {
+		background: var(--ex-white);
+		margin: var(--van-padding-sm);
+	}
+}
+
+.ex-slider-button {
+	width: var(--van-slider-button-width);
+	height: var(--van-slider-button-height);
+	text-align: center;
+	color: #FFF;
+	font-size: 12px;
+	line-height: var(--van-slider-button-height);
+	background: var(--van-primary-color);
+	border-radius: var(--van-slider-button-radius);
+	box-shadow: var(--van-slider-button-shadow);
+}

package/components/form/utils.js

@@ -0,0 +1,47 @@
+import { isArray, isDate, isFunction, isUndefined } from "lodash-es"
+import { useAddressFullCode } from "./ExAddress.jsx"
+
+/**
+ * 初始化表单项默认值
+ * @param {FormItemConfig} item
+ * @param {Object} existingData
+ * @param {Object} submitForm
+ * @param {Object} provider
+ */
+const initItemDefaultValue = (item, existingData, submitForm, provider) => {
+	let value = ""
+
+	const { uploaderProvider } = provider
+
+	if (existingData && !isUndefined(existingData[item.key])) {
+		value = existingData[item.key]
+	} else if (!isUndefined(item.defaultValue)) {
+		value = isFunction(item.defaultValue) ? item.defaultValue(submitForm) : item.defaultValue
+	}
+	if (item.type === "number" || item.type === "rate") {
+		value = value ? Number(value) : 0
+	} else if (item.type === "slider") {
+		value = item.defaultProps && item.defaultProps.range ? value || [0, 100] : value ? Number(value) : 0
+	} else if (item.type === "switch") {
+		value = value === "true" || value === 1 || value === "1" || value === true
+	} else if (item.type === "date" || item.type === "datetime") {
+		value = isDate(value) ? value : null
+	} else if (item.type === "checkbox" || item.type === "group" || item.type === "cascade") {
+		value = value || []
+	} else if (item.type === "address") {
+		value = value || []
+		if (!isArray(value)) {
+			value = useAddressFullCode(value)
+		}
+	} else if (item.type === "uploader") {
+		if (item.defaultProps && item.defaultProps.maxNum && item.defaultProps.maxNum > 1) {
+			value = value || []
+		} else {
+			value = value || { [uploaderProvider.path]: "", [uploaderProvider.url]: "" }
+		}
+	}
+
+	return value
+}
+
+export { initItemDefaultValue }

package/components/grid/ExGrid.jsx

@@ -0,0 +1,53 @@
+import { defineComponent } from "vue"
+import "./index.less"
+import { isArray } from "lodash-es"
+import { genPixel } from "../../utils/style"
+
+/**
+ * Grid 布局组件
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExGrid",
+	props: {
+		/**
+		 * 间距方向
+		 * @values vertical, horizontal
+		 */
+		direction: { type: String, default: "horizontal" },
+
+		/**
+		 * 列数，如果没有定义将会把元素置于同一行
+		 */
+		columns: { type: Number, default: 0 },
+
+		/**
+		 * 间距大小，如 20px 2em，默认单位为 px，支持数组形式来分别设置横向和纵向间距
+		 */
+		gutter: { type: [Array, Number, String], default: 20 },
+	},
+	setup(props, { slots }) {
+		return () => {
+			const columns = props.columns || slots.default()?.length
+
+			let gridTemplateColumns = ""
+
+			for (let i = 0; i < columns; i++) {
+				gridTemplateColumns += " 1fr"
+			}
+			return (
+				<div
+					class={"ex-grid"}
+					style={{
+						gridAutoFlow: props.direction === "horizontal" ? "row" : "column",
+						gridRowGap: isArray(props.gutter) ? genPixel(props.gutter?.[1]) : "0",
+						gridColumnGap: isArray(props.gutter) ? genPixel(props.gutter?.[0]) : genPixel(props.gutter),
+						gridTemplateColumns,
+					}}
+				>
+					{slots.default?.()}
+				</div>
+			)
+		}
+	},
+})

package/components/grid/index.js

@@ -0,0 +1,4 @@
+import _ExGrid from "./ExGrid.jsx"
+import withInstall from "../../utils/withInstall"
+export const ExGrid = withInstall(_ExGrid)
+export default ExGrid

package/components/grid/index.less

@@ -0,0 +1,3 @@
+.ex-grid{
+	display: grid;
+}

package/components/index.js

@@ -0,0 +1,9 @@
+export * from "./button"
+export * from "./theme"
+export * from "./form"
+export * from "./provider"
+export * from "./result"
+export * from "./qrcode"
+export * from "./pagination"
+export * from "./search"
+export * from "./uploader"

package/components/pagination/ExPagination.jsx

@@ -0,0 +1,148 @@
+import { computed, defineComponent, ref } from "vue"
+import { usePage } from "../../hooks"
+import { Empty, List } from "vant"
+import ExSearch from "../search/ExSearch.jsx"
+import "./index.less"
+
+/**
+ * ExPagination 翻页
+ *
+ */
+export default defineComponent({
+	name: "ExPagination",
+	props: {
+		/**
+		 * 翻页数据
+		 */
+		pagination: { type: Object, default: () => ({}) },
+
+		/**
+		 * ExSearch 搜索的 columns 配置
+		 */
+		search: { type: Object, default: null },
+
+		/**
+		 * 请求数据URL
+		 *
+		 */
+		url: { type: String, default: "" },
+
+		/**
+		 * 请求时的附带参数
+		 */
+		extraData: { type: Object, default: () => ({}) },
+
+		/**
+		 * 是否自动加载
+		 */
+		autoLoad: { type: Boolean, default: false },
+
+		/**
+		 * 加载后数据的回调函数
+		 */
+		afterFetched: { type: Function, default: null },
+
+		/**
+		 * 数据为空文案
+		 */
+		emptyText: { type: String, default: "暂无内容" },
+
+		/**
+		 * 加载完毕文案
+		 */
+		finishText: { type: String, default: "加载完毕" },
+
+		/**
+		 * 加载错误文案
+		 */
+		errorText: { type: String, default: "请求失败，点击重新加载" },
+
+		/**
+		 * 是否使用 store
+		 * 如果使用 store, 请确认 store 中定义了 pagination 和 initPagination 方法
+		 */
+		useStore: { type: Object, default: () => null },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/list)
+		 */
+		listProps: { type: Object, default: () => ({}) },
+	},
+	setup(props, { expose, slots }) {
+		let pagination = ref(null)
+		if (props.useStore?.initPagination) {
+			props.useStore.initPagination({
+				uri: props.url,
+				params: props.extraData,
+			})
+			pagination = computed(() => props.useStore.pagination)
+		} else {
+			pagination = ref({
+				uri: props.url,
+				params: props.extraData,
+			})
+		}
+
+		const loadMore = (refresh) => {
+			usePage(pagination?.value, refresh)
+		}
+
+		const onSearch = (params) => {
+			pagination.value.params = params
+			loadMore(true)
+		}
+
+		if (props.autoLoad) {
+			loadMore()
+		}
+
+		/****************** exposed ******************/
+
+		const items = () => {
+			return pagination.value.items || []
+		}
+
+		expose({ loadMore, items, pagination })
+
+		/****************** render ******************/
+
+		return () => (
+			<div class={`ex-pagination ${props.search ? "ex-pagination__with-search" : ""}`}>
+				{props.search ? (
+					<div class={"ex-pagination__search"}>
+						<ExSearch {...props.search} onSearch={onSearch}></ExSearch>
+					</div>
+				) : null}
+
+				{pagination.value.empty ? (
+					<Empty description={props.emptyText}></Empty>
+				) : (
+					<List
+						/*v-model:loading={pagination.value.loading}*/
+						v-model:error={pagination.value.error}
+						immediateCheck={props.autoLoad}
+						finished={pagination.value.finished}
+						finishedText={props.finishText}
+						errorText={props.errorText}
+						onLoad={() => loadMore(false)}
+						{...props.listProps}
+					>
+						{{
+							default: () =>
+								pagination.value.items
+									? pagination.value.items.map((item, index) =>
+											slots.renderItem
+												? slots.renderItem({
+														item,
+														index,
+												  })
+												: null,
+									  )
+									: null,
+						}}
+					</List>
+				)}
+			</div>
+		)
+	},
+})

package/components/pagination/index.js

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

package/components/pagination/index.less

@@ -0,0 +1,15 @@
+.ex-pagination {
+	
+	&.ex-pagination__with-search {
+		position: relative;
+		margin-top: 100px;
+	}
+	
+	.ex-pagination__search {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+	}
+}

package/components/provider/ExProvider.jsx

@@ -0,0 +1,91 @@
+import { defineComponent, provide } from "vue"
+
+export const EX_UPLOADER = Symbol("EX_UPLOADER")
+export const EX_FORM = Symbol("EX_FORM")
+export const EX_SEARCH = Symbol("EX_SEARCH")
+
+/**
+ * Explore 配置组件
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExProvider",
+	/**
+	 * @typedef {Object} ProviderProps
+	 * @property {UploaderProviderProps} [uploader] `ExUploader` 配置
+	 * @property {FormProviderProps} [form] `ExForm` 配置
+	 * @property {SearchProviderProps} [search] `ExSearch` 配置
+	 *
+	 */
+	props: {
+		/**
+		 * @typedef {Object} UploaderProviderProps `ExUploader` 配置
+		 * @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 `ExForm` 配置
+		 * @property {Object} [format] 格式化配置, 如 {date: true} 表示在提交表单时使用 `useFormFormat` 格式所有日期字段
+		 * @property {Function} [afterFetched] 处理接口返回数据的函数
+		 */
+		form: {
+			type: Object,
+			default: () => ({
+				format: {},
+				afterFetched: null,
+			}),
+		},
+
+		/**
+		 * @typedef {Object} SearchProviderProps `ExSearch` 配置
+		 * @property {Object} [maskClass] 定制伪 Input 样式
+		 * @property {Object} [inputClass] 弹层中 Input 的样式
+		 */
+		search: {
+			type: Object,
+			default: () => ({
+				maskClass: "",
+				inputClass: "",
+			}),
+		},
+	},
+	setup(props, { slots }) {
+		provide(EX_UPLOADER, {
+			id: "id",
+			name: "name",
+			url: "url",
+			path: "path",
+			thumbUrl: "thumbUrl",
+			...props.uploader,
+		})
+		provide(EX_FORM, { format: {}, ...props.form })
+		provide(EX_SEARCH, {
+			maskClass: "",
+			inputClass: "",
+			...props.search,
+		})
+
+		return () => <div>{slots.default?.()}</div>
+	},
+})

package/components/provider/index.js

@@ -0,0 +1,4 @@
+import _ExProvider from "./ExProvider.jsx"
+import withInstall from "../../utils/withInstall"
+export const ExProvider = withInstall(_ExProvider)
+export default ExProvider

package/components/qrcode/ExQrcode.jsx

@@ -0,0 +1,86 @@
+import { defineComponent, onBeforeUpdate, onMounted, ref, watch } from "vue"
+import QRCode from "qrcode"
+import "./index.less"
+
+/**
+ * ExQrcode 二维码
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExQrcode",
+	props: {
+		/**
+		 * 是否居中显示
+		 */
+		center: { type: Boolean, default: false },
+
+		/**
+		 * 二维码内容
+		 */
+		text: { type: [String, Number], default: "" },
+
+		/**
+		 * 二维码尺寸
+		 */
+		size: { type: Number, default: 120 },
+
+		/**
+		 * 边距
+		 */
+		margin: { type: Number, default: 0 },
+
+		/**
+		 * 前景色
+		 */
+		colorDark: { type: String, default: "#000000" },
+
+		/**
+		 * 背景色
+		 */
+		colorLight: { type: String, default: "#FFFFFF" },
+
+		/**
+		 * 纠错级别
+		 * @values L, M, Q, H
+		 */
+		correctLevel: { type: String, default: "H" },
+	},
+
+	setup(props) {
+		const containerRef = ref()
+
+		const create = () => {
+			QRCode.toDataURL(containerRef.value, String(props.text), {
+				errorCorrectionLevel: props.correctLevel,
+				color: {
+					dark: props.colorDark,
+					light: props.colorLight,
+				},
+				width: props.size,
+				margin: props.margin,
+			})
+		}
+
+		watch(
+			() => props,
+			() => {
+				create()
+			},
+			{ deep: true },
+		)
+
+		onBeforeUpdate(() => {
+			containerRef.value = null
+		})
+
+		onMounted(() => {
+			create()
+		})
+
+		return () => (
+			<div class={`ex-qrcode ${props.center ? "ex-qrcode__center" : ""}`}>
+				<canvas ref={containerRef}></canvas>
+			</div>
+		)
+	},
+})

package/components/qrcode/index.js

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

package/components/qrcode/index.less

@@ -0,0 +1,8 @@
+.ex-qrcode {
+	display: flex;
+	
+	&.ex-qrcode__center {
+		justify-content: center;
+		align-items: center;
+	}
+}