368 lines
11 KiB
Vue
368 lines
11 KiB
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>
|