jobsys-explore 1.0.1

package/components/form/ExDatetime.jsx

@@ -0,0 +1,152 @@
+import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
+import { ref, defineComponent, computed, watch } from "vue"
+import { Calendar, Collapse, CollapseItem, TimePicker } from "vant"
+import ExButton from "../button/ExButton.jsx"
+import { padZero } from "vant/es/utils"
+import { defaultFieldProps } from "../utils"
+
+/**
+ * ExDatetime 日期时间选择器
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExDatetime",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: Date, default: () => null },
+
+		/**
+		 * 原生[Calendar 配置](https://vant-contrib.gitee.io/vant/#/zh-CN/calendar)
+		 */
+		calendarProps: { type: Object, default: () => ({}) },
+
+		/**
+		 * 原生[TimePicker 配置](https://vant-contrib.gitee.io/vant/#/zh-CN/time-picker)
+		 */
+		timeProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { slots, emit, expose }) {
+		const dateValue = ref(null)
+		const timeValue = ref(null)
+
+		/**
+		 *
+		 * @param {Date|null} date
+		 */
+		const prepareDate = (date) => {
+			if (date) {
+				dateValue.value = date
+				timeValue.value = `${padZero(date.getHours(), 2)}:${padZero(date.getMinutes(), 2)}`
+			}
+		}
+
+		prepareDate(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => prepareDate(props.modelValue),
+		)
+
+		const pickerRef = ref()
+
+		const activeName = ref("date")
+
+		const minDate = new Date(2010, 0, 1)
+		const maxDate = new Date(2045, 11, 31)
+
+		const weekdays = ["日", "一", "二", "三", "四", "五", "六"]
+
+		const dateText = computed(() => {
+			if (dateValue.value) {
+				return `${dateValue.value.getFullYear()}年${dateValue.value.getMonth() + 1}月${dateValue.value.getDate()}日  星期${
+					weekdays[dateValue.value.getDay()]
+				}`
+			}
+			return "请选择日期"
+		})
+		const timeText = computed(() => {
+			if (timeValue.value) {
+				return timeValue.value
+			}
+			return "请选择时间"
+		})
+
+		const displayText = computed(() => (dateValue.value && timeValue.value ? `${dateText.value} ${timeText.value}` : ""))
+
+		expose({ displayText })
+
+		const onSelectDate = (date) => {
+			dateValue.value = date
+		}
+
+		const onTimeChange = ({ selectedValues }) => {
+			timeValue.value = selectedValues.join(":")
+		}
+
+		const onConfirm = () => {
+			let dateString = `${dateValue.value.getFullYear()}/${dateValue.value.getMonth() + 1}/${dateValue.value.getDate()}`
+
+			if (!timeValue.value) {
+				dateString += ` 00:00:00`
+			} else {
+				dateString += ` ${timeValue.value}`
+			}
+
+			pickerRef.value.close()
+
+			emit("update:modelValue", new Date(dateString))
+		}
+
+		return () => {
+			return (
+				<PickerWrapper ref={pickerRef} inset={true}>
+					{{
+						...pickerSlots(slots, props),
+						default: () => [
+							<Collapse accordion={true} v-model={activeName.value} border={false} class={"ex-datetime_collapse"}>
+								{{
+									default: () => [
+										<CollapseItem name={"date"} icon={"calendar-o"} title={"日期"} value={dateText.value} isLink={false}>
+											{{
+												default: () => (
+													<div style={{ height: "300px" }}>
+														<Calendar
+															minDate={minDate}
+															maxDate={maxDate}
+															showSubtitle={false}
+															showConfirm={false}
+															poppable={false}
+															showTitle={false}
+															lazyRender={true}
+															rowHeight={36}
+															onSelect={onSelectDate}
+															{...props.calendarProps}
+														></Calendar>
+													</div>
+												),
+											}}
+										</CollapseItem>,
+										<CollapseItem name={"time"} icon={"clock-o"} title={"时间"} isLink={false} value={timeText.value}>
+											{{
+												default: () => (
+													<div>
+														<TimePicker showToolbar={false} onChange={onTimeChange} {...props.timeProps}></TimePicker>
+													</div>
+												),
+											}}
+										</CollapseItem>,
+									],
+								}}
+							</Collapse>,
+							<ExButton type={"primary"} style={{ margin: "20px 0" }} onClick={onConfirm}>
+								确定
+							</ExButton>,
+						],
+					}}
+				</PickerWrapper>
+			)
+		}
+	},
+})

