feat: 车辆记录表格和字段

src/views/security-confidentiality/access-control/types.ts

@@ -13,6 +13,7 @@ export interface AccessTableQuery {
 }
 
 export interface AccessTableData {
+  id: number;
   eventDescription: string;
   eventLocation: string;
   images: string;

src/views/security-confidentiality/vehicle-management/VehicleManagement.vue

@@ -1,7 +1,152 @@
 <template>
-  <div> overview </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 车辆出入记录 </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-table-container">
+        <header>
+          <div class="table-search">
+            <section class="select-box">
+              <SelectableInput ref="selectableInputRef" :options="VEHICLE_TABLE_SEARCH_OPTIONS" />
+              <div class="select-box--item">
+                <span>时间：</span>
+                <el-date-picker
+                  v-model="searchTime"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                />
+              </div>
+            </section>
+            <section class="search-btn">
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button @click="handleReset">重置</el-button>
+              <el-button @click="handleDownload">导出</el-button>
+            </section>
+          </div>
+        </header>
+        <!-- 表格 -->
+        <BasicTable
+          ref="basicTableRef"
+          :tableData="tableData"
+          :tableConfig="tableConfig"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+        </BasicTable>
+      </div>
+    </main>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import ActionButton from '@/components/ActionButton.vue';
+  import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import { VEHICLE_TABLE_SEARCH_OPTIONS } from './constant';
+  import { TABLE_OPTIONS, VEHICLE_TABEL_COLUMNS } from './configs/tables';
+  import type { VehicleTableData, VehicleTableQuery } from './types';
+  import type { QueryPageRequest } from '@/types/basic-query';
 
-<style scoped></style>
+  const searchData = reactive<VehicleTableQuery>({});
+  const searchTime = ref<string[]>([]);
+  const selectableInputRef = ref<InstanceType<typeof SelectableInput>>();
+  function getQuery() {
+    // TODO
+  }
+  async function getTableData() {
+    tableConfig.loading = true;
+    // const res = await getInnerPersonRecordList(tableQuery);
+    // tableData.value = res.records;
+    // pagination.total = res.totalRow;
+    tableConfig.loading = false;
+  }
+  function handleSearch() {
+    getQuery();
+    getTableData();
+  }
+
+  function handleReset() {
+    selectableInputRef.value?.clearValue();
+    for (const key in searchData) {
+      if (searchData.hasOwnProperty(key)) {
+        searchData[key] = undefined;
+      }
+    }
+    searchTime.value = [];
+    handleSearch();
+  }
+
+  async function handleDownload() {
+    // getQuery();
+    // try {
+    //   const res = await exportInnerPersonRecordList(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);
+    // }
+  }
+
+  // 表格
+  const { tableConfig, pagination } = useTableConfig(VEHICLE_TABEL_COLUMNS, TABLE_OPTIONS);
+  const tableData = ref<VehicleTableData[]>([]);
+
+  const tableQuery = ref<QueryPageRequest<VehicleTableQuery>>({
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+    queryParam: searchData,
+  });
+
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableQuery.value.pageSize = value;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableQuery.value.pageNumber = value;
+    getTableData();
+  };
+</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: flex-end;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .select-box {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    &--item {
+      @include flex-center;
+      white-space: nowrap;
+    }
+    span {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 14px;
+    }
+    .el-select {
+      width: 200px;
+    }
+  }
+  .search-btn {
+    display: flex;
+  }
+</style>

src/views/security-confidentiality/vehicle-management/configs/tables.ts

@@ -0,0 +1,58 @@
+export const TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  maxHeight: 'calc(70vh - 150px)',
+};
+
+export const VEHICLE_TABEL_COLUMNS = [
+  {
+    prop: 'carNum',
+    slot: 'carNum',
+    label: '车牌号',
+    align: 'center',
+    minWidth: '120px',
+    type: 'index',
+  },
+  {
+    prop: 'carOwnerName',
+    slot: 'carOwnerName',
+    label: '车主姓名',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'deptName',
+    slot: 'deptName',
+    label: '部门',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'entryLocation',
+    slot: 'entryLocation',
+    label: '进入地点',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'eventTime',
+    slot: 'eventTime',
+    label: '进入时间',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'images',
+    slot: 'images',
+    label: '抓拍照片',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'actions',
+    slot: 'actions',
+    label: '操作',
+    align: 'center',
+    minWidth: '120px',
+  },
+];

src/views/security-confidentiality/vehicle-management/constant.ts

@@ -0,0 +1,22 @@
+export const VEHICLE_TABLE_SEARCH_OPTIONS: SelectOption[] = [
+  {
+    label: '车牌号',
+    value: 1,
+    disabled: false,
+  },
+  {
+    label: '车主姓名',
+    value: 2,
+    disabled: false,
+  },
+  {
+    label: '部门',
+    value: 3,
+    disabled: false,
+  },
+  {
+    label: '进入地点',
+    value: 4,
+    disabled: false,
+  },
+];

src/views/security-confidentiality/vehicle-management/types.ts

@@ -0,0 +1,23 @@
+export interface ImageItem {
+  url: string;
+  name?: string;
+  size?: number;
+  file?: File;
+}
+
+export interface VehicleTableQuery {
+  fieldType?: number | null; //1-车牌号，2-车主姓名，3-部门，4-进入地点
+  fieldContent?: string | null;
+  startTime?: string | null;
+  endTime?: string | null;
+}
+
+export interface VehicleTableData {
+  carNum: string;
+  carOwnerName: string;
+  staffNo: string;
+  deptName: string;
+  entryLocation: string;
+  entryTime: string;
+  images: string;
+}