feat: 添加签到页面,整合用户选择和日期选择功能,支持数据过滤

This commit is contained in:
2026-01-20 02:35:54 +07:00
parent 5f128ba4bb
commit 4a5b8c3ab8
11 changed files with 126 additions and 6 deletions

87
src/views/check/index.vue Normal file
View File

@@ -0,0 +1,87 @@
<script lang="ts" setup>
import { useTemplateRef } from 'vue';
import { NDatePicker } from 'naive-ui';
import dayjs from 'dayjs';
import { client, safeClient } from '@/service/api';
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
import UserSelect from '@/components/common/user-select.vue';
defineOptions({
name: 'CheckInPage'
});
const props = defineProps<{
userId: string;
}>();
const tableInst = useTemplateRef<TableInst>('tableInst');
const fetchData: TableFetchData = ({ pagination, filter }) => {
return safeClient(() => client.api.admin.checkIns.get({ query: { userId: props.userId, ...pagination, ...filter } }));
};
const columns: TableBaseColumns = [
{
key: 'userId',
title: '用户ID'
},
{
key: 'checkInAt',
title: '签到时间',
render: (row: any) => {
return dayjs(row.checkInAt).format('YYYY-MM-DD HH:mm:ss');
}
}
];
const filterColumns: TableFilterColumns = [
{
key: 'userId',
title: '用户',
component: UserSelect
},
{
key: 'startDate',
title: '开始日期',
component: NDatePicker,
componentProps: form => ({
clearable: true,
valueFormat: 'yyyy-MM-dd',
formattedValue: form.startDate,
onUpdateFormattedValue: val => {
form.startDate = val;
}
})
},
{
key: 'endDate',
title: '结束日期',
component: NDatePicker,
componentProps: form => ({
clearable: true,
valueFormat: 'yyyy-MM-dd',
formattedValue: form.endDate,
onUpdateFormattedValue: val => {
form.endDate = val;
}
})
}
];
</script>
<template>
<TableBase
ref="tableInst"
:fetch-data="fetchData"
:columns="columns"
:filter-columns="filterColumns"
:scroll-x="800"
:header-operations="{
add: false,
refresh: true,
columns: true
}"
/>
</template>
<style lang="css" scoped></style>

View File

@@ -13,7 +13,9 @@ const props = defineProps<{
const tableInst = useTemplateRef<TableInst>('tableInst');
const fetchData: TableFetchData = ({ pagination, filter }) => {
return safeClient(() => client.api.admin.wallet.wallets.get({ query: { userId: props.userId } }));
return safeClient(() =>
client.api.admin.wallet.wallets.get({ query: { userId: props.userId, ...pagination, ...filter } })
);
};
const columns: TableBaseColumns = [