init

src/flow/components/handle-job/dynamic-link.vue

@@ -0,0 +1,62 @@
+<template>
+    <keep-alive v-if="data.currTabComp">
+        <component v-if="data.currTabComp" :key="props.currElTab.path" :is="data.currTabComp" :currJob="props.currJob" :currElTab="props.currElTab"
+                   @handleJob="handleJob"></component>
+    </keep-alive>
+</template>
+<script setup lang="ts" name="DynamicLink">
+    import {deepClone} from "/@/utils/other";
+    import {useMessage} from "/@/hooks/message";
+
+    const emits = defineEmits(["handleJob"]);
+
+    const props = defineProps({
+        currJob: {
+            type: Object,
+            default: null,
+        },
+        currElTab: {
+            type: Object,
+            default: null,
+        }
+    });
+    const data = reactive({
+        currTabComp: null,
+        preElTab: null
+    });
+
+    function handLoader() {
+        let path = props.currElTab.path;
+        if (!path) {
+            data.currTabComp = null
+            useMessage().error("不存在的表单，请检查")
+            return
+        }
+        data.currTabComp = `../../views${path}.vue`
+    }
+
+    function handleJob(jobBtn) {
+        emits("handleJob", jobBtn);
+    }
+
+    // 监听双向绑定
+    watch(
+        () => props.currElTab.active,
+        (val) => {
+            let b = props.currElTab.active !== data.preElTab.active && props.currElTab.path === data.preElTab.path;
+            if (b) {
+                data.preElTab = deepClone(props.currElTab)
+                data.currTabComp = null
+            }
+            handLoader()// 重载
+        }
+    );
+
+    onMounted(() => {
+        data.preElTab = deepClone(props.currElTab)
+        // 初始化
+        if (props.currElTab.path) handLoader()
+    });
+
+
+</script>