DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

签到页ui美化

Browse Source
This commit is contained in:
hdka
2024-12-22 15:33:36 +08:00
parent 263ff0fcb5
commit a23c049c7d
2 changed files with 199 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
ruoyi-ui/src/views/oa/attendance/index.vue
View File

@@ -2,51 +2,80 @@
<div class="app-container" v-loading="loading">
<el-row :gutter="20">
<el-col :span="16">
<el-header>
<div style="">
<span>签到表</span>
<span style="float:right;">
<el-date-picker
v-model="queryParams.selectTime"
value-format="yyyy-MM-dd"
type="month"
@change="getList()"
placeholder="选择月">
</el-date-picker>
</span>
<el-header class="sign-in-header">
<div class="header-container">
<div class="header-title-section">
<i class="el-icon-date header-icon"></i>
<h2 class="header-title">签到表</h2>
</div>
<el-date-picker
v-model="queryParams.selectTime"
value-format="yyyy-MM-dd"
type="month"
@change="getList()"
placeholder="选择月份"
class="custom-date-picker"
></el-date-picker>
</div>
</el-header>
<table>
<thead>
<tr>
<th width="80"></th>
<th v-for="(item,index) in dateLength" :class="selectHead===index+1?'selectBox':''"
@click="selectMany(index+1)">
{{ index + 1 }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in userList">
<td :class="(item.userId===selectUser.userId || selectAll)?'selectBox':''">{{ item.nickName }}</td>
<td style="font-size: small" v-for="(item2,index2) in dateLength"
@click="selectAttendDay(item,index,index2+1)"
:style="{backgroundColor:(item.attendances.length>0 && item.attendances.findIndex(i=>i.attendanceDay === index2+1) >-1) ?
(item.attendances[item.attendances.findIndex(i=>i.attendanceDay === index2+1)].projectId!==0?item.attendances[item.attendances.findIndex(i=>i.attendanceDay === index2+1)].color:'#fdf6e4'):
(index2+1===selectIndex&&(item.userId===selectUser.userId || selectAll)?'#f3ff52':'')}"
>
{{ item.attendances.length > 0 && item.attendances.findIndex(i => i.attendanceDay === index2 + 1) > -1 && item.attendances[item.attendances.findIndex(i => i.attendanceDay === index2 + 1)].projectId === 0 ? '出差' : '' }}
</td>
</tr>
</tbody>
</table>
<div class="table-container">
<table class="attendance-table">
<thead>
<tr>
<th class="name-column">姓名</th>
<th
v-for="(item, index) in dateLength"
:key="index"
:class="selectHead === index + 1 ? 'selected-column' : ''"
@click="selectMany(index + 1)"
>
{{ index + 1 }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, userIndex) in userList" :key="userIndex">
<td class="user-name" :style="{backgroundColor: user.userId===selectUser.userId&&!selectAll?'#e3f2fd':''}">
{{ user.nickName }}
</td>
<td
v-for="(day, dayIndex) in dateLength"
:key="dayIndex"
:style="getCellStyle(user, dayIndex + 1)"
@click="selectAttendDay(user, userIndex, dayIndex + 1)"
>
{{
user.attendances.length > 0 &&
user.attendances.findIndex(i => i.attendanceDay === dayIndex + 1) > -1 &&
user.attendances[user.attendances.findIndex(i => i.attendanceDay === dayIndex + 1)].projectId === 0
? '出差'
: ''
}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #fdf6e4;"></div> 出差
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #f3ff52;"></div> 当前选中
</div>
</div>
</el-col>
<el-col :span="8">
<div>
<el-header> 操作栏</el-header>
<el-header class="header-title" style="display: flex;gap: 10px;flex-direction: column;justify-content: center">
<div>
<i class="el-icon-edit header-icon"></i>
操作栏
</div>
</el-header>
<el-card class="box-card">
<el-button @click="removeAttendance" type="danger" plain>取消操作</el-button>
<el-button @click="toTravel" type="warning" plain>出差</el-button>
@@ -335,7 +364,7 @@ export default {
calcResultUser: {},
calcResultAttendances: [],
calcResultProject: {},
projects:[]
projects: []
}
},
@@ -362,8 +391,36 @@ export default {
methods: {
// 获取单元格的样式
getCellStyle(user, dayIndex) {
const attendanceIndex = user.attendances.findIndex(
(i) => i.attendanceDay === dayIndex
);
if (attendanceIndex > -1) {
const attendance = user.attendances[attendanceIndex];
// 如果存在签到记录，使用对应项目的颜色
return {
backgroundColor: attendance.color || '#fdf6e4',
color: '#000', // 确保文字可读性
};
}
// 如果是当前选中的用户或列，应用高亮样式
if (
this.selectIndex === dayIndex &&
(user.userId === this.selectUser.userId || this.selectAll)
) {
return {
backgroundColor: '#f3ff52',
};
}
// 默认单元格样式
return {
backgroundColor: '#fff',
};
},
// 获取条形图数据
getProjectData(){
getProjectData() {
projectData().then(res => {
this.projects = res.data;
})
@@ -511,59 +568,124 @@ export default {
};
</script>
<style scoped>
table {
border: 1px solid #000;
table-layout: fixed;
width: 100%;
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
th {
border: 1px solid;
height: 15px;
overflow: hidden;
.header-title-section {
display: flex;
align-items: center;
gap: 10px;
}
td {
border: 1px solid;
white-space: nowrap;
.header-title {
color: #000;
font-size: 22px; /* 更小字体 */
font-weight: 600;
}
table {
.custom-date-picker {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-date-picker:hover {
background-color: #f7f7f7;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.table-container {
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto; /* 居中对齐 */
}
.attendance-table {
width: 100%; /* 表格铺满父容器 */
border-collapse: collapse;
table-layout: fixed; /* 固定表格布局 */
font-size: 12px; /* 调整字体大小 */
}
.selectDay {
background-color: #00afff;
.attendance-table th,
.attendance-table td {
padding: 3px; /* 缩小单元格内边距 */
border: 1px solid #ddd;
white-space: nowrap;
text-align: center;
overflow: hidden; /* 不隐藏内容 */
font-size: clamp(10px, 0.7vw, 16px); /* 字体动态调整 */
}
.selectBox {
background-color: #f3ff52;
.attendance-table th:first-child,
.attendance-table td:first-child {
font-size: 14px; /* 调整字体大小 */
width: 50px; /* 固定名字列宽度 */
white-space: normal; /* 允许换行 */
text-align: left; /* 左对齐方便查看 */
overflow: visible; /* 不隐藏内容 */
}
.text {
font-size: 16px;
.name-column {
background-color: #f3f3f3;
font-weight: bold;
}
.selected-column {
background-color: #e3f2fd;
}
.user-name {
background-color: #f0f0f0;
font-weight: bold;
}
/* 鼠标悬停效果 */
.attendance-table td:hover {
background-color: #e8f4ff;
cursor: pointer;
}
/* 出差标记字体颜色 */
.attendance-table td span {
font-size: 12px;
font-weight: bold;
}
/* 图例区域 */
.legend {
margin-top: 10px;
display: flex;
justify-content: flex-start;
gap: 20px;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color {
width: 16px;
height: 16px;
margin-right: 8px;
border-radius: 3px;
}
.text{
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: #cccccc 1px dashed;
margin: 5px 0;
}
.color-picker {
font-size: 16px;
width: 30%;
border-bottom: #cccccc 1px dashed;
margin: 5px 0;
}
.el-header, .el-footer {
background-color: #f6f6f6;
color: #333;
text-align: center;
line-height: 60px;
border-radius: 7px 7px 0 0;
}
</style>

2
ruoyi-ui/src/views/oa/oaFile/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="文件类型" prop="queryCreateTime">
<el-form-item label="上传时间" prop="queryCreateTime">
<el-date-picker
v-model="queryParams.queryCreateTime"
type="month"