feat: 新增历史记录列表

src/api/face.ts

@@ -10,12 +10,12 @@ export interface DataList {
   picture: string;
 }
 
-export interface RecordListRes {
+export interface FaceListRes {
   data: DataList[];
   total: number;
 }
 
-export async function queryFaceList(params: object): Promise<RecordListRes> {
+export async function queryFaceList(params: object): Promise<FaceListRes> {
   const res = await instance.post('/api/getUserInfo', params);
   return res.data;
 }

src/api/record.ts

@@ -1,26 +1,28 @@
 import instance from './interceptor';
 
-interface HttpResponse<T> {
-  code: number;
-  data: T;
-  message: string;
+export interface DataList {
+  position: string;
+  company: string;
+  id: string;
+  name: string;
+  nameCh: string;
+  picture: string;
+  result: string;
+  time: string;
 }
-interface RecordListRes {
-  list: any[];
+
+export interface RecordListRes {
+  data: DataList[];
   total: number;
+  update: number;
 }
 export interface RecordParams {
   pageIndex: number;
   personNumber: number;
 }
-export function queryRecordList(params: RecordParams) {
-  return instance.post<HttpResponse<RecordListRes>>(
-    '/api/getPassengerRecord',
-    params
-  );
-}
-export function queryRecordExpo(params: RecordParams) {
-  return instance.get<HttpResponse<RecordListRes>>('/api/record', {
-    params,
-  });
+export async function queryRecordList(
+  params: RecordParams
+): Promise<RecordListRes> {
+  const res = await instance.post('/api/getPassengerRecord', params);
+  return res.data;
 }

src/router/routes/modules/dashboard.ts

@@ -8,7 +8,7 @@ const DASHBOARD: AppRouteRecordRaw = {
   meta: {
     locale: 'menu.manage',
     requiresAuth: true,
-    icon: 'icon-dashboard',
+    icon: 'icon-user',
     order: 0,
   },
   children: [

src/views/dashboard/face-list/index.vue

@@ -15,7 +15,7 @@
           }}
         </template>
         <template #picture="{ record }">
-          <a-image width="200" :src="record.picture" />
+          <a-image width="100" :src="record.picture" />
         </template>
       </a-table>
     </a-card>
@@ -42,13 +42,16 @@
     {
       title: t('faceList.columns.index'),
       dataIndex: 'index',
+      slotName: 'index',
       ellipsis: true,
       tooltip: true,
       width: 60,
     },
     {
-      title: t('faceList.columns.picture'),
+      title: t('recordList.columns.picture'),
       dataIndex: 'picture',
+      slotName: 'picture',
+      width: 120,
     },
     {
       title: t('faceList.columns.name'),
@@ -72,8 +75,8 @@
       tooltip: { position: 'left' },
     },
     {
-      title: t('faceList.columns.company'),
-      dataIndex: 'company',
+      title: t('faceList.columns.id'),
+      dataIndex: 'id',
       ellipsis: true,
     },
   ]);

src/views/dashboard/record-list/index.vue

@@ -2,20 +2,27 @@
   <div class="container">
     <a-card class="general-card" title="">
       <a-table
-        row-key="id"
+        row-key="name"
         :loading="loading"
         :pagination="pagination"
         :columns="(cloneColumns as TableColumnData[])"
         :data="renderData"
         :bordered="false"
         :size="size"
-        @page-change="onPageChange"
       >
         <template #index="{ rowIndex }">
           {{
             rowIndex + 1 + (pagination.pageIndex - 1) * pagination.personNumber
           }}
         </template>
+        <template #picture="{ record }">
+          <div :key="record.id">
+            <a-image
+              width="100"
+              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
+            />
+          </div>
+        </template>
       </a-table>
     </a-card>
   </div>
@@ -27,54 +34,70 @@
   import { useI18n } from 'vue-i18n';
   import useLoading from '@/hooks/loading';
   import { Pagination } from '@/types/global';
-  import { queryPolicyList, PolicyRecord, PolicyParams } from '@/api/list';
   import { queryRecordList } from '@/api/record';
-  import type { RecordParams } from '@/api/record';
+  import type { RecordParams, DataList } from '@/api/record';
+  import { useIntervalFn } from '@vueuse/core';
 
   type SizeProps = 'mini' | 'small' | 'medium' | 'large';
   type Column = TableColumnData & { checked?: true };
 
-  const generateFormModel = () => {
-    return {
-      number: '',
-      name: '',
-      contentType: '',
-      filterType: '',
-      createdTime: [],
-      status: '',
-    };
-  };
   const { loading, setLoading } = useLoading(true);
   const { t } = useI18n();
-  const renderData = ref<PolicyRecord[]>([]);
-  const formModel = ref(generateFormModel());
+  const renderData = ref<DataList[]>([]);
   const cloneColumns = ref<Column[]>([
     {
-      title: 'Name',
+      title: t('recordList.columns.index'),
+      dataIndex: 'index',
+      slotName: 'index',
+      ellipsis: true,
+      tooltip: true,
+      width: 60,
+    },
+    {
+      title: t('recordList.columns.time'),
+      dataIndex: 'time',
+      ellipsis: true,
+      tooltip: true,
+      width: 180,
+    },
+    {
+      title: t('recordList.columns.picture'),
+      dataIndex: 'picture',
+      slotName: 'picture',
+      width: 120,
+    },
+    {
+      title: t('recordList.columns.name'),
       dataIndex: 'name',
       ellipsis: true,
       tooltip: true,
-      width: 100,
     },
     {
-      title: 'Salary',
-      dataIndex: 'salary',
+      title: t('recordList.columns.nameCh'),
+      dataIndex: 'nameCh',
     },
     {
-      title: 'Address',
-      dataIndex: 'address',
+      title: t('recordList.columns.company'),
+      dataIndex: 'company',
       ellipsis: true,
-      width: 150,
     },
     {
-      title: 'Email',
-      dataIndex: 'email',
+      title: t('recordList.columns.Position'),
+      dataIndex: 'Position',
       ellipsis: true,
       tooltip: { position: 'left' },
-      width: 200,
+    },
+    {
+      title: t('recordList.columns.id'),
+      dataIndex: 'id',
+      ellipsis: true,
+    },
+    {
+      title: t('recordList.columns.result'),
+      dataIndex: 'result',
+      ellipsis: true,
     },
   ]);
-
   const size = ref<SizeProps>('medium');
 
   const basePagination: Pagination = {
@@ -91,14 +114,10 @@
     try {
       queryRecordList(params).then((res) => {
         console.log('res', res);
-        // renderData.value = res.data.list;
-        // pagination.current = params.current;
-        // pagination.total = res.data.total;
+        renderData.value = res.data;
+        pagination.pageIndex = params.pageIndex;
+        pagination.personNumber = res.total;
       });
-      // const { data } = await queryPolicyList(params);
-      // renderData.value = data.list;
-      // pagination.current = params.current;
-      // pagination.total = data.total;
     } catch (err) {
       // you can report use errorHandler or other
     } finally {
@@ -106,15 +125,10 @@
     }
   };
   fetchData();
-  const search = () => {
-    fetchData({
-      ...basePagination,
-      ...formModel.value,
-    } as unknown as RecordParams);
-  };
-  const onPageChange = (pageIndex: number) => {
-    fetchData({ ...basePagination, pageIndex });
-  };
+  const { pause, resume, isActive } = useIntervalFn(() => {
+    /* your function */
+    fetchData();
+  }, 50000);
 </script>
 
 <style scoped lang="less">

src/views/dashboard/record-list/locale/en-US.ts

@@ -1,4 +1,12 @@
 export default {
-  'menu.manage.record': '历史记录',
-  'recordList.table.title': '历史记录',
+  'menu.manage.record': 'Attendance',
+  'recordList.columns.index': '#',
+  'recordList.columns.name': 'EnglishName',
+  'recordList.columns.nameCh': 'Name',
+  'recordList.columns.picture': 'Photo',
+  'recordList.columns.company': 'Company',
+  'recordList.columns.Position': 'Position',
+  'recordList.columns.id': 'WorkerRegistrationID',
+  'recordList.columns.time': 'Date&Time',
+  'recordList.columns.result': 'PassResult',
 };

src/views/dashboard/record-list/locale/zh-CN.ts

@@ -1,4 +1,12 @@
 export default {
   'menu.manage.record': '历史记录',
-  'recordList.table.title': '历史记录',
+  'recordList.columns.index': '序号',
+  'recordList.columns.name': '英文名',
+  'recordList.columns.nameCh': '中文名',
+  'recordList.columns.picture': '图片',
+  'recordList.columns.company': '公司',
+  'recordList.columns.Position': '职位',
+  'recordList.columns.id': '工作证件号',
+  'recordList.columns.time': '时间',
+  'recordList.columns.result': '通行结果',
 };