WholeProcessPlatform/frontend-sjgl/src/views/monitorData/SurfaceTemp/index.vue

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
    <!-- 搜索组件 -->
    <SurfaceTempSearch
      @export-btn="exportBtn"
      @search-finish="onSearchFinish"
      @reset="onReset"
      @seeEdit="handleSeeEdit"
      @batch-delete="handleBatchDelete"
      :show-batch-delete="currentSearchParams.timeScale === 'tm'"
      :selected-count="selectedRowKeys.length"
      :exportLoading="exportLoading"
      ref="searchRef"
    />
    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :enable-row-selection="currentSearchParams.timeScale === 'tm'"
      :row-key="getRowKey"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="Columns"
      :list-url="currentListUrl"
      :searchParams="{
        sort: sort
      }"
      @selection-change="handleSelectionChange"
    >
      <template #action="{ record }">
        <template v-if="currentSearchParams.timeScale === 'tm'">
          <a-button
            type="link"
            class="text-[#2f6b98]"
            size="small"
            @click="handleEdit(record)"
            >编辑</a-button
          >
          <a-button
            type="link"
            danger
            size="small"
            @click="handleDelete(record)"
            >删除</a-button
          >
        </template>
      </template>
    </BasicTable>

    <EditSurfaceTempModal
      v-model:open="editVisible"
      :record="editRecord"
      :time-scale="currentSearchParams.timeScale"
      @success="handleEditSuccess"
    />

    <DeleteConfirmModal
      ref="deleteModalRef"
      :delete-fn="handleDeleteFn"
      title="删除表层水温数据"
      label="数据"
      @success="handleEditSuccess"
    />

    <!-- 操作日志弹框 -->
    <OperationLogModal
      v-model:open="operationLogVisible"
      :table-name="operationTableName"
      :record-name-title="'断面名称'"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import SurfaceTempSearch from './SurfaceTempSearch.vue';
import EditSurfaceTempModal from './EditSurfaceTempModal.vue';
import DeleteConfirmModal from '@/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import OperationLogModal from '@/components/OperationLogModal/index.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { message } from 'ant-design-vue';
import {
  getSurfaceTempList,
  getSurfaceTempDayList,
  getSurfaceTempMonthList,
  deleteSurfaceTempInfo
} from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';
import { buildTimeFilters } from '@/utils/buildTimeFilters';

const sort = computed(() => {
  // 预定义排序数组
  const sortMap = {
    tm: [
      { field: 'baseStepSort', dir: 'asc' },
      { field: 'rvcd', dir: 'asc' },
      { field: 'rvcdStepSort', dir: 'asc' },
      { field: 'ennm', dir: 'asc' },
      { field: 'tm', dir: 'desc' }
    ],
    dt: [
      { field: 'baseStepSort', dir: 'asc' },
      { field: 'rvcd', dir: 'asc' },
      { field: 'rvcdStepSort', dir: 'asc' },
      { field: 'stnm', dir: 'asc' },
      { field: 'dt', dir: 'desc' }
    ],
    month: [
      { field: 'stnm', dir: 'desc' },
      { field: 'year', dir: 'desc' },
      { field: 'month', dir: 'desc' }
    ]
  };

  // 取值（若 timeScale 不在映射中，返回空数组）
  return sortMap[currentSearchParams.value.timeScale] || [];
});
const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});
const exportLoading = ref(false);
const editVisible = ref(false);
const editRecord = ref<any>(null);
const deleteModalRef = ref();
const operationLogVisible = ref(false);
const operationTableName = 'SD_WTRV_R';

// 多选相关（唯一标识 stcd+tm，日/月模式数据用 dt）
const selectedRowKeys = ref<string[]>([]);
const selectedRows = ref<any[]>([]);
const getRowKey = (record: any) => `${record.stcd}_${record.tm ?? record.dt}`;
const handleSelectionChange = (keys: string[], rows: any[]) => {
  selectedRowKeys.value = keys;
  selectedRows.value = rows;
};

// 根据 timeScale 动态切换 API
const currentListUrl = computed(() => {
  const timeScale = currentSearchParams.value.timeScale;
  if (timeScale === 'dt') return getSurfaceTempDayList;
  if (timeScale === 'month') return getSurfaceTempMonthList;
  return getSurfaceTempList; // 默认 tm（小时）
});

const tableScrollX = computed(() =>
  Math.max(
    Columns.value.reduce(
      (sum: number, col: any) => sum + (col.width || 180),
      0
    ),
    600
  )
);

// 固定列（始终全部显示）
const allColumns: any[] = [
  {
    key: 'stnm',
    title: '断面名称',
    dataIndex: 'stnm',
    visible: true,
    sort: true,
    ellipsis: true
  },
  {
    key: 'wt',
    title: '水温(℃)',
    dataIndex: 'wt',
    visible: true,
    sort: true,
    fixed: 'left',
    customRender: ({ record }: any) => record.wt?.toFixed(1) || '-',
    ellipsis: true
  }
];

