jobsys-explore 1.0.1

package/components/form/FormItem.jsx

@@ -0,0 +1,229 @@
+import { inject } from "vue"
+import { EX_UPLOADER } from "../provider/ExProvider.jsx"
+import { isString, pick } from "lodash-es"
+import ExField from "./ExField.jsx"
+import ExSelect from "./ExSelect.jsx"
+import ExDate from "./ExDate.jsx"
+import ExSwitch from "./ExSwitch.jsx"
+import ExCheckbox from "./ExCheckbox.jsx"
+import ExRadio from "./ExRadio.jsx"
+import ExDatetime from "./ExDatetime.jsx"
+import ExNumber from "./ExNumber.jsx"
+import ExRate from "./ExRate.jsx"
+import ExSlider from "./ExSlider.jsx"
+import ExAddress from "./ExAddress.jsx"
+import ExCascader from "./ExCascader.jsx"
+import ExTime from "./ExTime.jsx"
+import ExFieldUploader from "./ExFieldUploader.jsx"
+import { Divider } from "vant"
+
+export const RERENDER = "rerender"
+
+/**
+ *
+ * @param item
+ * @param submitForm
+ * @param props
+ * @param slots
+ * @return {*|JSX.Element}
+ */
+const render = (item, submitForm, { props, slots }) => {
+	const uploaderProvider = inject(EX_UPLOADER, () => ({}))
+
+	if (item.type === "slot" && slots[item.key]) {
+		return slots[item.key]({ submitForm })
+	}
+	let renderItem = null
+
+	const pickerTypes = ["select", "date", "datetime", "time", "address", "cascade"]
+	const isPicker = pickerTypes.includes(item.type)
+
+	const fieldProps = pick(item, ["placeholder", "help", "required", "disabled", "rules", "readonly", "isLink", "fieldProps"])
+	fieldProps.label = item.title
+	fieldProps.name = item.key
+	fieldProps.placeholder = fieldProps.placeholder || (isPicker ? `请选择${item.title}` : `请填写${item.title}`)
+	fieldProps.rules = fieldProps.rules || []
+
+	let componentProps = pick(item, ["options"])
+	if (item.defaultProps) {
+		componentProps = { ...componentProps, ...item.defaultProps }
+	}
+
+	const componentSlots = item.slots || {}
+	item.type = item.type ? item.type.toLowerCase() : item.type
+	if (item.required) {
+		fieldProps.rules.push({
+			required: true,
+			message: isPicker ? `请选择${item.title}` : `请填写${item.title}`,
+			trigger: isPicker ? "onChange" : "onBlur", //特意
+		})
+	}
+
+	if (item.customRender) {
+		renderItem = item.customRender({ submitForm, item })
+	}
+
+	if ((!item.customRender && !renderItem) || renderItem === RERENDER) {
+		switch (item.type) {
+			case "select":
+				renderItem = (
+					<ExSelect v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExSelect>
+				)
+				break
+			case "date":
+				renderItem = (
+					<ExDate v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExDate>
+				)
+				break
+			case "datetime":
+				renderItem = (
+					<ExDatetime v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExDatetime>
+				)
+				break
+			case "time":
+				renderItem = (
+					<ExTime v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExTime>
+				)
+				break
+			case "switch":
+				renderItem = (
+					<ExSwitch v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExSwitch>
+				)
+				break
+			case "radio":
+				renderItem = (
+					<ExRadio v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExRadio>
+				)
+				break
+			case "checkbox":
+				renderItem = (
+					<ExCheckbox v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExCheckbox>
+				)
+				break
+			case "address":
+				renderItem = (
+					<ExAddress v-model={submitForm[item.key]} {...fieldProps}>
+						{componentSlots}
+					</ExAddress>
+				)
+				break
+			case "cascade":
+				renderItem = (
+					<ExCascader v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExCascader>
+				)
+				break
+			case "number":
+				renderItem = (
+					<ExNumber v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExNumber>
+				)
+				break
+			case "rate":
+				renderItem = (
+					<ExRate v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExRate>
+				)
+				break
+			case "slider":
+				renderItem = (
+					<ExSlider v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExSlider>
+				)
+				break
+			case "uploader":
+				renderItem = (
+					<ExFieldUploader v-model={submitForm[item.key]} {...componentProps} {...fieldProps}>
+						{componentSlots}
+					</ExFieldUploader>
+				)
+				if (item.required) {
+					if (!Object.keys(uploaderProvider).length) {
+						console.error("请在根组件中注入 NEWBIE_UPLOADER 配置项")
+						renderItem = null
+						break
+					}
+
+					/*if (item.defaultProps?.maxNum && item.defaultProps?.maxNum > 1) {
+                        rules.type = "array"
+                        rules.message = `请上传${item.title}`
+                    } else {
+                        rules = {
+                            type: "object",
+                            required: true,
+                            message: `请上传${item.title}`,
+                            fields: {
+                                [uploaderProvider.path]: {
+                                    type: "string",
+                                    required: true,
+                                    message: `请上传${item.title}`,
+                                },
+                            },
+                        }
+                    }*/
+				}
+				break
+			/* case "html":
+                  renderItem = Fields.createHtml(item, submitForm)
+                  break
+
+              case "text":
+                  renderItem = Fields.createText(item, submitForm)
+                  break
+              case "group":
+                  renderItem = Fields.createGroup(item, submitForm, { provider: { uploaderProvider } })
+                  break*/
+			case "textarea":
+				fieldProps.type = "textarea"
+				renderItem = (
+					<ExField v-model={submitForm[item.key]} {...fieldProps}>
+						{componentSlots}
+					</ExField>
+				)
+				break
+			case "password":
+				fieldProps.type = "password"
+				renderItem = (
+					<ExField v-model={submitForm[item.key]} {...fieldProps}>
+						{componentSlots}
+					</ExField>
+				)
+				break
+			default:
+				renderItem = (
+					<ExField v-model={submitForm[item.key]} {...fieldProps}>
+						{componentSlots}
+					</ExField>
+				)
+				break
+		}
+	}
+
+	const formItem = [renderItem]
+
+	if (item.break) {
+		formItem.unshift(<Divider {...props.dividerProps}>{{ default: () => (isString(item.break) ? item.break : null) }}</Divider>)
+	}
+
+	return formItem
+}
+
+export default render

