WholeProcessPlatform/frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue

<!-- SidePanelItem.vue -->
<template>
    <!-- 数据表格 -->
    <BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :search-params="{}"
        :transform-data="customTransform">
        <template #action="{ record }">
            <a @click="handleViewDetail(record)" class="text-link">
                查看详情
            </a>
        </template>
    </BasicTable>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { vmsstbprptGetKendoList } from '@/api/gyss'
import BasicTable from '@/components/BasicTable/index.vue'
import { useModelStore } from "@/store/modules/model";

const modelStore = useModelStore();
// 定义组件名（便于调试和递归）
defineOptions({
    name: 'guoyusheshijiansheqingkuang'
});
const props = defineProps<{
    baseid: any,
    currentItem: any
}>()
const columns = ref([
    {
        key: 'stnm',
        dataIndex: 'stnm',
        title: '名称',
    },
    {
        key: 'ennm',
        dataIndex: 'ennm',
        title: '所属电站',
    },
    {
        key: 'stlc',
        dataIndex: 'stlc',
        title: '位置',
    },
    {
        key: 'action',
        title: '操作',
        width: 100,
        align: 'center' as const,
        fixed: 'right' as const,
        slots: { customRender: 'action' }
    }
])
const tableRef = ref()

// 自定义数据转换
const customTransform = (res: any) => {
    return {
        records: res?.data?.data || [],
        total: res?.data?.total || 0
    }
}
// 查看详情
const handleViewDetail = (record: any) => {
    modelStore.modalVisible = true;
    modelStore.params.sttp = record.sttpCode;
    modelStore.title = record.stnm ;
    modelStore.params.stcd = record.stcd;
}
// 页面加载时执行
onMounted(() => {
    // const props = defineProps<{
    //     baseid: any,
    //     currentItem: any
    // }>()
    // 延迟初始化，确保容器已渲染
    const filter = {
        "logic": "and",
        "filters": [
            {
                "field": "sttpCode",
                "operator": "eq",
                "dataType": "string",
                "value": props.currentItem.sttp
            },
            props.baseid != 'all' ? {
                "field": "baseId",
                "operator": "eq",
                "dataType": "string",
                "value": props.baseid,
            } : null
        ].filter(Boolean)
    }
    tableRef.value?.getList(filter)
});

// 组件卸载时清理
onUnmounted(() => {

});


</script>

<style lang="scss" scoped>
.text-link {
    color: #2f6b98;

    &:hover {
        color: #40a9ff;
    }
}
</style>