zhgdyun/src/views/workSpace/index.vue

<template>
    <!-- 项目首页 -->
    <div class="fullHeight">
      <vhead :titleName="projectName" :showR="true" v-if="!selectGroupDialog"></vhead>
      <div class="content-part" v-if="!selectGroupDialog">
        <iframe
          id="myIframe"
          :src="`${$store.state.WORKFLOWURL}?token=${$store.state.userInfo.token}`"
          style="width: 100%; height: 100%; border: medium none"
          frameborder="1"
        ></iframe>
      </div>
      <!-- 查看大图 -->
      <el-dialog
        title="选择组织"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :visible.sync="selectGroupDialog"
      >
      <div class="content-list">
            <div class="content-list-item" v-for="(item,index) in groupListData" :key="index" @click="selectedGroupData(item)">
              <i class="el-icon-trophy-1"></i>
              <span>{{item.companyName}}</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import vhead from "@/components/header";
  import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
  import { getGroupListApi } from "@/assets/js/api/loginSign.js";
  export default {
    name: "workSpace",
    components: { vhead },
    data() {
      return {
        projectSn: "",
        projectName: "",
        selectGroupDialog: true,
        groupListData: [],
        selectedDataSn: ""
      };
    },
    created() {
      this.getGroupTreeData();
    },
    methods: {
      // 默认选中已选中组织的第一个项目
      selectedDefaultProject(obj){
        if (obj.list && obj.list.length > 0) {
          obj.list.map((item) => {
            this.selectedDefaultProject(item);
          });
        } else {
          this.projectSn = this.$store.state.projectSn || '';
          if(!this.projectSn){ // 加判断是为了在循环中只选中第一个
            this.projectSn = obj.sn;
            // 修改全局projectSn
            this.$store.commit("setProjectSn", obj.sn);
            this.getDataDateils();
          }
        }
      },
      // 点击选中组织
      selectedGroupData(item) {
        this.selectedDataSn = item.sn;
        this.$store.commit("setSelectedGroupSn", this.selectedDataSn); // 存储选中的组织Sn
        this.selectGroupDialog = false;
        this.selectedDefaultProject(item);
        this.$nextTick(() => {
          setTimeout(() => {
            let iframe = document.getElementById("myIframe");
            iframe.contentWindow.postMessage(
              {
                type: "emitData",
                data: JSON.stringify(this.$store.state.userInfo)
              },
              "*"
            );
          }, 1000);
        })
      },
      getGroupTreeData(){
        let data = {
          userId: this.$store.state.userInfo.userId,
        };
        getGroupListApi(data).then((res) => {
          // console.log(res);
          if (res.code == 200 && res.result) {
            this.groupListData = res.result;
            this.$store.commit("setGroupTreeList", res.result); // 存储组织树数据
          }
        });
      },
      //获取详情
      getDataDateils() {
        let data = {
          projectSn: this.projectSn,
        };
        getProjectDetail(data).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.projectName = res.result.projectName;
            document.title = this.projectName;
            this.$store.commit("setProDetail", res.result);
          }
        });
      }
    }
  };
  </script>
  <style lang="less" scoped>
  .flexStyle(){
    display: flex;
    align-items: center;
}
  .content-part{
    width: 100%;
    height: calc(100% - 60px);
    border: 1px solid #ccc;
    margin: 0 auto;
  }
  .content-list{
    &-item{
      .flexStyle();
      padding: 10px 15px;
      border: 1px solid #DADBDB;
      border-radius: 5px;
      cursor: pointer;
      >span:nth-child(2){
        margin: 2px 10px 0px 10px;
      }
      >span:nth-child(3){
        padding:3px 10px;
        color: #79ACFA;
        background-color: #E4F5FF;
        border: 1px solid #99C3FB;
        border-radius: 5px;
        font-size: 10px;
      }
      /deep/.el-icon-arrow-right{
        margin-left: auto;
      }
    }
    &-item:not(:last-child){
      margin-bottom: 10px;
    }
  }
  /deep/.el-dialog{
    width: 25%;
    .el-dialog__body{
      padding-top: 10px;
      padding-bottom: 15px;
    }
  }
  </style>