103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import type { VbenFormProps, VxeGridProps } from '#/adapter';
|
||
|
|
|
||
|
|
import { Page } from '@vben/common-ui';
|
||
|
|
|
||
|
|
import { message } from 'ant-design-vue';
|
||
|
|
|
||
|
|
import { useVbenVxeGrid } from '#/adapter';
|
||
|
|
import { getExampleTableApi } from '#/api';
|
||
|
|
|
||
|
|
interface RowType {
|
||
|
|
category: string;
|
||
|
|
color: string;
|
||
|
|
id: string;
|
||
|
|
price: string;
|
||
|
|
productName: string;
|
||
|
|
releaseDate: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const formOptions: VbenFormProps = {
|
||
|
|
schema: [
|
||
|
|
{
|
||
|
|
component: 'Input',
|
||
|
|
fieldName: 'category',
|
||
|
|
label: 'Category',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
component: 'Input',
|
||
|
|
fieldName: 'productName',
|
||
|
|
label: 'ProductName',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
component: 'Input',
|
||
|
|
fieldName: 'price',
|
||
|
|
label: 'Price',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
component: 'Select',
|
||
|
|
componentProps: {
|
||
|
|
allowClear: true,
|
||
|
|
options: [
|
||
|
|
{
|
||
|
|
label: 'Color1',
|
||
|
|
value: '1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Color2',
|
||
|
|
value: '2',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
placeholder: '请选择',
|
||
|
|
},
|
||
|
|
fieldName: 'color',
|
||
|
|
label: 'Color',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
component: 'DatePicker',
|
||
|
|
fieldName: 'datePicker',
|
||
|
|
label: 'Date',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
const gridOptions: VxeGridProps<RowType> = {
|
||
|
|
checkboxConfig: {
|
||
|
|
highlight: true,
|
||
|
|
labelField: 'name',
|
||
|
|
},
|
||
|
|
columns: [
|
||
|
|
{ title: '序号', type: 'seq', width: 50 },
|
||
|
|
{ align: 'left', title: 'Name', type: 'checkbox', width: 100 },
|
||
|
|
{ field: 'category', title: 'Category' },
|
||
|
|
{ field: 'color', title: 'Color' },
|
||
|
|
{ field: 'productName', title: 'Product Name' },
|
||
|
|
{ field: 'price', title: 'Price' },
|
||
|
|
{ field: 'releaseDate', title: 'Date' },
|
||
|
|
],
|
||
|
|
height: 'auto',
|
||
|
|
keepSource: true,
|
||
|
|
pagerConfig: {},
|
||
|
|
proxyConfig: {
|
||
|
|
ajax: {
|
||
|
|
query: async ({ page }, formValues) => {
|
||
|
|
message.success(`Query params: ${JSON.stringify(formValues)}`);
|
||
|
|
return await getExampleTableApi({
|
||
|
|
page: page.currentPage,
|
||
|
|
pageSize: page.pageSize,
|
||
|
|
...formValues,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Page auto-content-height>
|
||
|
|
<Grid />
|
||
|
|
</Page>
|
||
|
|
</template>
|