subject_gxj/xj_project_app/pages/functionList/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onPageScroll,
	} from "@dcloudio/uni-app";

	import {
		getOverdueNum
	} from "@/api/work/overdue.js";

	import store from '@/store';

	// 图标
	import iconFundPlan from "@/static/func/func-fundPlan.svg";
	import iconFundUse from "@/static/func/func-fundUse.svg";
	import iconProjectProcess from "@/static/func/func-projectProcess.svg";
	import iconImportant from "@/static/func/func-important.svg";
	import iconPreFlow from "@/static/func/func-preFlow.svg";
	import iconIndustyRateValue from "@/static/func/func-industyRateValue.svg";
	import iconIndustyRateAmt from "@/static/func/func-industyRateAmt.svg";
	import iconAreaRate from "@/static/func/func-areaRate.svg";
	import iconYearRate from "@/static/func/func-yearRate.svg";
	import iconReport from "@/static/func/func-report.svg";

	let funType = ref(null)
	let title = ref(null)

	function goToPage(url, permissionCode, type) {
		if (permissionCode) {
			let havePermission = checkRoleById([permissionCode])
			if (!havePermission) return
		}

		uni.$u.route({
			url: url,
			params: {
				type: type || null
			}
		})
	}
	// 判断功能菜单权限
	const roles = store.getters && store.getters.permissions;

	let qyxxFalg = ref(false)
	let xmtzFalg = ref(false)
	let cbxmFalg = ref(false)
	let lxrFalg = ref(false)
	let zbFalg = ref(false)
	let ybFalg = ref(false)
	let ndjhFalg = ref(false)
	let wtqdFalg = ref(false)
	let wtlrFalg = ref(false)
	let wtgzFalg = ref(false)
	let yqtxFalg = ref(false)
	let yyqFalg = ref(false)

	function judgeFuncList() {
		if (roles.includes('7112')) {
			qyxxFalg.value = true
		}
		if (roles.includes('7111')) {
			xmtzFalg.value = true
		}
		if (roles.includes('7113')) {
			cbxmFalg.value = true
		}
		if (roles.includes('7114')) {
			lxrFalg.value = true
		}
		if (roles.includes('8112')) {
			zbFalg.value = true
		}
		if (roles.includes('8113')) {
			ybFalg.value = true
		}
		if (roles.includes('8111')) {
			ndjhFalg.value = true
		}
		if (roles.includes('7131')) {
			wtqdFalg.value = true
		}
		if (roles.includes('7132')) {
			wtlrFalg.value = true
		}
		if (roles.includes('7133')) {
			wtgzFalg.value = true
		}
		if (roles.includes('7134')) {
			yqtxFalg.value = true
		}
		if (roles.includes('7135')) {
			yyqFalg.value = true
		}

		// let tempList = JSON.parse(JSON.stringify(functionList.value))
		// for (let i in tempList) {
		// 	//如果父级都没权限 直接移除
		// 	if (!roles.includes(tempList[i].permissionCode)) {
		// 		tempList[i].ban = true
		// 	} else {
		// 		let funcListSon = tempList[i].funcList
		// 		for (let j in funcListSon) {
		// 			if (!roles.includes(funcListSon[j].permissionCode)) {
		// 				funcListSon[j].ban = true
		// 			}
		// 		}
		// 	}
		// }

		// let filterList = tempList.filter(item => {
		// 	return !item.ban
		// })

		// for (let i in filterList) {
		// 	let filterListSon = filterList[i].funcList.filter(item => {
		// 		return !item.ban
		// 	})
		// 	filterList[i].funcList = filterListSon
		// }

		// functionList.value = filterList
	}

	// 未读角标
	let overdueWill = ref(0);
	let overdued = ref(0);

	// 功能列表
	let funcType = ref({
		tjfx: [{
			name: "资金计划",
			icon: iconFundPlan,
			code: "7141",
			url: "/pages/countAnalysis/fundPlan/index",
		}, {
			name: "资金使用",
			icon: iconFundUse,
			code: "7142",
			url: "/pages/countAnalysis/fundUse/index"
		}, {
			name: "问题处理进度",
			longName: true,
			icon: iconProjectProcess,
			code: "7143",
			url: "/pages/countAnalysis/projectProcess/index"
		}, {
			name: "重大事项",
			icon: iconImportant,
			code: "7144",
			url: "/pages/important/index"
		}, {
			name: "前期手续",
			icon: iconPreFlow,
			code: "7145",
			url: "/pages/preFlow/index"
		}, {
			name: "行业占比分析-数量",
			longName: true,
			icon: iconIndustyRateValue,
			url: "/pages/analysis/index?type=industyRateValue",
		}, {
			name: "行业占比分析-金额",
			longName: true,
			icon: iconIndustyRateAmt,
			url: "/pages/analysis/index?type=industyRateAmt"
		}, {
			name: "区县占比分析",
			longName: true,
			icon: iconAreaRate,
			url: "/pages/analysis/index?type=areaRate"
		}, {
			name: "年度投资分析",
			longName: true,
			icon: iconYearRate,
			url: "/pages/analysis/index?type=yearRate"
		}, {
			name: "投资分析报告",
			icon: iconReport,
			url: "/pages/analysis/report/index"
		}]
	});

	// 渲染列表
	let showList = ref([])

	const judgeFuncListByFilter = () => {
		let funcList = funcType.value.tjfx;
		showList.value = funcList.filter(item => !item.code || roles.includes(item.code));
	}


	onLoad((e) => {
		funType.value = e.type
		if (e.type === 'jbxx') {
			title.value = '基本信息'
		} else if (e.type === 'jdgl') {
			title.value = '进度管理'
		} else if (e.type === 'wtdb') {
			title.value = '问题督办'
			getOverdueNum().then(res => {
				overdueWill.value = res.data.willOver ?? 0;
				overdued.value = res.data.isOver ?? 0;
			})
		} else if (e.type === 'tjfx') {
			title.value = '统计分析'
			judgeFuncListByFilter();
		}
		judgeFuncList(); //判断权限
	})
