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

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
    <!-- 搜索组件 -->
    <FishReleaseSearch
      @export-btn="exportBtn"
      @search-finish="onSearchFinish"
      @reset="onReset"
      :exportLoading="exportLoading"
      ref="searchRef"
    />
    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :list-url="getFishReleaseList"
      :searchParams="{
        sort: sort
      }"
    >
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick, h } from 'vue';
import dayjs from 'dayjs';
import FishReleaseSearch from './FishReleaseSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getFishReleaseList } from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';

const sort = ref<any>([
  {
    field: 'baseStepSort',
    dir: 'asc'
  },
  {
    field: 'rvcdStepSort',
    dir: 'asc'
  },
  {
    field: 'siteStepSort',
    dir: 'asc'
  },
  {
    field: 'flyr',
    dir: 'asc'
  }
]);
const tableRef = ref();
const searchRef = ref();
const tableScrollY = ref<string | number>(0);
const currentSearchParams = ref<any>({});
const exportLoading = ref(false);

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

// 固定列（始终全部显示）
const columns: any[] = [
  {
    key: 'stnm',
    title: '电站名称',
    dataIndex: 'stnm',
    visible: true,
    width: 200,
    sort: true,
    ellipsis: true,
    merge: true
  },
  {
    key: 'baseName',
    title: '所属基地',
    dataIndex: 'baseName',
    sort: true,
    width: 160,
    merge: true,
    mergeDeps: ['stnm']
  },
  {
    key: 'flyr',
    title: '放鱼年份',
    dataIndex: 'flyr',
    sort: true,
    width: 160,
    merge: true,
    mergeDeps: ['stnm']
  },
  {
    key: 'totalFcnt',
    title: '放流总量(万尾)',
    dataIndex: 'totalFcnt',
    sort: true,
    width: 160,
    merge: true,
    mergeDeps: ['stnm'],
    customRender: ({ record }: any) =>
      (record.totalFcnt / 10000).toFixed(4) || '-'
  },
  {
    key: 'release',
    title: '放流来源',
    dataIndex: 'release',
    merge: true,
    mergeDeps: ['stnm'],
    width: 250
  },
  {
    key: 'ftpName',
    title: '放鱼种类',
    dataIndex: 'ftpName',
    width: 100
  },
  {
    key: 'fcnt',
    title: '数量(万尾)',
    dataIndex: 'fcnt',
    width: 100,
    customRender: ({ record }: any) => (record.fcnt / 10000).toFixed(4) || '-'
  }
];

const onSearchFinish = async (values: any) => {
  currentSearchParams.value = values;
  // 等待 prop 更新后再调用 getList
  await nextTick();
  initTable(values);
};

const onReset = async (values: any) => {
  currentSearchParams.value = values;
  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 initTable = (values: any) => {
  console.log('values', values);
  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
  ].filter(Boolean); // 移除空项
  if (values.jcdt) {
    filters.push(
      {
        field: 'flyr',
        operator: 'gte',
        dataType: 'date',
        value: dayjs(values.jcdt.min).format('YYYY-MM-DD HH:mm:ss')
      },
      {
        field: 'flyr',
        operator: 'lte',
        dataType: 'date',
        value: dayjs(values.jcdt.max).format('YYYY-MM-DD HH:mm:ss')
      }
    );
  }

  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>