From 1b736033f6d01b774d58b4c2d7cd2ce8607a44fa Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期日, 28 十二月 2025 20:28:46 +0800
Subject: [PATCH] 页面完善
---
src/views/OfficeRelated/checkingIn/checkingInInfo.vue | 213 ++++++++++++++++++++++++----------------------------
1 files changed, 99 insertions(+), 114 deletions(-)
diff --git a/src/views/OfficeRelated/checkingIn/checkingInInfo.vue b/src/views/OfficeRelated/checkingIn/checkingInInfo.vue
index f0c23c0..2ff3344 100644
--- a/src/views/OfficeRelated/checkingIn/checkingInInfo.vue
+++ b/src/views/OfficeRelated/checkingIn/checkingInInfo.vue
@@ -4,12 +4,18 @@
<el-card class="employee-info-card">
<div class="employee-header">
<div class="employee-basic">
- <el-avatar :size="60" :src="employeeInfo.avatar" class="employee-avatar">
+ <el-avatar
+ :size="60"
+ :src="employeeInfo.avatar"
+ class="employee-avatar"
+ >
{{ employeeInfo.name.charAt(0) }}
</el-avatar>
<div class="employee-details">
<h3>{{ employeeInfo.name }}</h3>
- <p class="employee-department">{{ employeeInfo.department }} 路 {{ employeeInfo.position }}</p>
+ <p class="employee-department">
+ {{ employeeInfo.department }} 路 {{ employeeInfo.position }}
+ </p>
<p class="employee-contact">
<span>宸ュ彿: {{ employeeInfo.employeeId }}</span>
<span>鐢佃瘽: {{ employeeInfo.phone }}</span>
@@ -36,13 +42,6 @@
<!-- 閫夐」鍗� -->
<el-card>
<el-tabs v-model="activeTab">
- <el-tab-pane label="鏃ュ巻瑙嗗浘" name="calendar">
- <attendance-calendar
- :attendance-data="attendanceData"
- :business-trip-data="businessTripData"
- />
- </el-tab-pane>
-
<el-tab-pane label="鍑哄嫟璁板綍" name="attendanceList">
<personal-attendance-table
:data="attendanceData"
@@ -56,7 +55,12 @@
:loading="loading"
/>
</el-tab-pane>
-
+ <el-tab-pane label="鏃ュ巻瑙嗗浘" name="calendar">
+ <attendance-calendar
+ :attendance-data="attendanceData"
+ :business-trip-data="businessTripData"
+ />
+ </el-tab-pane>
<el-tab-pane label="缁熻鎶ヨ〃" name="report">
<personal-attendance-report
:stats="employeeStats"
@@ -69,15 +73,13 @@
</template>
<script>
- import { generateMockData } from './mockData'
-
-import AttendanceCalendar from './components/AttendanceCalendar.vue'
-import PersonalAttendanceTable from './components/PersonalAttendanceTable.vue'
-import PersonBusiness from './components/PersonBusiness.vue'
-import PersonalAttendanceReport from './components/PersonalAttendanceReport.vue'
+import AttendanceCalendar from "./components/AttendanceCalendar.vue";
+import PersonalAttendanceTable from "./components/PersonalAttendanceTable.vue";
+import PersonBusiness from "./components/PersonBusiness.vue";
+import PersonalAttendanceReport from "./components/PersonalAttendanceReport.vue";
export default {
- name: 'AttendanceDetail',
+ name: "AttendanceDetail",
components: {
AttendanceCalendar,
PersonalAttendanceTable,
@@ -86,15 +88,15 @@
},
data() {
return {
- activeTab: 'calendar',
+ activeTab: "calendar",
loading: false,
employeeInfo: {
- name: '寮犱笁',
- department: 'OPO椤圭洰閮�',
- position: '椤圭洰缁忕悊',
- employeeId: 'OPO001',
- phone: '138-1234-5678',
- avatar: ''
+ name: "",
+ department: "",
+ position: "",
+ employeeId: "",
+ phone: "",
+ avatar: ""
},
employeeStats: {
attendanceRate: 0,
@@ -105,137 +107,120 @@
},
attendanceData: [],
businessTripData: []
- }
+ };
},
created() {
- this.loadMockData()
-
- this.getEmployeeInfo()
- this.loadAttendanceData()
+ this.getEmployeeInfo();
+ this.loadAttendanceData();
},
methods: {
getEmployeeInfo() {
- const { employeeId, employeeName } = this.$route.query
+ const { employeeId, employeeName } = this.$route.query;
// 妯℃嫙鍛樺伐淇℃伅
this.employeeInfo = {
- name: employeeName || '寮犱笁',
- department: 'OPO椤圭洰閮�',
- position: '椤圭洰缁忕悊',
- employeeId: employeeId || 'OPO001',
- phone: '138****1234',
- avatar: ''
- }
- },
- loadMockData() {
- this.loading = true
-
- // 妯℃嫙寮傛鍔犺浇
- setTimeout(() => {
- const mockData = generateMockData()
- this.attendanceData = mockData.attendanceData
- this.businessTripData = mockData.businessTripData
- this.calculateStats()
- this.loading = false
- }, 500)
+ name: employeeName || "寮犱笁",
+ department: "OPO椤圭洰閮�",
+ position: "椤圭洰缁忕悊",
+ employeeId: employeeId || "OPO001",
+ phone: "138****1234",
+ avatar: ""
+ };
},
- calculateStats() {
- const totalDays = 31 // 12鏈堟湁31澶�
- const attendanceDays = this.attendanceData.filter(item =>
- item.status === 'present' || item.status === 'late'
- ).length
-
- const lateTimes = this.attendanceData.filter(item =>
- item.status === 'late'
- ).length
-
- // 璁＄畻鍑哄樊鎬诲ぉ鏁�
- const businessTripDays = this.businessTripData.reduce((total, trip) => {
- const start = new Date(trip.startDate)
- const end = new Date(trip.endDate)
- const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1
- return total + days
- }, 0)
-
- // 璁＄畻鎬诲伐浣滄椂闀�
- const totalWorkHours = this.attendanceData.reduce((total, item) => {
- return total + (item.workHours || 0)
- }, 0)
-
- this.employeeStats = {
- attendanceRate: Math.round((attendanceDays / totalDays) * 100),
- workHours: totalWorkHours.toFixed(1),
- businessTripDays: businessTripDays,
- lateTimes: lateTimes,
- leaveEarlyTimes: this.attendanceData.filter(item =>
- item.status === 'leaveEarly'
- ).length
- }
- },
async loadAttendanceData() {
- this.loading = true
+ this.loading = true;
try {
- await new Promise(resolve => setTimeout(resolve, 500))
+ await new Promise(resolve => setTimeout(resolve, 500));
// 鐢熸垚涓汉鑰冨嫟妯℃嫙鏁版嵁
- this.attendanceData = this.generatePersonalAttendanceData()
- this.businessTripData = this.generatePersonalBusinessTripData()
- this.calculateStats()
+ this.attendanceData = this.generatePersonalAttendanceData();
+ this.businessTripData = this.generatePersonalBusinessTripData();
+ this.calculateStats();
} catch (error) {
- console.error('鍔犺浇鏁版嵁澶辫触:', error)
+ console.error("鍔犺浇鏁版嵁澶辫触:", error);
} finally {
- this.loading = false
+ this.loading = false;
}
},
generatePersonalAttendanceData() {
- const data = []
- const currentMonth = 12 // 12鏈�
+ const data = [];
+ const currentMonth = 12; // 12鏈�
for (let day = 1; day <= 31; day++) {
- if (Math.random() > 0.2) { // 80%鐨勫嚭鍕ょ巼
+ if (Math.random() > 0.2) {
+ // 80%鐨勫嚭鍕ょ巼
data.push({
id: day,
- date: `2024-${currentMonth.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`,
- checkIn: `08:${String(Math.floor(Math.random() * 30)).padStart(2, '0')}`,
- checkOut: `18:${String(Math.floor(Math.random() * 30)).padStart(2, '0')}`,
- status: Math.random() > 0.1 ? '姝ｅ父' : '杩熷埌',
+ date: `2024-${currentMonth
+ .toString()
+ .padStart(2, "0")}-${day.toString().padStart(2, "0")}`,
+ checkIn: `08:${String(Math.floor(Math.random() * 30)).padStart(
+ 2,
+ "0"
+ )}`,
+ checkOut: `18:${String(Math.floor(Math.random() * 30)).padStart(
+ 2,
+ "0"
+ )}`,
+ status: Math.random() > 0.1 ? "姝ｅ父" : "杩熷埌",
workHours: (8 + Math.random() * 2).toFixed(1)
- })
+ });
}
}
- return data
+ return data;
},
generatePersonalBusinessTripData() {
return [
{
id: 1,
- tripNumber: 'BT202412001',
- startCity: '鍖椾含',
- endCity: '涓婃捣',
- startDate: '2024-12-05',
- endDate: '2024-12-08',
+ tripNumber: "BT202412001",
+ startCity: "鍖椾含",
+ endCity: "涓婃捣",
+ startDate: "2024-12-05",
+ endDate: "2024-12-08",
distance: 1200,
- purpose: '瀹㈡埛浼氳',
- status: '宸插畬鎴�'
+ purpose: "瀹㈡埛浼氳",
+ status: "宸插畬鎴�"
},
{
id: 2,
- tripNumber: 'BT202412002',
- startCity: '鍖椾含',
- endCity: '骞垮窞',
- startDate: '2024-12-15',
- endDate: '2024-12-18',
+ tripNumber: "BT202412002",
+ startCity: "鍖椾含",
+ endCity: "骞垮窞",
+ startDate: "2024-12-15",
+ endDate: "2024-12-18",
distance: 1900,
- purpose: '椤圭洰璋冪爺',
- status: '宸插畬鎴�'
+ purpose: "椤圭洰璋冪爺",
+ status: "宸插畬鎴�"
}
- ]
+ ];
},
+ calculateStats() {
+ const totalDays = 31;
+ const attendanceDays = this.attendanceData.length;
+
+ this.employeeStats = {
+ attendanceRate: Math.round((attendanceDays / totalDays) * 100),
+ workHours: this.attendanceData
+ .reduce((sum, item) => sum + parseFloat(item.workHours), 0)
+ .toFixed(1),
+ businessTripDays: this.businessTripData.reduce((sum, item) => {
+ const start = new Date(item.startDate);
+ const end = new Date(item.endDate);
+ return sum + Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
+ }, 0),
+ lateTimes: this.attendanceData.filter(item => item.status === "杩熷埌")
+ .length,
+ leaveEarlyTimes: this.attendanceData.filter(
+ item => item.status === "鏃╅��"
+ ).length
+ };
+ }
}
-}
+};
</script>
<style scoped>
--
Gitblit v1.9.3