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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- Tab标签页 -->
  <Tabs v-model:activeKey="activeKey" class="common-page-tabs" type="line" @change="handleTabChange">
    <TabPane key="unresolved" tab="未解决">
      <BasicTable style="padding: 0" @register="registerUnresolvedTable">
        <template #resetBefore>
          <a-button type="primary" class="ml-8px" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
          <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="handleExportExcel"> 导出 </a-button>
        </template>
        <!-- <template #submitBefore>
          <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
        </template> -->
        <template #queJson="{ record }">
          <div style="display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between;">
            <span style=" white-space: pre-line; word-wrap: break-word; line-height: 1.6; display: block; text-align: left; padding: 2px 4px;">
              {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
            </span>
            <button @click="record && handleOpenModal(record, 'view')" class="action-btn" title="查看问题详情">
              <SvgIcon name="view" />
            </button>
          </div>
        </template>
        <template #action="{ record }">
          <button @click="handleOpenModal(record, 'edit')" 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>
          <Popconfirm
            title="标记已解决确认"
            :description="getResolveDesc(record)"
            okText="确认"
            cancelText="取消"
            @confirm="handleOKRecord(record)"
            @cancel="handleCancel"
            placement="top"
          >
            <button class="action-btn" title="标记该问题为已解决">
              <SvgIcon name="resolved" />
            </button>
          </Popconfirm>
          <button @click="handleGoToPage(record)" class="action-btn" title="监测详情">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
    <TabPane key="resolved" tab="已解决">
      <div class="add-button">
        <a-button type="default" preIcon="mdi:download" @click="handleExportExcel" style="margin-right: 8px"> 导出 </a-button>
      </div>
      <BasicTable style="padding: 0" @register="registerResolvedTable">
        <template #queJson="{ record }">
          <div style="display: flex; align-items: center; gap: 8px; width: 100%">
            <span style="flex: 1; text-align: center">
              {{ record?.queJson ? formatQueJson(record.queJson) : '' }}
            </span>
            <!-- 按钮：无需额外样式，自然靠最右侧 -->
            <button @click="record && handleOpenModal(record, 'view')" class="action-btn" title="查看问题详情">
              <SvgIcon name="view" />
            </button>
          </div>
        </template>
        <template #action="{ record }">
          <button @click="handleOpenModal(record, 'view')" class="action-btn" title="问题详情">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
  </Tabs>

  <!-- 处理弹框 -->
  <DataQualityModal @register="registerModal" @success="handleModalSuccess" />
</template>

<script setup lang="ts">
  import { ref, nextTick, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { Tabs, TabPane, Popconfirm, message } from 'ant-design-vue';
  import DataQualityModal from './components/DataQualityModal.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { getColumns, getSearchFormSchema, type ProductionStatusMap } from './dataQuality.data';
  import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
  import { findNode } from '/@/utils/helper/treeHelper';
  import { useMineDepartmentStore } from '/@/store/modules/mine';
  import { getDictItemsByCode } from '/@/utils/dict';
  import dayjs from 'dayjs';
  import * as XLSX from 'xlsx';
  // 路由实例
  const router = useRouter();
  // 实例化矿井Store
  const mineStore = useMineDepartmentStore();
  // 响应式数据
  const activeKey = ref('unresolved'); // 激活的Tab键
  const pageMode = ref('add');

  // ========== 定义动态状态映射/下拉选项 ==========
  // 1. 动态生产状态映射（key: 状态value，value: 包含label/color的配置）
  const dynamicProductionStatusMap = ref<ProductionStatusMap>({});
  // 2. 动态下拉选项（供搜索表单使用）
  const dynamicProductionStatusOptions = ref<{ label: string; value: string | number }[]>([]);

  // 3. 颜色分配规则（可根据业务灵活调整）
  const getStatusColor = (statusText: string) => {
    if (statusText.includes('正常生产')) return 'green'; // 正常生产 → 绿色
    if (statusText.includes('拟建矿井'))
      return 'blue'; // 拟建矿井 → 蓝色
    else return 'red'; // 停产/停建/关闭/整改/责令 → 红色
  };

  // 4. 从接口获取生产状态列表并生成动态映射/下拉选项
  const fetchProductionStatus = async () => {
    try {
      // 调用接口获取状态列表
      const statusList = await getDictItemsByCode('mineProStatus');
      if (!Array.isArray(statusList)) return;

      // 生成动态映射和下拉选项
      const statusMap: ProductionStatusMap = {};
      const statusOptions: { label: string; value: string | number }[] = [];

      statusList.forEach((item) => {
        const value = item.value; // 接口返回的value（数字/字符串）
        const label = item.text || item.label; // 接口返回的文本
        const color = getStatusColor(label); // 按规则分配颜色

        // 填充映射表
        statusMap[value] = { label, value, color };
        // 填充下拉选项
        statusOptions.push({ label, value });
      });

      // 赋值到响应式变量
      dynamicProductionStatusMap.value = statusMap;
      dynamicProductionStatusOptions.value = statusOptions;

      // 刷新表格（确保表格使用最新的映射）
      await safeReloadActiveTable();
    } catch (error) {
      console.error('获取生产状态列表失败:', error);
      message.error('生产状态数据加载失败');
    }
  };

  // 生成动态列和搜索表单配置
  const columns = computed(() => getColumns(dynamicProductionStatusMap));
  const searchFormSchema = computed(() => getSearchFormSchema(dynamicProductionStatusOptions));

  // 未解决表格注册
  const [registerUnresolvedTable, { reload: reloadUnresolved }] = useTable({
    api: async (params: any) => {
      return await getDataQuaQueList({ ...params, isOk: false });
    },
    columns: columns, // 绑定动态列
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema.value,
      showAdvancedButton: false,
      schemaGroupNames: ['常规查询'],
      actionColOptions: { span: 6 },
    },
    useSearchForm: true,
    pagination: true,
    showIndexColumn: false,
    indexColumnProps: {
      title: '序号',
    },
    // canResize: false,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    immediate: false, // 先不立即加载，等状态数据获取后再加载
  });

  // 已解决表格注册
  const [registerResolvedTable, { reload: reloadResolved }] = useTable({
    api: async (params: any) => {
      return await getDataQuaQueList({ ...params, isOk: true });
    },
    columns: columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema.value,
      showAdvancedButton: false,
      schemaGroupNames: ['常规查询'],
    },
    useSearchForm: true,
    pagination: true,
    striped: true,
    // bordered: true,
    showIndexColumn: false,
    indexColumnProps: {
      title: '序号',
    },
    actionColumn: {
      width: 60,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    immediate: false, // 先不立即加载
  });

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

  // 解析queJson并拼接orderNum+queCon的辅助函数
  function formatQueJson(queJsonStr: string) {
    // 空值处理
    if (!queJsonStr) return '无质量问题';
    try {
      const queList = JSON.parse(queJsonStr);
      // 非数组格式处理
      if (!Array.isArray(queList)) return '问题格式异常';
      // 空数组处理
      if (queList.length === 0) return '无质量问题';
      return queList.map((item) => {
        const goafName = item.goafName;
        const queCon = item.queCon || '无描述';
        return `<${goafName}工作面采空区密闭监测>存在的问题：${queCon}`;
      }).join('\n'); // 多个问题分行显示
    } catch (error) {
      console.error('解析质量问题JSON失败:', error);
      return '问题数据解析失败';
    }
  }

  // 安全重载当前激活的表格
  async function safeReloadActiveTable() {
    await nextTick();
    if (activeKey.value === 'unresolved') {
      try {
        await reloadUnresolved();
      } catch (e) {
        console.warn('未解决表格重载失败:', e);
      }
    } else {
      try {
        await reloadResolved();
      } catch (e) {
        console.warn('已解决表格重载失败:', e);
      }
    }
  }
  // 按需重载双表格（先注释掉）
  // async function reloadBothTableSafely() {
  //   await nextTick();
  //   // 未解决表格：await + try/catch 捕获异步错误
  //   try {
  //     await reloadUnresolved();
  //   } catch (e) {
  //     console.warn('未解决表格暂未就绪，跳过重载:', e);
  //   }
  //   // 已解决表格：同理，一个报错不影响另一个
  //   try {
  //     await reloadResolved();
  //   } catch (e) {
  //     console.warn('已解决表格暂未就绪，跳过重载:', e);
  //   }
  // }

  // tabs切换事件
  async function handleTabChange(key: string) {
    activeKey.value = key;
    await safeReloadActiveTable();
  }

  /**
   * 根据标签获取表格数据（已解决/未解决）
   * @param result 弹框数据
   */
  // function getQuaQueListByTab() {
  //   return async (params: any) => {
  //     const isOk = activeKey.value === 'resolved' ? true : false;
  //     return await getDataQuaQueList({ ...params, isOk: isOk });
  //   };
  // }

  /**
   * 打开弹框函数
   * @param result 弹框数据
   */
  function handleOpenModal(record: any, mode: 'view' | 'edit' | 'add' = 'view') {
    pageMode.value = mode;
    openModal(true, { record, mode });
  }

  /**
   * 弹框结果处理函数
   * @param result 弹框数据
   */
  async function handleModalSuccess(result: any) {
    try {
      if (pageMode.value === 'add') {
        await addDataQuaQue(result);
      } else if (pageMode.value === 'edit') {
        await editDataQuaQue(result);
      }
      await safeReloadActiveTable();
    } catch (error) {
      console.error('操作失败：', error);
    }
  }
  /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径（树形结构所在页面的路由地址）
   */
  async function handleGoToPage(record: any) {
    try {
      const mineCode = record.mineCode;
      const targetNode = findNode(mineStore.getDepartTree, (item) => item.id === mineCode, { id: 'id', pid: 'parentId', children: 'childDepart' });

      let minePath = '';
      if (targetNode) {
        minePath = targetNode.parentId;
      } else {
        message.warning(`未找到矿码【${mineCode}】对应的矿井节点`);
        return;
      }

      // 跳转页面（可携带拼接后的矿名/路径等参数）
      router.push({ path: `/sealed/${minePath}`, query: { mineCode } });
    } catch (error) {
      console.error('矿节点定位失败:', error);
      message.error('矿节点定位失败，请稍后重试');
    }
  }

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

  /**
   * 生成已解决气泡提示文案：XX矿井XX问题是否解决了吗？
   */
  const getResolveDesc = computed(() => (record: any) => {
    const mineName = record.mineName || '该';
    return `是否确认${mineName}矿井问题已解决？`;
  });

  /**
   * 删除记录方法
   * @param record 当前行数据
   */
  async function handleDeleteRecord(record: any) {
    try {
      await deleteDataQuaQue({ id: record.id });
      await nextTick();
      await safeReloadActiveTable();
    } catch (error) {
      console.error('删除失败：', error);
    }
  }

  /**
   * 将记录改为已处理
   * @param record 当前行数据
   */
  async function handleOKRecord(record: any) {
    const copyRecord = {
      ...record,
      isOk: true,
      updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    };
    try {
      await editDataQuaQue(copyRecord);
      await safeReloadActiveTable();
    } catch (error) {
      console.error('操作失败：', error);
    }
  }

  /**
   * 获取全部未解决数据（不分页）
   */
  async function getAllUnresolvedData() {
    try {
      const res = await getDataQuaQueList({ pageNum: 1, pageSize: 9999, isOk: false });
      return res.records || [];
    } catch (error) {
      console.error('获取未解决数据失败:', error);
      return [];
    }
  }

  /**
   * 获取全部已解决数据（不分页）
   */
  async function getAllResolvedData() {
    try {
      const res = await getDataQuaQueList({ pageNum: 1, pageSize: 9999, isOk: true });
      return res.records || [];
    } catch (error) {
      console.error('获取已解决数据失败:', error);
      return [];
    }
  }

  /**
   * 格式化导出数据（统一字段名 + 状态文本）
   */
  function formatExportData(dataList: any[]) {
    return dataList.map((item) => ({
      煤矿名称: item.mineName || '',
      煤矿简称: item.mineNameAbbr || '',
      生产状态: dynamicProductionStatusMap.value[item.mineProStatus]?.label || '-',
      在线状态: item.mineLinkStatus === 1 ? '在线' : item.mineLinkStatus === 0 ? '离线' : '/',
      质量问题详情: formatQueJson(item.queJson),
      当前状态: item.isOk ? '已解决' : '未解决',
      处理时间: item.updateTime || '',
    }));
  }

  /**
   * 导出Excel核心方法
   */
  async function handleExportExcel() {
    let hideLoading: () => void = () => {};
    try {
      hideLoading = message.loading('正在导出数据，请稍候...');

      const unresolvedList = await getAllUnresolvedData();
      const resolvedList = await getAllResolvedData();

      const formattedUnresolved = formatExportData(unresolvedList);
      const formattedResolved = formatExportData(resolvedList);

      const workbook = XLSX.utils.book_new();
      const unresolvedSheet = XLSX.utils.json_to_sheet(formattedUnresolved);
      const resolvedSheet = XLSX.utils.json_to_sheet(formattedResolved);

      XLSX.utils.book_append_sheet(workbook, unresolvedSheet, '未解决');
      XLSX.utils.book_append_sheet(workbook, resolvedSheet, '已解决');

      const fileName = `数据质量问题_${dayjs().format('YYYYMMDDHHmmss')}.xlsx`;
      XLSX.writeFile(workbook, fileName);

      hideLoading();
      message.success('导出成功！');
    } catch (error) {
      if (hideLoading) hideLoading();
      console.error('Excel导出失败:', error);
      message.error('导出失败，请稍后重试');
    }
  }

  // ========== 初始化：先获取状态数据，再加载表格 ==========
  onMounted(async () => {
    await fetchProductionStatus(); // 先获取动态状态数据
    await safeReloadActiveTable();
  });
</script>

<style scoped lang="less">
  // .data-quality-page {
  //   padding: 0 12px;
  //   margin: 16px;
  //   border: 1px solid @border-color-base;
  //   .ant-form {
  //     background-color: #fff;
  //   }
  // }
  .form-part {
    padding: 12px 10px 6px 10px;
    margin-bottom: 8px;
    background-color: @white;
    border-radius: 2px;
  }
  .add-button {
    margin-bottom: 10px;
  }
  .action-btn {
    height: 30px;
    cursor: pointer;
    margin-right: 10px;

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