goaf-monitoring-system/src/views/dashboard/basicInfo/minesInfo/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <BasicTable @register="registerTable">
    <template #action="{ record }">
      <button @click="handleGoToPage(record, `/sealed/${record.areaId}`)" class="action-btn">
        <SvgIcon name="data" />
      </button>
      <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
        <SvgIcon name="info" />
      </button>
      <button @click="handleGoToPage(record, '/warningAnalysis/connectAnalysis')" class="action-btn">
        <SvgIcon name="chart" />
      </button>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns, searchFormSchema } from './minesInfo.data';
  import { SvgIcon } from '/@/components/Icon';
  import { getMineData } from '../basicInfo.api';

  // 路由实例
  const router = useRouter();
  // 注册表格并获取相关方法
  const [registerTable] = useTable({
    title: '矿山信息表格',
    api: getMineData, // 数据统计接口
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      showAdvancedButton: false,
      schemaGroupNames: ['常规查询'],
    },
    pagination: true,
    useSearchForm: true,
    // showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    scroll: { x: 'max-content' },
    // canResize: false,
    actionColumn: {
      width: 180,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径
   */
  function handleGoToPage(record: any, path: string) {
    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
    router.push({
      path,
      // query: {
      //   orderNo: record.orderNo, // 煤矿编号
      //   mineName: record.mineName // 煤矿名称
      // }
    });
  }
</script>
<style lang="less" scoped></style>