WholeProcessPlatform/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/Approval/index.vue

<template>
  <div class="w-full h-full flex flex-col">
    <!-- 搜索组件 -->
    <ApprovalSearch
      @export-btn="exportBtn"
      @search-finish="onSearchFinish"
      @reset="onReset"
      :exportLoading="exportLoading"
      ref="searchRef"
    />

    <!-- 表格组件 -->
    <BasicTable
      ref="tableRef"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :search-params="{
        sort: [
          {
            field: 'orderIndex',
            order: 'asc'
          }
        ]
      }"
      :list-url="getApprovalStatusList"
    >
    </BasicTable>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import ApprovalSearch from './ApprovalSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import { getApprovalStatusList } from '@/api/DataQueryMenuModule';
import { calcTableScrollY } from '@/utils/index';

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: 'index',
    align: 'center',
    title: '序号',
    dataIndex: 'index',
    visible: true,
    width: 60,
    fixed: 'left',
    customRender: ({ text, record, index }) => index + 1,
    excludeFromExport: true
  },
  {
    key: 'basin',
    title: '流域',
    dataIndex: 'basin',
    visible: true,
    width: 150,
    fixed: 'left',
    ellipsis: true
  },
  {
    key: 'river',
    title: '河流',
    dataIndex: 'river',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'hydropowerStation',
    title: '电站',
    dataIndex: 'hydropowerStation',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'bldsttCName',
    title: '建设状态',
    dataIndex: 'bldsttCName',
    visible: true,
    width: 100,
    ellipsis: true
  },
  {
    key: 'approvalFileNo',
    title: '批复文号',
    dataIndex: 'approvalFileNo',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'ecologicalFlow',
    title: '生态流量',
    dataIndex: 'ecologicalFlow',
    visible: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'waterEnvProtection',
    title: '水环境保护措施',
    dataIndex: 'waterEnvProtection',
    visible: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'coldWaterMitigation',
    title: '低温水减缓措施',
    dataIndex: 'coldWaterMitigation',
    visible: true,
    width: 180,
    ellipsis: true
  },
  {
    key: 'habitatProtection',
    title: '栖息地保护',
    dataIndex: 'habitatProtection',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'fishPassageMeasures',
    title: '过鱼措施',
    dataIndex: 'fishPassageMeasures',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'fishStocking',
    title: '鱼类增殖放流',
    dataIndex: 'fishStocking',
    visible: true,
    width: 150,
    ellipsis: true
  },
  {
    key: 'terrestrialEcoSoilCons',
    title: '陆生生态保护/水土保持措施',
    dataIndex: 'terrestrialEcoSoilCons',
    visible: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'rarePlantProtection',
    title: '珍稀植物保护措施',
    dataIndex: 'rarePlantProtection',
    visible: true,
    width: 180,
    ellipsis: true
  },
  {
    key: 'animalRescue',
    title: '动物救助',
    dataIndex: 'animalRescue',
    visible: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'resettlementMeasures',
    title: '移民安置',
    dataIndex: 'resettlementMeasures',
    visible: true,
    width: 120,
    ellipsis: true
  },
  {
    key: 'constructionPollutionCtrl',
    title: '施工期防治措施或其他环境保护措施',
    dataIndex: 'constructionPollutionCtrl',
    visible: true,
    width: 250,
    ellipsis: true
  },
  {
    key: 'groundwaterGeoProtect',
    title: '地下水及地质环境保护措施',
    dataIndex: 'groundwaterGeoProtect',
    visible: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'scenicAreaProtection',
    title: '风景名胜区保护措施',
    dataIndex: 'scenicAreaProtection',
    visible: true,
    width: 200,
    ellipsis: true
  },
  {
    key: 'envMonitoringRequire',
    title: '环境监测要求',
    dataIndex: 'envMonitoringRequire',
    visible: true,
    width: 150,
    ellipsis: true
  }
];

const onSearchFinish = (values: any) => {
  currentSearchParams.value = values;
  initTable(values);
};

const onReset = (values: any) => {
  currentSearchParams.value = values;
  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 buildSearchParams = (values: any) => {
  return {
    logic: 'and',
    filters: [
       values.rvcd && values.rvcd !== 'all'
        ? {
            field: 'rvcd',
            operator: 'contains',
            dataType: 'string',
            value: values.rvcd
          }
        : null,

      values.rstcd
        ? {
            field: 'stcd',
            operator: 'eq',
            dataType: 'string',
            value: values.rstcd
          }
        : null,
      values.basin
        ? {
            field: 'basin',
            operator: 'contains',
            dataType: 'string',
            value: values.basin
          }
        : null,
      values.approvalFileNo
        ? {
            field: 'approvalFileNo',
            operator: 'contains',
            dataType: 'string',
            value: values.approvalFileNo
          }
        : null,
      values.ecologicalFlow
        ? {
            field: 'ecologicalFlow',
            operator: 'contains',
            dataType: 'string',
            value: values.ecologicalFlow
          }
        : null,
      values.fishPassageMeasures
        ? {
            field: 'fishPassageMeasures',
            operator: 'contains',
            dataType: 'string',
            value: values.fishPassageMeasures
          }
        : null,
      values.envMonitoringRequire
        ? {
            field: 'envMonitoringRequire',
            operator: 'contains',
            dataType: 'string',
            value: values.envMonitoringRequire
          }
        : null,
      values.bldsttCcode
        ? {
            field: 'bldsttCcode',
            operator: 'eq',
            dataType: 'string',
            value: values.bldsttCcode
          }
        : null
    ].filter(Boolean)
  };
};

const initTable = (values: any) => {
  const params = buildSearchParams(values);
  tableRef.value.getList(params);
};

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

<style scoped lang="scss"></style>