84 lines
4.9 KiB
Vue
84 lines
4.9 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
|
||
|
|
<EqSearch @search-finish="onSearchFinish" @reset="onReset" @add="handleAdd" ref="searchRef" />
|
||
|
|
|
||
|
|
<BasicTable ref="tableRef" :enableEllipsis="true" :scrollX="tableScrollX" :scrollY="tableScrollY" :columns="columns" :list-url="getEqPageList">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<EditEqModal v-model:open="editVisible" :record="editRecord" :is-add="isAdd" @success="handleEditSuccess" />
|
||
|
|
|
||
|
|
<DeleteConfirmModal ref="deleteModalRef" :delete-fn="deleteEqFn" :label="'生态流量设施'" title="删除生态流量设施" @success="handleEditSuccess" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, onMounted, nextTick } from 'vue';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import EqSearch from './EqSearch.vue';
|
||
|
|
import BasicTable from '@/components/BasicTable/index.vue';
|
||
|
|
import EditEqModal from './EditEqModal.vue';
|
||
|
|
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
|
||
|
|
import { getEqPageList, deleteEqInfo } 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 bldsttMap: Record<number, string> = { 0: '规划', 1: '在建', 2: '已建' };
|
||
|
|
|
||
|
|
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: 'sttpName', title: '设施类型', dataIndex: 'sttpName', visible: true, width: 100, 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: 'bldsttCode', title: '建设状态', dataIndex: 'bldsttCode', visible: true, width: 80, customRender: ({ text }) => (text !== null && text !== undefined ? (bldsttMap[text] || text) : '-') },
|
||
|
|
{ key: 'minFlow', title: '最小下泄流量(m³/s)', dataIndex: 'minFlow', visible: true, width: 150 },
|
||
|
|
{ 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: 'stlc', title: '站址/位置', dataIndex: 'stlc', visible: true, 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 deleteEqFn = async (record: any, reason: string) => deleteEqInfo({ 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>
|