@gct-paas/core-web 0.1.5-dev.0 → 0.1.5-dev.10

package/es/components/field-cascader/src/FieldCascader.vue.d.ts

@@ -0,0 +1,87 @@
+import { PropType } from 'vue';
+import { comPropsType } from './hooks';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    fieldMetaList: {
+        type: PropType<comPropsType["fieldMetaList"]>;
+        default: () => comPropsType["fieldMetaList"];
+    };
+    filterFieldByFunction: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    FieldClick: (...args: any[]) => void;
+    labelChange: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    fieldMetaList: {
+        type: PropType<comPropsType["fieldMetaList"]>;
+        default: () => comPropsType["fieldMetaList"];
+    };
+    filterFieldByFunction: {
+        type: FunctionConstructor;
+        default: () => boolean;
+    };
+    maxLevel: {
+        type: NumberConstructor;
+        default: number;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueSeparator: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandToLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onFieldClick?: ((...args: any[]) => any) | undefined;
+    onLabelChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    fieldMetaList: (import('@gct-paas/api/apaas').FieldMetaDTO & {
+        __bindFields: string[];
+    })[];
+    filterFieldByFunction: Function;
+    maxLevel: number;
+    value: string;
+    allowClear: boolean;
+    valueSeparator: string;
+    searchable: boolean;
+    expandToLeft: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/field-cascader/src/FieldCascader.vue.mjs

@@ -0,0 +1,6 @@
+import FieldCascader_vue_vue_type_script_setup_true_lang_default from "./FieldCascader.vue_vue_type_script_setup_true_lang.mjs";
+import './FieldCascader.vue_vue_type_style_index_0_lang.css';/* empty css                                                    */
+//#region src/components/field-cascader/src/FieldCascader.vue
+var FieldCascader_default = FieldCascader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FieldCascader_default as default };

