53 lines
4.5 KiB
Vue
53 lines
4.5 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full h-full flex flex-col pt-[20px] pl-[20px] body_one">
|
||
|
|
<VaSearch @search-finish="onSearchFinish" @reset="onReset" @add="handleAdd" ref="searchRef" />
|
||
|
|
<BasicTable ref="tableRef" :enableEllipsis="true" :scrollX="tableScrollX" :scrollY="tableScrollY" :columns="columns" :list-url="getVaPageList">
|
||
|
|
<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>
|
||
|
|
<EditVaModal v-model:open="editVisible" :record="editRecord" :is-add="isAdd" @success="handleEditSuccess" />
|
||
|
|
<DeleteConfirmModal ref="deleteModalRef" :delete-fn="deleteVaFn" :label="'动物救助站'" title="删除动物救助站" @success="handleEditSuccess" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, onMounted, nextTick } from 'vue';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import VaSearch from './VaSearch.vue';
|
||
|
|
import BasicTable from '@/components/BasicTable/index.vue';
|
||
|
|
import EditVaModal from './EditVaModal.vue';
|
||
|
|
import DeleteConfirmModal from '@/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue';
|
||
|
|
import { getVaPageList, deleteVaInfo } from '@/api/DataQueryMenuModule';
|
||
|
|
import { calcTableScrollY } from '@/utils/index';
|
||
|
|
const tableRef = ref(), searchRef = ref(), tableScrollY = ref<string | number>(0), currentSearchParams = ref<any>({});
|
||
|
|
const editVisible = ref(false), editRecord = ref<any>(null), isAdd = ref(false), deleteModalRef = ref();
|
||
|
|
const columns = ref<any[]>([
|
||
|
|
{ key: 'stnm', title: '救助站名称', dataIndex: 'stnm', visible: true, width: 200, fixed: 'left', ellipsis: true },
|
||
|
|
{ key: 'stcd', title: '救助站编码', dataIndex: 'stcd', visible: true, width: 160, ellipsis: true },
|
||
|
|
{ key: 'sttpName', title: '测站类型', dataIndex: 'sttpName', visible: true, width: 100, ellipsis: true },
|
||
|
|
{ key: 'stlc', title: '站址', dataIndex: 'stlc', visible: true, width: 160, ellipsis: true },
|
||
|
|
{ key: 'baseName', title: '水电基地', dataIndex: 'baseName', visible: true, width: 100, ellipsis: true },
|
||
|
|
{ key: 'ennm', title: '所属电站', dataIndex: 'ennm', visible: true, width: 100, ellipsis: true },
|
||
|
|
{ key: 'place', title: '地点', dataIndex: 'place', visible: true, width: 120, ellipsis: true },
|
||
|
|
{ key: 'usflName', title: '是否启用', dataIndex: 'usflName', visible: true, width: 80, ellipsis: true },
|
||
|
|
{ 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: 'remark', title: '备注', dataIndex: 'remark', 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' ? { 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) => { const params = buildSearchParams(values); tableRef.value.getList(params); };
|
||
|
|
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 deleteVaFn = async (record: any, reason: string) => deleteVaInfo({ 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>
|