// 根据 timeScale 动态生成时间列
const timeColumn = computed(() => ({
  key: 'tm',
  title: () => {
    const timeScale = currentSearchParams.value.timeScale;
    if (timeScale === 'month') return '月';
    if (timeScale === 'dt') return '时间';
    return '时间';
  },
  dataIndex: 'tm',
  visible: true,
  sort: true,
  ellipsis: true,
  customRender: ({ record }: any) => {
    const timeScale = currentSearchParams.value.timeScale;
    if (timeScale === 'dt') {
      return dayjs(record.dt).format('YYYY-MM-DD');
    }
    if (timeScale === 'month') {
      const year = record.year ?? '-';
      const month = record.month ?? '-';
      return `${year}-${String(month).padStart(2, '0')}`;
    }
    return record.tm || '-';
  }
}));

// 动态列（响应式）
const Columns = computed(() => {
  const result = allColumns.map(col => ({ ...col }));
  // 在基地列之后插入时间列
  const baseIndex = result.findIndex(c => c.key === 'stnm');
  result.splice(baseIndex + 1, 0, timeColumn.value);
  if (currentSearchParams.value.timeScale === 'tm') {
    result.push({
      key: 'action',
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 120
    });
  }
  return result;
});

const onSearchFinish = async (values: any) => {
  currentSearchParams.value = values;
  // 切换查询条件时清空选中
  selectedRowKeys.value = [];
  selectedRows.value = [];
  tableRef.value?.clearSelection();
  // 等待 prop 更新后再调用 getList
  await nextTick();
  initTable(values);
};

const onReset = async (values: any) => {
  currentSearchParams.value = values;
  // 切换查询条件时清空选中
  selectedRowKeys.value = [];
  selectedRows.value = [];
  tableRef.value?.clearSelection();
  await nextTick();
  initTable(values);
};

const exportBtn = () => {
  if (exportLoading.value) return;

  exportLoading.value = true;
  searchRef.value.btnLoading = true;

  tableRef.value
    .exportTable({
      fileName: `表层水温数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
    })
    .finally(() => {
      exportLoading.value = false;
      searchRef.value.btnLoading = false;
    });
};

const handleEdit = (record: any) => {
  editRecord.value = { ...record };
  editVisible.value = true;
};

// 删除（兼容单条：record 本身；批量：record.records 数组）
const handleDeleteFn = async (record: any, reason: string) => {
  const list = Array.isArray(record.records) ? record.records : [record];
  const dataList = list.map((r: any) => ({
    id: r.stcd,
    dt: r.tm
  }));
  return deleteSurfaceTempInfo({
    dataList,
    dataType: 'TIME',
    source: reason
  });
};

// 删除后刷新：清空选中（让批量删除按钮回到禁用状态）并重新加载列表
const refreshAfterDelete = () => {
  selectedRowKeys.value = [];
  selectedRows.value = [];
  tableRef.value?.clearSelection();
  initTable(currentSearchParams.value);
};

const handleDelete = (record: any) => {
  deleteModalRef.value?.open(record, () => {
    refreshAfterDelete();
  });
};

// 批量删除（仅小时 tm 模式，与单条删除一致）
const handleBatchDelete = () => {
  if (currentSearchParams.value.timeScale !== 'tm') {
    message.info('仅小时数据支持删除');
    return;
  }
  if (selectedRowKeys.value.length === 0) {
    message.info('请先勾选要删除的数据');
    return;
  }
  deleteModalRef.value?.open(
    {
      records: [...selectedRows.value],
      stnm: `选中的 ${selectedRowKeys.value.length} 条数据`
    },
    () => {
      refreshAfterDelete();
    }
  );
};

// 查看修改（操作日志）
const handleSeeEdit = () => {
  operationLogVisible.value = true;
};

const handleEditSuccess = () => {
  initTable(currentSearchParams.value);
};

const initTable = (values: any) => {
  const filters = [
    values.rvcd && values.rvcd !== 'all'
      ? {
          field: 'rvcd',
          operator: 'contains',
          dataType: 'string',
          value: values.rvcd
        }
      : null,
    values.rstcd
      ? {
          field: 'rstcd',
          operator: 'eq',
          dataType: 'string',
          value: values.rstcd
        }
      : null,
    values.stcd
      ? {
          field: 'stcd',
          operator: 'eq',
          dataType: 'string',
          value: values.stcd
        }
      : null,
    ...buildTimeFilters(values)
  ].filter(Boolean); // 移除空项

  const params = {
    logic: 'and',
    filters
  };
  tableRef.value.getList(params);
};

onMounted(() => {
  nextTick(() => {
    tableScrollY.value = calcTableScrollY();
  });
});
</script>

<style scoped lang="scss">
.body_one {
  position: relative;
  z-index: 900;
  pointer-events: all;
}
</style>