老板看板 日期修改

components/bossCard/bossCard.vue

@@ -50,13 +50,29 @@
 
 			<!-- 顶部时间导航 -->
 			<view class="time-nav">
+				<view class="nav-item" :class="{active: activeTime === 'lastMonth'}" @click="switchTime('lastMonth')">上月
+				</view>
 				<view class="nav-item" :class="{active: activeTime === 'month'}" @click="switchTime('month')">本月</view>
-				<view class="nav-item" :class="{active: activeTime === 'week'}" @click="switchTime('week')">本周</view>
-				<view class="nav-item" :class="{active: activeTime === 'yesterday'}" @click="switchTime('yesterday')">昨日
+
+				<view class="nav-item" :class="{active: activeTime === 'yesterday'}" @click="switchTime('yesterday')">
+					{{day2}}
+				</view>
+				<view class="nav-item" :class="{active: activeTime === 'today'}" @click="switchTime('today')">{{day}}
+				</view>
+				<view class="dropdown-container">
+					<view class="nav-item2 " style="font-size: 14px;color: #1890FF;" v-if="showDropdown"
+						@click="toggleDropdown">▼</view>
+					<view class="nav-item2 " style="font-size: 14px;color: #1890FF;" v-if="!showDropdown"
+						@click="closeDropdown">▲</view>
+					<view class="dropdown-menu" v-if="showDropdown">
+						<view v-for="(item,index) in days" :key="index" class="dropdown-item">
+							<text v-if="activeDay!==item" @click.stop="selectDays(item)">{{item}}</text>
+							<text v-if="activeDay===item" style="font-size: 14px;color: #1890FF;"
+								@click.stop="selectDays(item)">{{item}}</text>
+						</view>
+					</view>
 				</view>
-				<view class="nav-item" :class="{active: activeTime === 'today'}" @click="switchTime('today')">今日</view>
 			</view>
-
 			<!-- 项目概览卡片 -->
 			<view class="project-card">
 				<view class="overview-content">
@@ -121,7 +137,8 @@
 							<view class="icon">￥</view>
 						</view> -->
 						<view class="left-section">
-							<view class="icon"><img class="shou" src="../../static/img/boss/sou.png" alt="图标" /></view>
+							<view class="icon"><img class="shou" src="../../static/img/boss/sou.png" alt="图标" />
+							</view>
 						</view>
 
 						<!-- 右侧内容 -->
@@ -391,10 +408,19 @@
 				tableName: "",
 				bossProject: [],
 				activeBoss: '',
-				isBoss: false
+				isBoss: false,
+				showDropdown: false,
+				day: "T-4",
+				day2: "4天内",
+				activeDay: 4,
+				days: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
 			}
 		},
 		computed: {
+			// switchTime2(time) {
+			// 	this.activeTime = time
+			// },
+
 			// 当前选中时间的数据
 			currentData() {
 				//todo 调用后端接口，直接返回对应时间区间的数据
@@ -459,6 +485,21 @@
 			window.addEventListener('resize', this.onResize)
 		},
 		methods: {
+			toggleDropdown() {
+				this.showDropdown = !this.showDropdown
+			},
+			closeDropdown() {
+				this.showDropdown = !this.showDropdown
+			},
+			async selectDays(item) {
+				console.log(item)
+				this.activeDay = item
+				this.showDropdown = false
+				this.day = "T-" + item
+				this.day2 = item + "天内"
+				this.initData()
+
+			},
 			orderEventClose() {
 				this.showOrderEvent = false
 			},
@@ -491,7 +532,8 @@
 					"aux": {
 						"activeTime": this.activeTime,
 						"staffCode": this.staffCode,
-						"staffKind": this.staffKind
+						"staffKind": this.staffKind,
+						"activeDay": this.activeDay
 					}
 				}
 				await searchBossCard(data).then(res => {
@@ -1289,8 +1331,40 @@
 					border-right: 1px solid #f0f0f0;
 				}
 			}
+
+			.nav-item2 {
+				flex: 1;
+				text-align: center;
+				padding: 6px 0;
+				font-size: 14px;
+				color: $text-secondary;
+				position: relative;
+				transition: all 0.3s ease;
+
+				&.active {
+					color: #1890FF;
+					font-weight: bold;
+
+					&::after {
+						content: '';
+						position: absolute;
+						left: 50%;
+						bottom: -2px;
+						transform: translateX(-50%);
+						width: 12px;
+						height: 2px;
+						background-color: #1890FF;
+						border-radius: 1px;
+					}
+				}
+
+
+			}
+
 		}
 
+
+
 		.project-card {
 			display: flex;
 			background-color: #fff !important;
@@ -1973,4 +2047,53 @@
 			}
 		}
 	}
+
+	.time-nav {
+		display: flex;
+		position: relative;
+		padding: 10px;
+		background: #f5f5f5;
+	}
+
+	.nav-item {
+		padding: 8px 12px;
+		margin: 0 5px;
+		cursor: pointer;
+	}
+
+	.active {
+		color: #07c160;
+		font-weight: bold;
+	}
+
+	.dropdown-container {
+		// position: relative;
+		width: 10%;
+	}
+
+	.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		// right: 0;
+		// width: 60px;
+		width: -webkit-fill-available;
+
+		max-height: 300px;
+		overflow-y: auto;
+		background: white;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		z-index: 100;
+	}
+
+	.dropdown-item {
+		padding: 8px 12px;
+		text-align: center;
+		cursor: pointer;
+	}
+
+	.dropdown-item:hover {
+		background-color: #f0f0f0;
+	}
 </style>
\ No newline at end of file