goaf-monitoring-system/src/views/system/cadFile/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <MapView v-if="showCAD" class="w-full h-full" v-bind="selected" @close="showCAD = false"></MapView>
  <BasicTable v-else @register="registerMapTable">
    <template #resetBefore>
      <!-- <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 下载 </a-button> -->
      <a-button type="default" class="ml-8px" preIcon="mdi:plus" @click="handleOpenModal({})"> 新增 </a-button>
    </template>
    <template #action="{ record }">
      <button @click="handleGoToPageQuery(record)" class="action-btn" title=""> 布点 </button>
      <button @click="handleOpenModal(record)" class="action-btn" title="修改">
        <SvgIcon name="edit" />
      </button>
      <!-- 删除按钮 -->
      <Popconfirm
        title="删除确认"
        description="是否确认删除？"
        okText="确认"
        cancelText="取消"
        @confirm="handleDeleteRecord(record)"
        @cancel="handleCancel"
        placement="top"
      >
        <button class="action-btn" title="删除">
          <SvgIcon name="delete" />
        </button>
      </Popconfirm>
    </template>
  </BasicTable>

  <!-- 注册编辑弹框组件 -->
  <MapEditModal @register="registerModal" @success="handleModalSuccess" />
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  // import { useRouter } from 'vue-router';
  import { BasicTable } from '/@/components/Table';
  import { SvgIcon } from '/@/components/Icon';
  import { message, Popconfirm } from 'ant-design-vue';
  // 引入动态列/表单配置函数 + 类型
  import { getColumns, getSearchFormSchema } from './cad.data';
  import { getMineFileList, deleteMineFile } from './cad.api';
  import { useListPage } from '/@/hooks/system/useListPage';
  // import { useIntervalFn } from '@vueuse/core';
  import { useModal } from '/@/components/Modal';
  import MapEditModal from './components/MapEditModal.vue';
  import MapView from './components/MapView.vue';

  // 弹框注册
  const [registerModal, { openModal }] = useModal();

  // 生成动态列和搜索表单（computed响应式更新）
  const columns = computed(() => getColumns());
  const searchFormSchema = computed(() => getSearchFormSchema());
  // ========== 表格注册 ==========
  const { tableContext: mapManageTable } = useListPage({
    tableProps: {
      api: getMineFileList, // 数据统计接口
      // dataSource: mockData,
      columns, // 绑定动态列
      rowKey: 'mineCode',
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema.value, // 绑定动态搜索表单
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      showIndexColumn: false,
      scroll: { x: 'max-content' },
    },
    exportConfig: {
      url: '/ventanaly-province/province/mineData/exportMineData', //后端接口未知
      name: '矿山信息',
      params: {},
    },
  });
  const [registerMapTable, mapTable] = mapManageTable;
  // const { pause, resume } = useIntervalFn(() => mapTable.reload({ silence: true }), 60000);

  /**
   * 打开弹框函数
   * @param result 弹框数据
   */
  function handleOpenModal(record: any) {
    openModal(true, { ...record });
  }

  /**
   * 弹框结果处理函数
   * @param result 弹框数据
   */
  async function handleModalSuccess() {
    await mapTable.reload();
  }
  /**
   * 删除记录方法
   * @param record 当前行数据
   */
  async function handleDeleteRecord(record: any) {
    await deleteMineFile({ id: record.id });
    message.success('删除成功');
    await mapTable.reload();
  }

  function handleGoToPageQuery(record: any) {
    selected.value = record;
    showCAD.value = true;
    // router.push({
    //   path,
    //   query: {
    //     mineCode: record.mineCode,
    //     wjId: record.wjId,
    //   },
    // });
  }

  /**
   * 气泡取消按钮通用回调
   */
  function handleCancel() {
    // 取消操作，无逻辑（仅关闭气泡）
  }

  const showCAD = ref(false);
  const selected = ref();
</script>

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

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