jobsys-explore 1.0.1

package/components/form/ExNumber.jsx

@@ -0,0 +1,49 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps } from "../utils"
+import { Stepper } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExNumber 数字
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExNumber",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: [Number, String], default: 1 },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/stepper)
+		 */
+		numberProps: { 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", Number(value))
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<Stepper v-model={componentValue.value} {...props.numberProps} theme={"round"} buttonSize={22} onChange={onChange}></Stepper>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExRadio.jsx

@@ -0,0 +1,58 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { Radio, RadioGroup } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExRadio 单选
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExRadio",
+	props: {
+		...defaultFieldProps,
+		...defaultOptionsProps,
+
+		modelValue: { type: [Number, String], default: "" },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/raido)
+		 */
+		radioProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		const options = ref([])
+
+		useOptionTrait(options, props)
+
+		const onChange = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<RadioGroup v-model={componentValue.value} {...props.radioProps} onChange={onChange}>
+							{{
+								default: () => options.value.map((option) => <Radio name={option.value}>{{ default: () => option.text }}</Radio>),
+							}}
+						</RadioGroup>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExRate.jsx

@@ -0,0 +1,47 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps } from "../utils"
+import { Rate } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExRate 评分
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExRate",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: Number, default: 2 },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/rate)
+		 */
+		rateProps: { 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", Number(value))
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => <Rate v-model={componentValue.value} clearable={true} {...props.rateProps} onChange={onChange}></Rate>,
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExSelect.jsx

@@ -0,0 +1,151 @@
+import { computed, defineComponent, ref, watch } from "vue"
+import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
+import { Button, Picker } from "vant"
+import { defaultFieldProps, defaultOptionsProps } from "../utils"
+import { useFetch } from "../../hooks"
+import { find, isArray, isFunction, isString } from "lodash-es"
+
+/**
+ * ExSelect 下拉选择
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExSelect",
+	props: {
+		...defaultOptionsProps,
+		...defaultFieldProps,
+
+		modelValue: { type: [Array, String, Number], default: "" },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 * 是否显示清除按钮
+		 */
+		clearable: { type: Boolean, default: false },
+
+		/**
+		 * [默认配置](https://vant-contrib.gitee.io/vant/#/zh-CN/picker)
+		 */
+		pickerProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit, slots, expose }) {
+		const defaultValue = isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+		const componentValue = ref(defaultValue)
+		const options = ref([])
+		let columns = 1 //根据子项的数组数来确定 Picker 的列数，默认为1列
+		const pickerRef = ref()
+
+		watch(
+			() => props.modelValue,
+			() => {
+				componentValue.value = isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+			},
+		)
+
+		const displayText = computed(() => {
+			let value = isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+			return value
+				.map((value, index) => {
+					if (columns === 1) {
+						return find(options.value, { value })?.text
+					} else {
+						return find(options.value[index], { value })?.text
+					}
+				})
+				?.join("/")
+		})
+
+		const fetchData = () =>
+			new Promise((resolve) => {
+				useFetch()
+					.get(props.url)
+					.then((items) => {
+						if (props.afterFetched) {
+							items = props.afterFetched(items)
+						}
+						resolve(items)
+					})
+			})
+
+		const prepareOptions = async (options) => {
+			options = isFunction(options) ? options() : options
+			if (options && options.length) {
+				columns = options.filter((option) => isArray(option)).length || 1
+			} else if (props.url) {
+				options = await fetchData()
+			}
+
+			options = options.map((option) => {
+				if (isArray(option)) {
+					return option.map((op) => {
+						return isString(op) ? { value: op, label: op, text: op } : { text: op.label, ...op }
+					})
+				}
+
+				return isString(option) ? { value: option, label: option, text: option } : { text: option.label, ...option }
+			})
+			return options
+		}
+
+		prepareOptions(props.options).then((opts) => (options.value = opts))
+
+		watch(
+			() => props.options,
+			() => prepareOptions(props.options).then((opts) => (options.value = opts)),
+		)
+
+		// @hack
+		// 由于在 Picker 清除 model value 后再次打开 Picker 在不重新选择新选项的情况下无法选中之前的选项
+		// 所以这里手动重新赋一次值给 model value
+		const onOpenWrapper = () => {
+			if (columns === 1 && !componentValue.value?.[0]) {
+				componentValue.value = [options.value[0].value]
+			}
+		}
+
+		const onConfirm = ({ selectedValues }) => {
+			const value = columns === 1 ? selectedValues[0] : selectedValues
+			emit("change", value)
+			emit("update:modelValue", value)
+			pickerRef.value.close()
+		}
+
+		const onClear = () => {
+			const value = columns === 1 ? null : []
+			emit("change", value)
+			emit("update:modelValue", value)
+			pickerRef.value.close()
+		}
+
+		expose({ displayText })
+
+		return () => (
+			<PickerWrapper ref={pickerRef} closeable={false} onOpen={onOpenWrapper}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => [
+						<Picker
+							v-model={componentValue.value}
+							columns={options.value}
+							onConfirm={onConfirm}
+							onCancel={() => pickerRef.value.close()}
+							{...props.pickerProps}
+						/>,
+						props.clearable ? (
+							<div class={"ex-field-popup__clear-btn"}>
+								<Button block type={"primary"} plain={true} round={true} onClick={onClear}>
+									清除
+								</Button>
+							</div>
+						) : null,
+					],
+				}}
+			</PickerWrapper>
+		)
+	},
+})

