初始提交：项目迁移,前端（管理端）

2025-11-13 09:50:47 +08:00
commit 13f78a3086
695 changed files with 89296 additions and 0 deletions
--- a/cool-admin-vue/packages/crud/src/components/table/helper/header.tsx
+++ b/cool-admin-vue/packages/crud/src/components/table/helper/header.tsx
@@ -0,0 +1,91 @@
+import { CloseBold, Search } from "@element-plus/icons-vue";
+import { h } from "vue";
+import { useCrud } from "../../../hooks";
+import { renderNode } from "../../../utils/vnode";
+
+export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
+	const crud = useCrud();
+
+	const slot = slots[`header-${item.prop}`];
+
+	if (slot) {
+		return slot({
+			scope
+		});
+	}
+
+	if (!item.search || !item.search.component) {
+		return item.label;
+	}
+
+	// 显示输入框
+	function show(e: MouseEvent) {
+		item.search.isInput = true;
+		e.stopPropagation();
+	}
+
+	// 隐藏输入框
+	function hide() {
+		if (item.search.value !== undefined) {
+			item.search.value = undefined;
+			refresh();
+		}
+
+		item.search.isInput = false;
+	}
+
+	// 刷新
+	function refresh(params?: any) {
+		const { value } = item.search;
+
+		crud.value?.refresh({
+			page: 1,
+			[item.prop]: value === "" ? undefined : value,
+			...params
+		});
+	}
+
+	// 文字
+	const text = (
+		<div class="cl-table-header__search-label" onClick={show}>
+			<el-icon size={14}>{item.search.icon?.() ?? <Search />}</el-icon>
+
+			{item.renderLabel ? item.renderLabel(scope) : item.label}
+		</div>
+	);
+
+	// 输入框
+	const input = h(renderNode(item.search.component, { prop: item.prop }), {
+		clearable: true,
+		modelValue: item.search.value,
+		onVnodeMounted(vn) {
+			// 默认聚焦
+			vn.component?.exposed?.focus?.();
+		},
+		onInput(val: any) {
+			item.search.value = val;
+		},
+		onChange(val: any) {
+			item.search.value = val;
+
+			// 更改时刷新列表
+			if (item.search.refreshOnChange) {
+				refresh();
+			}
+		}
+	});
+
+	return (
+		<div class={["cl-table-header__search", { "is-input": item.search.isInput }]}>
+			<div class="cl-table-header__search-inner">{item.search.isInput ? input : text}</div>
+
+			{item.search.isInput && (
+				<div class="cl-table-header__search-close" onClick={hide}>
+					<el-icon>
+						<CloseBold />
+					</el-icon>
+				</div>
+			)}
+		</div>
+	);
+}