</script>

<template>
	<view class="content">
		<view class="top-box"></view>
		<page-title>{{title}}</page-title>

		<view class="btnlist-box" v-if="funType==='jbxx'">
			<view class="btn color1" @click="goToPage('/pages/enterpriseInfo/index')" v-if="qyxxFalg">
				<view class="btn-icon">
					<image src="@/static/func/qyxx-icon.svg" mode=""></image>
				</view>
				<view class="name">
					企业信息
				</view>
			</view>

			<view class="btn color2" @click="goToPage('/pages/projectInfo/index',null,'all')" v-if="xmtzFalg">
				<view class="btn-icon">
					<image src="@/static/func/xmtz-icon.svg" mode=""></image>
				</view>
				<view class="name">
					项目台账
				</view>
			</view>

			<view class="btn color3" @click="goToPage('/pages/cbProject/index')" v-if="cbxmFalg">
				<view class="btn-icon">
					<image src="@/static/func/cbxm-icon.svg" mode=""></image>
				</view>
				<view class="name">
					储备项目
				</view>
			</view>

			<view class="btn color4" @click="goToPage('/pages/contact/index')" v-if="lxrFalg">
				<view class="btn-icon">
					<image src="@/static/func/lxr-icon.svg" mode=""></image>
				</view>
				<view class="name">
					联系人
				</view>
			</view>

			<view class="btn intermediaryService" @click="goToPage('/pages/intermediaryService/search/index')">
				<view class="btn-icon">
					<image src="@/static/func/func-intermediaryService.svg" mode=""></image>
				</view>
				<view class="name">
					中介服务库
				</view>
			</view>
		</view>

		<view class="btnlist-box" v-if="funType==='jdgl'">
			<view class="btn color1" @click="goToPage('/pages/weekly/index')" v-if="zbFalg">
				<view class="btn-icon">
					<image src="@/static/func/week-icon.svg" mode=""></image>
				</view>
				<view class="name">
					周报
				</view>
			</view>
			<view class="btn color2" @click="goToPage('/pages/monthly/index')" v-if="ybFalg">
				<view class="btn-icon">
					<image src="@/static/func/month-icon.svg" mode=""></image>
				</view>
				<view class="name">
					月报
				</view>
			</view>
			<view class="btn color4" @click="goToPage('/pages/yearly/index')" v-if="ndjhFalg">
				<view class="btn-icon">
					<image src="@/static/func/ndjh-icon.svg" mode=""></image>
				</view>
				<view class="name">
					年度计划
				</view>
			</view>
		</view>

		<view class="btnlist-box" v-if="funType==='wtdb'">
			<view class="btn color1" @click="goToPage('/pages/oversee/index')" v-if="wtqdFalg">
				<view class="btn-icon">
					<image src="@/static/func/wtqd-icon.svg" mode=""></image>
				</view>
				<view class="name">
					问题清单
				</view>
			</view>
			<view class="btn color5" @click="goToPage('/pages/questionInput/index')" v-if="wtlrFalg">
				<view class="btn-icon">
					<image src="@/static/func/wtlr-icon.svg" mode=""></image>
				</view>
				<view class="name">
					问题录入
				</view>
			</view>
			<view class="btn color6" @click="goToPage('/pages/questionTrace/index')" v-if="wtgzFalg">
				<view class="btn-icon">
					<image src="@/static/func/wtgz-icon.svg" mode=""></image>
				</view>
				<view class="name">
					问题跟踪
				</view>
			</view>
			<view class="btn color7" @click="goToPage('/pages/overdue/index')" v-if="yqtxFalg">
				<view class="btn-icon">
					<image src="@/static/func/yqtx-icon.svg" mode=""></image>
				</view>
				<view class="name">
					预期提醒
				</view>

				<u-badge class="badge-num" type="error" max="99" :value="overdueWill"></u-badge>
			</view>
			<view class="btn color8" @click="goToPage('/pages/overdue/overdued/index')" v-if="yyqFalg">
				<view class="btn-icon">
					<image src="@/static/func/yyq-icon.svg" mode=""></image>
				</view>
				<view class="name">
					已逾期
				</view>

				<u-badge class="badge-num" type="error" max="99" :value="overdued"></u-badge>
			</view>
		</view>

		<view class="btnlist-box" v-if="funType==='tjfx'">
			<view class="func-area">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item,index) in showList" :key="index">
						<view class="func-item" @click="goToPage(item.url)">
							<view class="func-item-icon">
								<image :src="item.icon"></image>
							</view>

							<view class="func-item-name" :class="item.longName ? 'func-item-shortGap':''">
								{{item.name}}
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.func-area {
		width: 100%;
		min-height: 300rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.func-item {
		width: 160rpx;
		height: 168rpx;
		margin-bottom: 16rpx;
		padding: 28rpx 0;
		box-sizing: border-box;
		background: #FFF;
		border-radius: 20rpx;

		.func-item-icon {
			width: 60rpx;
			height: 50rpx;
			margin: 0 auto 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.func-item-name {
			width: 116rpx;
			margin: 26rpx auto 0;
			font-size: 24rpx;
			color: #343437;
			text-align: center;
		}

		.func-item-shortGap {
			margin: 16rpx auto 0;
		}
	}

	.color1 {
		background-color: #5773FF
	}

	.color2 {
		background-color: #14B890
	}

	.color3 {
		background-color: #744BF1
	}

	.color4 {
		background-color: #F79721
	}

	.color5 {
		background-color: #FC8181
	}

	.color6 {
		background-color: #8187FC
	}

	.color7 {
		background-color: #3ABF7A
	}

	.color8 {
		background-color: #E8B923
	}

	.industyRate-value {
		background: #22AD65;
	}

	.industyRate-amt {
		background: #FDAF4D;
	}

	.areaRate {
		background: #7073F0;
	}

	.yearRate {
		background: #DC5652;
	}

	.reportRate {
		background: #3B7CED;
	}

	.intermediaryService {
		background: #FC8181;
	}

	.content {
		padding-top: 100px;
		position: relative;
		width: 100%;
		height: 100%;
		background: #EAF1FF;
	}

	.btnlist-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
		justify-content: flex-start;
		gap: 50rpx;

		.btn {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 416rpx;
			height: 116rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(12, 69, 167, 0.35);
			color: #FFFFFF;
			font-weight: 500;
			font-size: 36rpx;
			font-family: OPPOSans-M;

			.btn-icon {
				width: 90rpx;
				height: 88rpx;
				margin-right: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				width: 180rpx;
				margin-right: 50rpx;
			}

			.badge-num {
				position: absolute;
				top: -5rpx;
				right: -15rpx;
			}
		}
	}
</style>