spfm-market-front/src/pages/main/leader/processInitiation.vue

<template>
	<div class="pmain">
		<div class="layui-col-md6" v-for="(ite, index) in funcData" :key="index">
			<div class="bg-style">
				<div class="mc-nomal-title mc-padding-no">{{ ite.lineName }}</div>
				<div class="mc-function-box">
					<div v-for="item in ite.unitList" :key="item.unitName" class="function-box">
						<div class="f-box-tit">{{ item.unitName }}</div>
						<div v-for="items in item.modList" :key="items.moduleName" class="f-box-info">
							<el-badge :value="items.noTaskNum" :max="99" :hidden="items.noTaskNum == 0">

								<i @click="jumpTo(items)" v-if="items.sts == '0' && items.icon" v-html="items.icon">
									{{items.icon}}
								</i>

								<i @click="jumpTo(items)" :class="'el-icon-user'" v-if="items.sts == '0'&& !items.icon" style="background: #0b82ff"></i>
								<i :class="'iconfont icon-tongji'" v-if="items.sts != '0'" style="background: #ddd"></i>
								<el-tooltip class="item" effect="dark" :content="items.moduleName" placement="bottom">
									<span>{{ items.moduleName }}</span>
								</el-tooltip>
							</el-badge>
						</div>
						<div class="f-box-info" v-if="item.modList.length == 0"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				funcData: [],
				boxHeight: {
					height: "auto",
				},
        outsideModules: [],
          groupName:"",
			};
		},
		methods: {
			getList() {
				let loginNo = JSON.parse(window.sessionStorage.userInfo).loginNo;
				this.$http({
					url: "/market/cmkline/queryInfo",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {},
				}).then((res) => {
					this.funcData = res.data.lineList;
					this.outsideModules = res.data.outsideModules;
          this.groupName = res.data.groupName;
				});
			},
			hAuto() {
				let boxLinel = this.$refs.boxLinel.offsetHeight;
				let boxLiner = this.$refs.boxLiner.offsetHeight;
				if (boxLinel > boxLiner) {
					this.boxHeight.height = boxLinel + "px";
				} else {
					this.boxHeight.height = boxLiner + "px";
				}
			},
			jumpTo(v) {
				if (v.moduleUrl) {
            if(this.groupName == 'default'){
                //加入外部人员权限控制start
                if (this.outsideModules.length > 0) {
                    let moduleIndex = -1;
                    for (let i = 0; i < this.outsideModules.length; i++) {
                        if(this.outsideModules[i].moduleUrl == v.moduleUrl){
                            moduleIndex = i;
                            break;
                        }
                    }
                    if (moduleIndex < 0) {
                        global.$vm.$notify.error({
                            title: "提示",
                            message: "暂无使用权限",
                        });
                        return;
                    }
                }
                //加入外部人员权限控制end
            }else{
                let childrenMenus = JSON.parse(window.sessionStorage.childrenMenus);
                if(childrenMenus != undefined && childrenMenus.length > 0){
                    let moduleIndex = -1;
                    for(let a =0;a<childrenMenus.length; a++){
                      if(childrenMenus[a].jspUrl == v.moduleUrl){
                          moduleIndex = a;
                          break;
                      }
                    }
                    if (moduleIndex < 0) {
                        global.$vm.$notify.error({
                            title: "提示",
                            message: "暂无使用权限",
                        });
                        return;
                    }
                }
            }


					this.$router.push({
						path: v.moduleUrl,
					});
					this.setabList(v.moduleName, v.moduleUrl);
				}
			},
			setabList(n, p) {
			    let params = {
			        children: "",
			        name: n,
			        rountPath: p,
			        target: "_self",
			    };
				// console.log(this.$store.state.tabList)
			    // for (let i = 0; i < this.$store.state.tabList.length; i++) {
			    //     if (this.$store.state.tabList[i].name === params.name) {
			    //         this.$store.state.tabList[i] = params;
			    //     }
			    // }
			    // let set = new Set([...this.$store.state.tabList, params]);
			    // set.add(params);
			    // this.$store.commit("setDefaultActive", params.rountPath);
			    // this.$store.commit("setTabList", Array.from(set));
			},
		},
		mounted() {},
		created() {
			this.getList();
		},
	};
</script>

<style scoped lang="scss">
	.mc-red {
		color: #ff6060;
	}

	.mc-padding-no {
		padding-left: 20px;
	}

	.pmain {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.layui-col-md6 {
			display: inline-block;
			margin-top: 15px;
			width: 32.5%;
			background: #fff;
		}

		// .layui-col-md6:nth-child(2n) {

		// }

		.box-scoll {
			height: 350px;
			width: 100%;
			overflow-y: scroll;
			padding-right: 25px;
		}
	}

	.mc-nomal-title {
		font-size: 20px;
		font-weight: 500;
		color: #333;
		padding-bottom: 10px;
	}

	.mc-nomal-checked {
		color: #999;
		font-size: 12px;
	}

	.mc-title-box {
		display: flex;
		justify-content: space-between;
	}

	.mc-nomal-show-num {
		display: flex;
		justify-content: space-between;
		text-align: center;
		margin-top: 10px;

		.num-box {
			margin-right: 40px;
		}
	}

	.mc-right-title {
		margin-top: 10px;
		text-align: right;
		// width: 55%;
		padding-right: 20px;
	}

	.mc-nomal-num {
		font-size: 20px;
	}

	.bg-style {
		/*background-color: white;*/
		padding: 25px 10px;

		.custom-tree-node {
			width: 100%;
		}

		.tree-box {
			overflow: hidden;
			height: 26px;
			width: 100%;

			img {
				width: 26px;
				height: 26px;
				float: left;
			}

			div {
				display: inline-block;
				height: 26px;
				line-height: 26px;

				span {
					padding-left: 10px;
				}
			}
		}
	}

	.mc-function-box {
		margin-top: 10px;

		.function-box {
			.f-box-tit {
				font-size: 16px;
				margin: 10px 0 15px 20px;
				// font-weight: bold;
				color: #4949a2;
			}

			.f-box-info {
				display: inline-block;
				height: 100px;
				width: 33%;
				text-align: center;
				min-width: 128px;

				i {
					width: 40px;
					height: 40px;
					border-radius: 18px;
					display: block;
					color: #fff;
					text-align: center;
					line-height: 40px;
					cursor: pointer;
					margin: 0 30px;
				}

				span {
					font-size: 12px;
					display: block;
					text-align: center;
					width: 100px;
					height: 40px;
					line-height: 20px;
					margin-top: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.mybadge {
					top: 0;
					right: 40px;
				}

				.icon{
					width: 100%!important;
					height: 100%!important;
				}
			}
		}
	}
</style>