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

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

    <BasicTable ref="tableRef" :enableEllipsis="true" :scrollX="tableScrollX" :scrollY="tableScrollY" :columns="columns" :list-url="getFbPageList">
      <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>

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

    <DeleteConfirmModal ref="deleteModalRef" :delete-fn="deleteFbFn" :label="'鱼类增殖站'" title="删除鱼类增殖站" @success="handleEditSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';
import FbSearch from './FbSearch.vue';
import BasicTable from '@/components/BasicTable/index.vue';
import EditFbModal from './EditFbModal.vue';
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
import { getFbPageList, deleteFbInfo } 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: 160,fixed: 'left', ellipsis: true },
  { key: 'stcd', title: '增殖站编码', dataIndex: 'stcd', visible: true, width: 180,  ellipsis: true },
 
  { key: 'baseName', title: '水电基地', dataIndex: 'baseName', visible: true, width: 120, ellipsis: true },
  { key: 'ennm', title: '所属电站', dataIndex: 'ennm', visible: true, width: 100, ellipsis: true },
 
  { key: 'zzfldxName', title: '放流对象', dataIndex: 'zzfldxName', visible: true, width: 120, ellipsis: true },
  { key: 'zzflcnt', title: '放流规模(尾)', dataIndex: 'zzflcnt', visible: true, width: 120 },
 
  { key: 'zzflbjfs', title: '标记方式', dataIndex: 'zzflbjfs', visible: true, width: 100, ellipsis: true },
  { key: 'zzflar', title: '总占地面积(km²)', dataIndex: 'zzflar', visible: true, width: 140 },
  { key: 'inv', title: '投资(亿元)', dataIndex: 'inv', visible: true, width: 120 },
  { key: 'zzflrw', title: '承担放流任务', dataIndex: 'zzflrw', visible: true, width: 130, ellipsis: true },
   { key: 'zzflfllc', title: '放流地点', dataIndex: 'zzflfllc', visible: true, width: 260, ellipsis: true },

  { key: 'zzflyzms', title: '养殖模式', dataIndex: 'zzflyzms', visible: true, width: 220, ellipsis: true },
  { key: 'zzflgy', title: '生产工艺', dataIndex: 'zzflgy', visible: true, width: 180, ellipsis: true },
     { key: 'swdt', title: '开工日期', dataIndex: 'swdt', visible: true, width: 110, customRender: ({ text }) => { if (!text || text === '-') return '-'; const date = dayjs(text); return date.isValid() ? date.format('YYYY-MM-DD') : '-'; } },
  { key: 'jcdt', title: '建成日期', dataIndex: 'jcdt', visible: true, width: 110, customRender: ({ text }) => { if (!text || text === '-') return '-'; const date = dayjs(text); return date.isValid() ? date.format('YYYY-MM-DD') : '-'; } },
  { key: 'zzfltm', title: '放流时间', dataIndex: 'zzfltm', visible: true, width: 110, customRender: ({ text }) => { if (!text || text === '-') return '-'; const date = dayjs(text); return date.isValid() ? date.format('YYYY-MM-DD') : '-'; } },
   { key: 'addvcdName', title: '地址', dataIndex: 'addvcdName', visible: true, width: 200, ellipsis: true },
  { 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,
    values.sttp ? { field: 'sttp', operator: 'eq', dataType: 'string', value: values.sttp } : 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 deleteFbFn = async (record: any, reason: string) => deleteFbInfo({ 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>