@gct-paas/design 0.1.4-dev.8 → 0.1.5-dev.0

package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_script_setup_true_name_field-transfer-modal_lang.mjs

@@ -0,0 +1,166 @@
+import { useModelField } from "../../../hooks/use-model-field/use-model-field.mjs";
+import "../../../hooks/index.mjs";
+import FieldCascader_default from "./Cascader/FieldCascader.mjs";
+import FieldTransfer_default from "./Transfer/FieldTransfer.mjs";
+import { isEmpty, pick } from "lodash-es";
+import { SCOPEINFO, t } from "@gct-paas/core";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, onBeforeMount, openBlock, ref, resolveComponent, toDisplayString, toRaw, unref, watch, withCtx } from "vue";
+import { BasicModal, useModalInner } from "@gct-paas/core-web";
+//#region src/components/field-transfer/components/field-transfer-modal.vue?vue&type=script&setup=true&name=field-transfer-modal&lang.ts
+var _hoisted_1 = { class: "field-transfer-container" };
+var _hoisted_2 = {
+	key: 0,
+	class: "h26px leading-26px bg-[#3168EC]/[0.1] pl-10px mb10px"
+};
+var _hoisted_3 = { class: "text-[#666] ml6px" };
+var field_transfer_modal_vue_vue_type_script_setup_true_name_field_transfer_modal_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-transfer-modal",
+	props: {
+		modelKey: {},
+		isShowCascader: { type: Boolean },
+		modalTitle: {},
+		data: {},
+		titles: {},
+		containFieldType: {},
+		containFieldKey: {},
+		disabledFieldKey: {},
+		excludeFieldKey: {},
+		excludeFieldType: {},
+		containCreateType: {},
+		filterFieldByFunction: {},
+		maxEnableCount: {},
+		modalKey: {},
+		draggable: {
+			type: Boolean,
+			default: true
+		},
+		childParentModelKey: {},
+		destroyCallback: {},
+		saveCallback: {},
+		promptMessage: {}
+	},
+	setup(__props) {
+		const [registerInner, { closeModal }] = useModalInner();
+		const props = __props;
+		const getContainer = () => document.querySelector(`#${props.modalKey}`);
+		const { loadObjInfo, modelFieldMap, getModelFieldInfo, clearSelectInfo, clearObjInfo, selectObj } = useModelField(SCOPEINFO.FIELD_LIST);
+		const _selectObj = computed(() => {
+			return isLoad.value ? selectObj : {};
+		});
+		const objFieldList = ref([]);
+		const isLoad = ref(false);
+		onBeforeMount(async () => {
+			objFieldList.value = [];
+			clearSelectInfo();
+			clearObjInfo();
+			if (props.modelKey) isLoad.value = await loadObjInfo(props.modelKey, {
+				isShowCascader: props.isShowCascader,
+				childParentModelKey: props.childParentModelKey
+			});
+		});
+		watch([
+			() => props.data,
+			() => modelFieldMap.value,
+			isLoad
+		], () => {
+			if (!isEmpty(modelFieldMap.value)) objFieldList.value = props.data?.map((item) => {
+				const obj = pick(item, [
+					"isFieldModel",
+					"modelKey",
+					"fieldCodeChain",
+					"key",
+					"field",
+					"disabled"
+				]);
+				const fieldInfo = getModelFieldInfo(obj.modelKey, obj.field || obj.key);
+				if (fieldInfo) return {
+					...fieldInfo,
+					isFieldModel: obj.isFieldModel || false,
+					disabled: obj.disabled || false,
+					fieldCodeChain: obj.fieldCodeChain ?? JSON.stringify({ modelKey: fieldInfo.modelKey })
+				};
+			}).filter((i) => i) ?? [];
+		}, {
+			immediate: true,
+			deep: true
+		});
+		const setObjFieldList = (list) => {
+			objFieldList.value = list;
+		};
+		const handleShow = async (visible) => {
+			if (visible) {}
+		};
+		const handleClose = () => {
+			objFieldList.value = [];
+			clearSelectInfo();
+			clearObjInfo();
+			isLoad.value = false;
+			if (props.destroyCallback && typeof props.destroyCallback === "function") props.destroyCallback();
+		};
+		const handleOk = async () => {
+			if (props.saveCallback && typeof props.saveCallback === "function") {
+				const params = { objFieldList: toRaw(objFieldList.value) };
+				props.saveCallback(params);
+			}
+			closeModal();
+		};
+		return (_ctx, _cache) => {
+			const _component_a_spin = resolveComponent("a-spin");
+			return openBlock(), createBlock(unref(BasicModal), mergeProps(_ctx.$attrs, {
+				"min-height": 40,
+				title: __props.modalTitle || unref(t)("sys.component.fieldTransfer.defaultModalTitle"),
+				centered: "",
+				"can-fullscreen": false,
+				"mask-closable": false,
+				"after-close": handleClose,
+				"get-container": getContainer,
+				onRegister: unref(registerInner),
+				onOk: handleOk,
+				onVisibleChange: handleShow
+			}), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(_component_a_spin, { spinning: !isLoad.value }, {
+					default: withCtx(() => [
+						__props.promptMessage ? (openBlock(), createElementBlock("div", _hoisted_2, [_cache[0] || (_cache[0] = createElementVNode("i", { class: "iconfont icon-guanyu text-[#3168EC]" }, null, -1)), createElementVNode("span", _hoisted_3, toDisplayString(__props.promptMessage), 1)])) : createCommentVNode("", true),
+						createVNode(unref(FieldCascader_default), {
+							class: "mb-8px",
+							"is-show-cascader": __props.isShowCascader,
+							scope: unref(SCOPEINFO).FIELD_LIST
+						}, null, 8, ["is-show-cascader", "scope"]),
+						createVNode(unref(FieldTransfer_default), {
+							titles: __props.titles,
+							"max-enable-count": __props.maxEnableCount,
+							draggable: __props.draggable,
+							"disabled-field-key": __props.disabledFieldKey,
+							"contain-field-key": __props.containFieldKey,
+							"contain-field-type": __props.containFieldType,
+							"exclude-field-key": __props.excludeFieldKey,
+							"contain-create-type": __props.containCreateType,
+							"exclude-field-type": __props.excludeFieldType,
+							"filter-field-by-function": __props.filterFieldByFunction,
+							"obj-fields": _selectObj.value,
+							value: objFieldList.value,
+							"on-change": setObjFieldList
+						}, null, 8, [
+							"titles",
+							"max-enable-count",
+							"draggable",
+							"disabled-field-key",
+							"contain-field-key",
+							"contain-field-type",
+							"exclude-field-key",
+							"contain-create-type",
+							"exclude-field-type",
+							"filter-field-by-function",
+							"obj-fields",
+							"value"
+						])
+					]),
+					_: 1
+				}, 8, ["spinning"])])]),
+				_: 1
+			}, 16, ["title", "onRegister"]);
+		};
+	}
+});
+//#endregion
+export { field_transfer_modal_vue_vue_type_script_setup_true_name_field_transfer_modal_lang_default as default };

