@fecp/mobile
Version:
179 lines (178 loc) • 7.44 kB
JavaScript
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
import { MobileField } from "../field/index.mjs";
import hooks from "../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.mjs";
import { parseTimeFormatter } from "../../../utils/dateUtil.mjs";
import { TimePicker } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/time-picker/index.mjs";
import { Popup } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.mjs";
import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
const _sfc_main = {
__name: "FieldTimePicker",
props: {
modelValue: {
type: String,
default: ""
},
// textFormat: {
// type: String,
// default: "HH:mm:ss",
// },
// valueFormat: {
// type: String,
// default: "HH:mm:ss",
// },
timeTextFormat: {
//0:HH:mm:ss;1: HH时mm分ss秒
type: String,
default: "0"
},
timeColumnsType: {
type: String,
default: "hour,minute"
// default: ["hour", "minute", "second"],
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
"is-link": false
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const fieldTextValue = ref("");
const showPicker = ref(false);
const emit = __emit;
let textFormat = parseTimeFormatter(
props.timeTextFormat,
props.timeColumnsType
);
let valueFormat = parseTimeFormatter("0", props.timeColumnsType);
const pickerValue = computed(() => {
let date;
if (!props.modelValue) {
date = hooks();
} else {
date = hooks(props.modelValue, props.valueFormat);
}
const hours = date.hours();
const minutes = date.minutes();
const seconds = date.seconds();
let value = [];
const columnsTypeArr = props.timeColumnsType.split(",");
if (columnsTypeArr.length == 1) {
value = [hours];
} else if (columnsTypeArr.length == 2) {
value = [hours, minutes];
} else if (columnsTypeArr.length == 3) {
value = [hours, minutes, seconds];
}
return value;
});
const columnsType = computed(() => {
return props.timeColumnsType.split(",");
});
const formatter = (type, option) => {
console.log(type);
if (type === "hour") {
option.text += "时";
} else if (type === "minute") {
option.text += "分";
} else if (type === "second") {
option.text += "秒";
}
return option;
};
watch(
() => props.modelValue,
(value) => {
if (!value) {
fieldTextValue.value = "";
return;
}
fieldTextValue.value = hooks(value, valueFormat).format(textFormat);
},
{ immediate: true }
);
const onConfirm = ({ selectedValues, selectedOptions, selectedIndexes }) => {
const val = hooks(
`${selectedValues[0]}${selectedValues[1]}${selectedValues[2]}`,
"HH:mm:ss"
).format(valueFormat);
emit("update:modelValue", val);
showPicker.value = false;
};
return (_ctx, _cache) => {
const _component_van_icon = Icon;
const _component_van_time_picker = TimePicker;
const _component_van_popup = Popup;
return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
modelValue: unref(fieldTextValue),
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
isLink: __props.readonly ? false : true,
readonly: "",
disabled: __props.disabled,
onOpenPicker: _cache[5] || (_cache[5] = () => {
if (!__props.readonly) {
showPicker.value = true;
}
})
}), createSlots({
default: withCtx(() => [
createVNode(_component_van_popup, {
show: unref(showPicker),
"onUpdate:show": _cache[3] || (_cache[3] = ($event) => isRef(showPicker) ? showPicker.value = $event : null),
"destroy-on-close": "",
position: "bottom",
teleport: "body"
}, {
default: withCtx(() => [
createVNode(_component_van_time_picker, mergeProps(_ctx.$attrs, {
modelValue: unref(pickerValue),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(pickerValue) ? pickerValue.value = $event : null),
readonly: false,
columnsType: unref(columnsType),
formatter,
onConfirm,
onCancel: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
}), null, 16, ["modelValue", "columnsType"])
]),
_: 1
}, 8, ["show"])
]),
_: 2
}, [
!__props.readonly && !__props.disabled && unref(fieldTextValue) ? {
name: "right-icon",
fn: withCtx(() => [
createVNode(_component_van_icon, {
name: "clear",
class: "custom-close-icon",
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("update:modelValue", null), ["stop"]))
})
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "isLink", "disabled"]);
};
}
};
export {
_sfc_main as default
};