【vue3+ts】——a标签href跳转地址拼接
【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
·
【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>
跳转后的详情
更多推荐
已为社区贡献72条内容
所有评论(0)