package/es/components/field-transfer/components/field-transfer-modal.vue_vue_type_style_index_0_scoped_0c9dd8a1_lang.css

@@ -0,0 +1,5 @@
+.field-transfer-container[data-v-0c9dd8a1] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

package/es/components/field-transfer/components/modal-wrapper.vue.d.ts

@@ -0,0 +1,19 @@
+interface IProps {
+    /** 模型key */
+    modelKey: string;
+    /** 模态框标题 */
+    modalTitle?: string;
+    /** 是否显示级联选择 */
+    isShowCascader?: boolean;
+    /** 选中的字段信息 */
+    data: IObject[];
+    /**
+     * 子表的关联主键字段的父模型字段
+     */
+    childParentModelKey?: string;
+    saveCallback?: (params: IObject) => void;
+}
+declare const _default: import('vue').DefineComponent<IProps, {
+    open: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/field-transfer/components/modal-wrapper.vue.mjs

@@ -0,0 +1,5 @@
+import modal_wrapper_vue_vue_type_script_setup_true_name_modal_wrapper_lang_default from "./modal-wrapper.vue_vue_type_script_setup_true_name_modal-wrapper_lang.mjs";
+//#region src/components/field-transfer/components/modal-wrapper.vue
+var modal_wrapper_default = modal_wrapper_vue_vue_type_script_setup_true_name_modal_wrapper_lang_default;
+//#endregion
+export { modal_wrapper_default as default };

package/es/components/field-transfer/components/modal-wrapper.vue_vue_type_script_setup_true_name_modal-wrapper_lang.mjs

@@ -0,0 +1,27 @@
+import field_transfer_modal_default from "./field-transfer-modal.vue.mjs";
+import { createBlock, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { useModal } from "@gct-paas/core-web";
+//#region src/components/field-transfer/components/modal-wrapper.vue?vue&type=script&setup=true&name=modal-wrapper&lang.ts
+var modal_wrapper_vue_vue_type_script_setup_true_name_modal_wrapper_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "modal-wrapper",
+	props: {
+		modelKey: {},
+		modalTitle: {},
+		isShowCascader: { type: Boolean },
+		data: {},
+		childParentModelKey: {},
+		saveCallback: { type: Function }
+	},
+	setup(__props, { expose: __expose }) {
+		const [register, { openModal }] = useModal();
+		const open = () => {
+			openModal();
+		};
+		__expose({ open });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(field_transfer_modal_default, mergeProps(_ctx.$props, { onRegister: unref(register) }), null, 16, ["onRegister"]);
+		};
+	}
+});
+//#endregion
+export { modal_wrapper_vue_vue_type_script_setup_true_name_modal_wrapper_lang_default as default };