package/components/form/ExSlider.jsx

@@ -0,0 +1,53 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps } from "../utils"
+import { Slider } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExSlider 评分
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExSlider",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: [Number, Array], default: 2 },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/slider)
+		 */
+		sliderProps: { 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: () => (
+						<Slider v-model={componentValue.value} clearable={true} {...props.sliderProps} onChange={onChange}>
+							{{
+								button: () => <div class="ex-slider-button">{componentValue.value}</div>,
+							}}
+						</Slider>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExSwitch.jsx

@@ -0,0 +1,49 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps } from "../utils"
+import { Switch } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExSwitch 开关
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExSwitch",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: Boolean, default: false },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/switch)
+		 */
+		switchProps: { 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", Boolean(value))
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<Switch v-model={componentValue.value} {...props.switchProps} theme={"round"} size={"22px"} onChange={onChange}></Switch>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExTime.jsx

@@ -0,0 +1,104 @@
+import { computed, defineComponent, ref, watch } from "vue"
+import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
+import { TimePicker } from "vant"
+import { defaultFieldProps } from "../utils"
+
+/**
+ * ExTime 日期选择
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExDate",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: String, default: "" },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "选择时间" },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/time-picker)
+		 */
+		timeProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots, expose }) {
+		const columnsType = props.timeProps?.columnsType || ["hour", "minute"]
+		const prepareDate = (time) => {
+			const value = []
+
+			if (time) {
+				time = time.split(":")
+			} else {
+				return value
+			}
+
+			columnsType.forEach((column, index) => {
+				value.push(time[index])
+			})
+
+			return value
+		}
+
+		const defaultValue = prepareDate(props.modelValue)
+
+		const componentValue = ref(defaultValue)
+
+		watch(
+			() => props.modelValue,
+			() => {
+				componentValue.value = prepareDate(props.modelValue)
+			},
+		)
+
+		const pickerRef = ref(null)
+
+		const displayText = computed(() => {
+			if (props.modelValue) {
+				let text = ""
+				columnsType.forEach((column, index) => {
+					let times = prepareDate(props.modelValue)
+
+					if (column === "hour") {
+						text += `${times[index]}时`
+					} else if (column === "minute") {
+						text += `${times[index]}分`
+					} else if (column === "second") {
+						text += `${times[index]}秒`
+					}
+				})
+
+				return text
+			}
+
+			return ""
+		})
+
+		expose({ displayText })
+
+		const onConfirm = ({ selectedValues }) => {
+			pickerRef.value.close()
+			emit("update:modelValue", selectedValues.join(":"))
+		}
+
+		return () => (
+			<PickerWrapper ref={pickerRef} closeable={false}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => (
+						<TimePicker
+							v-model={componentValue.value}
+							onConfirm={onConfirm}
+							onCancel={() => pickerRef.value.close()}
+							title={props.title}
+							{...props.timeProps}
+						/>
+					),
+				}}
+			</PickerWrapper>
+		)
+	},
+})