<template>
    <div class="vol-dashboard">
        <div v-for="id in ids" :key="id" v-show="id == currentId"><vol-flow :id="id*1"></vol-flow> </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
//引用想要多开的页面，这个页面可以是生成的页面或者新建页面edit.vue
import volFlow from './Sys_FormWorkFlowApply.vue'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const ids = ref([])
const currentId = ref();
if (route.query.v+'') {
    ids.value.push(route.query.v)
    currentId.value = ids.value[0];
}
watch( () => route.query.v, // 监听的目标：路由参数 id
    (newId, oldId) => {
        currentId.value = newId;
        if (ids.value.includes(newId)) { return;}
        ids.value.push(newId)
    }
)
</script>

//添加路由配置，path与name、vue文件名要相同(改为实际自己定义的vue文件名)
{
    path: '/formWorkflow', //表单流程多页面显示
    name: 'formWorkflow',
    //改为formWorkflow.vue的地址
    component: () => import('@/views/sys/formflow/formWorkflow.vue'),
    meta: {
      multiPage: true,//这个是必须的
    },
  }
</script>

//上面标出来的位置添加下面的代码
const props = defineProps({
    id: {
        type: Object,
        default: null,
    },
});

const searchBefore = async (param) => {
    //界面查询前设置查询条件
    param.value = props.id;//后台的查询方法取出来
    //或者设置wheres条件
    param.wheres.push({
        name:"字段",
        value:props.id//传进来的值(也就是浏览器上的参数)
    })
    return true;
    //或者设置wheres条件
    //完整查询条件参数http://doc.volcore.xyz/docs/view-grid/methods/searchBefore.html
}