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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <BasicTable @register="registerRealtimeTable">
    <template #resetBefore>
      <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
    </template>
    <template #action="{ record }">
      <button @click="handleGoToPageQuery(record, `/sealed/${record.parentId}`)" class="action-btn" title="老空区永久密闭监测数据">
        <SvgIcon name="database" />
      </button>
      <!-- <button @click="handleGoToPageQuery(record, '/basicinfo/access-statistics')" class="action-btn" title="接入统计数据">
        <SvgIcon name="info" />
      </button> -->
      <button @click="handleGoToPageQuery(record, '/warningAnalysis/connectAnalysis')" class="action-btn" title="智能分析数据">
        <SvgIcon name="chart" />
      </button>
    </template>
    <template #expandedRowRender="{ record }">
      <BasicTable :dataSource="record.coalSeamList" :columns="coalSeamColumns" :pagination="false">
        <!-- <template #action="{ record }">
            <button @click="handleEdit(record, 'goaf')" class="action-btn" title="编辑">
              <SvgIcon name="edit" />
            </button>
          </template> -->
        <template #emptyText> 暂无数据 </template>
      </BasicTable>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { BasicTable } from '/@/components/Table';
  import { SvgIcon } from '/@/components/Icon';
  // 引入动态列/表单配置函数 + 类型
  import { coalSeamColumns, columns, searchFormSchema } from './minesInfo.data';
  import { getMineData } from '../basicInfo.api';
  // 引入字典获取方法
  import { useListPage } from '/@/hooks/system/useListPage';
  import { advancedRoutePush } from '/@/utils';
  // import { useIntervalFn } from '@vueuse/core';
  // import { useModal } from '/@/components/Modal';

  // 路由实例
  const route = useRoute();

  // ========== 表格注册 ==========
  const { tableContext: ctxRealtime, onExportXls } = useListPage({
    tableProps: {
      api: getMineData, // 数据统计接口
      columns, // 绑定动态列
      formConfig: {
        model: {
          deptId: route.query.deptId,
          accessStatus: route.query.accessStatus,
          status: route.query.status,
          gjMineStatus: route.query.gjMineStatus,
        },
        labelWidth: 120,
        schemas: searchFormSchema, // 绑定动态搜索表单
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      showIndexColumn: false,
      scroll: { x: 'max-content' },
    },
    exportConfig: {
      url: '/ventanaly-province/province/mineData/exportMineData',
      name: '矿山信息',
      params: {},
    },
  });
  const [registerRealtimeTable] = ctxRealtime;
  // useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);

  /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径
   */
  function handleGoToPageQuery(record: any, path: string) {
    const deptId = record.deptId;
    advancedRoutePush({
      path,
      query: { deptId },
    });
  }
  // const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();

  // const openModal = (record) => {
  //   openRealtimeModal(true, record);
  //   // if (type === 'realtime') {
  //   //   // 可向实时弹窗传递当前记录数据
  //   // } else {
  //   //   // 可向历史弹窗传递当前记录数据
  //   //   openHistoryModal(true, record);
  //   // }
  //   pause();
  // };
</script>

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

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