@gct-paas/core-web 0.1.5-test.2 → 0.1.6-dev.1

package/es/components/field-tree-select/field-tree-select.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,338 @@
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, withCtx } from "vue";
+import { cloneDeep } from "lodash-es";
+import { FieldIconMap } from "@gct-paas/core";
+import { SvgIcon } from "@gct-paas/core-components";
+//#region src/components/field-tree-select/field-tree-select.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "w230px m--14px" };
+var _hoisted_2 = { class: "ks-row" };
+var _hoisted_3 = {
+	key: 1,
+	class: "ks-col ell"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "action"
+};
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = ["onClick"];
+var _hoisted_7 = { class: "popover-bottom" };
+var field_tree_select_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "field-tree-select",
+	props: {
+		fieldMap: {
+			type: Object,
+			default: () => ({})
+		},
+		groupOptions: {
+			type: Array,
+			default: () => []
+		},
+		fieldNames: {
+			type: Object,
+			default: () => ({
+				children: "children",
+				title: "title",
+				key: "key"
+			})
+		},
+		maxLevel: {
+			type: Number,
+			default: 3
+		},
+		getLabelByFun: {
+			type: Function,
+			default: () => {
+				console.log("getLabelByFun");
+			}
+		},
+		getFieldTypeByFun: {
+			type: Function,
+			default: () => {
+				console.log("getFieldTypeByFun");
+			}
+		},
+		setLabelByFun: {
+			type: Function,
+			default: () => {
+				console.log("setLabelByFun");
+			}
+		}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { fieldNames, getLabelByFun, setLabelByFun, getFieldTypeByFun } = props;
+		/**记录能否拖拽成功开关  标记线的颜色 */
+		const selectedDrop = ref(true);
+		/**展开节点 */
+		const expandedKeys = ref([]);
+		/**正在编辑德输入框组件 */
+		const editorInput = ref();
+		/**正在编辑的节点 */
+		const editorNode = ref({});
+		const treeRef = ref();
+		function getFieldTitle(data) {
+			if (data.isGroup) return data[fieldNames.title];
+			else return getLabelByFun(props.fieldMap[data[fieldNames.key]]);
+		}
+		function setFieldTitle(title, data) {
+			if (data.isGroup) editorNode.value[fieldNames.title] = title;
+			else setLabelByFun(data[fieldNames.key], title);
+			emit("change");
+		}
+		function getFieldTypeByKey(key) {
+			return getFieldTypeByFun(props.fieldMap[key]);
+		}
+		function deleteFieldByid(key) {
+			loop(props.groupOptions, key, (value, index, children) => {
+				if (value.isGroup && value.children.length) children.push(...value.children);
+				children.splice(index, 1);
+			});
+			emit("change");
+		}
+		async function editorRow(data) {
+			editorNode.value = data;
+			await nextTick();
+			editorInput.value && editorInput.value.select();
+		}
+		function finishEditor() {
+			editorNode.value = {};
+		}
+		/**
+		* 获取指定节点的层级
+		*/
+		function getNodeLevel(key) {
+			let level = 1;
+			function findLevel(data, currentLevel) {
+				for (const item of data) {
+					if (item[fieldNames.key] === key) {
+						level = currentLevel;
+						return true;
+					}
+					if (item.children && item.children.length > 0) {
+						if (findLevel(item.children, currentLevel + 1)) return true;
+					}
+				}
+				return false;
+			}
+			findLevel(props.groupOptions, 1);
+			return level;
+		}
+		/**
+		* 计算被拖拽节点及其所有子节点的最大深度
+		*/
+		function getDragNodeMaxDepth(dragNode) {
+			function getMaxDepth(node) {
+				if (!node.isGroup) return 0;
+				let maxChildDepth = 0;
+				for (const child of node.children) maxChildDepth = Math.max(maxChildDepth, getMaxDepth(child));
+				return maxChildDepth + 1;
+			}
+			return getMaxDepth(dragNode);
+		}
+		/**
+		* 检查是否可以在指定层级添加子分组
+		*/
+		function canAddChildGroup(parentKey) {
+			return getNodeLevel(parentKey) < props.maxLevel;
+		}
+		/**
+		* 拖拽前验证是否允许放置
+		*/
+		function allowDrop(info) {
+			const { dropNode, dragNode } = info;
+			const { dropToGap } = info;
+			let targetLevel = 1;
+			if (dropNode.isGroup && !dropToGap) targetLevel = getNodeLevel(dropNode.key) + 1;
+			else targetLevel = getNodeLevel(dropNode.key);
+			const dragNodeMaxDepth = getDragNodeMaxDepth(dragNode);
+			selectedDrop.value = targetLevel + dragNodeMaxDepth - 1 <= props.maxLevel;
+			return true;
+		}
+		const onDrop = async (info) => {
+			if (!selectedDrop.value) return;
+			const { dropToGap, dragNode, node } = info;
+			const dropPosition = info.dropPosition;
+			const _dNode = await new Promise((resolve) => {
+				loop(props.groupOptions, dragNode.key, (_value, index, children) => {
+					resolve(cloneDeep(children.splice(index, 1)[0]));
+				});
+			});
+			loop(props.groupOptions, node.key, (value, index, children) => {
+				if (node.isGroup && !dropToGap) value.children.unshift(_dNode);
+				else children.splice(dropPosition === -1 ? index : index + 1, 0, _dNode);
+			});
+			emit("change");
+		};
+		const loop = (data, key, callback) => {
+			const length = data.length;
+			for (let i = 0; i < length; i++) {
+				const item = data[i];
+				if (item[fieldNames.key] === key) {
+					callback(item, i, data);
+					break;
+				}
+				if (item.children) loop(item.children, key, callback);
+			}
+		};
+		async function addGroup(level, key) {
+			if (key) loop(props.groupOptions, key, async (data, _index, _children) => {
+				const group = creatGroup(level);
+				data.children.push(group);
+				await nextTick();
+				!expandedKeys.value.includes(key) && expandedKeys.value.push(key);
+				editorRow(group);
+				treeRef.value.scrollTo({ key: group.key });
+			});
+			else {
+				const group = creatGroup(level);
+				props.groupOptions.push(group);
+				editorRow(group);
+				await nextTick();
+				treeRef.value.scrollTo({ key: group.key });
+			}
+			emit("change");
+		}
+		/**创建分组 */
+		function creatGroup(level) {
+			const indexOptions = [];
+			dfsNonRecursive(props.groupOptions, (node) => {
+				if (node.isGroup) indexOptions.push(node.index);
+			});
+			const index = indexOptions.length ? Math.max(...indexOptions) + 1 : 1;
+			return {
+				title: `分组${index}`,
+				groupLevel: level,
+				key: (/* @__PURE__ */ new Date()).getTime(),
+				isGroup: true,
+				children: [],
+				index
+			};
+		}
+		function dfsNonRecursive(root, callback) {
+			if (!root) return;
+			const childrenKey = "children";
+			const stack = [...root];
+			while (stack.length > 0) {
+				const node = stack.shift();
+				if (Array.isArray(node[childrenKey])) for (let i = node[childrenKey].length - 1; i >= 0; i--) stack.unshift(node[childrenKey][i]);
+				callback(node);
+			}
+		}
+		return (_ctx, _cache) => {
+			const _component_a_select = resolveComponent("a-select");
+			const _component_a_input = resolveComponent("a-input");
+			const _component_a_tooltip = resolveComponent("a-tooltip");
+			const _component_a_popconfirm = resolveComponent("a-popconfirm");
+			const _component_a_tree = resolveComponent("a-tree");
+			const _component_plus_outlined = resolveComponent("plus-outlined");
+			const _component_a_button = resolveComponent("a-button");
+			const _component_a_popover = resolveComponent("a-popover");
+			return openBlock(), createBlock(_component_a_popover, {
+				trigger: "click",
+				placement: "bottom",
+				"get-popup-container": (element) => element.parentNode,
+				"overlay-style": {
+					paddingTop: 0,
+					paddingBottom: 0
+				}
+			}, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_1, [__props.groupOptions.length ? (openBlock(), createBlock(_component_a_tree, {
+					key: 0,
+					ref_key: "treeRef",
+					ref: treeRef,
+					"expanded-keys": expandedKeys.value,
+					"onUpdate:expandedKeys": _cache[0] || (_cache[0] = ($event) => expandedKeys.value = $event),
+					"field-names": unref(fieldNames),
+					height: 300,
+					draggable: "",
+					"tree-data": __props.groupOptions,
+					"show-icon": "",
+					class: normalizeClass(["tree-field", { "gct-no-drop": !selectedDrop.value }]),
+					selectable: false,
+					"allow-drop": allowDrop,
+					virtual: false,
+					onDrop
+				}, {
+					icon: withCtx(({ isGroup, key }) => [isGroup ? (openBlock(), createBlock(unref(SvgIcon), {
+						key: 0,
+						class: "folder",
+						size: "20",
+						name: "folder"
+					})) : getFieldTypeByKey(key) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(["iconfont primary-gct", unref(FieldIconMap)[getFieldTypeByKey(key)]])
+					}, null, 2)) : createCommentVNode("", true)]),
+					title: withCtx(({ key, isGroup, groupLevel, data }) => [createElementVNode("div", _hoisted_2, [editorNode.value[unref(fieldNames).key] === key ? (openBlock(), createBlock(_component_a_input, {
+						key: 0,
+						ref_key: "editorInput",
+						ref: editorInput,
+						value: getFieldTitle(data),
+						class: "ks-col h24px",
+						"allow-clear": false,
+						"onUpdate:value": (v) => setFieldTitle(v, data),
+						onBlur: finishEditor
+					}, null, 8, ["value", "onUpdate:value"])) : (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(getFieldTitle(data)), 1)), editorNode.value[unref(fieldNames).key] !== key ? (openBlock(), createElementBlock("div", _hoisted_4, [
+						isGroup ? (openBlock(), createBlock(_component_a_popconfirm, {
+							key: 0,
+							placement: "topLeft",
+							title: _ctx.$t("sys.pageDesigner.confirmTodo"),
+							onConfirm: () => deleteFieldByid(key)
+						}, {
+							default: withCtx(() => [createVNode(_component_a_tooltip, { title: "删除" }, {
+								default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("span", { class: "icon-shanchu iconfont mr6px cursor-pointer primary-gct-hover" }, null, -1)])]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["title", "onConfirm"])) : createCommentVNode("", true),
+						isGroup && canAddChildGroup(key) ? (openBlock(), createBlock(_component_a_tooltip, {
+							key: 1,
+							title: "添加子分组"
+						}, {
+							default: withCtx(() => [createElementVNode("span", {
+								class: "icon-chuangjian iconfont mr6px cursor-pointer primary-gct-hover",
+								onClick: ($event) => addGroup(groupLevel + 1, key)
+							}, null, 8, _hoisted_5)]),
+							_: 2
+						}, 1024)) : createCommentVNode("", true),
+						isGroup ? (openBlock(), createBlock(_component_a_tooltip, {
+							key: 2,
+							title: "重命名"
+						}, {
+							default: withCtx(() => [createElementVNode("span", {
+								class: "icon-a-Single-linetext iconfont mr6px cursor-pointer primary-gct-hover",
+								onClick: ($event) => editorRow(data)
+							}, null, 8, _hoisted_6)]),
+							_: 2
+						}, 1024)) : createCommentVNode("", true),
+						createVNode(_component_a_tooltip, { title: "拖动排序" }, {
+							default: withCtx(() => [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "icon-drag iconfont" }, null, -1)])]),
+							_: 1
+						})
+					])) : createCommentVNode("", true)])]),
+					_: 1
+				}, 8, [
+					"expanded-keys",
+					"field-names",
+					"tree-data",
+					"class"
+				])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_a_button, {
+					type: "link",
+					onClick: _cache[1] || (_cache[1] = ($event) => addGroup(1))
+				}, {
+					icon: withCtx(() => [createVNode(_component_plus_outlined)]),
+					default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" 添加表头分组 ", -1))]),
+					_: 1
+				})])])]),
+				default: withCtx(() => [createVNode(_component_a_select, {
+					value: "配置多级表头",
+					"dropdown-class-name": "hidden"
+				})]),
+				_: 1
+			}, 8, ["get-popup-container"]);
+		};
+	}
+});
+//#endregion
+export { field_tree_select_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/field-tree-select/field-tree-select.vue_vue_type_style_index_0_scoped_898030d3_lang.css

@@ -0,0 +1,147 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.popover-bottom[data-v-898030d3] {
+  padding: 8px 0;
+  border-top: 1px solid #e8e8e8;
+}
+[data-v-898030d3] .gct-no-drop {
+  color: red;
+}
+[data-v-898030d3] .gct-no-drop .ant-tree-drop-indicator {
+  background-color: #8e8e8e !important;
+}
+[data-v-898030d3] .tree-field {
+  padding-top: 8px;
+}
+[data-v-898030d3] .tree-field .ant-tree-title .iconfont {
+  font-size: 12px;
+}
+[data-v-898030d3] .tree-field .ant-tree-icon__customize {
+  width: 20px;
+  text-align: left;
+}
+[data-v-898030d3] .tree-field .ant-tree-list-holder > div {
+  margin: 0 6px;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode {
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  width: 100%;
+  padding: 6px 2px;
+  overflow: hidden;
+  transition: background 0.3s;
+  border-radius: 4px;
+  color: #5e5e5e;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode:hover {
+  background: var(--ant-primary-1);
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode:hover .action {
+  display: block;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode .action {
+  display: none;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode .action .disabled-action {
+  color: #ccc !important;
+  cursor: not-allowed !important;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode .action .disabled-action:hover {
+  color: #ccc !important;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode .ant-tree-switcher-noop {
+  width: 0;
+}
+[data-v-898030d3] .tree-field .ant-tree-treenode .ant-tree-indent-unit {
+  width: 12px;
+}
+[data-v-898030d3] .tree-field .ant-tree-node-content-wrapper {
+  display: flex;
+  flex: 1;
+  flex-shrink: 1;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+[data-v-898030d3] .tree-field .ant-tree-node-content-wrapper .ant-tree-title {
+  flex: 1;
+  overflow: hidden;
+}
+[data-v-898030d3] .tree-field .ant-tree-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 24px;
+  line-height: 24px;
+}
+[data-v-898030d3] .tree-field .ant-tree-switcher .ant-tree-switcher-icon {
+  color: #797a7d;
+  font-size: 16px;
+}
+[data-v-898030d3] .tree-field .ant-tree-drop-indicator::after {
+  display: none !important;
+}