签到添加请假按钮

This commit is contained in:
2024-12-30 18:11:39 +08:00
parent 28e379aa2a
commit 4a77a525bc
2 changed files with 349 additions and 302 deletions

View File

@@ -1,289 +1,312 @@
<template>
<div class="app-container" v-loading="loading">
<el-row :gutter="20">
<el-col :span="16">
<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>
<el-tabs v-model="activeIndex" @tab-click="handleClickTab">
<el-tab-pane label="人员签到表" name="1">
<el-row :gutter="20">
<el-col :span="16">
<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>
<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 || user.attendances[user.attendances.findIndex(i => i.attendanceDay === dayIndex + 1)].projectId === 1)
? user.attendances[user.attendances.findIndex(i => i.attendanceDay === dayIndex + 1)].projectId === 0 ? '出差' : '请假' :
''
}}
</td>
</tr>
</tbody>
</table>
</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>
<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 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 class="header-title" style="display: flex;gap: 10px;flex-direction: column;justify-content: center">
<div>
<i class="el-icon-edit header-icon"></i>
操作栏
<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>
<el-button @click="toFree" type="info" plain>请假</el-button>
</el-card>
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-s-order"></i> 项目列表</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
</div>
<div style="height: 250px;overflow: auto">
<div v-for="(item,index) in sortedProjects" style="display: flex;justify-content: space-between;">
<el-button class="text" :style="{backgroundColor:item.color===''?'':item.color}"
@click="signIn(item)">
{{ item.projectName }}
</el-button>
<el-color-picker class="color-picker" v-model="item.color"
@change="changeItemColor(item)"></el-color-picker>
</div>
</div>
</el-card>
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-timer"></i>工作时长</span>
<div style="margin: 20px 0 ">
<el-radio-group v-model="timeFlag">
<el-radio :label="0">天计</el-radio>
<el-radio :label="1">小时计</el-radio>
</el-radio-group>
</div>
<el-select v-if="timeFlag===0" v-model="form.dayLength" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
<el-select v-if="timeFlag===1" v-model="form.hour" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length_hour"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</div>
</el-card>
</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>
</el-card>
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-s-order"></i> 项目列表</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="数据分析" name="2">
<el-row :gutter="20" class="mb8">
<el-col :span="2">
<span class="demonstration">计算月份:</span>
</el-col>
<el-col :span="6">
<div class="block">
<el-date-picker
v-model="date"
type="month"
placeholder="选择日期">
</el-date-picker>
</div>
<div style="height: 250px;overflow: auto">
<div v-for="(item,index) in sortedProjects" style="display: flex;justify-content: space-between;">
<el-button class="text" :style="{backgroundColor:item.color===''?'':item.color}" @click="signIn(item)">
{{ item.projectName }}
</el-button>
<el-color-picker class="color-picker" v-model="item.color"
@change="changeItemColor(item)"></el-color-picker>
</div>
</el-col>
<el-col :span="1.5">
<el-button @click="calcWork"
element-loading-text="正在计算请稍等"
v-loading.fullscreen.lock="fullscreenLoading"
>计算</el-button>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-table
:data="userList"
stripe
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="nickName"
label="员工姓名"
width="180">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-if="calcFlag"
@click="handleCalc(scope.row)"
v-hasPermi="['oa:oaWarehouse:edit']"
>查看考勤结果
</el-button>
<el-button
size="mini"
type="text"
v-else
disabled
icon="el-icon-edit"
@click="handleCalc(scope.row)"
v-hasPermi="['oa:oaWarehouse:edit']"
>请选择日期计算
</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="12">
<bar-chart :projectList="projects" ref="barChart"></bar-chart>
</el-col>
</el-row>
<el-dialog
title="计算结果"
:visible.sync="showCalc"
width="70%"
>
<div class="container">
<h1>员工个人财务与签到报告 - {{ calcUser.nickName }}</h1>
<!-- 员工基本信息 -->
<div class="employee-info">
<p><strong>员工姓名</strong> {{ calcUser.nickName }}</p>
<p><strong>职位</strong> 员工</p>
</div>
</el-card>
<el-card class="box-card">
<div slot="" class="">
<span><i class="el-icon-timer"></i>工作时长</span>
<div style="margin: 20px 0 ">
<el-radio-group v-model="timeFlag">
<el-radio :label="0">天计</el-radio>
<el-radio :label="1">小时计</el-radio>
</el-radio-group>
</div>
<el-select v-if="timeFlag===0" v-model="form.dayLength" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
<el-select v-if="timeFlag===1" v-model="form.hour" placeholder="请选择工作时长">
<el-option
v-for="dict in dict.type.work_time_length_hour"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
<!-- 月度工作情况表格 -->
<h2>{{ date.getMonth() }} 月度工作签到情况</h2>
<el-descriptions class="margin-top" title="报告详情" :column="3" :size="size" border>
<template slot="extra">
<div>总工作时长{{ calcResultItem.workTimes }}</div>
</template>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
员工姓名
</template>
{{ calcUser.nickName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
人力成本
</template>
{{ calcUser.laborCost }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
当月估计未计算小时()
</template>
{{ calcUser.laborCost * calcResultItem.workTimes }}
</el-descriptions-item>
</el-descriptions>
<el-table
:data="calcResultAttendances"
stripe
style="width: 100%">
<el-table-column
prop="projectName"
label="项目名"
width="180">
<template slot-scope="scope">
<div>{{
scope.row.projectId === 0 ? '出差' : scope.row.projectId === 1 ? '请假' : scope.row.projectName
}}
</div>
</template>
</el-table-column>
<el-table-column
prop="count"
label="签到(天)"
width="180">
</el-table-column>
<el-table-column
prop="workTimes"
label="工作时长(天)">
</el-table-column>
<el-table-column
prop="hourWorkTimes"
label="工作时长(小时计)">
</el-table-column>
</el-table>
<div class="footer">
<p style="color: red">小时计与天计为单独记录计算</p>
<p>© 2024 财务与签到报告 | 由公司财务部门生成</p>
</div>
</el-card>
</div>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showCalc = false">关闭</el-button>
</span>
</el-dialog>
</el-tab-pane>
</el-tabs>
<el-row :gutter="20" class="mb8">
<el-col :span="2">
<span class="demonstration">计算月份:</span>
</el-col>
<el-col :span="6">
<div class="block">
<el-date-picker
v-model="date"
type="month"
placeholder="选择日期">
</el-date-picker>
</div>
</el-col>
<el-col :span="1.5">
<el-button @click="calcWork">计算</el-button>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-table
:data="userList"
stripe
style="width: 100%">
<el-table-column
type="index"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="nickName"
label="员工姓名"
width="180">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-if="calcFlag"
@click="handleCalc(scope.row)"
v-hasPermi="['oa:oaWarehouse:edit']"
>查看考勤结果
</el-button>
<el-button
size="mini"
type="text"
v-else
disabled
icon="el-icon-edit"
@click="handleCalc(scope.row)"
v-hasPermi="['oa:oaWarehouse:edit']"
>请选择日期计算
</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="12">
<bar-chart :projectList="projects"></bar-chart>
</el-col>
</el-row>
<el-dialog
title="计算结果"
:visible.sync="showCalc"
width="70%"
>
<div class="container">
<h1>员工个人财务与签到报告 - {{ calcUser.nickName }}</h1>
<!-- 员工基本信息 -->
<div class="employee-info">
<p><strong>员工姓名</strong> {{ calcUser.nickName }}</p>
<p><strong>职位</strong> 员工</p>
</div>
<!-- 月度工作情况表格 -->
<h2>{{ date.getMonth() }} 月度工作签到情况</h2>
<el-descriptions class="margin-top" title="报告详情" :column="3" :size="size" border>
<template slot="extra">
<div>总工作时长{{ calcResultItem.workTimes }}</div>
</template>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
员工姓名
</template>
{{ calcUser.nickName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
人力成本
</template>
{{ calcUser.laborCost }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
当月估计()
</template>
{{ calcUser.laborCost * calcResultItem.workTimes }}
</el-descriptions-item>
</el-descriptions>
<el-table
:data="calcResultAttendances"
stripe
style="width: 100%">
<el-table-column
prop="projectName"
label="项目名"
width="180">
<template slot-scope="scope">
<div>{{ scope.row.projectId === 0 ? '出差' : scope.row.projectName }}</div>
</template>
</el-table-column>
<el-table-column
prop="count"
label="签到(天)"
width="180">
</el-table-column>
<el-table-column
prop="workTimes"
label="工作时长(天)">
</el-table-column>
<el-table-column
prop="hourWorkTimes"
label="工作时长(小时计)">
</el-table-column>
</el-table>
<div class="footer">
<p style="color: red">小时计与天计为单独记录计算</p>
<p>© 2024 财务与签到报告 | 由公司财务部门生成</p>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="showCalc = false">关闭</el-button>
</span>
</el-dialog>
</div>
</template>
@@ -361,10 +384,12 @@ export default {
selectAll: true,
calcResult: [],
calcResultItem: {},
activeIndex: '1',
calcResultUser: {},
calcResultAttendances: [],
calcResultProject: {},
projects: []
projects: [],
fullscreenLoading:false,
}
},
@@ -389,8 +414,28 @@ export default {
}
},
watch: {
activeIndex(newVal) {
if (newVal === '2') { // 数据分析 Tab
this.$nextTick(() => {
this.$refs.barChart && this.$refs.barChart.resize();
});
}
}
},
methods: {
// // tag切换方法
// handleClickTab(tag,event){
// if (tag.index===1){
// this.$nextTick(() => {
// console.log("1284u0")
// this.$refs.barChart && this.$refs.barChart.resize(); // 假设你的 BarChart 组件提供了 resize 方法
// });
// }
// },
// 获取单元格的样式
getCellStyle(user, dayIndex) {
const attendanceIndex = user.attendances.findIndex(
@@ -450,6 +495,30 @@ export default {
}
},
toFree() {
if (!this.selectAll) {
this.form = {
projectId: 1,
userId: this.selectUser.userId,
attendanceDay: this.selectIndex,
}
addOaAttendance(this.form).then(res => {
this.getList()
this.selectUser = this.selectArrayIndex >= this.userList.length - 1 ? this.selectUser : this.userList[this.selectArrayIndex + 1]
})
} else {
this.form = {
projectId: 1,
attendanceDay: this.selectIndex,
}
// 集体赋予状态
addBatchOaAttendance(this.form).then(res => {
this.getList()
})
}
},
// 删除签到
removeAttendance() {
if (!this.selectAll) {
@@ -477,9 +546,11 @@ export default {
// 计算
calcWork() {
this.fullscreenLoading = true;
workCalc(this.date).then(res => {
this.calcResult = res.data;
this.calcFlag = true;
this.fullscreenLoading = false;
})
},
@@ -681,7 +752,8 @@ export default {
margin-right: 8px;
border-radius: 3px;
}
.text{
.text {
width: 70%;
overflow: hidden;
text-overflow: ellipsis;