feat: 人员管理表格接口

src/api/security-confidentiality-person/outer-person.ts

@@ -4,6 +4,8 @@ import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
 import type {
   BreakTableQuery,
   BreakTableData,
+  VisitorTableQuery,
+  VisitorTableData,
 } from '@/views/security-confidentiality/person-management/outer-person/types';
 
 export function getBreakTableList(data: QueryPageRequest<BreakTableQuery>) {
@@ -27,3 +29,25 @@ export function exportBreakTableList(data: BreakTableQuery) {
     },
   );
 }
+
+export function getVisitorList(data: QueryPageRequest<VisitorTableQuery>) {
+  return http.request<QueryPageResponse<VisitorTableData>>({
+    url: '/personnelManagement/queryVisitorAccessRecordPage',
+    method: 'post',
+    data,
+  });
+}
+
+export function exportVisitorList(data: VisitorTableQuery) {
+  return http.request(
+    {
+      url: '/personnelManagement/queryVisitorAccessRecordPage',
+      method: 'post',
+      data,
+      responseType: 'blob',
+    },
+    {
+      isTransformResponse: false,
+    },
+  );
+}

src/views/security-confidentiality/person-management/inner-person/InnerPerson.vue

@@ -44,7 +44,7 @@
                   />
                 </el-select>
               </div>
-              <div>
+              <div class="select-box--item">
                 <span>时间：</span>
                 <el-date-picker
                   v-model="searchTime"
@@ -157,6 +157,7 @@
         searchData[key] = undefined;
       }
     }
+    searchTime.value = [];
     handleSearch();
   }
 

src/views/security-confidentiality/person-management/outer-person/OuterPerson.vue

@@ -16,7 +16,7 @@
   import { ref, computed, defineAsyncComponent, onUnmounted } from 'vue';
   import { SUBPAGES } from './constants';
 
-  const activeName = ref(sessionStorage.getItem('person-management-active') || SUBPAGES[0].value);
+  const activeName = ref(sessionStorage.getItem('security-outer-person-management-active') || SUBPAGES[0].value);
 
   const dynamicComponent = computed(() => {
     switch (activeName.value) {
@@ -28,7 +28,7 @@
   });
 
   onUnmounted(() => {
-    sessionStorage.setItem('person-management-active', activeName.value);
+    sessionStorage.setItem('security-outer-person-management-active', activeName.value);
   });
 </script>
 

src/views/security-confidentiality/person-management/outer-person/components/BreakInto.vue

@@ -5,9 +5,10 @@
         <section class="select-box">
           <div class="select-box--item">
             <span>地点：</span>
-            <el-input v-model="searchData.captureLocation" placeholder="请输入地点" clearable> </el-input>
+            <el-input style="width: 300px" v-model="searchData.captureLocation" placeholder="请输入地点" clearable>
+            </el-input>
           </div>
-          <div>
+          <div class="select-box--item">
             <span>时间：</span>
             <el-date-picker
               v-model="searchTime"
@@ -97,6 +98,7 @@
         searchData[key] = undefined;
       }
     }
+    searchTime.value = [];
     handleSearch();
   }
 
@@ -107,7 +109,7 @@
       if (res.size === 0) return;
       const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
       const url = window.URL.createObjectURL(blob);
