【vue3+ts】——a标签href跳转地址拼接

结构

 <span v-else>
     <a style='color:#409EFF;font-size:14px'  
        :href=reportForm.detailUrl>【点击链接可进入系统进行审批】
     </a>
 </span>

详细版

 <lise-message class='pt-16 pb-16' :file='fileList' :title='reportForm.title'>
	<div 
         class='mt-16 pl-24 pr-24' 
         style="display:inline-block;font-size:14px" 
         v-html='reportForm.content'>
    </div>
    <span v-if="reportForm.paramSource==null"></span>
    <span v-else>
        <a style='color:#409EFF;font-size:14px'  
           :href=reportForm.detailUrl>【点击链接可进入系统进行审批】
        </a>
     </span>
</lise-message>

查看详情-跳转效果

操作流程

接口

网址-格式

http://ehrtest.staff.y0z0l.net.cn/getProcess?mcNo=MCNO&code=CODE&processAuditId=PROCESSAUDITID&processId=PROCESSID&id=ID&tabIdx=TABIDX

网址-接口数据

{"id":2436,"appNo":"LE20210903095959658038159","code":"100001","processAuditId":"20210903095959640792140","processId":383,"tabIdx":"0"}

网址-真实数据

http://ehrtest.staff.y0z0l.net.cn/myProcess?mcNo=undefined&code=100001&processAuditId=20210906142745668931311&processId=383&id=2596&tabIdx=1

请求-跳转时获取数据

代码

<script lang='ts'>
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
import LiseMessage from '@/components/ListMessage.vue';
import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
    name: 'index',
    components: { YzlElTable, UnderCrumbs, Crumbs, LiseMessage },
    setup(props, context) {
        watch(() => msgCode.value, (val) => {
            funcList.getMessageView();
        });        
        // 当前页面数据
        const state = reactive({
            reportForm: {
                title: '',
                detailUrl: '',
                content: '',
            }
        });
        const funcList = {
            // 返回
            goBack() {
                router.go(-1);
            },
            getMessageView() {
                    PersonMessage.getPeopleView(msgCode.value).then(
                        res => {
                            state.reportForm.title = res.data.title;                 
                            state.reportForm.content = res.data.content;
                            state.reportForm.paramSource =JSON.parse(res.data.paramSource) ;
                            // console.log( JSON.parse(res.data.paramSource).code,"hhhhhhhhhhh");
                            // console.log( state.reportForm.paramSource,"ggggggggg");
                            //    myProcess?mcNo=appNo&code=code&processAuditId=processAuditId&processId=processId&id=id&tabIdx=tabIdx';
                            if(res.data.paramSource!=null){
                                state.reportForm.paramSource =res.data.paramSource ;
                                state.reportForm.detailUrl =
                                    'myProcess?mcNo='+JSON.parse(res.data.paramSource).appNo+'&'+
                                    'code='+JSON.parse(res.data.paramSource).code+'&'+
                                    'processAuditId='+JSON.parse(res.data.paramSource).processAuditId+'&'+
                                    'processId='+JSON.parse(res.data.paramSource).processId+'&'+
                                    'id='+JSON.parse(res.data.paramSource).id+'&'+
                                    'tabIdx='+JSON.parse(res.data.paramSource).tabIdx;
                            }
                        }
                    );
            };
        funcList.getMessageView();
        
        // 生命周期
        return {
            flag,
            ...toRefs(state),
            ...funcList
        };
    }
});   

<style lang='scss' scoped>
:deep {
    .el-card .el-card__body {
        padding: 16px 86px 24px 86px;
    }
}

table {
    border-collapse: collapse;
}

:deep {
    tr {
        //border: ;
        background-color: #FFFFFF;
    }
}

th {
    background: #f1f1f1;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    height: 48px;
    text-align: left;
}

.wrap {
    margin: 0 auto;
    
    .content {
        .desc {
            text-indent: 20px;
            margin-top: 22px;
            line-height: 22px;
        }
    }
    
    .color-wrap {
        padding: 10px 18px;
        background: #E8F4FF;
        border-radius: 3px;
        box-sizing: border-box;
        border: 1px solid #B4DBFF;
    }
}
</style>         

跳转后的详情