sl-sfy-safety/src/views/traffic/regulation/components/NoticeTable.vue

<template>
  <div class="search-table-container">
    <header>
      <!-- 按钮 -->
      <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateNotice">
        新建管理通知
      </el-button>

      <div class="regulation-search">
        <el-input
          class="regulation-search-input"
          v-model="searchData"
          placeholder="输入通知标题或文件夹名称"
          :prefix-icon="Search"
          clearable
        >
        </el-input>
        <el-button type="primary" @click="getTabelData"> 查询 </el-button>
      </div>
    </header>
    <!-- 表格 -->
    <BasicTable
      :tableConfig="tableConfig"
      :tableData="tableData"
      @update:pageSize="handleSizeChange"
      @update:pageNumber="handleCurrentChange"
    >
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import BasicTable from '@/components/BasicTable.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { TABLE_OPTIONS, REGULATION_TABLE_COLUMNS } from '../configs/tables';
  import { ref, reactive, onMounted } from 'vue';
  import { Search, Plus } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 搜索栏
  const searchData = ref('');
  function handleSearch() {
    tabelQuery.value.queryParam = searchData;
    getTabelData();
  }

  // 表格
  const { tableConfig, pagination } = useTableConfig(REGULATION_TABLE_COLUMNS, TABLE_OPTIONS);

  const tableData = ref<any[]>([]);

  const tabelQuery = ref({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  });

  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tabelQuery.value.pageSize = value;
    getTabelData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tabelQuery.value.pageSize = value;
    getTabelData();
  };

  async function getTabelData() {}

  onMounted(async () => {
    getTabelData();
  });

  function handleCreateNotice() {
    router.push({
      name: 'traffic-regulation-item',
      query: {
        operate: 'notice-create',
      },
    });
  }
</script>

<style scoped lang="scss">
  @use '@/styles/page-main-layout.scss' as *;
  .regulation-search-input {
    max-width: 500px;
  }
  .regulation-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
</style>