-      downloadFile(url, '违规行为记录.xlsx');
+      downloadFile(url, '闯入记录.xlsx');
     } catch (e) {
       ElMessage.error('下载失败');
       console.log(e);
@@ -119,10 +121,6 @@
 </script>
 
 <style scoped lang="scss">
-  @use '@/styles/page-details-layout.scss' as *;
-  @use '@/styles/page-main-layout.scss' as *;
-  @use '@/styles/basic-table-action.scss' as *;
-
   .table-search {
     display: flex;
     align-items: center;

src/views/security-confidentiality/person-management/outer-person/components/Visitor.vue

@@ -3,19 +3,50 @@
     <header>
       <div class="table-search">
         <section class="select-box">
+          <SelectableInput ref="selectableInputRef" :options="VISITOR_TABLE_SEARCH_OPTIONS" />
           <div class="select-box--item">
-            <span>地点：</span>
-            <el-input v-model="searchData.captureLocation" placeholder="请输入地点" clearable> </el-input>
+            <span>是否外籍：</span>
+            <el-select
+              style="width: 100px"
+              v-model="searchData.isForeigner"
+              placeholder="请选择"
+              class="select-box--select"
+              clearable
+            >
+              <el-option
+                v-for="item in IS_FOREIGNER_TYPE_OPTIONS"
+                :key="item.value"
+                :value="item.label"
+                :label="item.label"
+                :disabled="item.disabled"
+              />
+            </el-select>
           </div>
-          <div>
-            <span>时间：</span>
-            <el-date-picker
-              v-model="searchTime"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            />
+          <div class="select-box--item">
+            <span>访问状态：</span>
+            <el-select
+              style="width: 100px"
+              v-model="searchData.visitState"
+              placeholder="请选择"
+              class="select-box--select"
+              clearable
+            >
+              <el-option
+                v-for="item in VISIT_STATE_TYPE_OPTIONS"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </div>
+          <div class="select-box--item">
+            <span>到达时间：</span>
+            <el-date-picker v-model="searchData.startTime" type="datetime" />
+          </div>
+          <div class="select-box--item">
+            <span>离开时间：</span>
+            <el-date-picker v-model="searchData.endTime" type="datetime" />
           </div>
         </section>
         <section class="search-btn">
@@ -40,13 +71,17 @@
 <script setup lang="ts">
   import BasicTable from '@/components/BasicTable.vue';
   import useTableConfig from '@/hooks/useTableConfigHook';
+  import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
   import { onMounted, reactive, ref } from 'vue';
   import { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
   import { VisitorTableData, VisitorTableQuery } from '../types';
   import { OUTER_PERSON_VISITOR_TABEL_COLUMNS, TABLE_OPTIONS } from '../configs/table';
+  import { VISITOR_TABLE_SEARCH_OPTIONS, IS_FOREIGNER_TYPE_OPTIONS, VISIT_STATE_TYPE_OPTIONS } from '../constants';
+  import { exportVisitorList, getVisitorList } from '@/api/security-confidentiality-person/outer-person';
+  import { ElMessage } from 'element-plus';
+  import { downloadFile } from '@/views/disaster/utils';
 
-  const searchData = reactive<any>({});
-  const searchTime = ref<string[]>([]);
+  const searchData = reactive<VisitorTableQuery>({});
 
   const { tableConfig, pagination } = useTableConfig(OUTER_PERSON_VISITOR_TABEL_COLUMNS, TABLE_OPTIONS);
 
@@ -58,34 +93,13 @@
     queryParam: {},
   });
   function getQuery() {
-    const query = {
+    tableQuery.queryParam = {
       ...searchData,
-      startTime: searchTime.value[0],
-      endTime: searchTime.value[1],
     };
   }
   async function getTableData() {
     tableConfig.loading = true;
-    const res = await new Promise<QueryPageResponse<VisitorTableData>>((resolve) => {
-      resolve({
-        totalRow: 1,
-        records: [
-          {
-            todoxinming: 'string',
-            todoshenfenxinxi: 'string',
-            todoshoujihaoma: 'string',
-            todoshifouwailian: 0,
-            tododanwei: 'string',
-            todolaifangshiyou: 'string',
-            todobeifangren: 'string',
-            todobeifangrengonghao: 'string',
-            todofangwenzhuangtai: 0,
-            tododaofangshijian: 'string',
-            todolikaishijian: 'string',
-          },
-        ],
-      });
-    });
+    const res = await getVisitorList(tableQuery);
     tableData.value = res.records;
     pagination.total = res.totalRow;
     tableConfig.loading = false;
@@ -118,16 +132,16 @@
 
   async function handleDownload() {
     getQuery();
-    // try {
-    //   const res = await exportActViolation(tableQuery.queryParam);
-    //   if (res.size === 0) return;
-    //   const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-    //   const url = window.URL.createObjectURL(blob);
-    //   downloadFile(url, '违规行为记录.xlsx');
-    // } catch (e) {
-    //   ElMessage.error('下载失败');
-    //   console.log(e);
-    // }
+    try {
+      const res = await exportVisitorList(tableQuery.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '访客记录.xlsx');
+    } catch (e) {
+      ElMessage.error('下载失败');
+      console.log(e);
+    }
   }
   onMounted(() => {
     getTableData();
@@ -135,13 +149,9 @@
 </script>
 
 <style scoped lang="scss">
-  //   @use '@/styles/page-details-layout.scss' as *;
-  //   @use '@/styles/page-main-layout.scss' as *;
-  //   @use '@/styles/basic-table-action.scss' as *;
-
   .table-search {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: space-between;
     width: 100%;
   }
@@ -149,7 +159,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 32px;
+    gap: 20px;
     &--item {
       @include flex-center;
       white-space: nowrap;

src/views/security-confidentiality/person-management/outer-person/configs/table.ts

@@ -54,64 +54,64 @@ export const OUTER_PERSON_VISITOR_TABEL_COLUMNS: TableColumnProps[] = [
     label: '姓名',
     align: 'center',
     minWidth: '120px',
-    prop: 'todoxinming',
+    prop: 'visitorName',
   },
   {
     label: '身份信息',
     align: 'center',
     minWidth: '240px',
-    prop: 'todoshenfenxinxi',
+    prop: 'identityInfor',
   },
   {
     label: '手机号码',
     align: 'center',
     minWidth: '240px',
-    prop: 'todoshoujihaoma',
+    prop: 'mobile',
   },
   {
     label: '是否外链',
     align: 'center',
     minWidth: '120px',
-    prop: 'todoshifouwailian',
-    slot: 'todoshifouwailian',
+    prop: 'isForeigner',
+    slot: 'isForeigner',
   },
   {
     label: '单位',
     align: 'center',
     minWidth: '360px',
-    prop: 'tododanwei',
+    prop: 'company',
   },
   {
     label: '来访事由',
     align: 'center',
     minWidth: '120px',
-    prop: 'todolaifangshiyou',
-    slot: 'todolaifangshiyou',
+    prop: 'visitReason',
+    slot: 'visitReason',
   },
   {
     label: '被访人',
     align: 'center',
     minWidth: '120px',
-    prop: 'todobeifangren',
+    prop: 'respondentName',
   },
   {
     label: '访问状态',
     align: 'center',
     minWidth: '120px',
-    prop: 'todofangwenzhuangtai',
-    slot: 'todofangwenzhuangtai',
+    prop: 'visitState',
+    slot: 'visitState',
   },
 
   {
     label: '到访时间',
     align: 'center',
     minWidth: '360px',
-    prop: 'tododaofaoshijian',
+    prop: 'visitTime',
   },
   {
     label: '离开时间',
     align: 'center',
     minWidth: '120px',
-    prop: 'todolikaishijian',
+    prop: 'leaveTime',
   },
 ];

src/views/security-confidentiality/person-management/outer-person/constants.ts

@@ -12,32 +12,78 @@ export const SUBPAGES = [
 export const VISITOR_TABLE_SEARCH_OPTIONS: SelectOption[] = [
   {
     label: '姓名',
-    value: 'todoxinming',
+    value: 'visitorName',
     disabled: false,
   },
   {
     label: '身份信息',
-    value: 'todoshenfenxinxi',
+    value: 'identityInfor',
     disabled: false,
   },
   {
     label: '手机号码',
-    value: 'todoshoujihaoma',
+    value: 'mobile',
     disabled: false,
   },
   {
     label: '单位',
-    value: 'tododanwei',
+    value: 'company',
     disabled: false,
   },
   {
     label: '来访事由',
-    value: 'todolaifangshiyou',
+    value: 'visitReason',
     disabled: false,
   },
   {
     label: '被访问姓名',
-    value: 'todobeifangren',
+    value: 'respondentName',
+    disabled: false,
+  },
+];
+
+export enum IS_FOREIGNER_TYPE {
+  FALSE = 0,
+  TRUE = 1,
+}
+
+export const IS_FOREIGNER_TYPE_LABEL = {
+  [IS_FOREIGNER_TYPE.TRUE]: '是',
+  [IS_FOREIGNER_TYPE.FALSE]: '否',
+};
+
+export const IS_FOREIGNER_TYPE_OPTIONS: SelectOption[] = [
+  {
+    label: IS_FOREIGNER_TYPE_LABEL[IS_FOREIGNER_TYPE.TRUE],
+    value: IS_FOREIGNER_TYPE.TRUE,
+    disabled: false,
+  },
+  {
+    label: IS_FOREIGNER_TYPE_LABEL[IS_FOREIGNER_TYPE.FALSE],
+    value: IS_FOREIGNER_TYPE.FALSE,
+    disabled: false,
+  },
+];
+
+export enum VISIT_STATE_TYPE {
+  VISITING = 0,
+  LEAVE = 1,
+}
+
+export const VISIT_STATE_TYPE_LABEL = {
+  [VISIT_STATE_TYPE.VISITING]: '拜访中',
+  [VISIT_STATE_TYPE.LEAVE]: '已离开',
+};
+
+export const VISIT_STATE_TYPE_OPTIONS: SelectOption[] = [
+  {
+    label: VISIT_STATE_TYPE_LABEL[VISIT_STATE_TYPE.VISITING],
+    value: VISIT_STATE_TYPE.VISITING,
+    disabled: false,
+  },
+  {
+    label: VISIT_STATE_TYPE_LABEL[VISIT_STATE_TYPE.LEAVE],
+    value: VISIT_STATE_TYPE.LEAVE,
     disabled: false,
   },
 ];

src/views/security-confidentiality/person-management/outer-person/types.ts

@@ -13,26 +13,28 @@ export interface BreakTableData {
 }
 
 export interface VisitorTableQuery {
-  todoxinming?: string | null;
-  todoshenfenxinxi?: string | null;
-  todoshoujihaoma?: string | null;
-  tododanwei?: string | null;
-  todolaifangshiyou?: string | null;
-  todobeifangren?: string | null;
+  visitorName?: string | null;
+  identityInfor?: string | null;
+  mobile?: string | null;
+  isForeigner?: number | null;
+  company?: string | null;
+  visitReason?: string | null;
+  visitState?: number | null;
+  respondentName?: string | null;
   startTime?: string | null;
   endTime?: string | null;
 }
 
 export interface VisitorTableData {
-  todoxinming: string;
-  todoshenfenxinxi: string;
-  todoshoujihaoma: string;
-  todoshifouwailian: number;
-  tododanwei: string;
-  todolaifangshiyou: string;
-  todobeifangren: string;
-  todobeifangrengonghao: string;
-  todofangwenzhuangtai: number;
-  tododaofangshijian: string;
-  todolikaishijian: string;
+  visitorName: string;
+  identityInfor: string;
+  mobile: string;
+  isForeigner: number;
+  company: string;
+  visitReason: string;
+  respondentName: string;
+  respondentNo: string;
+  visitState: number;
+  visitTime: string;
+  leaveTime: string;
 }