feat: 待办功能添加

src/api/modules/common.ts

@@ -94,3 +94,8 @@ export const noticeDetailMyPost = (params: { noticeId: string }) => {
 export const noticeReadMyPost = (params: { noticeId: string }) => {
 	return http.post(BASEURL + `/xmgl/notice/read`, params);
 };
+
+// 查询是否有待办事项
+export const noFinishApi = (params: any) => {
+	return http.get(BASEURL + `/xmgl/systemUser/getToDoItems`, params);
+};

src/layouts/LayoutClassic/index.vue

@@ -40,11 +40,55 @@
 				<Main />
 			</el-container>
 		</el-container>
+		<el-dialog class="overview" :show-close="false" v-model="visible1" width="50%" @close="visible1 = false">
+			<template #title>
+				<div class="title-detail">
+					<img src="@/assets/images/tableIcon/look.png" alt="" />
+					<span>待处理</span>
+					<el-icon>
+						<close @click="visible1 = false" />
+					</el-icon>
+				</div>
+			</template>
+			<div class="detail-table table-box">
+				<div class="table">
+					<el-table
+						:data="recordData"
+						class="el-table"
+						height="300"
+						:row-style="{ height: '40px' }"
+						:header-cell-style="{ textAlign: 'center', height: '40px' }"
+						:cell-style="{ textAlign: 'center', height: '40px' }"
+					>
+						<el-table-column type="index" label="序号" width="80"> </el-table-column>
+						<el-table-column prop="type" label="待处理事项"> </el-table-column>
+						<el-table-column prop="projectName" label="项目名称"> </el-table-column>
+						<el-table-column align="center" label="操作" width="150">
+							<template #default="scope">
+								<el-button type="primary" link @click="handleDealItem(scope.row)">
+									<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
+									<span>去处理</span>
+								</el-button>
+							</template>
+						</el-table-column>
+						<!-- 表格无数据情况 -->
+						<template #empty>
+							<div class="table-empty">
+								<slot name="empty">
+									<img src="@/assets/images/notData.png" alt="notData" />
+									<div>暂无数据</div>
+								</slot>
+							</div>
+						</template>
+					</el-table>
+				</div>
+			</div>
+		</el-dialog>
 	</el-container>
 </template>
 
 <script setup lang="ts" name="layoutClassic">
-import { computed } from "vue";
+import { computed, ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { GlobalStore } from "@/stores";
 import { AuthStore } from "@/stores/modules/auth";
@@ -53,6 +97,7 @@ import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
 import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
 import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
 import { HOME_URL } from "@/enums/Home";
+import { noFinishApi } from "@/api/modules/common";
 // import router from "@/routers";
 
 const route = useRoute();
@@ -63,55 +108,169 @@ const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu
 const menuList = computed(() => authStore.showMenuListGet);
 const isCollapse = computed(() => globalStore.themeConfig?.isCollapse);
 const moduleTitle = globalStore.moduleName;
+const visible1 = ref(false);
+const recordData = ref([]);
 // const title = import.meta.env.VITE_GLOB_APP_TITLE;
-
+// 去处理事件
+const handleDealItem = (obj: any) => {
+	visible1.value = false;
+	switch (obj.flag) {
+		case 1: // 质量管理
+			router.push("/goverment/huizhou/projectMonitoring/qualityControl/index");
+			break;
+		case 2: // 安全管理
+			router.push("/goverment/huizhou/projectMonitoring/safetyManagement/index");
+			break;
+		case 3: // 施工节点管理
+			router.push("/goverment/huizhou/progressManagement/divisionsAndISubItems/index");
+			break;
+	}
+};
 const goHome = () => {
 	router.push(HOME_URL[globalStore.accountType - 1]);
 };
+onMounted(async () => {
+	const res: any = await noFinishApi({});
+	if (res && res.data && res.data.length > 0) {
+		recordData.value = res.data;
+		visible1.value = true;
+	}
+});
 </script>
 
 <style scoped lang="scss">
 @import "./index.scss";
 </style>
 
-<style lang="scss">
+<style scoped lang="scss">
-.classic {
+@mixin flex {
-	.classic-content {
+	display: flex;
-		// margin-top: 10px;
+	align-items: center;
-		// padding-top: 10px;
+}
-		height: calc(100% - 55px); // 减去头部高度
+
-		.classic-main {
+@mixin title {
-			width: calc(100% - 200px);
+	font-size: 16px;
-			display: flex;
+	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-			flex-direction: column;
+	font-weight: 400;
+	color: #333333;
+	border-left: 2px solid #008bff;
+	padding-left: 5px;
+}
+// .classic {
+// 	.classic-content {
+// 		// margin-top: 10px;
+// 		// padding-top: 10px;
+// 		height: calc(100% - 55px); // 减去头部高度
+// 		.classic-main {
+// 			width: calc(100% - 200px);
+// 			display: flex;
+// 			flex-direction: column;
+// 		}
+// 	}
+// 	.el-menu,
+// 	.el-menu--popup {
+// 		.el-menu-item {
+// 			&.is-active {
+// 				// background: var(--el-color-primary-light-9);
+// 				&::before {
+// 					position: absolute;
+// 					top: 12px;
+// 					bottom: 0;
+// 					right: 0;
+// 					width: 4px;
+// 					height: 38px;
+// 					content: "";
+// 					background: var(--el-color-primary);
+// 				}
+// 				// border-right: 4px solid #008bff;
+// 				&.is:hover {
+// 					background-color: #fff;
+// 				}
+// 			}
+// 		}
+// 	}
+
+// 	// guide
+// 	#driver-highlighted-element-stage {
+// 		background-color: #606266 !important;
+// 	}
+// }
+.overview {
+	// background-color: #fff;
+	flex: 1;
+	.title-detail {
+		@include flex;
+		> img {
+			width: 16px;
+			height: 18px;
+		}
+		> span {
+			font-size: 18px;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			font-weight: 400;
+			color: var(--el-menu-text-color);
+			margin-left: 5px;
+			margin-right: auto;
+		}
+		:deep(.el-icon) {
+			cursor: pointer;
+			color: #a8abb2;
 		}
 	}
-	.el-menu,
+	.detail-table {
-	.el-menu--popup {
+		// height: 391px;
-		.el-menu-item {
+		.content-title {
-			&.is-active {
+			@include title;
-				// background: var(--el-color-primary-light-9);
+		}
-				&::before {
+		.table {
-					position: absolute;
+			height: 310px;
-					top: 12px;
+			margin-top: 20px;
-					bottom: 0;
+			:deep(.el-table) {
-					right: 0;
+				height: 100%;
-					width: 4px;
+				background-color: transparent;
-					height: 38px;
-					content: "";
-					background: var(--el-color-primary);
-				}
-				// border-right: 4px solid #008bff;
-				&.is:hover {
-					background-color: #fff;
-				}
 			}
 		}
 	}
-
+}
-	// guide
+:deep() {
-	#driver-highlighted-element-stage {
+	.overview {
-		background-color: #606266 !important;
+		.el-dialog__body {
+			padding-top: 0px;
+			padding-bottom: 0px;
+		}
+		.el-table__empty-text {
+			min-height: 200px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		td.el-table__cell {
+			background-color: transparent !important;
+			border-bottom: 0 !important;
+			color: var(--el-menu-text-color);
+			font-size: 20px !important;
+			border-right: 2px solid #252526;
+		}
+		th.el-table__cell {
+			background-color: transparent;
+			border-bottom: 0 !important;
+			border-right: 2px solid #252526;
+		}
+		.el-table__inner-wrapper::before {
+			height: 0px;
+		}
+		.el-table--border::before {
+			width: 0px;
+		}
+		.el-table--border .el-table__inner-wrapper::after {
+			height: 0px;
+		}
+		.el-table--border::after {
+			width: 0px;
+		}
+		.el-table__border-left-patch {
+			width: 0;
+		}
 	}
 }
 </style>