jobsys-explore 4.6.21 → 4.7.0

package/components/form/ExDate.jsx

@@ -1,143 +1,143 @@
-import { computed, defineComponent, ref, watch } from "vue"
-import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
-import { DatePicker } from "vant"
-import { padZero } from "vant/es/utils"
-import { defaultFieldProps } from "../utils"
-import { isUndefined } from "lodash-es"
-import { isDayjs } from "dayjs"
-
-/**
- * ExDate 日期选择
- * @version 1.0.0
- */
-export default defineComponent({
-	name: "ExDate",
-	props: {
-		...defaultFieldProps,
-
-		modelValue: { type: [Date, String, Object], default: () => null },
-
-		/**
-		 * 标题
-		 */
-		title: { type: String, default: "选择日期" },
-	},
-	emits: ["update:modelValue"],
-	setup(props, { emit, slots, expose }) {
-		const columnsType = props.defaultProps?.columnsType || ["year", "month", "day"]
-
-		const getYear = (value) => {
-			return isDayjs(value) ? value.year() : value.getFullYear()
-		}
-		const getMonth = (value) => {
-			return isDayjs(value) ? value.month() + 1 : value.getMonth() + 1
-		}
-		const getDate = (value) => {
-			return isDayjs(value) ? value.date() : value.getDate()
-		}
-
-		const _setValueByColumns = (columnsType, value, date) => {
-			columnsType.forEach((column) => {
-				if (column === "year") {
-					value.push(getYear(date))
-				} else if (column === "month") {
-					value.push(getMonth(date))
-				} else if (column === "day") {
-					value.push(getDate(date))
-				}
-			})
-			return value
-		}
-		const prepareDate = (date) => {
-			const value = []
-
-			if (!date) {
-				return value
-			}
-
-			return _setValueByColumns(columnsType, value, date)
-		}
-
-		let defaultValue = prepareDate(props.modelValue)
-
-		if (!defaultValue.length) {
-			const now = new Date()
-			defaultValue = _setValueByColumns(columnsType, defaultValue, now)
-		}
-
-		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) => {
-					if (column === "year") {
-						text += getYear(props.modelValue)
-					} else if (column === "month") {
-						if (text) {
-							text += "/"
-						}
-						text += padZero(getMonth(props.modelValue), 2)
-					} else if (column === "day") {
-						if (text) {
-							text += "/"
-						}
-						text += padZero(getDate(props.modelValue), 2)
-					}
-				})
-				return text
-			}
-
-			return ""
-		})
-
-		expose({ displayText })
-
-		const onConfirm = ({ selectedValues }) => {
-			pickerRef.value.close()
-
-			const now = new Date()
-			let date = {}
-			columnsType.forEach((column, index) => {
-				if (column === "year") {
-					date.year = selectedValues[index]
-				} else if (column === "month") {
-					date.month = selectedValues[index] - 1
-				} else if (column === "day") {
-					date.date = selectedValues[index]
-				}
-			})
-
-			emit(
-				"update:modelValue",
-				new Date(date.year || now.getFullYear(), isUndefined(date.month) ? now.getMonth() : date.month, date.date || now.getDate()),
-			)
-		}
-
-		return () => (
-			<PickerWrapper ref={pickerRef} closeable={false} disabled={props.disabled || props.readonly}>
-				{{
-					...pickerSlots(slots, props),
-					default: () => (
-						<DatePicker
-							v-model={componentValue.value}
-							onConfirm={onConfirm}
-							onCancel={() => pickerRef.value.close()}
-							title={props.title}
-							{...props.defaultProps}
-						/>
-					),
-				}}
-			</PickerWrapper>
-		)
-	},
-})
+import { computed, defineComponent, ref, watch } from "vue"
+import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
+import { DatePicker } from "vant"
+import { padZero } from "vant/es/utils"
+import { defaultFieldProps } from "../utils"
+import { isUndefined } from "lodash-es"
+import { isDayjs } from "dayjs"
+
+/**
+ * ExDate 日期选择
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExDate",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: [Date, String, Object], default: () => null },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "选择日期" },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots, expose }) {
+		const columnsType = props.defaultProps?.columnsType || ["year", "month", "day"]
+
+		const getYear = (value) => {
+			return isDayjs(value) ? value.year() : value.getFullYear()
+		}
+		const getMonth = (value) => {
+			return isDayjs(value) ? value.month() + 1 : value.getMonth() + 1
+		}
+		const getDate = (value) => {
+			return isDayjs(value) ? value.date() : value.getDate()
+		}
+
+		const _setValueByColumns = (columnsType, value, date) => {
+			columnsType.forEach((column) => {
+				if (column === "year") {
+					value.push(getYear(date))
+				} else if (column === "month") {
+					value.push(getMonth(date))
+				} else if (column === "day") {
+					value.push(getDate(date))
+				}
+			})
+			return value
+		}
+		const prepareDate = (date) => {
+			const value = []
+
+			if (!date) {
+				return value
+			}
+
+			return _setValueByColumns(columnsType, value, date)
+		}
+
+		let defaultValue = prepareDate(props.modelValue)
+
+		if (!defaultValue.length) {
+			const now = new Date()
+			defaultValue = _setValueByColumns(columnsType, defaultValue, now)
+		}
+
+		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) => {
+					if (column === "year") {
+						text += getYear(props.modelValue)
+					} else if (column === "month") {
+						if (text) {
+							text += "/"
+						}
+						text += padZero(getMonth(props.modelValue), 2)
+					} else if (column === "day") {
+						if (text) {
+							text += "/"
+						}
+						text += padZero(getDate(props.modelValue), 2)
+					}
+				})
+				return text
+			}
+
+			return ""
+		})
+
+		expose({ displayText })
+
+		const onConfirm = ({ selectedValues }) => {
+			pickerRef.value.close()
+
+			const now = new Date()
+			let date = {}
+			columnsType.forEach((column, index) => {
+				if (column === "year") {
+					date.year = selectedValues[index]
+				} else if (column === "month") {
+					date.month = selectedValues[index] - 1
+				} else if (column === "day") {
+					date.date = selectedValues[index]
+				}
+			})
+
+			emit(
+				"update:modelValue",
+				new Date(date.year || now.getFullYear(), isUndefined(date.month) ? now.getMonth() : date.month, date.date || now.getDate()),
+			)
+		}
+
+		return () => (
+			<PickerWrapper ref={pickerRef} closeable={false} disabled={props.disabled || props.readonly}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => (
+						<DatePicker
+							v-model={componentValue.value}
+							onConfirm={onConfirm}
+							onCancel={() => pickerRef.value.close()}
+							title={props.title}
+							{...props.defaultProps}
+						/>
+					),
+				}}
+			</PickerWrapper>
+		)
+	},
+})

package/components/form/ExDatetime.jsx

@@ -1,166 +1,166 @@
-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"
-import { cloneDeep } from "lodash-es"
-
-/**
- * ExDatetime 日期时间选择器
- * @version 1.0.0
- */
-export default defineComponent({
-	name: "ExDatetime",
-	props: {
-		...defaultFieldProps,
-
-		modelValue: { type: Date, default: () => null },
-	},
-	emits: ["update:modelValue"],
-	setup(props, { slots, emit, expose }) {
-		const dateValue = ref(null)
-		const timeValue = ref(null)
-		const displayText = ref(null)
-		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 timeModel = computed(() => {
-			if (timeValue.value) {
-				const [hours, minutes] = timeValue.value.split(":")
-				return [hours, minutes]
-			}
-			return []
-		})
-
-		const defaultDate = ref(props.modelValue || new Date())
-
-		const setDisplayText = () => {
-			displayText.value = dateValue.value && timeValue.value ? `${dateText.value} ${timeText.value}` : ""
-		}
-		/**
-		 *
-		 * @param {Date|null} date
-		 */
-		const prepareDate = (date) => {
-			if (date) {
-				dateValue.value = cloneDeep(date)
-				timeValue.value = `${padZero(date.getHours(), 2)}:${padZero(date.getMinutes(), 2)}`
-			}
-			setDisplayText()
-		}
-
-		prepareDate(props.modelValue)
-
-		watch(
-			() => props.modelValue,
-			() => prepareDate(props.modelValue),
-		)
-
-		expose({ displayText })
-
-		const onSelectDate = (date) => {
-			dateValue.value = date
-		}
-
-		const onTimeChange = ({ selectedValues }) => {
-			timeValue.value = selectedValues.join(":")
-		}
-
-		const onConfirm = () => {
-			if (!dateValue.value) {
-				dateValue.value = new Date()
-			}
-			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()
-			setDisplayText()
-
-			emit("update:modelValue", new Date(dateString))
-		}
-
-		return () => {
-			return (
-				<PickerWrapper ref={pickerRef} inset={true} disabled={props.disabled || props.readonly}>
-					{{
-						...pickerSlots(slots, props),
-						default: () => [
-							<Collapse accordion={true} v-model={activeName.value} border={false} class={"ex-datetime_collapse"}>
-								{{
-									default: () => [
-										<CollapseItem name={"date"} icon={"calendar-o"} value={dateText.value} isLink={false}>
-											{{
-												title: () => <span style={{ fontWeight: "bold" }}>日期</span>,
-												default: () => (
-													<div style={{ height: "300px" }}>
-														<Calendar
-															minDate={minDate}
-															maxDate={maxDate}
-															showSubtitle={false}
-															showConfirm={false}
-															defaultDate={defaultDate.value}
-															poppable={false}
-															showTitle={false}
-															lazyRender={true}
-															rowHeight={36}
-															onSelect={onSelectDate}
-															{...props.defaultProps.calendarProps}
-														></Calendar>
-													</div>
-												),
-											}}
-										</CollapseItem>,
-										<CollapseItem name={"time"} icon={"clock-o"} isLink={false} value={timeText.value}>
-											{{
-												title: () => <span style={{ fontWeight: "bold" }}>时间</span>,
-												default: () => (
-													<div>
-														<TimePicker
-															modelValue={timeModel.value}
-															showToolbar={false}
-															onChange={onTimeChange}
-															{...props.defaultProps.timeProps}
-														></TimePicker>
-													</div>
-												),
-											}}
-										</CollapseItem>,
-									],
-								}}
-							</Collapse>,
-							<ExButton type={"primary"} style={{ margin: "20px 0" }} onClick={onConfirm}>
-								确定
-							</ExButton>,
-						],
-					}}
-				</PickerWrapper>
-			)
-		}
-	},
-})
+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"
+import { cloneDeep } from "lodash-es"
+
+/**
+ * ExDatetime 日期时间选择器
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExDatetime",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: Date, default: () => null },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { slots, emit, expose }) {
+		const dateValue = ref(null)
+		const timeValue = ref(null)
+		const displayText = ref(null)
+		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 timeModel = computed(() => {
+			if (timeValue.value) {
+				const [hours, minutes] = timeValue.value.split(":")
+				return [hours, minutes]
+			}
+			return []
+		})
+
+		const defaultDate = ref(props.modelValue || new Date())
+
+		const setDisplayText = () => {
+			displayText.value = dateValue.value && timeValue.value ? `${dateText.value} ${timeText.value}` : ""
+		}
+		/**
+		 *
+		 * @param {Date|null} date
+		 */
+		const prepareDate = (date) => {
+			if (date) {
+				dateValue.value = cloneDeep(date)
+				timeValue.value = `${padZero(date.getHours(), 2)}:${padZero(date.getMinutes(), 2)}`
+			}
+			setDisplayText()
+		}
+
+		prepareDate(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => prepareDate(props.modelValue),
+		)
+
+		expose({ displayText })
+
+		const onSelectDate = (date) => {
+			dateValue.value = date
+		}
+
+		const onTimeChange = ({ selectedValues }) => {
+			timeValue.value = selectedValues.join(":")
+		}
+
+		const onConfirm = () => {
+			if (!dateValue.value) {
+				dateValue.value = new Date()
+			}
+			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()
+			setDisplayText()
+
+			emit("update:modelValue", new Date(dateString))
+		}
+
+		return () => {
+			return (
+				<PickerWrapper ref={pickerRef} inset={true} disabled={props.disabled || props.readonly}>
+					{{
+						...pickerSlots(slots, props),
+						default: () => [
+							<Collapse accordion={true} v-model={activeName.value} border={false} class={"ex-datetime_collapse"}>
+								{{
+									default: () => [
+										<CollapseItem name={"date"} icon={"calendar-o"} value={dateText.value} isLink={false}>
+											{{
+												title: () => <span style={{ fontWeight: "bold" }}>日期</span>,
+												default: () => (
+													<div style={{ height: "300px" }}>
+														<Calendar
+															minDate={minDate}
+															maxDate={maxDate}
+															showSubtitle={false}
+															showConfirm={false}
+															defaultDate={defaultDate.value}
+															poppable={false}
+															showTitle={false}
+															lazyRender={true}
+															rowHeight={36}
+															onSelect={onSelectDate}
+															{...props.defaultProps.calendarProps}
+														></Calendar>
+													</div>
+												),
+											}}
+										</CollapseItem>,
+										<CollapseItem name={"time"} icon={"clock-o"} isLink={false} value={timeText.value}>
+											{{
+												title: () => <span style={{ fontWeight: "bold" }}>时间</span>,
+												default: () => (
+													<div>
+														<TimePicker
+															modelValue={timeModel.value}
+															showToolbar={false}
+															onChange={onTimeChange}
+															{...props.defaultProps.timeProps}
+														></TimePicker>
+													</div>
+												),
+											}}
+										</CollapseItem>,
+									],
+								}}
+							</Collapse>,
+							<ExButton type={"primary"} style={{ margin: "20px 0" }} onClick={onConfirm}>
+								确定
+							</ExButton>,
+						],
+					}}
+				</PickerWrapper>
+			)
+		}
+	},
+})