package/components/form/ExField.jsx

@@ -0,0 +1,123 @@
+import { computed, defineComponent, getCurrentInstance, reactive, watch } from "vue"
+import { Field, Icon, Popover } from "vant"
+import { defaultFieldProps, defaultFieldSlots } from "../utils"
+import { omit, pick } from "lodash-es"
+
+/**
+ * ExField 输入框
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExField",
+	props: {
+		...defaultFieldProps,
+
+		/**
+		 * 输入框内容
+		 */
+		modelValue: { type: [String, Number, Array, Object, Boolean], default: () => "" },
+
+		/**
+		 * 输入框类型, 支持原生 input 标签的所有
+		 */
+		type: { type: String, default: "" },
+
+		/**
+		 * 是否作为 Picker 的 Trigger
+		 */
+		mask: { type: Boolean, default: false },
+	},
+	emits: ["update:modelValue", "click"],
+	setup(props, { slots, emit }) {
+		const instance = getCurrentInstance()
+		const displayText = instance.parent?.parent?.exposed?.displayText
+
+		const state = reactive({
+			value: props.mask ? displayText : props.modelValue,
+			showHelp: false,
+		})
+
+		watch(
+			() => props.modelValue,
+			() => {
+				state.value = props.modelValue
+			},
+		)
+
+		const isLink = computed(() => (props.mask ? true : props.isLink))
+		const isReadonly = computed(() => (props.mask ? true : props.readonly))
+
+		const onUpdateValue = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		/****************** render **********************/
+
+		const labelElem = () => (
+			<div class={"ex-field__label"}>
+				<span>{props.label || slots.label?.()}</span>
+
+				<Popover v-model:show={state.showHelp} theme={"dark"}>
+					{{
+						default: () => <div class={"ex-field__help"}>{props.help}</div>,
+						reference: () =>
+							props.help ? (
+								<span class={"ex-field__help-handler"}>
+									<Icon name={"warning-o"}></Icon>
+								</span>
+							) : null,
+					}}
+				</Popover>
+			</div>
+		)
+
+		const inputElem = () => {
+			let inputSlots = omit(slots, Object.keys(defaultFieldSlots))
+			let InputElem = slots.input ? slots.input() : null
+
+			if (Object.keys(inputSlots).length) {
+				if (InputElem.length > 1) {
+					console.warn("More than one root element wrapped in ExField with input slots!")
+				}
+				InputElem = InputElem[0]
+				return <InputElem>{inputSlots}</InputElem>
+			}
+			return InputElem
+		}
+
+		return () => {
+			let fieldSlots = pick(slots, Object.keys(defaultFieldSlots))
+
+			if (!fieldSlots.label) {
+				fieldSlots.label = labelElem
+			}
+
+			if (fieldSlots.input) {
+				fieldSlots.input = inputElem
+			}
+
+			return (
+				<div class={`ex-field`}>
+					<Field
+						v-model={state.value}
+						type={props.type}
+						name={props.name}
+						placeholder={props.placeholder}
+						readonly={isReadonly.value}
+						disabled={props.disabled}
+						required={props.required}
+						isLink={isLink.value}
+						rules={props.rules}
+						onClickInput={() => emit("click")}
+						onUpdate:modelValue={onUpdateValue}
+						{...props.fieldProps}
+					>
+						{{
+							...fieldSlots,
+						}}
+					</Field>
+				</div>
+			)
+		}
+	},
+})

package/components/form/ExFieldUploader.jsx

