WholeProcessPlatform/frontend/src/modules/lushengshengtaijiance/LsstjkTk.vue

<template>
  <div class="lsstjk-table">
    <!-- 表格 -->
    <div class="table-wrapper">
      <BasicTable
        ref="tableRef"
        :columns="columns"
        :scroll-y="500"
        :scroll-x="800"
        :list-url="listUrl"
        :search-params="searchParams"
        :transform-data="customTransform"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getVmsstbprptList, getTetSpecList } from '@/api/stdc';
import dayjs from 'dayjs';

// ==================== Props ====================
const props = defineProps<{
  selectDateTime?: any;
  orderIndex?: string;
  hbrvcd?: string;
}>();

// ==================== 搜索状态 ====================
const tableRef = ref();
const yearValue = ref(
  props.selectDateTime ? dayjs(props.selectDateTime) : dayjs()
);

// ==================== 接口URL ====================
const listUrl = computed(() => {
  return props.orderIndex === '20' ? getTetSpecList : getVmsstbprptList;
});

// ==================== 表格列配置 ====================
const columns = computed(() => {
  if (props.orderIndex === '20') {
    return [
      {
        key: 'name',
        title: '名称',
        dataIndex: 'name',
        fixed: 'left' as const,
        width: 200,
        ellipsis: true
      },
      {
        key: 'nameEn',
        title: '英文名称',
        dataIndex: 'nameEn',
        width: 200,
        ellipsis: true
      },
      {
        key: 'protectlvlName',
        title: '保护级别',
        dataIndex: 'protectlvlName',
        width: 200,
        ellipsis: true
      }
    ];
  }else{
      // orderIndex === '16' 红外相机
  return [
    {
      key: 'box',
      title: '监测区域',
      dataIndex: 'box',
      fixed: 'left' as const,
      width: 200,
      ellipsis: true
    },
    {
      key: 'stnm',
      title: '站点名称',
      dataIndex: 'stnm',
      width: 200,
      ellipsis: true
    },
    {
      key: 'baseName',
      title: '所属基地',
      dataIndex: 'baseName',
      width: 200,
      ellipsis: true
    },
    {
      key: 'stlc',
      title: '所在地址',
      dataIndex: 'stlc',
      width: 200,
      ellipsis: true
    }
  ];
  }

});

// ==================== 搜索参数 ====================
const searchParams = computed(() => {
  const filters: any[] = [];

  if (props.hbrvcd) {
    filters.push({
      field: 'hbrvcd',
      operator: 'in',
      dataType: 'string',
      value: props.hbrvcd
    });
  }

  if (props.orderIndex === '20') {
    filters.push({
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'TE_ANIMALS'
    });
  }

  const startTime = `${dayjs(yearValue.value).format('YYYY')}-01-01 00:00:00`;
  const endTime = `${dayjs(yearValue.value).format('YYYY')}-12-31 23:59:59`;
  filters.push({
    field: 'startTime',
    operator: 'gte',
    dataType: 'date',
    value: startTime
  });
  filters.push({
    field: 'endTime',
    operator: 'lte',
    dataType: 'date',
    value: endTime
  });

  return {
    filter: {
      logic: 'and',
      filters
    },
    sort: [],
    group: [],
    select: [],
    groupResultFlat: false
  };
});

// ==================== 数据转换 ====================
const customTransform = (res: any) => {
  return {
    records: res?.data?.data || [],
    total: res?.data?.total || 0
  };
};

// ==================== 搜索与重置 ====================
const handleSearch = () => {
  const filter = getFilter();
  tableRef.value?.getList(filter);
};

const getFilter = () => {
  const filters: any[] = [
    {
      field: 'sttpCode',
      operator: 'eq',
      dataType: 'string',
      value: 'WVA'
    }
  ];

  if (props.hbrvcd) {
    filters.push({
      field: 'hbrvcd',
      operator: 'in',
      dataType: 'string',
      value: props.hbrvcd
    });
  }

  return {
    logic: 'and',
    filters
  };
};

// ==================== 监听 selectDateTime 变化 ====================
watch(
  () => props.selectDateTime,
  newVal => {
    if (newVal) {
      yearValue.value = dayjs(newVal);
      handleSearch();
    }
  },
  { immediate: false }
);

// ==================== 监听 orderIndex 变化 ====================
watch(
  () => props.orderIndex,
  () => {
    handleSearch();
  }
);

// ==================== 挂载时执行 ====================
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.lsstjk-table {
  width: 100%;

  .search-form {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
  }

  .table-wrapper {
    width: 100%;
  }
}
</style>