参考链接:https://www.jianshu.com/p/3f7db4a282f9
<template>
<div class="mainCountry" style="background:white">
<div style="margin-bottom:5px;display: flex;justify-content: space-between;">
<el-radio-group v-model="radio" @change="handleRadio">
<el-radio :label="1">展开</el-radio>
<el-radio :label="2">收缩</el-radio>
</el-radio-group>
<el-button @click="handlegoUp" type="primary" plain>返回</el-button>
</div>
<el-container class="pageBox">
<el-aside style="margin-right:10px;height:100vh;" :class="[radio==1?'extendAside':'shrinkAside']">
<el-tree :props="defaultProps" node-key="id" :data="areaList" @node-click="handleNodeClick1" :highlight-current="highlightBd">
</el-tree>
</el-aside>
<el-container>
<el-main>
<div class="right">
<iframe :class="[radio==1?'shrink':'extend']" v-if="show" :src="iframeUrl" frameborder="0"></iframe>
<div class="please" v-else>请选择左侧执法支队!!!</div>
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { getOrgListApi } from "@/api/system";
import { formatDate } from "@/until/wordBook";
export default {
data() {
return {
radio: 1,
areaList: [],
highlightBd: true,
show: false,
tempData: null,
iframeUrl: null,
newToken: null, //调用单点登录获取token
defaultProps: {
children: "children",
label: "orgName",
},
};
},
created() {
// 获取树
getOrgListApi().then((res) => {
this.areaList = res.data;
});
},
methods: {
//返回上一层
handlegoUp(){
this.$router.go(-1)
},
async init(data) {
await this.handleNewSingle();
this.getAreaList(data);
},
// 单点登录获取token
handleNewSingle() {
return new Promise((resolve, reject) => {
fetch(
`${window.webConfig.newSingle}/law-case-api-service/payUrl/getAccountToken`,
{
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({
account: this.tempData.account,
phone: null,
idCard: null,
externalSystemId: null,
columnMap: null,
}),
}
)
.then((res) => res.json())
.then((res) => {
if (res.code == 200) {
this.newToken = JSON.parse(res.data).data;
resolve();
}
});
}); //promise结束
},
// 获取重庆下面区县
getAreaList(data) {
getOrgListApi().then((res) => {
if (res.data) {
this.areaList = res.data.map((item) => {
return {
account:item.account,
id: item.orgId,
orgId: item.orgId,
orgName: item.orgName,
orgOrder: item.orgOrder,
url: `${item.url}/home/productCase/productCaseListPage?token=${this.newToken}`,
};
});
this.areaList.forEach((item) => {
if (item.orgId == this.tempData.orgId) {
this.iframeUrl = item.url;
}
});
}
});
},
//点击tree触发的事件
handleNodeClick1(data) {
this.show = true;
// 获取token
this.tempData = data;
this.init();
},
//展开收缩方法
handleRadio(radio) {
this.radio = radio;
},
},
};
</script>
<style lang="less" scoped>
.pageBox {
// background: #e3e3e3 !important;
.extendAside {
width: 270px !important;
}
.shrinkAside {
width: 0px !important;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: rgba(135, 206, 235, 0.3);
color: #409eff; //节点的字体颜色
font-weight: bold;
}
/deep/ .page-body{
background: red !important;
}
.right {
overflow: hidden;
.extend {
width: calc(~"100vw - 0px");
height: 100vh;
position: relative;
top: -140px;
left: -200px;
}
.shrink {
width: calc(~"100vw - 289px");
height: 100vh;
position: relative;
top: -140px;
left: -200px;
}
.please {
margin-top: 80px;
display: flex;
justify-content: center;
}
}
}
</style>
async init() {
const aaa = await this.getOrgList();
console.log('aaa',aaa)
},
// 调用查看接口
getInfo() {},
// 获取部门
getOrgList() {
return new Promise((resolve, reject) => {
apiOrgSearch().then((res) => {
console.log("人机构列表", res);
this.orgList = res.data;
this.orgListTree = getTree(
res.data,
"orgId",
"parentCode",
"isParent",
true
);
resolve(res.data) //resolve中res.data就是上面aaa得到的
})
});
},
执行完一个要resolve(),不然不知道你是否成功就不会执行下一个代码
网友评论