64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
<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>
|