美文网首页
async await

async await

作者: jesse28 | 来源:发表于2022-10-07 16:08 被阅读0次

参考链接: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(),不然不知道你是否成功就不会执行下一个代码

相关文章

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async/await

    async/await async/await 是Generator的语法糖。 Generator 通过将Gene...

  • 小程序-云开发

    async和await async:异步(无等待)await:等待(是为了同步) 一、await 关键字只在 as...

网友评论

      本文标题:async await

      本文链接:https://www.haomeiwen.com/subject/ethwartx.html