package/es/components/field-transfer/hooks/useTreeData.d.ts

@@ -0,0 +1,139 @@
+import { ColumnItem, FieldItem, TreeNodeGroup, TreeNode, ColumnsChange } from '../types/index.d';
+export declare const useTreeData: (useMultiLevelTHead: boolean, isResetData?: boolean, draggable?: boolean, maxEnableCount?: number, onColumnsChange?: ColumnsChange) => {
+    data: import('vue').ComputedRef<({
+        type: "group";
+        width?: number | undefined;
+        children: (/*elided*/ any | {
+            type: "field";
+            field: {
+                id: string;
+                modelKey: string;
+                displayLabel: string;
+                type: FIELD_TYPE;
+                disabled: boolean;
+                hidden?: boolean | undefined;
+            };
+            modelKey: string;
+            width?: number | undefined;
+            fieldType: FIELD_TYPE;
+            key: string;
+            title: string;
+            level: number;
+            parent: /*elided*/ any;
+            disableCheckbox?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+            isNew?: boolean | undefined;
+        })[];
+        key: string;
+        title: string;
+        level: number;
+        parent: /*elided*/ any;
+        disableCheckbox?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        isNew?: boolean | undefined;
+    } | {
+        type: "field";
+        field: {
+            id: string;
+            modelKey: string;
+            displayLabel: string;
+            type: FIELD_TYPE;
+            disabled: boolean;
+            hidden?: boolean | undefined;
+        };
+        modelKey: string;
+        width?: number | undefined;
+        fieldType: FIELD_TYPE;
+        key: string;
+        title: string;
+        level: number;
+        parent: {
+            type: "group";
+            width?: number | undefined;
+            children: (/*elided*/ any | /*elided*/ any)[];
+            key: string;
+            title: string;
+            level: number;
+            parent: /*elided*/ any;
+            disableCheckbox?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+            isNew?: boolean | undefined;
+        };
+        disableCheckbox?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        isNew?: boolean | undefined;
+    })[]>;
+    root: {
+        type: "group";
+        width?: number | undefined;
+        children: (/*elided*/ any | {
+            type: "field";
+            field: {
+                id: string;
+                modelKey: string;
+                displayLabel: string;
+                type: FIELD_TYPE;
+                disabled: boolean;
+                hidden?: boolean | undefined;
+            };
+            modelKey: string;
+            width?: number | undefined;
+            fieldType: FIELD_TYPE;
+            key: string;
+            title: string;
+            level: number;
+            parent: /*elided*/ any;
+            disableCheckbox?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+            isNew?: boolean | undefined;
+        })[];
+        key: string;
+        title: string;
+        level: number;
+        parent: /*elided*/ any;
+        disableCheckbox?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        isNew?: boolean | undefined;
+    };
+    leafKeys: import('vue').Ref<string[], string[]>;
+    multiple: import('vue').ComputedRef<boolean>;
+    draggable: boolean | undefined;
+    remainCount: import('vue').ComputedRef<number>;
+    addTreeNodes(nodes: Omit<TreeNode, "parent">[], parent: TreeNodeGroup): void;
+    removeTreeNodesByKeys(keys: string[]): void;
+    moveTreeNode(source: TreeNode, target: TreeNode, direction: number, asChildren?: boolean): void;
+    getContainerNode: () => {
+        type: "group";
+        width?: number | undefined;
+        children: (/*elided*/ any | {
+            type: "field";
+            field: {
+                id: string;
+                modelKey: string;
+                displayLabel: string;
+                type: FIELD_TYPE;
+                disabled: boolean;
+                hidden?: boolean | undefined;
+            };
+            modelKey: string;
+            width?: number | undefined;
+            fieldType: FIELD_TYPE;
+            key: string;
+            title: string;
+            level: number;
+            parent: /*elided*/ any;
+            disableCheckbox?: boolean | undefined;
+            isLeaf?: boolean | undefined;
+            isNew?: boolean | undefined;
+        })[];
+        key: string;
+        title: string;
+        level: number;
+        parent: /*elided*/ any;
+        disableCheckbox?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        isNew?: boolean | undefined;
+    };
+    onChangeTree: (columnsData: ColumnItem[], fields: FieldItem[]) => void;
+};
+export type TreeProps = ReturnType<typeof useTreeData>;

