@antdv/pro-field
Version:
原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。
254 lines (253 loc) • 9.24 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
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;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import { useIntl } from "@antdv/pro-provider";
import { classNames, FieldLabel, objectToMap, objectType, proFieldParsingText, stringType, useMountMergeState, useState } from "@antdv/pro-utils";
import { Spin, TreeSelect } from "ant-design-vue";
import { useConfigContextInject } from "ant-design-vue/lib/config-provider/context";
import { computed, defineComponent, ref } from "vue";
import { buildProFieldProp } from "../props.mjs";
import { fieldSelectProps, useFieldFetchData } from "../Select/index.mjs";
const fieldTreeSelectProps = buildProFieldProp(__spreadValues({
options: objectType(),
radioType: stringType()
}, fieldSelectProps));
var stdin_default = defineComponent({
name: "FieldTreeSelect",
props: fieldTreeSelectProps,
inheritAttrs: false,
emits: {
"update:value": (val) => true
},
setup(props, {
expose,
emit
}) {
const {
getPrefixCls
} = useConfigContextInject();
const layoutClassName = getPrefixCls("pro-field-tree-select");
const treeSelectRef = ref(null);
const [open, setOpen] = useState(false);
const intl = useIntl();
const [loading, options, fetchData] = useFieldFetchData(__spreadProps(__spreadValues({}, props), {
defaultKeyWords: props.fieldProps.searchValue
}));
const [searchValue, setSearchValue] = useMountMergeState(void 0, {
onChange: props.fieldProps.onSearch,
value: ref(props.fieldProps.searchValue)
});
const optionsValueEnum = computed(() => {
var _a;
if (props.mode !== "read") return;
const {
value: valuePropsName = "value",
label: labelPropsName = "label",
children: childrenPropsName = "children"
} = ((_a = props.fieldProps) == null ? void 0 : _a.fieldNames) || {};
const valuesMap = /* @__PURE__ */ new Map();
const traverseOptions = (_options) => {
if (!(_options == null ? void 0 : _options.length)) {
return valuesMap;
}
const length = _options.length;
let i = 0;
while (i < length) {
const cur = _options[i++];
valuesMap.set(cur[valuePropsName], cur[labelPropsName]);
traverseOptions(cur[childrenPropsName]);
}
return valuesMap;
};
return traverseOptions(options.value);
});
expose(__spreadProps(__spreadValues({}, treeSelectRef.value || {}), {
fetchData: (keyWord) => fetchData(keyWord)
}));
return () => {
var _c, _d, _e;
const _a = props, {
radioType,
value,
renderFormItem,
mode,
light,
label,
render,
text
} = _a, rest = __objRest(_a, [
"radioType",
"value",
"renderFormItem",
"mode",
"light",
"label",
"render",
"text"
]);
const textValue = text != null ? text : value;
const _b = rest.fieldProps, {
onSearch,
onClear,
onChange: propsOnChange,
onBlur,
showSearch,
autoClearSearchValue,
treeData,
fetchDataOnSearch,
searchValue: propsSearchValue
} = _b, fieldProps = __objRest(_b, [
"onSearch",
"onClear",
"onChange",
"onBlur",
"showSearch",
"autoClearSearchValue",
"treeData",
"fetchDataOnSearch",
"searchValue"
]);
const onChange = (_value, optionList, extra) => {
if (showSearch && autoClearSearchValue) {
fetchData(void 0);
setSearchValue(void 0);
}
propsOnChange == null ? void 0 : propsOnChange(_value, optionList, extra);
};
if (mode === "read") {
const dom = _createVNode(_Fragment, null, [proFieldParsingText(textValue, objectToMap(rest.valueEnum || optionsValueEnum.value))]);
if (render) {
return (_c = render(textValue, computed(() => __spreadValues({
mode
}, fieldProps)), dom)) != null ? _c : null;
}
return dom;
}
if (mode === "edit") {
const valuesLength = Array.isArray(value) ? value == null ? void 0 : value.length : 0;
let dom = _createVNode(Spin, {
"spinning": loading.value
}, {
default: () => [_createVNode(TreeSelect, _mergeProps({
"open": open.value,
"onDropdownVisibleChange": (isOpen) => {
var _a2;
(_a2 = fieldProps == null ? void 0 : fieldProps.onDropdownVisibleChange) == null ? void 0 : _a2.call(fieldProps, isOpen);
setOpen(isOpen);
},
"ref": treeSelectRef,
"dropdownMatchSelectWidth": !light,
"placeholder": intl.getMessage("tableForm.selectPlaceholder", "\u8BF7\u9009\u62E9"),
"tagRender": light ? (item) => {
if (valuesLength < 2) return _createVNode(_Fragment, null, [item.label]);
const itemIndex = Array.isArray(textValue) && (textValue == null ? void 0 : textValue.findIndex((v) => v === item.value || v.value === item.value));
return _createVNode(_Fragment, null, [item.label, " ", itemIndex && itemIndex < valuesLength - 1 ? "," : ""]);
} : void 0,
"bordered": !light
}, fieldProps, {
"value": value,
"onUpdate:value": (val) => {
emit("update:value", val);
},
"treeData": options.value,
"showSearch": showSearch,
"style": __spreadValues({
minWidth: `60px`
}, fieldProps.style),
"allowClear": fieldProps.allowClear !== false,
"searchValue": searchValue.value,
"autoClearSearchValue": autoClearSearchValue,
"onClear": () => {
onClear == null ? void 0 : onClear();
fetchData(void 0);
if (showSearch) {
setSearchValue(void 0);
}
},
"onChange": onChange,
"onSearch": (v) => {
if (fetchDataOnSearch && (rest == null ? void 0 : rest.request)) {
fetchData(v);
}
setSearchValue(v);
},
"onBlur": (event) => {
setSearchValue(void 0);
fetchData(void 0);
onBlur == null ? void 0 : onBlur(event);
},
"class": classNames(fieldProps == null ? void 0 : fieldProps.class, layoutClassName)
}), null)]
});
if (renderFormItem) {
dom = (_d = renderFormItem(textValue, computed(() => __spreadProps(__spreadValues({
mode,
value
}, fieldProps), {
options: options.value,
loading: loading.value
})), dom)) != null ? _d : null;
}
if (light) {
const {
disabled,
placeholder
} = fieldProps;
const notEmpty = !!fieldProps.value && Array.isArray(fieldProps.value) && ((_e = fieldProps.value) == null ? void 0 : _e.length) !== 0;
return _createVNode(FieldLabel, {
"label": label,
"disabled": disabled,
"placeholder": placeholder,
"onClick": () => {
var _a2;
setOpen(true);
(_a2 = fieldProps == null ? void 0 : fieldProps.onDropdownVisibleChange) == null ? void 0 : _a2.call(fieldProps, true);
},
"bordered": rest.bordered,
"value": notEmpty || open.value ? dom : null,
"style": notEmpty ? {
paddingInlineEnd: 0
} : void 0,
"allowClear": false,
"downIcon": false
}, null);
}
return dom;
}
return null;
};
}
});
export {
stdin_default as default,
fieldTreeSelectProps
};