106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import { useTemplateRef } from 'vue';
|
|
import { NDatePicker, NSelect } 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: 'user.name',
|
|
title: '用户'
|
|
},
|
|
{
|
|
key: 'checkInType',
|
|
title: '签到类型',
|
|
render: (row: any) => {
|
|
return row.checkInType === 'meeting' ? '会议签到' : '应用签到';
|
|
}
|
|
},
|
|
{
|
|
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: 'checkInType',
|
|
title: '签到类型',
|
|
component: NSelect,
|
|
componentProps: {
|
|
options: [
|
|
{ label: '会议签到', value: 'meeting' },
|
|
{ label: '应用签到', value: 'app' }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
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>
|