UNPKG

@antdv/pro-field

Version:

原子信息组件,统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。

158 lines (157 loc) 5.92 kB
var __defProp = Object.defineProperty; var __getOwnPropSymbols = Object.getOwnPropertySymbols; var __hasOwnProp = Object.prototype.hasOwnProperty; var __propIsEnum = Object.prototype.propertyIsEnumerable; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __spreadValues = (a, b) => { for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]); if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) { if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]); } return a; }; import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue"; import { useIntl } from "@antdv/pro-provider"; import { anyType, boolType, FieldLabel, oneOf, parseValueToDay, stringType } from "@antdv/pro-utils"; import { DatePicker } from "ant-design-vue"; import dayjs from "dayjs"; import { computed, defineComponent, ref } from "vue"; import { buildProFieldProp, proFieldLightProps } from "../props.mjs"; const fieldRangePickerProps = buildProFieldProp(__spreadValues({ value: anyType(), format: stringType().isRequired, bordered: boolType(), showTime: boolType(), picker: oneOf(["time", "date", "week", "month", "quarter", "year"]) }, proFieldLightProps)); var stdin_default = defineComponent({ name: "FieldRangePicker", props: fieldRangePickerProps, inheritAttrs: false, emits: { "update:value": (val) => true }, setup(props, { emit }) { const intl = useIntl(); const open = ref(false); return () => { var _a; const { text, value, mode, light, label, format, render, picker, renderFormItem, plain, showTime, bordered, fieldProps } = props; const textValue = text != null ? text : value; const [startText, endText] = Array.isArray(textValue) ? textValue : []; const genFormatText = (formatValue) => { var _a2; if (typeof (fieldProps == null ? void 0 : fieldProps.format) === "function") { return (_a2 = fieldProps == null ? void 0 : fieldProps.format) == null ? void 0 : _a2.call(fieldProps, formatValue); } return (fieldProps == null ? void 0 : fieldProps.format) || format || "YYYY-MM-DD"; }; const parsedStartText = startText ? dayjs(startText).format(genFormatText(dayjs(startText))) : ""; const parsedEndText = endText ? dayjs(endText).format(genFormatText(dayjs(endText))) : ""; if (mode === "read") { const dom = _createVNode("div", { "style": { display: "flex", flexWrap: "wrap", gap: `8px`, alignItems: "center" } }, [_createVNode("div", null, [parsedStartText || "-"]), _createVNode("div", null, [parsedEndText || "-"])]); if (render) { return render(textValue, computed(() => __spreadValues({ mode, value }, fieldProps)), dom); } return dom; } if (mode === "edit" || mode === "update") { const dayValue = parseValueToDay(Array.isArray(value) ? value : [value]); let dom; if (light) { dom = _createVNode(FieldLabel, { "label": label, "onClick": () => { var _a2; (_a2 = fieldProps == null ? void 0 : fieldProps.onOpenChange) == null ? void 0 : _a2.call(fieldProps, true); open.value = true; }, "style": dayValue ? { paddingInlineEnd: 0 } : void 0, "disabled": fieldProps.disabled, "value": dayValue || open.value ? _createVNode(DatePicker.RangePicker, _mergeProps({ "picker": picker, "showTime": showTime, "format": format, "bordered": false }, fieldProps, { "placeholder": (_a = fieldProps.placeholder) != null ? _a : [intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9"), intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9")], "onClear": () => { var _a2; open.value = false; (_a2 = fieldProps == null ? void 0 : fieldProps.onClear) == null ? void 0 : _a2.call(fieldProps); }, "value": dayValue, "onUpdate:value": (val) => { emit("update:value", val); }, "onOpenChange": (isOpen) => { var _a2; if (dayValue) open.value = isOpen; (_a2 = fieldProps == null ? void 0 : fieldProps.onOpenChange) == null ? void 0 : _a2.call(fieldProps, isOpen); } }), null) : null, "allowClear": false, "bordered": bordered, "downIcon": dayValue || open.value ? false : void 0 }, null); } else { dom = _createVNode(DatePicker.RangePicker, _mergeProps({ "format": format, "showTime": showTime, "placeholder": [intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9"), intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9")], "bordered": plain === void 0 ? true : !plain }, fieldProps, { "value": dayValue, "onUpdate:value": (val) => { emit("update:value", val); } }), null); } if (renderFormItem) { return renderFormItem(textValue, computed(() => __spreadValues({ mode, value }, fieldProps)), dom); } return dom; } return null; }; } }); export { stdin_default as default, fieldRangePickerProps };