package/es/components/field-transfer/hooks/useTreeData.mjs

@@ -0,0 +1,136 @@
+import { findNode, generateData, isGroupNode, traverse, traverseFilter } from "../utils/tree-tool.mjs";
+import { computed, reactive, ref, watch } from "vue";
+//#region src/components/field-transfer/hooks/useTreeData.ts
+var MAX_ENABLE_COUNT = 5e6;
+var useTreeData = (useMultiLevelTHead, isResetData, draggable, maxEnableCount, onColumnsChange) => {
+	const leafKeys = ref([]);
+	const refOriginalLeafKeys = ref([]);
+	const refTotalFields = ref(0);
+	const multiple = computed(() => useMultiLevelTHead);
+	const root = reactive({
+		key: "0",
+		title: "root",
+		children: [],
+		level: 0,
+		type: "group",
+		parent: null
+	});
+	const onChangeTree = (columnsData, fields) => {
+		const keys = [];
+		function handle(items, parent) {
+			return items.map(({ id, ...restItem }) => {
+				const node = {
+					...restItem,
+					key: id,
+					parent,
+					level: parent.level + 1,
+					isLeaf: restItem.type === "field"
+				};
+				if (!node.isLeaf) node.children = handle(node.children, node);
+				else {
+					const fieldItem = fields.find((item) => item.id === id);
+					if (fieldItem) {
+						node.disabled = fieldItem.disabled;
+						if (fieldItem) {
+							node.disableCheckbox = fieldItem.disabled;
+							node.fieldType = fieldItem.type;
+							keys.push(id);
+							refTotalFields.value += 1;
+						}
+					}
+				}
+				return node;
+			});
+		}
+		root.children = handle(columnsData, root);
+		leafKeys.value = keys;
+		if (!isResetData) refOriginalLeafKeys.value = [...keys];
+	};
+	watch(multiple, (val) => {
+		if (!val) {
+			const result = [];
+			traverse((node) => {
+				if (!isGroupNode(node)) result.push({
+					...node,
+					parent: root
+				});
+			}, root.children);
+			root.children = result;
+		}
+	}, { immediate: true });
+	const data = computed(() => root.children);
+	const refresh = () => {
+		root.children = [...root.children];
+	};
+	const handleColumnsChange = () => {
+		onColumnsChange?.(generateData(root.children));
+	};
+	const remainCount = computed(() => (maxEnableCount ?? MAX_ENABLE_COUNT) - leafKeys.value.length);
+	function getContainerNode() {
+		return root;
+	}
+	return {
+		data,
+		root,
+		leafKeys,
+		multiple,
+		draggable,
+		remainCount,
+		addTreeNodes(nodes, parent) {
+			const p = findNode(parent.key, root);
+			const newNodes = nodes.map((item) => ({
+				...item,
+				level: p.level + 1,
+				parent: p
+			}));
+			p.children.push(...newNodes);
+			const newLeafKeys = [...leafKeys.value];
+			nodes.forEach((item) => {
+				if (item.isLeaf) newLeafKeys.push(item.key);
+			});
+			leafKeys.value = newLeafKeys;
+			refresh();
+			setTimeout(() => {
+				newNodes.forEach((node) => {
+					if (node.isNew) node.isNew = false;
+				});
+			}, 500);
+			handleColumnsChange();
+		},
+		removeTreeNodesByKeys(keys) {
+			root.children = traverseFilter((node) => !keys.includes(node.key), root.children);
+			leafKeys.value = leafKeys.value.filter((key) => !keys.includes(key));
+			handleColumnsChange();
+		},
+		moveTreeNode(source, target, direction, asChildren = false) {
+			const sourceParent = findNode(source.parent.key, root);
+			let j = 0;
+			let targetParent = findNode(target.parent.key, root);
+			if (asChildren) if (isGroupNode(target)) targetParent = findNode(target.key, root);
+			else {
+				j = targetParent.children.findIndex((item) => item.key === target.key);
+				j += 1;
+			}
+			else {
+				j = targetParent.children.findIndex((item) => item.key === target.key);
+				j += direction === 1 ? 1 : -1;
+				j = Math.max(j, 0);
+			}
+			if (targetParent.level >= 3 && isGroupNode(source)) return;
+			const i = sourceParent.children.findIndex((item) => item.key === source.key);
+			sourceParent.children.splice(i, 1);
+			if (source.parent === targetParent) targetParent.children.splice(i < j ? j - 1 : j, 0, source);
+			else {
+				source.parent = targetParent;
+				source.level = targetParent.level + 1;
+				targetParent.children.splice(j, 0, source);
+			}
+			refresh();
+			handleColumnsChange();
+		},
+		getContainerNode,
+		onChangeTree
+	};
+};
+//#endregion
+export { useTreeData };

