WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/qiXiDi/index.vue

<template>
  <div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
    <FhSearch
      @search-finish="onSearchFinish"
      @reset="onReset"
      @add="handleAdd"
      ref="searchRef"
    />

    <BasicTable
      ref="tableRef"
      :enableEllipsis="true"
      :scrollX="tableScrollX"
      :scrollY="tableScrollY"
      :columns="columns"
      :list-url="getFhPageList"
    >
      <template #action="{ record }">
        <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>
    </BasicTable>

    <EditFhModal
      v-model:open="editVisible"
      :record="editRecord"
      :is-add="isAdd"
      @success="handleEditSuccess"
    />

    <DeleteConfirmModal
      ref="deleteModalRef"
      :delete-fn="deleteFhFn"
      :label="'栖息地'"
      title="删除栖息地"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import FhSearch from './FhSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import EditFhModal from './EditFhModal.vue';
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import { getFhPageList, deleteFhInfo } 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 editVisible = ref(false);
const editRecord = ref<any>(null);
const isAdd = ref(false);
const deleteModalRef = ref();

const columns = ref<any[]>([
   { key: 'stnm', title: '栖息地名称', dataIndex: 'stnm', visible: true, width: 260, ellipsis: true },
  { key: 'stcd', title: '栖息地站码', dataIndex: 'stcd', visible: true, width: 320, fixed: 'left', ellipsis: true },
  { key: 'baseName', title: '水电基地', dataIndex: 'baseName', visible: true, width: 120, ellipsis: true },
  { key: 'ennm', title: '所属电站', dataIndex: 'ennm', visible: true, width: 150, ellipsis: true },
  { key: 'bhdxName', title: '保护对象', dataIndex: 'bhdxName', visible: true, width: 240, ellipsis: true },
  { key: 'bhhl', title: '保护河流', dataIndex: 'bhhl', visible: true, width: 120, ellipsis: true },
  { key: 'bhhd', title: '保护河段', dataIndex: 'bhhd', visible: true, width: 240, ellipsis: true },
  { key: 'bhfw', title: '保护范围', dataIndex: 'bhfw', visible: true, width: 120, ellipsis: true },
  { key: 'bhhxcd', title: '保护核心长度(km)', dataIndex: 'bhhxcd', visible: true, width: 140 },
  
  { key: 'bhcs', title: '保护措施', dataIndex: 'bhcs', visible: true, width: 120, ellipsis: true },
  { key: 'bhfs', title: '保护方式', dataIndex: 'bhfs', visible: true, width: 120, ellipsis: true },
  { key: 'inv', title: '投资（亿元）', dataIndex: 'inv', visible: true, width: 120 },
    { key: 'stlc', title: '站址', dataIndex: 'stlc', visible: true,  ellipsis: true,width: 220 },
  { key: 'action', title: '操作', dataIndex: 'action', fixed: 'right', width: 120 },
  
]);

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

const buildSearchParams = (values: any) => ({
  logic: 'and',
  filters: [
    values.rstcd ? { field: 'rstcd', operator: 'eq', dataType: 'string', value: values.rstcd } : null,
    values.baseId !== 'all' && values.baseId != null ? { field: 'baseId', operator: 'eq', dataType: 'string', value: values.baseId } : null,
    values.stnm ? { field: 'stnm', operator: 'contains', dataType: 'string', value: values.stnm } : null
  ].filter(Boolean)
});

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

const handleAdd = () => { isAdd.value = true; editRecord.value = null; editVisible.value = true; };
const handleEdit = (record: any) => { isAdd.value = false; editRecord.value = { ...record }; editVisible.value = true; };
const handleEditSuccess = () => { initTable(currentSearchParams.value); };

const deleteFhFn = async (record: any, reason: string) => deleteFhInfo({ ids: [record.stcd], source: reason });

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

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

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