<script setup lang="ts">
|
import { ref, watch } from 'vue';
|
|
import { Space } from 'ant-design-vue';
|
|
import { useVbenVxeGrid, type VxeGridProps, vxeSortEvent } from '#/adapter/vxe-table';
|
|
interface Props {
|
reqKey: string;
|
reqValue: any;
|
title?: string;
|
listApi: (params: any) => Promise<any>; // 动态API函数
|
columns?: VxeGridProps['columns'];
|
}
|
const props = defineProps<Props>();
|
const columns = props?.columns?.filter((i) => i.field !== 'action');
|
|
const gridOptions: VxeGridProps = {
|
size: 'mini',
|
checkboxConfig: {
|
// 高亮
|
highlight: true,
|
// 翻页时保留选中状态
|
reserve: true
|
// 点击行选中
|
// trigger: 'row'
|
},
|
columns,
|
height: 'auto',
|
keepSource: true,
|
pagerConfig: {},
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues = {}) => {
|
const keyName = props.reqKey;
|
const keyValue = props.reqValue;
|
if (keyName && keyValue) {
|
const params = { [keyName]: props.reqValue };
|
Object.assign(formValues, params);
|
} else {
|
// 未传参则查询一个不存在的值
|
// const params = { [keyName]: -1 };
|
// Object.assign(formValues, params);
|
return false
|
}
|
return await props.listApi({
|
pageNum: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues
|
});
|
}
|
}
|
},
|
rowConfig: {
|
isHover: true,
|
keyField: 'id'
|
},
|
sortConfig: {
|
// 远程排序
|
remote: true,
|
// 支持多字段排序 默认关闭
|
multiple: true
|
},
|
id: `basis-sub-table${props.reqValue}`
|
};
|
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
gridOptions,
|
gridEvents: {
|
sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams)
|
}
|
});
|
|
// 使用 watch 监听 id 的变化
|
watch(
|
() => props.reqValue,
|
(newVal, oldVal) => {
|
if (newVal !== oldVal && newVal) {
|
tableApi.query();
|
}
|
},
|
{ immediate: false }
|
);
|
/**
|
* TODO 后续扩展点击事件
|
*/
|
const slotName = ref<string>('equName');
|
</script>
|
|
<template>
|
<div class="w-full">
|
<BasicTable :table-title="title">
|
<template #[slotName]="{ row }">
|
<Space>
|
<span>{{ row[slotName] }}</span>
|
</Space>
|
</template>
|
</BasicTable>
|
</div>
|
</template>
|
