<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { onMounted, reactive } from 'vue';
|
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { getCityList, getIndustryList } from '#/api/extend/table';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
defineOptions({ name: 'ExtendTableDemoExtension' });
|
|
interface State {
|
industryTypeList: any[];
|
list: any[];
|
}
|
|
const state = reactive<State>({
|
industryTypeList: [],
|
list: [],
|
});
|
const baseStore = useBaseStore();
|
const columns: BasicColumn[] = [
|
{ title: '名称', dataIndex: 'fullName', minWidth: 200 },
|
{ title: '编码', dataIndex: 'enCode', width: 150 },
|
];
|
const childColumns: any[] = [
|
{ title: '', width: 100 },
|
{ title: '名称', field: 'fullName', minWidth: 200 },
|
{ title: '编码', field: 'enCode', width: 150 },
|
];
|
const [registerTable] = useVxeTable({
|
api: getIndustryList,
|
columns,
|
showExpandColumn: true,
|
useSearchForm: true,
|
pagination: false,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
expandConfig: {
|
lazy: true,
|
loadMethod({ row }) {
|
return new Promise((resolve) => {
|
getCityList(row.id)
|
.then((res) => {
|
row.list = res.data.list;
|
resolve(row);
|
})
|
.catch(() => {});
|
});
|
},
|
},
|
});
|
|
async function init() {
|
state.industryTypeList = (await baseStore.getDictionaryData('IndustryType')) as any[];
|
}
|
|
onMounted(() => init());
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #expandedRowRender="{ record }">
|
<VxeGrid :data="record.list" :columns="childColumns" :show-header="false" :min-height="0" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
</template>
|
