logic-helper/src/pages/TopoList/index.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import {
    ref,
    toRaw,
    isRef,
    reactive,
    computed,
    onBeforeUnmount,
    watchEffect
} from 'vue';
import {
    store
} from '@/common/js/app.js'
import {
    ElMessage,
    ElMessageBox
} from 'element-plus'
export const topoDrawer = ref(false)

export const createTopo = (data) => {
    if (isRef(data)) {
        data = toRaw(data.value)
    }
    if(!store.storage.logic[data.id]){
        store.handler('create_topo', {
            id: data.id,
            config: data
        })
    } else {
        store.handler('edit_topo', {
            id: data.id,
            config: data
        })
    }
    topoDrawer.value = false;
}


export const groupData = ref({
    name: '',
    id: '',
    introduce: ''
})


export const setGroupData = (data) => {
    groupData.value = data
}

export const useRunningTip = () => {

    const runningTopoId = computed(() => store.controller.topoId)
    const watcher = watchEffect(() => {
        if (runningTopoId.value) {
            ElNotification({
                title: '运行',
                message: topoMap.value[runningTopoId.value] ? `${runningTopoId.value} 模块正在运行` : `不存在的模块 ${runningTopoId.value}`,
                duration: 2000,
            })
        }
    })
    onBeforeUnmount(() => {
        watcher();
    })
    return runningTopoId
}
export const useFilteGroup = () => {
    let allGroups = computed(() => {
        const set = {};
        for (let k in store.storage.logic) {
            if (k != '.config') {
                if (Array.isArray(store.storage.logic[k].config.group)) {
                    store.storage.logic[k].config.group = store.storage.logic[k].config.group[0];
                }
                store.storage.logic[k].config.group = store.storage.logic[k].config.group || 'index';
                set[store.storage.logic[k].config.group] = set[store.storage.logic[k].config.group] || [];
                set[store.storage.logic[k].config.group].push(store.storage.logic[k]);
            }
        }
        return set;
    });
    let keyword = ref([]);
    const group = computed(() => {
        const map = {};
        if(keyword.value.length){
            keyword.value.map(item => {
                map[item] = allGroups.value[item];
            });
            return map;
        }
        return allGroups.value;
    });
    return {
        allGroups,
        group,
        keyword
    }
}

export const deleteTopo = val => {
    ElMessageBox.alert('确认删除该图？', '删除提示', {
        confirmButtonText: '确定',
        callback: (action) => {
            if (action === 'confirm') {
                store.handler('del_topo', val);
            }
        },
    })
}