feat: 门禁记录表格和字段

src/views/security-confidentiality/access-control/AccessControl.vue

@@ -1,7 +1,182 @@
 <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>
+          <!-- 按钮 -->
+          <el-button
+            v-if="managementPermission"
+            type="primary"
+            class="search-table-container--button"
+            :icon="Plus"
+            @click="handleCreateRecord"
+          >
+            新建门禁事件
+          </el-button>
+          <div class="table-search">
+            <section class="select-box">
+              <SelectableInput ref="selectableInputRef" :options="ACCESS_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 { useRouter } from 'vue-router';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
+  import { ACCESS_MANAGEMENT_PERMISSION, ACCESS_TABLE_SEARCH_OPTIONS } from './constant';
+  import { TABLE_OPTIONS, ACCESS_TABEL_COLUMNS, ACCESS_TABEL_COLUMNS_CHECKONLY } from './configs/tables';
+  import type { AccessTableData, AccessTableQuery } from './types';
+  import type { QueryPageRequest } from '@/types/basic-query';
 
-<style scoped></style>
+  const { permissions } = useUserInfoHook();
+  const managementPermission = ref<Boolean>(
+    Boolean(permissions.find((item: { code: string }) => item.code === ACCESS_MANAGEMENT_PERMISSION)),
+  );
+
+  const router = useRouter();
+  const handleCreateRecord = () => {
+    router.push({
+      name: 'security-confidentiality-access-control-item',
+      query: {
+        operate: 'access-create',
+      },
+    });
+  };
+
+  const searchData = reactive<AccessTableQuery>({});
+  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(
+    managementPermission.value ? ACCESS_TABEL_COLUMNS : ACCESS_TABEL_COLUMNS_CHECKONLY,
+    TABLE_OPTIONS,
+  );
+  const tableData = ref<AccessTableData[]>([]);
+
+  const tableQuery = ref<QueryPageRequest<AccessTableQuery>>({
+    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/access-control/configs/tables.ts

@@ -0,0 +1,80 @@
+export const TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  maxHeight: 'calc(70vh - 150px)',
+};
+
+export const ACCESS_TABEL_COLUMNS = [
+  {
+    label: '序号',
+    align: 'center',
+    minWidth: '120px',
+    type: 'index',
+  },
+  {
+    prop: 'eventDescription',
+    label: '事件',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'eventLocation',
+    label: '地点',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'images',
+    label: '抓拍图片',
+    slot: 'images',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'eventTime',
+    label: '时间',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'actions',
+    label: '操作',
+    slot: 'actions',
+    align: 'center',
+    minWidth: '120px',
+  },
+];
+
+export const ACCESS_TABEL_COLUMNS_CHECKONLY = [
+  {
+    label: '序号',
+    align: 'center',
+    minWidth: '120px',
+    type: 'index',
+  },
+  {
+    prop: 'eventDescription',
+    label: '事件',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'eventLocation',
+    label: '地点',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'images',
+    label: '抓拍图片',
+    slot: 'images',
+    align: 'center',
+    minWidth: '120px',
+  },
+  {
+    prop: 'eventTime',
+    label: '时间',
+    align: 'center',
+    minWidth: '120px',
+  },
+];

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

@@ -0,0 +1,14 @@
+export const ACCESS_MANAGEMENT_PERMISSION = 'security_business_module:access_management';
+
+export const ACCESS_TABLE_SEARCH_OPTIONS: SelectOption[] = [
+  {
+    label: '事件',
+    value: 1,
+    disabled: false,
+  },
+  {
+    label: '地点',
+    value: 2,
+    disabled: false,
+  },
+];

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

@@ -0,0 +1,41 @@
+export interface ImageItem {
+  url: string;
+  name?: string;
+  size?: number;
+  file?: File;
+}
+
+export interface AccessTableQuery {
+  fieldType?: number | null; //1-事件,2-地点
+  fieldContent?: string | null;
+  startTime?: string | null;
+  endTime?: string | null;
+}
+
+export interface AccessTableData {
+  eventDescription: string;
+  eventLocation: string;
+  images: string;
+  eventTime: string;
+  remark: string;
+}
+
+export interface CreateAccessRuleForm {
+  eventDescription: string;
+  eventLocation: string;
+  images: string;
+  eventTime: string;
+  remark: string;
+}
+
+export interface CreateAccessQuery {
+  eventDescription: string;
+  eventLocation: string;
+  images: string;
+  eventTime: string;
+  remark: string;
+}
+
+export interface UpdateAccessQuery extends CreateAccessQuery {
+  id: number;
+}