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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :scroll="{ x: 'fit-content' }">
      <template #action="{ record }">
        <button @click="handleGoToPage(record, `/sealed/${record.code}`)" class="action-btn" title="老空区永久密闭监测数据">
          <SvgIcon name="database" />
        </button>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { BasicTable, useTable } from '/@/components/Table';
  import { dataColumns } from './closed.data';
  import { getClosedAccessCount } from '../basicInfo.api';
  import { SvgIcon } from '/@/components/Icon';
  import { useMineDepartmentStore } from '/@/store/modules/mine';
  import { ref, watch } from 'vue';
  import { advancedRoutePush } from '/@/utils';

  // 路由实例
  const mineStore = useMineDepartmentStore();
  const deptId = ref();

  // 注册表格并获取相关方法
  const [registerTable, { reload, setLoading }] = useTable({
    title: '老空区永久密闭统计',
    api: () => {
      setLoading(true);
      return getClosedAccessCount({ deptId: deptId.value }).finally(() => {
        setLoading(false);
      });
    }, // 数据统计接口
    columns: dataColumns,
    pagination: false,
    useSearchForm: false,
    // showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    // canResize: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

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

  watch(
    () => mineStore.getDepartId,
    (v) => {
      deptId.value = v || mineStore.getRootId;
      reload();
    },
    {
      immediate: true,
    }
  );
</script>

<style lang="less" scoped>
  .action-btn {
    cursor: pointer;
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
</style>