考勤列表
This commit is contained in:
57
src/api/project/attendance/echarts.ts
Normal file
57
src/api/project/attendance/echarts.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import * as echarts from 'echarts';
|
||||
const grid = {
|
||||
left: 100,
|
||||
right: 100,
|
||||
top: 30,
|
||||
bottom: 50
|
||||
};
|
||||
|
||||
const color = ['#91CC75', '#409EFF', '#fff'];
|
||||
const titleList = [
|
||||
{ name: '出勤人数', color: '#fff' },
|
||||
{ name: '半勤人数', color: '#fff' },
|
||||
{ name: '缺勤人数', color: '#000' }
|
||||
];
|
||||
|
||||
export const echartsConfig = (ref: any, list?: any) => {
|
||||
const commandstatsIntance = echarts.init(ref, 'macarons');
|
||||
const attendanceArray = list.map((item) => item.attendance);
|
||||
const halfAttendanceArray = list.map((item) => item.halfAttendance);
|
||||
const absenteeismArray = list.map((item) => item.absenteeism);
|
||||
|
||||
const rawData = [attendanceArray, halfAttendanceArray, absenteeismArray];
|
||||
//y轴数据
|
||||
const data = list.map((item) => item.clockDate);
|
||||
|
||||
const series: echarts.BarSeriesOption[] = titleList.map((item, sid) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: '25',
|
||||
label: {
|
||||
show: true,
|
||||
color: item.color,
|
||||
fontSize: 10
|
||||
},
|
||||
data: rawData[sid]
|
||||
};
|
||||
});
|
||||
commandstatsIntance.setOption({
|
||||
legend: {
|
||||
selectedMode: false,
|
||||
right: 0
|
||||
},
|
||||
grid,
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data
|
||||
},
|
||||
series,
|
||||
color
|
||||
});
|
||||
};
|
||||
99
src/api/project/attendance/index.ts
Normal file
99
src/api/project/attendance/index.ts
Normal file
@ -0,0 +1,99 @@
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
import {
|
||||
AttendanceVO,
|
||||
AttendanceForm,
|
||||
AttendanceQuery,
|
||||
AttendanceTwoWeekQuery,
|
||||
AttendanceTwoWeekVO,
|
||||
AttendanceMonthVO,
|
||||
AttendanceMonthQuery
|
||||
} from '@/api/project/attendance/types';
|
||||
|
||||
/**
|
||||
* 查询考勤列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const listAttendance = (query?: AttendanceQuery): AxiosPromise<AttendanceVO[]> => {
|
||||
return request({
|
||||
url: '/project/constructionUser/list/attendance/total',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询近两周考勤列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const listAttendanceTwoWeek = (query?: AttendanceTwoWeekQuery): AxiosPromise<AttendanceTwoWeekVO[]> => {
|
||||
return request({
|
||||
url: '/project/attendance/list/clockDate/twoWeek',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询施工人员月份考勤列表
|
||||
* @param query
|
||||
* @returns {*}
|
||||
*/
|
||||
|
||||
export const listAttendanceMonth = (query?: AttendanceMonthQuery): AxiosPromise<AttendanceMonthVO[]> => {
|
||||
return request({
|
||||
url: '/project/constructionUser/list/attendance/month',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询考勤详细
|
||||
* @param id
|
||||
*/
|
||||
export const getAttendance = (id: string | number): AxiosPromise<AttendanceVO> => {
|
||||
return request({
|
||||
url: '/project/attendance/' + id,
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增考勤
|
||||
* @param data
|
||||
*/
|
||||
export const addAttendance = (data: AttendanceForm) => {
|
||||
return request({
|
||||
url: '/project/attendance',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改考勤
|
||||
* @param data
|
||||
*/
|
||||
export const updateAttendance = (data: AttendanceForm) => {
|
||||
return request({
|
||||
url: '/project/attendance',
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除考勤
|
||||
* @param id
|
||||
*/
|
||||
export const delAttendance = (id: string | number | Array<string | number>) => {
|
||||
return request({
|
||||
url: '/project/attendance/' + id,
|
||||
method: 'delete'
|
||||
});
|
||||
};
|
||||
203
src/api/project/attendance/types.ts
Normal file
203
src/api/project/attendance/types.ts
Normal file
@ -0,0 +1,203 @@
|
||||
export interface AttendanceVO {
|
||||
/**
|
||||
* 人员姓名
|
||||
*/
|
||||
userName: string;
|
||||
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 人员id
|
||||
*/
|
||||
|
||||
/**
|
||||
* 上班打卡时间
|
||||
*/
|
||||
onClockTime: string;
|
||||
|
||||
/**
|
||||
* 下班打卡时间
|
||||
*/
|
||||
offClockTime: string;
|
||||
|
||||
/**
|
||||
* 打卡日期
|
||||
*/
|
||||
clockDate: string;
|
||||
|
||||
/**
|
||||
* 1正常,2迟到,3早退,4缺勤,5补卡
|
||||
*/
|
||||
clockStatus: string;
|
||||
|
||||
/**
|
||||
* 上下班（1上班,2下班）
|
||||
*/
|
||||
commuter: string;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface AttendanceTwoWeekQuery {
|
||||
projectId?: string | number;
|
||||
}
|
||||
|
||||
export interface AttendanceMonthQuery {
|
||||
id: string | number;
|
||||
clockMonth?: string;
|
||||
}
|
||||
|
||||
export interface AttendanceMonthVO {
|
||||
id: string | number;
|
||||
clockDate: string;
|
||||
status: string;
|
||||
attendanceList: monthList[];
|
||||
}
|
||||
|
||||
interface monthList {
|
||||
commuter: string;
|
||||
clockTime: string;
|
||||
clockStatus: string;
|
||||
}
|
||||
|
||||
export interface AttendanceTwoWeekVO {
|
||||
/**
|
||||
* 出勤人数
|
||||
*/
|
||||
attendance: string;
|
||||
|
||||
/**
|
||||
* 半勤人数
|
||||
|
||||
*/
|
||||
halfAttendance: string;
|
||||
|
||||
/**
|
||||
* 打卡日期
|
||||
*/
|
||||
clockDate: string;
|
||||
|
||||
/**
|
||||
* 缺勤人数
|
||||
|
||||
*/
|
||||
absenteeism: string;
|
||||
}
|
||||
|
||||
export interface AttendanceForm extends BaseEntity {
|
||||
/**
|
||||
* 主键id
|
||||
*/
|
||||
id?: string | number;
|
||||
|
||||
/**
|
||||
* 人员id
|
||||
*/
|
||||
userId?: string | number;
|
||||
typeOfWork?: string;
|
||||
teamId?: string;
|
||||
clockMonth?: string;
|
||||
|
||||
/**
|
||||
* 人脸照
|
||||
*/
|
||||
facePic?: string;
|
||||
|
||||
/**
|
||||
* 项目id
|
||||
*/
|
||||
projectId?: string | number;
|
||||
|
||||
/**
|
||||
* 上班打卡时间
|
||||
*/
|
||||
onClockTime?: string;
|
||||
|
||||
/**
|
||||
* 下班打卡时间
|
||||
*/
|
||||
offClockTime?: string;
|
||||
|
||||
/**
|
||||
* 打卡日期
|
||||
*/
|
||||
clockDate?: string;
|
||||
|
||||
/**
|
||||
* 1正常,2迟到,3早退,4缺勤,5补卡
|
||||
*/
|
||||
clockStatus?: string;
|
||||
|
||||
/**
|
||||
* 代打人员id
|
||||
*/
|
||||
pinchUserId?: string | number;
|
||||
|
||||
/**
|
||||
* 多次打卡时间记录
|
||||
*/
|
||||
clockRecord?: string;
|
||||
|
||||
/**
|
||||
* 上下班（1上班,2下班）
|
||||
*/
|
||||
commuter?: string;
|
||||
|
||||
/**
|
||||
* 日薪
|
||||
*/
|
||||
dailyWage?: number;
|
||||
|
||||
/**
|
||||
* 经度
|
||||
*/
|
||||
lng?: string;
|
||||
|
||||
/**
|
||||
* 纬度
|
||||
*/
|
||||
lat?: string;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
remark?: string;
|
||||
}
|
||||
|
||||
export interface AttendanceQuery extends PageQuery {
|
||||
/**
|
||||
* 人员姓名
|
||||
*/
|
||||
userName?: string;
|
||||
|
||||
/**
|
||||
* 项目id
|
||||
*/
|
||||
projectId?: string | number;
|
||||
typeOfWork?: string | number;
|
||||
teamId?: string | number;
|
||||
clockMonth?: string | number;
|
||||
|
||||
/**
|
||||
* 打卡日期
|
||||
*/
|
||||
clockDate?: string;
|
||||
|
||||
/**
|
||||
* 1正常,2迟到,3早退,4缺勤,5补卡
|
||||
*/
|
||||
clockStatus?: string;
|
||||
|
||||
/**
|
||||
* 上下班（1上班,2下班）
|
||||
*/
|
||||
commuter?: string;
|
||||
|
||||
/**
|
||||
* 日期范围参数
|
||||
*/
|
||||
params?: any;
|
||||
}
|
||||
2
src/types/global.d.ts
vendored
2
src/types/global.d.ts
vendored
@ -27,6 +27,8 @@ declare global {
|
||||
* 是否显示
|
||||
*/
|
||||
visible: boolean;
|
||||
details?: boolean;
|
||||
id?: string | number;
|
||||
}
|
||||
|
||||
declare interface UploadOption {
|
||||
|
||||
567
src/views/project/attendance/index.vue
Normal file
567
src/views/project/attendance/index.vue
Normal file
@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="人员姓名" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入人员姓名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班组" prop="teamId">
|
||||
<el-select v-model="queryParams.teamId" placeholder="请选择班组" clearable>
|
||||
<el-option v-for="dict in projectTeamOpt" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="工种" prop="typeOfWork">
|
||||
<el-select v-model="queryParams.typeOfWork" placeholder="请选择工种" clearable>
|
||||
<el-option v-for="dict in type_of_work" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="打卡日期" prop="clockMonth">
|
||||
<el-date-picker clearable v-model="queryParams.clockMonth" type="month" value-format="YYYY-MM" placeholder="请选择打卡日期" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-card shadow="hover">
|
||||
<!-- <template #header>
|
||||
<PieChart style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
<span style="vertical-align: middle">命令统计</span>
|
||||
</template> -->
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="commandstats" style="height: 200px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-card shadow="never">
|
||||
<!-- <template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['project:attendance:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['project:attendance:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['project:attendance:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['project:attendance:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template> -->
|
||||
|
||||
<el-table v-loading="loading" :data="attendanceList">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键id" align="center" prop="id" v-if="false" />
|
||||
<el-table-column label="人员姓名" align="center" prop="userName" />
|
||||
<el-table-column label="班组" align="center" prop="teamName" />
|
||||
<el-table-column label="工种" align="center" prop="typeOfWork">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="type_of_work" :value="scope.row.typeOfWork" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出勤(天)" align="center" prop="attendanceDays" />
|
||||
<el-table-column label="迟到(次)" align="center" prop="lateDays" />
|
||||
<el-table-column label="早退(次)" align="center" prop="leaveEarlyDays" />
|
||||
<el-table-column label="缺卡(次)" align="center" prop="unClockDays" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="View" @click="handleDetails(scope.row)" v-hasPermi="['project:attendance:edit']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改考勤对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="attendanceFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="人员id" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入人员id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人脸照" prop="facePic">
|
||||
<image-upload v-model="form.facePic" />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目id" prop="projectId">
|
||||
<el-input v-model="form.projectId" placeholder="请输入项目id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上班打卡时间" prop="onClockTime">
|
||||
<el-date-picker clearable v-model="form.onClockTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择上班打卡时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="下班打卡时间" prop="offClockTime">
|
||||
<el-date-picker clearable v-model="form.offClockTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择下班打卡时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="打卡日期" prop="clockDate">
|
||||
<el-date-picker clearable v-model="form.clockDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择打卡日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="1正常,2迟到,3早退,4缺勤,5补卡" prop="clockStatus">
|
||||
<el-radio-group v-model="form.clockStatus">
|
||||
<el-radio v-for="dict in clock_status_type" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="代打人员id" prop="pinchUserId">
|
||||
<el-input v-model="form.pinchUserId" placeholder="请输入代打人员id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="多次打卡时间记录" prop="clockRecord">
|
||||
<el-input v-model="form.clockRecord" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上下班" prop="commuter">
|
||||
<el-input v-model="form.commuter" placeholder="请输入上下班" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日薪" prop="dailyWage">
|
||||
<el-input v-model="form.dailyWage" placeholder="请输入日薪" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="lng">
|
||||
<el-input v-model="form.lng" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="lat">
|
||||
<el-input v-model="form.lat" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 考勤详情对话框 -->
|
||||
<el-dialog v-model="dialog.details" width="1300px">
|
||||
<el-calendar ref="calendar" class="h170 pos-relative">
|
||||
<template #header="{ date }">
|
||||
<span>
|
||||
<el-button-group>
|
||||
<el-button type="primary" size="small" icon="ArrowLeft" @click="selectDate('prev-month', date)">上一月</el-button>
|
||||
<el-button type="primary" size="small" @click="selectDate('next-month', date)">
|
||||
下一月<el-icon class="el-icon--right"><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</span>
|
||||
<span class="label">{{ date }} —{{ dialog.title }}出勤</span>
|
||||
<div class="status-detail flex items-center justify-between">
|
||||
<div class="dot1">全天考勤正常</div>
|
||||
<div class="dot2">当天存在异常迟到、早退、缺卡</div>
|
||||
<div class="dot3">当天提交过补卡申请</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #date-cell="{ data }">
|
||||
<div class="flex-c">
|
||||
<p class="time">{{ day(data) }}</p>
|
||||
<img v-if="!isplayCard(data)" src="http://zmkg.cqet.top:8899/assets/empty-CZvxqguX.png" /><span v-if="!isplayCard(data)"
|
||||
>暂无打卡记录</span
|
||||
>
|
||||
<div v-if="isplayCard(data)" class="flex-r"><div class="circle" :class="'status' + attendanceStatus(data)"></div></div>
|
||||
<div v-if="isplayCard(data)" class="flex justify-center flex-col w100% items-center">
|
||||
<el-button type="primary" plain size="small" class="w70% my-2" v-if="workTime(data)">{{ workTime(data) }} 上班打卡</el-button>
|
||||
<el-button type="danger" plain size="small" class="w50% my-2" v-else>上班缺卡</el-button>
|
||||
<span></span>
|
||||
<el-button type="warning" plain size="small" class="w70%" v-if="workFromTime(data)">{{ workFromTime(data) }} 下班打卡</el-button>
|
||||
<el-button type="danger" plain size="small" class="w50%" v-else>下班缺卡</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Attendance" lang="ts">
|
||||
import {
|
||||
listAttendance,
|
||||
getAttendance,
|
||||
delAttendance,
|
||||
addAttendance,
|
||||
updateAttendance,
|
||||
listAttendanceTwoWeek,
|
||||
listAttendanceMonth
|
||||
} from '@/api/project/attendance';
|
||||
import { echartsConfig } from '@/api/project/attendance/echarts';
|
||||
import { AttendanceVO, AttendanceQuery, AttendanceForm, AttendanceTwoWeekVO, AttendanceMonthVO } from '@/api/project/attendance/types';
|
||||
import { listProjectTeam } from '@/api/project/projectTeam';
|
||||
import { ProjectTeamVO } from '@/api/project/projectTeam/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
const commandstats = ref();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { clock_status_type, type_of_work } = toRefs<any>(proxy?.useDict('clock_status_type', 'type_of_work'));
|
||||
import type { CalendarDateType, CalendarInstance } from 'element-plus';
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const attendanceList = ref<AttendanceVO[]>([]);
|
||||
const attendanceTwoWeekList = ref<AttendanceTwoWeekVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const calendarList = ref<AttendanceMonthVO[]>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const attendanceFormRef = ref<ElFormInstance>();
|
||||
//班组列表
|
||||
const projectTeamOpt = ref([]);
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
details: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: AttendanceForm = {
|
||||
id: undefined,
|
||||
userId: undefined,
|
||||
facePic: undefined,
|
||||
onClockTime: undefined,
|
||||
offClockTime: undefined,
|
||||
clockDate: undefined,
|
||||
clockStatus: undefined,
|
||||
pinchUserId: undefined,
|
||||
clockRecord: undefined,
|
||||
commuter: undefined,
|
||||
dailyWage: undefined,
|
||||
projectId: currentProject.value.id,
|
||||
lng: undefined,
|
||||
lat: undefined,
|
||||
remark: undefined,
|
||||
typeOfWork: undefined,
|
||||
teamId: undefined,
|
||||
clockMonth: undefined
|
||||
};
|
||||
const data = reactive<PageData<AttendanceForm, AttendanceQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userName: undefined,
|
||||
clockDate: undefined,
|
||||
clockStatus: undefined,
|
||||
commuter: undefined,
|
||||
projectId: currentProject.value.id,
|
||||
typeOfWork: undefined,
|
||||
teamId: undefined,
|
||||
clockMonth: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '人员id不能为空', trigger: 'blur' }],
|
||||
facePic: [{ required: true, message: '人脸照不能为空', trigger: 'blur' }],
|
||||
projectId: [{ required: true, message: '项目id不能为空', trigger: 'blur' }],
|
||||
clockDate: [{ required: true, message: '打卡日期不能为空', trigger: 'blur' }],
|
||||
clockStatus: [{ required: true, message: '1正常,2迟到,3早退,4缺勤,5补卡不能为空', trigger: 'change' }]
|
||||
}
|
||||
});
|
||||
|
||||
const day = computed(() => (date) => {
|
||||
return date.day.split('-').slice(1).join('-');
|
||||
});
|
||||
//是否打卡
|
||||
const isplayCard = computed(() => (date) => {
|
||||
return calendarList.value.some((item) => item.clockDate == date.day);
|
||||
});
|
||||
//打卡时间下标
|
||||
const playCardIdx = computed(() => (date) => {
|
||||
return calendarList.value.findIndex((item) => item.clockDate == date.day);
|
||||
});
|
||||
//上班时间
|
||||
const workTime = computed(() => (date) => {
|
||||
return calendarList.value[playCardIdx.value(date)].attendanceList[0].clockTime?.slice(10);
|
||||
});
|
||||
|
||||
//下班时间
|
||||
const workFromTime = computed(() => (date) => {
|
||||
return calendarList.value[playCardIdx.value(date)].attendanceList[1].clockTime?.slice(10);
|
||||
});
|
||||
|
||||
//考勤状态
|
||||
const attendanceStatus = computed(() => (date) => {
|
||||
return calendarList.value[playCardIdx.value(date)].status;
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
const calendar = ref<CalendarInstance>();
|
||||
const selectDate = async (val: CalendarDateType, date) => {
|
||||
if (!calendar.value) return;
|
||||
calendar.value.selectDate(val);
|
||||
const clockMonth = incrementMonth(date, val == 'prev-month' ? -1 : 1);
|
||||
const res = await listAttendanceMonth({ id: dialog.id, clockMonth });
|
||||
calendarList.value = res.data;
|
||||
};
|
||||
|
||||
/** 查询考勤列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listAttendance(queryParams.value);
|
||||
attendanceList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const getProjectTeamList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listProjectTeam({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
orderByColumn: 'createTime',
|
||||
isAsc: 'desc',
|
||||
projectId: currentProject.value.id
|
||||
});
|
||||
projectTeamOpt.value = res.rows.map((projectTeam: ProjectTeamVO) => ({
|
||||
value: projectTeam.id,
|
||||
label: projectTeam.teamName
|
||||
}));
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 查询近两周考勤列表 */
|
||||
const getListTwoWeek = async () => {
|
||||
loading.value = true;
|
||||
const res = await listAttendanceTwoWeek({ projectId: currentProject.value.id });
|
||||
attendanceTwoWeekList.value = res.data;
|
||||
echartsConfig(commandstats.value, attendanceTwoWeekList.value);
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
attendanceFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
// const handleSelectionChange = (selection: AttendanceVO[]) => {
|
||||
// ids.value = selection.map((item) => item.id);
|
||||
// single.value = selection.length != 1;
|
||||
// multiple.value = !selection.length;
|
||||
// };
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加考勤';
|
||||
};
|
||||
//处理获取到的月份
|
||||
const incrementMonth = (dateStr: string, monthsToAdd: number) => {
|
||||
const [yearPart, monthPart] = dateStr.replace(/\s/g, '').split('年');
|
||||
const year = parseInt(yearPart, 10);
|
||||
const month = parseInt(monthPart.replace('月', ''), 10);
|
||||
// 创建一个新的 Date 对象，设置为输入日期的第一天
|
||||
const date = new Date(year, month - 1, 1);
|
||||
|
||||
// 增加一个月
|
||||
date.setMonth(date.getMonth() + monthsToAdd);
|
||||
|
||||
// 提取增加一个月后的年份和月份
|
||||
const newYear = date.getFullYear();
|
||||
const newMonth = String(date.getMonth() + 1).padStart(2, '0');
|
||||
|
||||
// 返回格式化后的日期字符串
|
||||
return `${newYear}-${newMonth}`;
|
||||
};
|
||||
|
||||
/** 详情按钮操作 */
|
||||
const handleDetails = async (row?: AttendanceVO) => {
|
||||
const res = await listAttendanceMonth({ id: row?.id });
|
||||
calendarList.value = res.data;
|
||||
dialog.details = true;
|
||||
dialog.id = row?.id;
|
||||
dialog.title = row?.userName || '';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
attendanceFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateAttendance(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addAttendance(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
// const handleDelete = async (row?: AttendanceVO) => {
|
||||
// const _ids = row?.id || ids.value;
|
||||
// await proxy?.$modal.confirm('是否确认删除考勤编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
// await delAttendance(_ids);
|
||||
// proxy?.$modal.msgSuccess('删除成功');
|
||||
// await getList();
|
||||
// };
|
||||
|
||||
/** 导出按钮操作 */
|
||||
// const handleExport = () => {
|
||||
// proxy?.download(
|
||||
// 'project/attendance/export',
|
||||
// {
|
||||
// ...queryParams.value
|
||||
// },
|
||||
// `attendance_${new Date().getTime()}.xlsx`
|
||||
// );
|
||||
// };
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getListTwoWeek();
|
||||
getProjectTeamList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.label {
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%);
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-detail {
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
> div {
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
left: -15px;
|
||||
top: 30%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.dot1 {
|
||||
&::before {
|
||||
background-color: #1d6fe9;
|
||||
}
|
||||
}
|
||||
.dot2 {
|
||||
&::before {
|
||||
background-color: #f55f4e;
|
||||
}
|
||||
}
|
||||
.dot3 {
|
||||
&::before {
|
||||
background-color: #ff8d1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-c {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
> span {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.el-calendar-table__row {
|
||||
height: 100px;
|
||||
}
|
||||
.flex-r {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 5px;
|
||||
height: 10px;
|
||||
.circle {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin: 0 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 12px;
|
||||
top: 35px;
|
||||
}
|
||||
.status2 {
|
||||
background: #f55f4e;
|
||||
}
|
||||
.status1 {
|
||||
background: #1d6fe9;
|
||||
}
|
||||
.status3 {
|
||||
background: #ff8d1a;
|
||||
}
|
||||
}
|
||||
::v-deep(.el-calendar) {
|
||||
.el-calendar__body {
|
||||
height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
td {
|
||||
height: 110px;
|
||||
.el-calendar-day {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user