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)" class="el-icon-document" v-if="items.sts == '0' && items.moduleName == '竞争对手信息上报'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-user" v-if="items.sts == '0' && items.moduleName == '广告宣传设计审批'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-files" v-if="items.sts == '0' && items.moduleName == '广告发布审批及验收'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-document" v-if="items.sts == '0' && items.moduleName == '绩效管理'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-user" v-if="items.sts == '0' && items.moduleName == '预算管理'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-files" v-if="items.sts == '0' && items.moduleName == '科室绩效管理'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-location-information" v-if="items.sts == '0' && items.moduleName == '重点工作清单'" style="background: #0b82ff"></i>
								<i @click="jumpTo(items)" class="el-icon-user" v-if="items.sts == '0' && items.moduleName == '测试资源管理'" 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",
				},
			};
		},
		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;
				});
			},
			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) {
					this.$router.push({
						path: v.moduleUrl,
					});
				}
			},
		},
		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;

				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;
				}
			}
		}
	}
</style>