92 lines
1.9 KiB
TypeScript
92 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|