@@ -0,0 +1,44 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps } from "../utils"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+import ExUploader from "../uploader/ExUploader.jsx"
+
+/**
+ * ExFieldUploader Uploader in form
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExFieldUploader",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: [Array, Object], default: () => [] },
+
+		exUploaderProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		const onChange = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => <ExUploader v-model={componentValue.value} {...props.exUploaderProps} onChange={onChange}></ExUploader>,
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExForm.jsx

@@ -0,0 +1,395 @@
+import { computed, defineComponent, inject, onMounted, reactive, ref, watch } from "vue"
+import { EX_UPLOADER, EX_FORM } from "../provider/ExProvider.jsx"
+import { cloneDeep, every, isEqual, isFunction, isObject, isString, pick } from "lodash-es"
+import { initItemDefaultValue } from "./utils"
+import { useFetch, useFormFail, useFormFormat, useProcessStatusSuccess } from "../../hooks"
+import { CellGroup, Form, showConfirmDialog, showSuccessToast, Skeleton } from "vant"
+import createFormItem from "./FormItem.jsx"
+import ExButton from "../button/ExButton.jsx"
+
+/**
+ * ExForm 表单
+ *
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExForm",
+	props: {
+		/**
+		 * 表单标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 * 表单项 label 宽度，默认单位为px
+		 */
+		labelWidth: { type: [String, Number], default: "6.2em" },
+
+		/**
+		 * 是否在 label 后面添加冒号
+		 */
+		colon: { type: Boolean, default: false },
+
+		/**
+		 * 是否使用卡片模式
+		 */
+		inset: { type: Boolean, default: false },
+
+		/**
+		 * 表单数据，用于初始化表单，并会进行 Watch
+		 */
+		data: { type: [Object, String], default: "" },
+
+		/**
+		 * 是否自动加载
+		 * true: 表示自动加载数据
+		 * Array,String: 表示会对 `extraData` 数据中的相关字段进行非空验证，不为空再加载数据
+		 */
+		autoLoad: {
+			//自动加载数据,在fetchData里找
+			type: [Boolean, Array, String],
+			default: true,
+		},
+
+		/**
+		 * 获取表单数据的URL
+		 */
+		fetchUrl: { type: String, default: "" },
+
+		/**
+		 * 额外的数据，在提交时会合并到表单数据中并一起提交
+		 */
+		extraData: { type: Object, default: () => ({}) },
+
+		/**
+		 * 是否禁用表单
+		 */
+		disabled: { type: Boolean, default: false },
+
+		/**
+		 * submit button 是否固定在底部
+		 */
+		fixed: { type: Boolean, default: false },
+
+		/**
+		 * 提交数据URL
+		 */
+		submitUrl: { type: String, default: "" },
+
+		/**
+		 * 提交按钮文字
+		 */
+		submitButtonText: { type: String, default: "保存" },
+
+		/**
+		 * 提交确认提示内容
+		 */
+		submitConfirmText: { type: String, default: "" },
+
+		/**
+		 * 是否禁用提交按钮
+		 */
+		submitDisabled: { type: Boolean, default: false },
+
+		/**
+		 * 当有分割线时，分割线的配置
+		 */
+		dividerProps: { type: Object, default: () => ({}) },
+
+		/**
+		 *
+		 * 表单配置
+		 *
+		 * @typedef {Object} FormItemConfig
+		 * @property {string} key 数据库关联名称
+		 * @property {string} title 显示的名字
+		 * @property {string} [type] 类型,默认是input
+		 * @property {array|Function} [options] 组件选项
+		 * @property {string} [placeholder] 组件里的提示
+		 * @property {string|Function} [help] ExField 里的提示
+		 * @property {array} [rules] 验证规则
+		 * @property {boolean} [is-link] 是否展示右侧箭头并开启点击反馈
+		 * @property {boolean} [readonly] 是否只读
+		 * @property {boolean} [required] 是否必填,默认是false
+		 * @property {boolean} [disabled] 组件不可编辑状态,默认是false
+		 * @property {boolean|string} [break] 新起一行，默认为false，如果为 String 则以 Divider 分割
+		 * @property {Object} [fieldProps] ExField 的原生配置
+		 * @property {Object} [defaultProps] 组件的配置
+		 * @property {Object} [slots] 混合 Field 和 input slot 组件的 slots 组合
+		 * @property {*} [defaultValue] 默认值，默认是空字符串
+		 * @property {*} [_temp] 临时数据，内部使用
+		 */
+
+		/**
+		 * 表单配置，[见下表](#form-表单配置)
+		 */
+		form: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+
+		/**
+		 * fetch 返回数据处理函数
+		 * @return {Object} 返回处理后的数据，将用于初始化表单
+		 */
+		afterFetched: { type: Function, default: null },
+
+		/**
+		 *
+		 * @typedef {Object} ExposedFormData
+		 * @property {Object} formatForm Format后的表单数据
+		 * @property {Object} originalForm 原生的表单数据
+		 *
+		 *
+		 * 提交数据处理函数
+		 * @param {ExposedFormData} data
+		 * @return {Boolean|Object} return false会阻止提交操作，return Object会替换提交的数据
+		 *
+		 */
+		beforeSubmit: { type: Function, default: null },
+
+		/**
+		 * 提交成功后的回调
+		 */
+		afterSubmit: { type: Function, default: null },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/form)
+		 */
+		formProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["success"],
+
+	setup(props, { expose, emit, slots }) {
+		const formRef = ref(null) //表单容器
+
+		const state = reactive({
+			temporary: {}, // 用于存放一些临时数据
+			submitFetcher: {
+				loading: false,
+			},
+			isInitializing: true, //是否正在初始化
+			rules: {},
+			submitForm: {}, //提交表单，初始化数据后会生成
+			submitFormBackup: {}, //初始化后的表单数据备份，用于重置表单以及脏数据判断
+		})
+
+		const formItems = computed(() => props.form)
+
+		const uploaderProvider = inject(EX_UPLOADER, () => ({}))
+		const formProvider = inject(EX_FORM, () => ({}))
+
+		watch(
+			() => props.data,
+			(newV) => {
+				initFormData(newV || "")
+			},
+		)
+
+		const init = () => {
+			state.isInitializing = false
+			initFormData(props.data || "")
+		}
+
+		onMounted(() => {
+			init()
+		})
+
+		/**
+		 * 初始化表单数据
+		 *
+		 * @param {Object} formData 表单数据
+		 */
+		const initFormData = (formData) => {
+			// 如果有 FormData, 则从中提取 FormItem 中有定义的数据，并进行初始化后存放于 extractFormData
+			// 无 FromData 则直接使用 FormItem 的 defaultValue
+			let extractFormData = {}
+			let existingData = formData ? cloneDeep(formData) : false
+			formItems.value.forEach((item) => {
+				extractFormData[item.key] = initItemDefaultValue(item, existingData, state.submitForm, { uploaderProvider })
+			})
+
+			if (existingData) {
+				// 将初始化后的数据覆盖原有数据，并保留不在 FormItems 中的数据
+				extractFormData = { ...existingData, ...extractFormData }
+			}
+
+			state.submitForm = extractFormData
+			state.submitFormBackup = cloneDeep(extractFormData)
+		}
+
+		//远程拿数据模式
+		const fetchItem = () => {
+			if (props.fetchUrl) {
+				state.isInitializing = true
+				useFetch()
+					.get(props.fetchUrl, { params: props.extraData })
+					.then((res) => {
+						state.isInitializing = false
+						useProcessStatusSuccess(res, () => {
+							if (props.afterFetched && isFunction(props.afterFetched)) {
+								res = props.afterFetched(res)
+							} else if (formProvider.afterFetched && isFunction(formProvider.afterFetched)) {
+								res = formProvider.afterFetched(res)
+							}
+							initFormData(res)
+						})
+					})
+					.finally(() => {
+						state.isInitializing = false
+					})
+			}
+		}
+
+		if (props.autoLoad) {
+			let auto = true
+			if (props.autoLoad && isObject(props.autoLoad)) {
+				auto = every(Object.values(pick(props.extraData, Object.keys(props.autoLoad))))
+			} else if (props.autoLoad && isString(props.autoLoad)) {
+				auto = !!props.extraData[props.autoLoad]
+			}
+
+			if (auto) {
+				fetchItem()
+			}
+		}
+
+		const onSubmit = async () => {
+			await formRef.value.validate()
+
+			if (props.submitConfirmText) {
+				try {
+					await showConfirmDialog({ message: props.submitConfirmText })
+				} catch (e) {
+					return
+				}
+			}
+
+			let form = useFormFormat(state.submitForm, formProvider.format || {})
+
+			if (props.beforeSubmit && isFunction(props.beforeSubmit)) {
+				form = await props.beforeSubmit({ formatForm: form, originalForm: state.submitForm })
+				if (form === false) {
+					return
+				}
+			}
+
+			try {
+				let res = await useFetch(state.submitFetcher).post(props.submitUrl, form)
+
+				//提交后再次备份表单数据，isDirty 检测即为 false
+				state.submitFormBackup = cloneDeep(state.submitForm)
+
+				if (props.afterSubmit) {
+					props.afterSubmit(res)
+				} else {
+					useProcessStatusSuccess(res, () => {
+						showSuccessToast(`${props.submitButtonText}成功`)
+						emit("success", res)
+					})
+				}
+			} catch (e) {
+				useFormFail(e)
+			}
+		}
+
+		/********** exposes **********/
+
+		/**
+		 * 获取复制的表单数据
+		 * @return {*}
+		 */
+		const getFormStandalone = () => cloneDeep(state.submitForm)
+
+		/**
+		 * 获取表单实时数据
+		 * @return {*}
+		 */
+		const getForm = () => state.submitForm
+
+		/**
+		 *
+		 * 设置表单数据
+		 * @param {Object} fields
+		 */
+		const setForm = (fields) => {
+			Object.keys(fields).forEach((key) => {
+				state.submitForm[key] = fields[key]
+			})
+		}
+
+		/**
+		 * 判断表单是否被修改
+		 * @return {boolean}
+		 */
+		const isDirty = () => {
+			return !isEqual(state.submitForm, state.submitFormBackup)
+		}
+
+		expose({ getForm, getFormStandalone, setForm, isDirty })
+
+		/********** render **********/
+
+		const formItemElems = () =>
+			formItems.value.map((formItem) =>
+				createFormItem(formItem, state.submitForm, {
+					props,
+					slots,
+				}),
+			)
+
+		const skeletonElem = () => (
+			<Skeleton rows={10} loading={state.isInitializing}>
+				{{
+					default: () => formItemElems(),
+				}}
+			</Skeleton>
+		)
+
+		const footerElem = () => {
+			if (slots.footer) {
+				return <div class={"ex-form__footer"}>{slots.footer()}</div>
+			}
+			return null
+		}
+
+		const submitBtnElem = () => {
+			const submitBtn = (
+				<ExButton disabled={props.submitDisabled} type={"primary"} fetcher={state.submitFetcher} buttonProps={{ nativeType: "submit" }}>
+					{{
+						default: () => props.submitButtonText || "提交",
+					}}
+				</ExButton>
+			)
+
+			if (props.fixed) {
+				return <div class={"ex-form__submit-btn-fixed van-hairline--top"}>{submitBtn}</div>
+			}
+
+			return <div class={"ex-form__submit-btn"}>{submitBtn}</div>
+		}
+
+		return () => (
+			<Form
+				ref={formRef}
+				scrollToError={true}
+				labelWidth={props.labelWidth}
+				colon={props.colon}
+				class={`ex-form ${props.fixed ? "ex-form__fixed" : ""}`}
+				onSubmit={onSubmit}
+			>
+				{{
+					default: () => [
+						<CellGroup inset={props.inset} title={props.title}>
+							{{ default: () => skeletonElem() }}
+						</CellGroup>,
+						footerElem(),
+						submitBtnElem(),
+					],
+				}}
+			</Form>
+		)
+	},
+})