{
this.invokeSearch(EAction.BUTTON_REFRESH)
}} />
},
// 表头按钮
headerButton(this: any, { button = [] }: any) {
const nextButtonList = button.filter(item => item["show"] !== false)
if (nextButtonList.length <= 2) {
return nextButtonList.map((item: any) => {
const { btnCode, text, color, onClick } = item
if (btnCode && btnCode === "HEADER_DELETE_BUTTON") {
const { rowSelection: { checkedRows = [] } } = this.getProps()
return this.renderDeleteTag.call(this, checkedRows, item)
}
return {
const { rowSelection: { checkedRows } } = this.getProps()
ev.stopPropagation()
if (onClick) {
onClick.call(this, { checkedRows, btnCode })
}
}}>
{text || "自定义按钮"}
})
} else {
const firstButton = nextButtonList[0]
return
{
const { rowSelection: { checkedRows } } = this.getProps()
ev.stopPropagation()
if (firstButton["onClick"]) {
firstButton["onClick"].call(this, { checkedRows, btnCode: firstButton["btnCode"] })
}
}}>
{firstButton["text"] || "自定义按钮"}
{
StateManage.set(state, { text: "更多" })
const { rowSelection: { checkedRows }, httpConfig: { delete: deleteHttp } } = this.getProps()
if (data["btnCode"] === "HEADER_DELETE_BUTTON") {
if (checkedRows.length <= 0) {
PopMessage({ type: "warning", text: "至少选择一条数据" })
return
} else {
PopModal.confirm({
title: "提示",
content: "确认删除选中数据?",
onOk: () => {
if (deleteHttp) {
this.deleteRows(checkedRows)
}
if (data["onClick"]) {
data["onClick"].call(this, { checkedRows, btnCode: data["btnCode"] })
}
}
})
return
}
}
if (data["onClick"]) {
data["onClick"].call(this, { checkedRows, btnCode: data["btnCode"] })
}
}}
dataSource={nextButtonList.filter((item, index) => index > 0).map(item => {
return {
...item,
key: item["text"] || item["btnCode"],
label: {item["text"]}
}
})}
/>
}
},
// 点击数据过滤按钮，进行数据过滤
filterSetting(this: any, { onClick }: any) {
return
onClick(this.props)} />
},
// 自定义渲染列
customerColumnsSetting(this: any) {
return
},
renderHeader: function (this: any) {
const { header } = this.getProps()
const {
show,
onlySearch,
render,
title,
searchInput,
headerButton = {},
filterSetting
} = header
if (!show) return null;
// 自定义渲染表头
if (render && typeof render === "function") {
return render()
}
// 仅展示搜索框
if (onlySearch) {
return this.searchInput(searchInput)
}
const headerConfigMap: any = {
title: () => title.render ? title.render() : title.content,
searchInput: () => this.searchInput(searchInput),
headerButton: () => this.headerButton(headerButton),
refreshButton: () => this.refreshButton(),
fullscreenButton: () => this.fullscreenButton(),
customerColumns: () => this.customerColumnsSetting(),
filterSetting: () => this.filterSetting({ onClick: filterSetting.onClick })
}
return
{Object.keys(header).filter(key => ["show", "onlySearch", "render"].includes(key) === false).map(key => {
return
{headerConfigMap[key].call(this)}
})}
},
// 渲染自定义展示列
renderCustomerColumns(this: any) {
if (!this.customerColumns) return null
const { columns } = this.getProps()
const keys = columns.filter((item: any) => item["width"] !== "0px" && item.show !== false).map((item: any) => item["key"] || item["dataIndex"] || item["title"])
const height = this.customerColumns.length * 50
const maxHeight = document.body.clientHeight * 0.6
const CustomerColumns = Checkbox({
style: {
[height >= maxHeight ? "maxHeight" : "height"]: (height >= maxHeight ? maxHeight : height) + "px",
overflow: "auto",
width: "94%"
},
value: keys,
placement: "vertical",
dataSource: this.customerColumns.filter((item: any) => item["key"] !== "row-button" && item["key"] !== "row-sort").map((item: any) => {
return {
key: item["key"] || item["dataIndex"] || item["title"],
label: item["title"]
}
}),
onChange: (params: any) => {
const { value } = params
const nextColumns = this.customerColumns.filter((item: any) => value.includes(item["key"]) || value.includes(item["dataIndex"]) || value.includes(item["title"]))
this.setProps({ columns: nextColumns.map((item: any) => ({ ...item, show: true })) })
}
}, true)
return
},
// 获取完整的columns
getNewColumns: function (this: any) {
let { columns, buttonConfig, allowDragSort } = this.getProps()
let newColumns = columns.map((col: any, index: number) => {
const column = {
...col,
// key: col["key"] || col["title"] || col["dataIndex"],
width: col.width,
align: col.align || defaultAlign,
sorter: col.sorter || false,
ellipsis: col.ellipsis === false ? false : true,
}
return column
})
if (buttonConfig && buttonConfig.rowButton) {
newColumns = this.getColumnsByButtonConfig(buttonConfig, newColumns)
}
if (allowDragSort) {
const DragHandle = SortableHandle(() => (
));
newColumns.unshift({
title: '排序',
align: defaultAlign,
width: 50,
key: "row-sort",
className: dragVisibleClassName,
render: () => ,
})
}
return [...newColumns]
},
// 根据buttonConfig.rowButton修改columns
getColumnsByButtonConfig(this: any, buttonConfig: any, prevColumns: any) {
let { rowButton } = buttonConfig
const { buttonConfig: { maxRowButton = 1, align = "left", width = 120 } } = this.getProps()
const nextColumns = [...prevColumns]
rowButton = rowButton.filter(button => button["show"] !== false)
if (!Array.isArray(rowButton) || rowButton.length <= 0) return nextColumns
if (prevColumns.find((item: any) => item["key"] === "row-button")) return prevColumns
nextColumns.push({
key: "row-button",
width,
title: 操作,
fixed: "right",
align,
render: (text: any, record: any, index: number) => {
return this.renderRowButton({ rowButton, record, index })
}
})
return nextColumns
}
}