feat: 添加签到页面,整合用户选择和日期选择功能,支持数据过滤
This commit is contained in:
87
src/views/check/index.vue
Normal file
87
src/views/check/index.vue
Normal 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>
|
||||
@@ -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 = [
|
||||
|
||||
Reference in New Issue
Block a user