bxztApp/packages/screen/src/views/EquipmentManagement/index.js

import { h, ref, onMounted, reactive, watch, toRaw } from "vue";
import { request } from "@/utils/request";
import { Search } from "@element-plus/icons-vue";
import MyDialog from "../../component/MyDialog";
import { ElMessage } from "element-plus";

const treeData = ref([]);
const treeProps = {
    children: "children",
    label: "name",
    key: "id",
}
const filterText = ref(''); // 树节点过滤条件
const tableData = ref([]);
const qxmc = ref(''); // 区县名称
const yhzid = ref(''); // 养护站id
const filterData = reactive({
    sbmc: '',
    sbdl: '',
    sblx: '',
    sbzt: '',
}); // 表格过滤条件
const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizes: [10, 20, 50],
    layout: "prev, pager, next, jumper",
    onChange: (page, pageSize) => {
        pagination.current = page;
        pagination.pageSize = pageSize;
        getyhzsbList(filterData);
    },
});

// 节点过滤函数
const filterNode = (value, node) => {
    const keyword = (value || '').toLowerCase();

    const nodeData = node || {}

    // 处理区域节点匹配
    if (nodeData.type === 'area') {
        return (nodeData.rawName || '').toLowerCase().includes(keyword)
    }

    // 处理站点节点匹配
    if (nodeData.type === 'site') {
        const parentData = node.parent?.data?.type === 'area' ? node.parent.data : {}
        const parentMatch = (parentData.rawName || '').toLowerCase().includes(keyword)
        return parentMatch || (nodeData.name || '').toLowerCase().includes(keyword)
    }

    return false
}
// 获取养护站列表分组
const getTreeData = async () => {
    try {
        const res = await request({
            url: '/api/yhz/listAreaGroup',
            method: 'GET'
        })
        if (res.code === '00000') {
            treeData.value = Object.entries(res.data).map(([areaName, sites]) => ({
                id: areaName,
                name: `${areaName}(${sites.length})`,
                type: 'area',
                children: sites.map(site => ({
                    id: site.id,
                    name: site.mc,
                    type: 'site'
                })),
                rawName: areaName // 原始名称
            }));
            console.log('treeData', toRaw(treeData.value))
        } else {
            throw new Error(res.message);
        }
    } catch (error) {
        ElMessage.error(error.message);
        console.log(error);
    }
};
// 处理节点点击事件
const handleNodeClick = (data) => {
    if (data.type === 'area') {
        console.log('你点击的是区县', data.id)
        yhzid.value = ''; // 重置养护站id
        qxmc.value = data.id; // 保存区县名称

    }
    if (data.type === 'site') {
        console.log('你点击的是站点', data.name)
        yhzid.value = data.id; // 保存养护站id
        qxmc.value = ''; // 重置区县名称
    }
};

// 获取养护站设备列表
const getyhzsbList = async (qxmc, yhzid, filterData) => {
    try {
        const data = {
            qxmc: qxmc,
            yhzid: yhzid,
            sbmc: filterData?.sbmc || '',
            sbdl: filterData?.sbdl || '',
            sblx: filterData?.sblx || '',
            sbzt: filterData?.sbzt || '',
            pageNum: pagination.current,
            pageSize: pagination.pageSize,
        }
        const res = await request({
            url: '/api/yjsb/list',
            method: 'GET',
            params: data,
        })
        if (res.code === '00000') {
            tableData.value = res.data.records;
            pagination.total = res.data.total;
        } else {
            tableData.value = [];
            pagination.total = 0;
            throw new Error(res.message);
        }
    } catch (error) {
        ElMessage.error(error.message);
        console.log(error);
    }
};

const columns = [
    {
        prop: 'sbzt',
        label: '设备状态',
    },
    {
        prop: 'sbmc',
        label: '设备名称',
    },
    {
        prop: 'sbbh',
        label: '设备编号',
    },
    {
        prop: 'sbxh',
        label: '设备型号',
    },
    {
        prop: 'sbdl',
        label: '设备大类',
    },
    {
        prop: 'sblx',
        label: '设备类型',
    },
    {
        prop: 'gzrq',
        label: '购置日期',
    },
    {
        prop: 'gmfy',
        label: '购买费用（万元）',
    },
    {
        prop: 'qxmc',
        label: '所属区县',
    },
    {
        label: "操作",
        fixed: "right",
        width: 150,
        render: (row) => () =>
            h("div", { class: "action-btns" }, [
                h(
                    ElButton,
                    {
                        type: "primary",
                        link: true,
                        onClick: async () => {
                            await getDetailData(row);
                            dialogVisible.value = true;
                        },
                    },
                    () => "详情"
                ),
            ]),
    },
]


export default () => {

    const treeRef = ref(null);
    watch(() => filterText.value, (val) => {
        treeRef.value.filter(val || '')
    })

    watch(
        [() => filterData, qxmc, yhzid],
        ([newFilterData, newQxmc, newYhzid]) => {
            getyhzsbList(newQxmc, newYhzid, newFilterData)
        },
        { deep: true }
    )


    onMounted(() => {
        getTreeData();
        getyhzsbList();
    });
    return {
        treeRef,
        treeData,
        treeProps,
        filterText,
        filterNode,
        handleNodeClick,

        tableData,
        filterData,
        pagination,
        columns,
    }
}