package/es/components/field-transfer/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 使用方法
+ * @example
+ * import { useFieldTransfer } from '/@/components/FieldTransfer';
+ * const i18nInstance = useFieldTransfer();
+ * i18nInstance.open({
+ *   modelKey: '',
+ *   modalTitle: '',
+ *   isShowCascader: false,
+ *   data: [],
+ *   titles: ['aa', 'bb'],
+ *   containFieldType: [FIELD_TYPE.DATE_TIME, FIELD_TYPE.TEXT],
+ *   excludeFieldType: [FIELD_TYPE.DATE_TIME, FIELD_TYPE.TEXT],
+ *   excludeFieldKey: ['f_xxx', 'f_aaa'],
+ *   maxEnableCount: 5,
+ *   saveCallback: (params) => {
+ *      console.log('saveCallback', params);
+ *   },
+ *  });
+ */
+export { useFieldTransfer } from './useFieldTransfer';

package/es/components/field-transfer/index.mjs

@@ -0,0 +1 @@
+import "./useFieldTransfer.mjs";

package/es/components/field-transfer/less/AdvancedTransfer.css

@@ -0,0 +1,60 @@
+.advanced-transfer-container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  border: 1px solid #f0f0f0;
+  background-color: #fafafa;
+}
+.advanced-transfer-container .ant-transfer-list-body {
+  height: 340px;
+}
+.advanced-transfer-container .ant-transfer-list-body .field-title {
+  overflow: hidden;
+  color: #333;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.advanced-transfer-container .ant-transfer-list-body .field-title .field-icon {
+  margin-right: 4px;
+  color: var(--ant-primary-color);
+}
+.advanced-transfer-container .ant-transfer-customize-list .ant-transfer-list {
+  width: 1px;
+  background-color: #fff;
+}
+.advanced-transfer-container .ant-transfer-operation + .ant-transfer-list .ant-transfer-list-body-search-wrapper {
+  display: none;
+}
+.advanced-transfer-container .ant-transfer-list-body-customize-wrapper {
+  flex: 1;
+  overflow: auto;
+}
+.advanced-transfer-container .ant-transfer-list-content-item {
+  height: 44px;
+  border-bottom: 1px solid #eaedf1;
+}
+.advanced-transfer-container .ant-transfer-list-content-item:hover {
+  background-color: #e6eeff;
+}
+.advanced-transfer-container .ant-tree-treenode {
+  height: 44px;
+  border-bottom: 1px solid #eaedf1;
+}
+.advanced-transfer-container .ant-tree-list-holder-inner:first-child,
+.advanced-transfer-container .ant-transfer-list-content-item:first-child {
+  border-top: 1px solid #eaedf1;
+}
+.advanced-transfer-container .empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.advanced-transfer-container .ant-empty-image {
+  width: 90px;
+  height: 66px;
+}
+.advanced-transfer-container .ant-empty-description {
+  color: #A6A6A6;
+}