package/es/components/field-cascader/src/FieldCascader.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,115 @@
+import { useFieldCascader } from "./hooks.mjs";
+import { createBlock, defineComponent, h, openBlock, ref, resolveComponent, unref } from "vue";
+//#region src/components/field-cascader/src/FieldCascader.vue?vue&type=script&setup=true&lang.ts
+var FieldCascader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "FieldCascader",
+	props: {
+		fieldMetaList: {
+			type: Object,
+			default: () => {
+				return [];
+			}
+		},
+		filterFieldByFunction: {
+			type: Function,
+			default: () => true
+		},
+		maxLevel: {
+			type: Number,
+			default: 3
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		valueSeparator: {
+			type: String,
+			default: "$"
+		},
+		searchable: {
+			type: Boolean,
+			default: true
+		},
+		expandToLeft: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["FieldClick", "labelChange"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const { visibleValue, getChildrenOptionsByKey, filterOptions, fieldValues, fieldMapByKey } = useFieldCascader(props, { onFieldClick });
+		const lastSelectedIds = ref();
+		const loadData = async (selectedOptions) => {
+			if (selectedOptions.map((i) => i.value).join(",") === lastSelectedIds.value) return;
+			lastSelectedIds.value = selectedOptions.slice(0, -1).map((item) => item.value).join(",");
+			const targetOption = selectedOptions.at(-1);
+			if (!targetOption.isExpandField) return;
+			await getChildrenOptionsByKey(targetOption.__props, selectedOptions.length + 1);
+		};
+		function dropdownVisibleChange(v) {
+			visibleValue.value = v;
+		}
+		function onFieldClick(row) {
+			const value = row?.__bindFields?.join(props.valueSeparator);
+			emit("FieldClick", value, row);
+			visibleValue.value = false;
+		}
+		function displayRender({ labels, selectedOptions }) {
+			const levelCount = selectedOptions.length;
+			let title = selectedOptions.filter((i) => i).map((i, index) => {
+				return index === levelCount - 1 ? i.title : i.titleWithRelation;
+			}).join(".");
+			if (!title && labels.length > 0)
+ /**过滤的时候会导致这边查不到 */
+			title = labels.map((k) => fieldMapByKey[k]?.name || "").join(".");
+			emit("labelChange", title);
+			return h("div", {
+				class: "ell",
+				title,
+				onClick: (e) => {
+					e.stopPropagation();
+					e.preventDefault();
+				}
+			}, title);
+		}
+		function change(v) {
+			if (v === void 0)
+ /**清空逻辑 */
+			emit("FieldClick", v, {});
+		}
+		return (_ctx, _cache) => {
+			const _component_a_cascader = resolveComponent("a-cascader");
+			return openBlock(), createBlock(_component_a_cascader, {
+				placeholder: "请选择",
+				options: unref(filterOptions),
+				"load-data": loadData,
+				"expand-trigger": "hover",
+				class: "gct-field-cascader-selector",
+				"dropdown-class-name": `gct-field-cascader ${props.expandToLeft ? "cascader-expand-to-left" : ""}`,
+				open: unref(visibleValue),
+				"allow-clear": __props.allowClear,
+				"display-render": displayRender,
+				value: unref(fieldValues),
+				placement: props.expandToLeft ? "topRight" : void 0,
+				onMousedown: _cache[0] || (_cache[0] = (e) => e.preventDefault()),
+				onDropdownVisibleChange: dropdownVisibleChange,
+				onChange: change
+			}, null, 8, [
+				"options",
+				"dropdown-class-name",
+				"open",
+				"allow-clear",
+				"value",
+				"placement"
+			]);
+		};
+	}
+});
+//#endregion
+export { FieldCascader_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-cascader/src/FieldCascader.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,69 @@
+.gct-field-cascader {
+  padding: 0;
+}
+.gct-field-cascader .ant-cascader-menu {
+  min-width: 180px;
+  max-width: 280px;
+  height: 280px;
+  margin: 0;
+  padding: 0;
+}
+.gct-field-cascader .ant-cascader-menu-item-disabled {
+  color: #8b8b8b;
+  cursor: default;
+}
+.gct-field-cascader .ant-cascader-menu-item {
+  padding: 0;
+  color: #1a1d23;
+}
+.gct-field-cascader .ant-cascader-menu-item[aria-checked='true'] .gct-option-label {
+  background-color: color-mix(in srgb, var(--ant-primary-color) 8%, transparent);
+  color: var(--ant-primary-color);
+}
+.gct-field-cascader .ant-cascader-menu-item:hover {
+  background-color: #fff;
+  font-weight: normal;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-expand-icon {
+  display: none;
+}
+.gct-field-cascader .ant-cascader-menu-item .ant-cascader-menu-item-loading-icon {
+  display: none;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-label {
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 6px;
+  border-radius: 4px;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-label .iconfont {
+  color: #5a5f6b;
+  font-size: 14px;
+}
+.gct-field-cascader .ant-cascader-menu-item .gct-option-title {
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 6px;
+  color: #8b8b8b;
+}
+.gct-field-cascader .ant-cascader-menu-item-active {
+  background-color: #fff;
+  font-weight: normal;
+}
+.gct-field-cascader .ant-cascader-menu-item-active .gct-option-label {
+  background-color: #f2f5f8;
+}
+.gct-field-cascader .ant-cascader-menu-item-active .gct-option-label .iconfont {
+  color: var(--ant-primary-color);
+}
+.cascader-expand-to-left .ant-cascader-menus {
+  flex-direction: row-reverse;
+}
+.cascader-expand-to-left .ant-cascader-menus .ant-cascader-menu {
+  width: 230px;
+}

package/es/components/field-cascader/src/SearchInput.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    visibleValue: {
+        value: boolean;
+    };
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/components/field-cascader/src/SearchInput.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import SearchInput_vue_vue_type_script_setup_true_lang_default from "./SearchInput.vue_vue_type_script_setup_true_lang.mjs";
+import './SearchInput.vue_vue_type_style_index_0_scoped_512c4b38_lang.css';/* empty css                                                                  */
+//#region src/components/field-cascader/src/SearchInput.vue
+var SearchInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-512c4b38"]]);
+//#endregion
+export { SearchInput_default as default };

package/es/components/field-cascader/src/SearchInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,38 @@
+import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, resolveComponent, watch, withCtx, withModifiers } from "vue";
+//#region src/components/field-cascader/src/SearchInput.vue?vue&type=script&setup=true&lang.ts
+var SearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchInput",
+	props: { visibleValue: {} },
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const value = ref();
+		function changeValue() {
+			emit("change", value.value);
+		}
+		watch(() => props.visibleValue.value, (val) => {
+			if (!val) {
+				value.value = void 0;
+				emit("change", value.value);
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			return openBlock(), createElementBlock("div", {
+				class: "gct-field-cascader-search",
+				onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+			}, [createVNode(_component_a_input, {
+				value: value.value,
+				"onUpdate:value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+				placeholder: "搜索字段",
+				onChange: changeValue
+			}, {
+				prefix: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "iconfont icon-pad_search text-[#8B8B8B]" }, null, -1)])]),
+				_: 1
+			}, 8, ["value"])], 32);
+		};
+	}
+});
+//#endregion
+export { SearchInput_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-cascader/src/SearchInput.vue_vue_type_style_index_0_scoped_512c4b38_lang.css

@@ -0,0 +1,9 @@
+[data-v-512c4b38] .ant-input-affix-wrapper {
+  padding: 0 11px;
+  border: none;
+}
+.gct-field-cascader-search[data-v-512c4b38] {
+  box-sizing: border-box;
+  padding: 8px 0;
+  border-bottom: 1px solid #f2f5f8;
+}

package/es/components/field-cascader/src/hooks.d.ts

@@ -0,0 +1,129 @@
+import { FieldMetaDTO } from '@gct-paas/api/apaas';
+export declare function useFieldCascader(props: comPropsType, { onFieldClick }: IObject): {
+    visibleValue: import('vue').Ref<boolean, boolean>;
+    filterOptions: import('vue').ComputedRef<{
+        children: any;
+        value: string;
+        label?: any;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        __props: {
+            backendOnly?: number | undefined;
+            bindFieldKey?: string | undefined;
+            bindInfo?: string | undefined;
+            createTime?: string | undefined;
+            createType?: string | undefined;
+            createUserId?: string | undefined;
+            createUserName?: string | undefined;
+            defaultValue?: {
+                name?: string | undefined;
+                type?: string | undefined;
+                value?: IObject | undefined;
+            } | undefined;
+            defaultValueTips?: string[] | undefined;
+            description?: string | undefined;
+            draft?: number | undefined;
+            expression?: string | undefined;
+            fieldCategory?: string | undefined;
+            functionName?: string | undefined;
+            i18nConfig?: string | undefined;
+            id?: string | undefined;
+            initCommitId?: string | undefined;
+            key?: string | undefined;
+            mappingType?: string | undefined;
+            modelCategory?: string | undefined;
+            modelKey?: string | undefined;
+            modelMeta?: {
+                constraint?: {
+                    convertFromFieldUniqueConstraint?: boolean | undefined;
+                    fieldKeys?: string[] | undefined;
+                    fieldNames?: string[] | undefined;
+                    type?: string | undefined;
+                }[] | undefined;
+                createTime?: string | undefined;
+                createUserId?: string | undefined;
+                createUserName?: string | undefined;
+                deletePolicy?: number | undefined;
+                deleted?: number | undefined;
+                description?: string | undefined;
+                displayField?: string | undefined;
+                hidden?: boolean | undefined;
+                id?: string | undefined;
+                initCommitId?: string | undefined;
+                key?: string | undefined;
+                maxSubLevel?: number | undefined;
+                modifyTime?: string | undefined;
+                modifyUserId?: string | undefined;
+                modifyUserName?: string | undefined;
+                name?: string | undefined;
+                order?: number | undefined;
+                permissionEnabled?: number | undefined;
+                recycled?: number | undefined;
+                refModelKey?: string | undefined;
+                source?: string | undefined;
+                specificConfig?: IObject | undefined;
+                subModel?: number | undefined;
+                supportMessage?: number | undefined;
+                supportProcess?: number | undefined;
+                supportStateMachine?: number | undefined;
+                sysBuiltin?: number | undefined;
+                type?: string | undefined;
+            } | undefined;
+            modelName?: string | undefined;
+            modelType?: string | undefined;
+            modifyTime?: string | undefined;
+            modifyUserId?: string | undefined;
+            modifyUserName?: string | undefined;
+            name?: string | undefined;
+            originFieldKey?: string | undefined;
+            originModelKey?: string | undefined;
+            parentField?: number | undefined;
+            rdoUniqueFieldKey?: boolean | undefined;
+            refModelSource?: string | undefined;
+            refModelType?: string | undefined;
+            relationModelName?: string | undefined;
+            required?: number | undefined;
+            sortNum?: number | undefined;
+            source?: string | undefined;
+            specificConfig?: IObject | undefined;
+            sysBuiltin?: number | undefined;
+            type?: string | undefined;
+            uniqueConstraint?: {
+                checkStrategy?: string | undefined;
+                fieldKeys?: string[] | undefined;
+                type?: string | undefined;
+            } | undefined;
+            __bindFields: string[];
+        };
+        __id?: string | undefined;
+    }[]>;
+    getChildrenOptionsByKey: ({ bindInfo, relationModelName, id, __bindFields, key, name, }: LocalFieldMetaDTO, level: number) => Promise<Option[] | undefined>;
+    fieldValues: import('vue').ComputedRef<string[]>;
+    fieldMapByKey: Record<string, {
+        name: string;
+    }>;
+};
+type LocalFieldMetaDTO = FieldMetaDTO & {
+    __bindFields: string[];
+};
+export interface Option {
+    value: string;
+    label?: any;
+    disabled?: boolean;
+    children?: Option[];
+    isLeaf?: boolean;
+    __props: LocalFieldMetaDTO;
+    __id?: string;
+    [key: string]: any;
+}
+export interface comPropsType {
+    fieldMetaList: LocalFieldMetaDTO[];
+    modelName: string;
+    maxLevel: number;
+    value: string;
+    valueSeparator?: string;
+    searchable?: boolean;
+    /**过滤函数 */
+    filterFieldByFunction?: (w: LocalFieldMetaDTO) => boolean;
+}
+export {};

package/es/components/field-cascader/src/hooks.mjs

@@ -0,0 +1,163 @@
+import SearchInput_default from "./SearchInput.vue.mjs";
+import { computed, createTextVNode, createVNode, h, onMounted, reactive, ref } from "vue";
+import { FIELD_TYPE } from "@gct-paas/core";
+//#region src/components/field-cascader/src/hooks.tsx
+function useFieldCascader(props, { onFieldClick }) {
+	const { fieldMetaList, modelName, maxLevel, filterFieldByFunction = () => true } = props;
+	const optionsMapByModalKey = ref({});
+	const fieldMapByKey = reactive({});
+	/**根节点第一个查询 */
+	const keyword = ref();
+	const options = ref([]);
+	const fieldValues = computed(() => {
+		return props.value ? props.value.split(props.valueSeparator || "$") : [];
+	});
+	const visibleValue = ref(false);
+	const filterOptions = computed(() => {
+		return options.value.filter((i) => !i.title || !keyword.value || i.title.includes(keyword.value || "")).map((i) => {
+			const children = i.isExpandField ? recursionTreeFilterByKeyword(i, 2, optionsMapByModalKey.value) : [];
+			return {
+				...i,
+				children
+			};
+		});
+	});
+	/**初始化自动展开 */
+	async function autoExpand() {
+		const fields = [...fieldValues.value];
+		let nodeOptions = [...options.value];
+		let level = 1;
+		while (fields.length > 1) {
+			const filedKey = fields.shift();
+			const fieldItem = nodeOptions.find((i) => i.value === filedKey);
+			if (!fieldItem) return;
+			level += 1;
+			nodeOptions = await getChildrenOptionsByKey(fieldItem.__props, level) || [];
+		}
+	}
+	onMounted(() => {
+		/**添加第一列 */
+		options.value = createOptionsByModel({
+			fields: fieldMetaList,
+			title: modelName,
+			search: (val) => {
+				keyword.value = val;
+			},
+			onFieldClick,
+			level: 1,
+			__bindFields: []
+		});
+		autoExpand();
+	});
+	/**根据模型key 获取子节点信息 */
+	async function getChildrenOptionsByKey({ bindInfo, relationModelName, id, __bindFields, key, name }, level) {
+		fieldMapByKey[key] = { name };
+		/**级联字段唯一标识 */
+		const fieldKey = id + level;
+		if (optionsMapByModalKey.value[fieldKey]) {
+			optionsMapByModalKey.value[fieldKey].keyword = "";
+			return;
+		}
+		const res = await _api.apaas.modelMeta.getDetail({ modelKey: bindInfo });
+		optionsMapByModalKey.value[fieldKey] = {
+			keyword: "",
+			option: []
+		};
+		optionsMapByModalKey.value[fieldKey].option = createOptionsByModel({
+			fields: res.fieldMetaList,
+			title: relationModelName,
+			search: (val) => {
+				optionsMapByModalKey.value[fieldKey].keyword = val;
+			},
+			onFieldClick,
+			level,
+			__bindFields
+		});
+		return optionsMapByModalKey.value[fieldKey].option;
+	}
+	function createSearchInput(onChange, level) {
+		return {
+			value: level,
+			label: h(SearchInput_default, {
+				visibleValue,
+				onChange
+			}),
+			isLeaf: false,
+			__props: {},
+			isExpandField: false
+		};
+	}
+	/**
+	* 根据模型名称获取模型下拉数据
+	*/
+	function createOptionsByModel({ fields, title, search, level, onFieldClick, __bindFields }) {
+		const options = [props.searchable ? createSearchInput(search, level) : null, createTitleItem(title)].filter(Boolean);
+		fields.filter(filterFieldByFunction).forEach((row) => {
+			options.push(createOptionItem(row, {
+				level,
+				onClick() {
+					onFieldClick(row, level);
+				},
+				__bindFields
+			}));
+		});
+		return options;
+	}
+	function createOptionItem(row, { level, onClick, __bindFields }) {
+		const isExpandField = level < maxLevel && isExpandFieldArg.includes(row.type);
+		row.__bindFields = [...__bindFields, row.key];
+		const titleWithRelation = isExpandField ? `${row.name}(${row.relationModelName})` : row.name;
+		const labels = row.name;
+		return {
+			value: row.key,
+			label: getFileldLabel(labels, isExpandField, onClick),
+			title: labels,
+			titleWithRelation,
+			isLeaf: false,
+			isExpandField,
+			children: [],
+			__props: row,
+			__level: level,
+			__id: row.id
+		};
+	}
+	/**根距关键字递归过滤tree */
+	function recursionTreeFilterByKeyword(row, level, optionKey) {
+		const { option = [], keyword = "" } = optionKey[row.__id + level] || {};
+		return option.filter((i) => !i.title || !keyword || i.title.includes(keyword)).map((i) => {
+			return {
+				...i,
+				children: i.isExpandField ? recursionTreeFilterByKeyword(i, level + 1, optionKey) : []
+			};
+		});
+	}
+	return {
+		visibleValue,
+		filterOptions,
+		getChildrenOptionsByKey,
+		fieldValues,
+		fieldMapByKey
+	};
+}
+function createTitleItem(title) {
+	return {
+		value: title,
+		label: h("div", { class: "gct-option-title ell" }, title),
+		isLeaf: false,
+		__props: {},
+		isExpandField: false
+	};
+}
+var getFileldLabel = (labels, isExpandField, onClick) => {
+	return createVNode("div", {
+		"class": "ell gct-option-label ks-row",
+		"onClick": onClick
+	}, [createVNode("div", { "class": "ks-col ell" }, [createTextVNode(" "), labels]), isExpandField ? createVNode("span", { "class": "iconfont icon-pad_arrow_right" }, null) : null]);
+};
+var isExpandFieldArg = [
+	FIELD_TYPE.RDO_REF,
+	FIELD_TYPE.REF,
+	FIELD_TYPE.REF_MULTI
+];
+//#endregion
+export { useFieldCascader };