82 lines
4.7 KiB
Vue
82 lines
4.7 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
|
||
|
|
<VpSearch @search-finish="onSearchFinish" @reset="onReset" @add="handleAdd" ref="searchRef" />
|
||
|
|
|
||
|
|
<BasicTable ref="tableRef" :enableEllipsis="true" :scrollX="tableScrollX" :scrollY="tableScrollY" :columns="columns" :list-url="getVpPageList">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<EditVpModal v-model:open="editVisible" :record="editRecord" :is-add="isAdd" @success="handleEditSuccess" />
|
||
|
|
|
||
|
|
<DeleteConfirmModal ref="deleteModalRef" :delete-fn="deleteVpFn" :label="'珍稀植物园'" title="删除珍稀植物园" @success="handleEditSuccess" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, onMounted, nextTick } from 'vue';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import VpSearch from './VpSearch.vue';
|
||
|
|
import BasicTable from '@/components/BasicTable/index.vue';
|
||
|
|
import EditVpModal from './EditVpModal.vue';
|
||
|
|
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
|
||
|
|
import { getVpPageList, deleteVpInfo } 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: 150, ellipsis: true },
|
||
|
|
{ key: 'stcd', title: '植物园编码', dataIndex: 'stcd', visible: true, width: 150, 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: 'area', title: '面积(km²)', dataIndex: 'area', visible: true, width: 120 },
|
||
|
|
{ key: 'inv', title: '投资(亿元)', dataIndex: 'inv', visible: true, width: 120 },
|
||
|
|
{ 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: 'bhfs', title: '保护方式', dataIndex: 'bhfs', visible: true, width: 200, ellipsis: true },
|
||
|
|
{ key: 'stlc', title: '站址', dataIndex: 'stlc', 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 deleteVpFn = async (record: any, reason: string) => deleteVpInfo({ 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>
|