zhgdyun/src/views/workSpace/index.vue

<template>
  <!-- 项目首页 -->
  <div class="fullHeight">
    <vhead
      :titleName="projectName"
      :showR="true"
      v-if="!selectGroupDialog&&postMessageDataList.length>0"
    ></vhead>
    <div class="content-part" v-if="!selectGroupDialog && workSpaceShow">
      <iframe
        id="myIframe"
        ref="myIframeRef"
        :src="
          `${$store.state.WORKFLOWURL}?token=${$store.state.userInfo.token}&projectSn=${$store.state.projectSn}`
        "
        style="width: 100%; height: 100%; border: medium none"
        frameborder="1"
      ></iframe>
    </div>
    <div class="placeholderBox" v-if="!selectGroupDialog && !workSpaceShow">
      <img src="@/assets/images/noData.png" alt="" />
      <p>暂无数据</p>
    </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" :style="{height: groupListData.length > 4?'300px':'auto'}">
        <vue-scroll style="height: 100%;">
          <div
            class="content-list-item"
            v-for="(item, index) in groupListData"
            :key="index"
            @click="selectedGroupData(item)"
          >
            <!-- <i class="el-icon-trophy-1"></i> -->
            <img src="@/assets/images/headerImg/icon3.png" />
            <span>{{ item.companyName }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </vue-scroll>
        <!-- <div class="content-list-item" @click="selectedGroupData()">
          <img src="@/assets/images/headerImg/icon4.png" />
          <span>{{ $store.state.userInfo.account }}</span>
          <div>个人租户</div>
          <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 { getGroupListByCompanyApi, jumpLargeUserInfoApi } from "@/assets/js/api/loginSign.js";
import {
  getAllModuleApi,
  getNewUserAllModulePageApi,
} from "@/assets/js/api/jxjadmin.js";
import { getComapnyStatisticsSupplierListApi } from "@/assets/js/api/company/project";
export default {
  name: "workSpace",
  components: { vhead },
  data() {
    return {
      workSpaceShow: false,
      projectSn: "",
      projectName: "",
      selectGroupDialog: false,
      groupListData: [],
      selectedDataSn: "",
      postMessageDataList: [],
    };
  },
  created() {
    // if (!this.$store.state.selectedGroupSn) {
    //   this.selectGroupDialog = true;
    // }
    this.getGroupTreeData();
  },
  mounted() {
    // 挂载后来给iframe传递菜单数据
    if (this.$store.state.selectedGroupSn && !this.selectGroupDialog) {
      this.getModuleList();
    }
  },
  beforeDestroy() {
    // 移除事件监听器，避免内存泄漏
    let iframe = this.$refs.myIframeRef;
    iframe.removeEventListener("load", this.onIframeLoad);
  },
  methods: {
    // 查询全部模块
    getModuleMenuList() {
      getNewUserAllModulePageApi({
        projectSn: this.$store.state.projectSn,
        userId: this.$store.state.userInfo.userId,
      }).then((res) => {
        console.log(res,'我爱你测试')
        this.$store.commit("setUserInfo", {
          ...this.$store.state.userInfo,
          menuAuthority: {
            menuList: res.result.menuList,
            moduleList: res.result.moduleList
          }
        });
      });
    },
    onIframeLoad() {
      // iframe加载完毕后
      // 传递的工作流菜单
      const defaultMenuList = [
        {
          menuName: "审批列表",
          path: "/workspace/forms",
          icon: "el-icon-s-order",
        },
        {
          menuName: "待我处理",
          path: "/workspace/unfinished",
          icon: "el-icon-s-check",
        },
        {
          menuName: "已处理的",
          path: "/workspace/finished",
          icon: "el-icon-s-custom",
        },
        {
          menuName: "我发起的",
          path: "/workspace/submit",
          icon: "el-icon-s-claim",
        },
        {
          menuName: "关于我的",
          path: "/workspace/cc",
          icon: "el-icon-s-promotion",
        },
      ];

      // console.error("================发消息之前的userInfo==================")
      // console.error(this.$store.state.userInfo)
      // console.error("================发消息之前的userInfo==================")
      
      // console.error("================发消息之前的projectSn==================")
      // console.error(this.$store.state.projectSn)
      // console.error("================发消息之前的projectSn==================")

      // let iframe = document.getElementById("myIframe");
      let iframe = this.$refs.myIframeRef;
      iframe.contentWindow.postMessage(
        {
          type: "emitData",
          data: JSON.stringify({
            ...this.$store.state.userInfo,
            projectSn: this.$store.state.projectSn,
          }),
          authMenuList:
            this.postMessageDataList.length > 0
              ? JSON.stringify(this.postMessageDataList)
              : JSON.stringify(defaultMenuList),
        },
        "*"
      );
    },
    // 查询全部模块(拿到工作流的模块菜单)
    getModuleList() {
      getNewUserAllModulePageApi({
        projectSn: this.$store.state.projectSn,
        moduleType: 7,
        userId: this.$store.state.userInfo.userId,
      }).then((res) => {
        // 传递的工作流菜单
        const responseMenuList = [];
        let all = res.result.moduleList;
        if (all.length == 0) {
          this.workSpaceShow = false;
          return;
        } else {
          this.workSpaceShow = false;
          all.forEach((element, index) => {
            if (element.moduleName == "工作台") {
              this.workSpaceShow = true;
            }
          });
        }
        console.log("all", res.result);
        all.forEach((element, index) => {
          all[index].operation = false;
          if (element.moduleName == "工作台") {
            element.menuList.forEach((element2) => {
              all[index].operation = true;
              responseMenuList.push({
                menuName: element2.menuName,
                path: element2.path,
                icon: element2.icon,
              });
            });
          }
        });
        console.log(responseMenuList, "我的测试11112222222222");
        this.postMessageDataList = responseMenuList;
        this.$nextTick(() => {
          let iframe = this.$refs.myIframeRef;
          iframe.addEventListener("load", this.onIframeLoad);
        })
      });
    },
    // 默认选中已选中组织的第一个项目
    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
          console.log(obj.sn,'我爱你测试')
          this.$store.commit("setProjectSn", obj.sn);
        }
          this.getModuleMenuList();
          this.getDataDateils();
      }
    },
    // 点击选中组织
    selectedGroupData(item) {
      let data = {
        token: this.$store.state.userInfo.token,
        headquartersSn: item.companySn
      };
      jumpLargeUserInfoApi(data).then((res) => {
        console.log(res,'重新获取信息');
        if(res.result){
          this.$store.commit("setUserInfo", res.result);
            console.log(item,123456789)
          if (item) {
            this.selectedDataSn = item.companySn;
            this.$store.commit("setSelectedGroupSn", item.companySn); // 存储选中的组织Sn
            this.selectedDefaultProject(item);
          } else {
            let storeVal = this.$store.state.userInfo;
            this.selectedDataSn = storeVal.headquartersSn;
            this.$store.commit("setSelectedGroupSn", storeVal.headquartersSn); // 存储选中的组织Sn
            // this.selectedDefaultProject(storeVal.userInfo);
          }
          this.selectGroupDialog = false;
          this.getModuleList();
        }
      });
    },
    getGroupTreeData() {
      let data = {
        userId: this.$store.state.userInfo.userId,
        // headquartersSn: this.$store.state.userInfo.headquartersSn
      };
      // getGroupListByCompanyApi
      getGroupListByCompanyApi(data).then((res) => {
        // console.log(res);
        if (res.code == 200 && res.result) {
          this.groupListData = res.result;
          console.log("this.groupListData",this.groupListData)
          if(this.groupListData.length==1){
            this.selectedGroupData(this.groupListData[0]);
          }else{
            this.selectGroupDialog = true
          }
          this.$store.commit("setGroupTreeList", res.result); // 存储组织树数据
        }
      });
    },
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          this.projectName = res.result.projectName;
          document.title = this.projectName;
          this.$store.commit("setProDetail", res.result);
        }
      });
    },
  },
  watch: {
    params: {
      deep: true,
      handler() {
        this.getUserNotify();
      },
    },
    "$store.state.projectSn": {
      deep: true,
      // immediate: true,
      handler(to, from) {
        console.log(to, "最新值");
        if (this.$store.state.projectSn) this.getModuleList();
      },
    },
  },
};
</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;
    img {
      width: 30px;
      height: 30px;
    }
    // >div{
    //   border: 1px solid #7299F8;
    //   border-radius: 5px;
    //   background-color: #E3F6FF;
    //   padding: 5px 15px;
    //   color: #5A88F7;
    // }
    > span:nth-child(2) {
      margin: 0px 15px 0px 10px;
    }
    > div {
      padding: 3px 10px;
      color: #79acfa;
      background-color: #e4f5ff;
      border: 1px solid #99c3fb;
      border-radius: 5px;
      margin-top: 2px;
      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>