package/components/form/PickerWrapper.jsx

@@ -0,0 +1,111 @@
+import { defineComponent, ref } from "vue"
+import { Popup } from "vant"
+import ExField from "./ExField.jsx"
+import { omit, pick } from "lodash-es"
+import { defaultFieldProps } from "../utils"
+
+export default defineComponent({
+	name: "PickerWrapper",
+
+	props: {
+		/**
+		 * Picker 标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 * 是否启用卡片模式
+		 */
+		inset: { type: Boolean, default: false },
+
+		/**
+		 * 是否显示关闭
+		 */
+		closeable: { type: Boolean, default: true },
+	},
+	emits: ["close", "open"],
+	setup: (props, { emit, slots, expose }) => {
+		const showPopup = ref(false)
+
+		const onClickWrapper = () => {
+			showPopup.value = true
+			emit("open")
+		}
+
+		const close = () => {
+			showPopup.value = false
+			emit("close")
+		}
+
+		expose({ close })
+
+		return () => {
+			// 为了让 ExField 的 onClickInput 事件才触发 Popup
+			// 所以会手动获取 trigger slot 的第一个组件来手动监听 onClick 事件
+			// 如果以后有需要多个组件的情况，再做调整
+
+			let TriggerElem = slots.trigger ? slots.trigger() : null
+
+			if (TriggerElem && TriggerElem.length) {
+				TriggerElem = TriggerElem[0]
+			}
+
+			return [
+				<span class={"ex-field-popup-wrapper"}>
+					<TriggerElem onClick={onClickWrapper}></TriggerElem>
+				</span>,
+
+				<Popup
+					v-model:show={showPopup.value}
+					closeable={props.closeable}
+					position={"bottom"}
+					round={true}
+					teleport={"body"}
+					closeOnPopstate={true}
+					class={`ex-field-popup ${props.inset ? "ex-field-popup-inset" : ""}`}
+					safeAreaInsetBottom={true}
+					safeAreaInsetTop={true}
+					onClickOverlay={close}
+					onClickCloseIcon={close}
+				>
+					{{
+						default: () => [
+							props.closeable ? (
+								<div class={"ex-field-popup__header"}>
+									<h2 class={"ex-field-popup__title"}>{props.title}</h2>
+								</div>
+							) : null,
+							slots.default?.(),
+						],
+					}}
+				</Popup>,
+			]
+		}
+	},
+})
+
+export const pickerProps = (props) => {
+	return {
+		title: props.title || `请选择${props.label}`,
+	}
+}
+
+export const pickerSlots = (slots, props) => {
+	let triggerElem = slots.default ? slots.default() : null
+
+	if (!triggerElem) {
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+		// default slot 是 trigger, 其它的 slots 全部传给 ExField
+		const fieldSlots = omit(slots, "default")
+
+		triggerElem = (
+			<ExField {...fieldProps} mask={true}>
+				{fieldSlots}
+			</ExField>
+		)
+	}
+
+	return {
+		trigger: () => triggerElem,
+	}
+}