bxztApp/packages/screen/src/views/ServiceStationManagePage/index.vue

<template>
  <DynamicTable
    :dataSource="tableData"
    :columns="columns"
    :toolbar="toolbar"
    :autoHeight="true"
    :pagination="pagination"
  ></DynamicTable>
</template>
  
<script lang="ts" setup>
import DynamicTable from "../../component/DynamicTable";
import { h, ref, onMounted, reactive } from "vue";
import { request } from "@/utils/request";

const tableData = ref([
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
  {
    county: "潼南",
    road_code: "G319线",
    mile_code: "2654+000",
    level: "国道",
    monthly_traffic: "5625",
    tec_level: "二级",
    name: "三汇停车区",
    service_station_address: "交通公路部门",
  },
]);

const getTableData = async () => {
  try {
    const params = {

        pageNum: pagination.current,
        pageSize: pagination.pageSize,
    };
    const res = await request({
      url: "/api/yhz/list",
      method: "GET",
      params: params,
    });
  } catch (error) {}
};
onMounted(() => {
  getTableData();
});
const columns = [
  {
    prop: "county",
    label: "区县",
  },
  {
    prop: "road_code",
    label: "路线编码",
    // minWidth: 160,
  },
  {
    prop: "mile_code",
    label: "里程桩号",
  },
  {
    prop: "level",
    label: "行政等级(仅划分:国道、省道、农村公路三类)",
  },
  {
    prop: "monthly_traffic",
    label: "机动车月交通流量",
  },
  {
    prop: "tec_level",
    label: "技术等级",
  },
  {
    prop: "name",
    label: "服务保障点具体名称",
  },
  {
    prop: "type",
    label: "类型",
  },
  {
    label: "操作",
    fixed: "right",
    width: 100,
    render: (row) => () =>
      h(
        ElButton,
        {
          type: "text",
          onClick: () => {
            console.log(row);
          },
        },
        () => "详情"
      ),
  },
];

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50],
  layout: "prev, pager, next, jumper",
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    getTableData(); 
  },
});
</script>
  
  <style lang="scss" scoped>
</style>