package/es/components/field-transfer/less/FieldCascader.css

@@ -0,0 +1,57 @@
+.field-cascader {
+  cursor: pointer;
+}
+.field-cascader:focus {
+  outline: none;
+}
+.field-cascader .bread {
+  color: #333;
+  display: inline-block;
+  line-height: 32px;
+}
+.field-cascader .bread .field-cascader-title {
+  color: #666;
+}
+.field-cascader .last-name {
+  color: #333;
+  margin-left: 4px;
+}
+.field-cascader .down-icon {
+  color: #bfbfbf;
+}
+.field-popup-cascader {
+  z-index: 3000;
+}
+.field-popup-cascader > div {
+  max-width: 60vw;
+}
+.field-popup-cascader .ant-cascader-menu-item {
+  padding: 0;
+  min-width: 160px;
+}
+.field-popup-cascader .ant-cascader-menu-item .ant-cascader-menu-item-content {
+  display: flex;
+  align-items: center;
+}
+.field-popup-cascader .ant-cascader-menu-item .field-ops {
+  padding-right: 0;
+  line-height: 32px;
+  padding-left: 16px;
+  flex: 1;
+}
+.field-popup-cascader .ant-cascader-menu-item .field-ops .field-ops-name .field-ops-desc {
+  color: rgba(0, 0, 0, 0.45);
+}
+.field-popup-cascader .ant-cascader-menu-item .iconfont {
+  font-size: 12px;
+  padding-right: 8px;
+  flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.45);
+}
+.field-popup-cascader .ant-cascader-menu-item .ant-cascader-menu-item-expand-icon {
+  display: none;
+}
+.field-popup-cascader .ant-cascader-menu-item.ant-cascader-menu-item-disabled {
+  cursor: default;
+  color: #c3c3c3;
+}