1
0
mirror of https://github.com/FatttSnake/Pinnacle-OA.git synced 2026-04-06 07:21:24 +08:00

commit 2023/05/06

This commit is contained in:
gzw
2023-05-06 00:41:06 +08:00
parent c72b6dc4dc
commit 2fa80301e2
15 changed files with 995 additions and 9 deletions

View File

@@ -0,0 +1,398 @@
<template>
<div id="attendanceMain">
<div id="attendanceMain1">
<el-date-picker
v-model="attTime"
type="datetimerange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss"
>
</el-date-picker>
<el-button type="primary" style="margin-left: 15px" @click="getAttendancesByTime()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-search />
</el-icon>
<span style="vertical-align: center">查询</span>
</el-button>
<el-button type="warning" style="margin-left: 15px" @click="resetParam()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-reset />
</el-icon>
<span style="vertical-align: center">重置</span>
</el-button>
<el-button type="success" style="margin-left: 15px" @click="handleAdd()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-click />
</el-icon>
<span style="vertical-align: center">增加</span>
</el-button>
<el-popconfirm
title="你确定要批量删除这些数据吗?"
confirm-button-text="确定"
cancel-button-text="再想想"
icon-color="red"
@cancel="cancel"
@confirm="delBatch"
>
<template #reference>
<el-button type="danger" style="margin-left: 15px">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-deleteAll />
</el-icon>
<span style="vertical-align: center">批量删除</span>
</el-button>
</template>
</el-popconfirm>
</div>
<div id="attendanceMain2">
<el-table
:data="tableData"
border
style="width: 80%"
:header-cell-style="{ background: 'aliceblue' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="考勤编号" width="200"></el-table-column>
<el-table-column prop="user.username" label="用户名" width="180"></el-table-column>
<el-table-column prop="attTime" label="考勤时间">
<template #default="scope">
{{ formatDate(scope.row.attTime) }}
</template>
</el-table-column>
<el-table-column prop="status" label="考勤状态">
<template v-slot="scope">
<el-tag
:type="
scope.row.status === 1
? 'success'
: scope.row.status === 2
? 'primary'
: scope.row.status === 3
? 'warning'
: 'danger'
"
disable-transitions
>{{
scope.row.status === 1
? '签到'
: scope.row.status === 2
? '签退'
: scope.row.status === 3
? '迟到'
: '异常'
}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="operations" label="操作">
<template #default="scope">
<el-button type="success" size="small" @click="viewUpdate(scope.row)"
>更改
</el-button>
<el-popconfirm
title="您确定要删除吗?"
confirm-button-text="确定"
cancel-button-text="再想想"
icon-color="red"
@cancel="cancel"
@confirm="handleDelete(scope.row.id)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-dialog v-model="dialogFormVisible" title="考勤信息" width="25%">
<el-form ref="ruleForm" :rules="rules" :model="form" :label-width="formLabelWidth">
<el-form-item label="用户编号" prop="userId">
<el-input v-model="form.userId" autocomplete="off" style="width: 200px" />
</el-form-item>
<el-form-item label="考勤状态" prop="status">
<el-select
v-model="form.status"
placeholder="请选择考勤状态"
style="width: 200px"
>
<el-option label="签到" value="1" />
<el-option label="签退" value="2" />
<el-option label="迟到" value="3" />
</el-select>
</el-form-item>
<el-form-item label="考勤时间" v-model="form.attTime" prop="attTime">
<div class="block">
<el-date-picker
v-model="form.attTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择考勤时间"
style="width: 200px"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitForm">确认</el-button>
<el-button @click="cancel">取消</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script lang="ts">
import axios from 'axios'
import { SIZE_ICON_SM, SIZE_ICON_XL } from '@/constants/Common.constants.js'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import _ from 'lodash'
export default {
name: 'AttendanceHome',
data() {
return {
attendance: '',
id: '',
username: '',
attTime: [],
status: '',
pageNum: 1,
pageSize: 10,
total: 0,
multipleSelection: [],
formLabelWidth: '80px',
value1: '',
form: {
userId: '',
userName: '',
status: '',
attTime: ''
},
tableData: [],
dialogFormVisible: false,
rules: {
userId: [{ required: true, message: '请输入用户编号', trigger: 'change' }],
status: [{ required: true, message: '请选择考勤状态', trigger: 'change' }],
attTime: [{ required: true, message: '请选择考勤时间', trigger: 'change' }]
},
options: [
{
value: 1,
label: '签到'
},
{
value: 2,
label: '签退'
},
{
value: 3,
label: '迟到'
}
]
}
},
methods: {
SIZE_ICON_SM() {
return SIZE_ICON_SM
},
SIZE_ICON_XL() {
return SIZE_ICON_XL
},
formatDate(time) {
return new Date(time).toLocaleString()
},
// 获取所有考勤信息
getAttendances() {
axios
.get('http://localhost:8621/attendance/findAllAttendance')
.then((response) => {
console.log(response.data.data)
this.tableData = response.data.data
})
.catch((reportError) => {
console.log(reportError)
})
},
getAttendancesByTime() {
console.log(typeof this.attTime[0])
const start = this.handleDateFormatUTC(this.attTime[0])
const end = this.handleDateFormatUTC(this.attTime[1])
console.log(start + '\t' + end)
axios
.get('http://localhost:8621/attendance/findAttendanceByTime', {
params: {
startTime: start,
endTime: end
}
})
.then((response) => {
console.log(response.data.data)
this.tableData = response.data.data
ElMessage({
message: '查询成功',
type: 'success'
})
})
.catch((reportError) => {
console.log(reportError)
ElMessage({
message: '查询失败',
type: 'error'
})
})
},
handleDateFormatUTC(date) {
let newFormat = ''
const dateParse = new Date(Date.parse(date))
const yy = dateParse.getUTCFullYear()
const mm = _.padStart((dateParse.getUTCMonth() + 1).toString(), 2, '0')
const dd = _.padStart(dateParse.getUTCDate().toString(), 2, '0')
const hh = _.padStart(dateParse.getUTCHours().toString(), 2, '0')
const mf = _.padStart(dateParse.getUTCMinutes().toString(), 2, '0')
const ss = _.padStart(dateParse.getUTCSeconds().toString(), 2, '0')
newFormat = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
return newFormat
},
// 重置参数
resetParam() {
this.attTime = []
this.status = ''
this.getAttendances()
ElMessage({
message: '重置成功',
type: 'success'
})
},
// 表单重置
resetForm() {
this.$nextTick(() => {
this.$refs.ruleForm.resetFields()
})
},
// 打开添加弹窗
handleAdd() {
this.dialogFormVisible = true
this.resetForm()
},
// 处理保存
doSave() {
axios
.post('http://localhost:8621/attendance/saveAttendance', this.form)
.then((response) => {
this.dialogFormVisible = false
this.getAttendances()
console.log(response.data.data)
})
.catch((reportError) => {
console.log(reportError)
})
},
// 获取更改数据
viewUpdate(row) {
this.dialogFormVisible = true
this.$nextTick(() => {
this.form = row
this.form.status = row.status + ''
})
},
// 点击取消
cancel() {
this.dialogFormVisible = false
ElMessage({
message: '取消操作',
type: 'warning'
})
this.getAttendances()
},
// 提交表单
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.doSave()
ElMessage({
message: '操作成功',
type: 'success'
})
} else {
ElMessage.error('操作失败')
return false
}
})
},
// 操作删除
handleDelete(id) {
console.log(id)
axios
.delete('http://localhost:8621/attendance/delAttendance/' + id)
.then((response) => {
if (response) {
ElMessage({
message: '删除成功',
type: 'success'
})
this.getAttendances()
} else {
ElMessage({
message: '删除失败',
type: 'error'
})
}
})
.catch((reportError) => {
console.log(reportError)
})
},
// 批量删除
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val
},
// 批量删除
delBatch() {
const map = this.multipleSelection.map((v) => v.id)
axios
.post('http://localhost:8621/attendance/delBatchAttendance', map)
.then((response) => {
if (response) {
ElMessage({
message: '批量删除成功',
type: 'success'
})
this.getAttendances()
} else {
ElMessage({
message: '批量删除失败',
type: 'error'
})
}
})
.catch((reportError) => {
console.log(reportError)
})
}
},
created() {
this.getAttendances()
}
}
</script>
<style scoped></style>

View File

@@ -0,0 +1,293 @@
<template>
<div id="attendanceMain">
<div id="attendanceMain1">
<el-date-picker
v-model="attTimeB"
type="datetimerange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss"
>
</el-date-picker>
<el-button type="primary" style="margin-left: 15px" @click="getOneAttendancesByTime()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-search />
</el-icon>
<span style="vertical-align: center">查询</span>
</el-button>
<el-button type="warning" style="margin-left: 15px" @click="resetParam()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-reset />
</el-icon>
<span style="vertical-align: center">重置</span>
</el-button>
<el-button type="success" @click="handleAdd()" style="margin-left: 15px">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-click />
</el-icon>
<span style="vertical-align: center">打卡</span>
</el-button>
</div>
<div id="attendanceMain2">
<el-table
:data="tableData"
border
style="width: 80%"
:header-cell-style="{ background: 'aliceblue' }"
>
<el-table-column prop="id" label="考勤编号" width="400"></el-table-column>
<el-table-column prop="user.username" label="用户名" width="180"></el-table-column>
<el-table-column prop="attTime" label="考勤时间">
<template #default="scope">
{{ formatDate(scope.row.attTime) }}
</template>
</el-table-column>
<el-table-column prop="status" label="考勤状态">
<template v-slot="scope">
<el-tag
:type="
scope.row.status === 1
? 'success'
: scope.row.status === 2
? 'primary'
: scope.row.status === 3
? 'warning'
: 'danger'
"
disable-transitions
>{{
scope.row.status === 1
? '签到'
: scope.row.status === 2
? '签退'
: scope.row.status === 3
? '迟到'
: '异常'
}}
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div class="demo-pagination-block">
<el-pagination
small
:current-page="pageNum"
:page-size="pageSize"
:page-sizes="[5, 10, 20, 30]"
background
layout="total,sizes,prev, pager, next,jumper"
:total="total"
/>
</div>
<div>
<el-dialog v-model="dialogFormVisible" title="考勤信息" width="25%">
<el-form ref="ruleForm" :rules="rules" :model="form" :label-width="formLabelWidth">
<el-form-item label="用户编号" prop="userId">
<el-input
v-model="form.userId"
autocomplete="off"
style="width: 200px"
disabled
/>
</el-form-item>
<el-form-item label="考勤时间" v-model="attTime" prop="attTime">
<div class="block">
<el-date-picker
v-model="nowTime"
type="datetime"
disabled
style="width: 200px"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitForm()">确认</el-button>
<el-button @click="cancel">取消</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script lang="ts">
import axios from 'axios'
import { SIZE_ICON_SM, SIZE_ICON_XL } from '@/constants/Common.constants.js'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import _ from 'lodash'
export default {
name: 'UserAttendance',
data() {
return {
attendance: '',
id: '',
userId: 1,
username: '',
attTime: '',
attTimeB: [],
status: '',
pageNum: 1,
pageSize: 10,
total: 0,
nowTime: new Date(),
formLabelWidth: '80px',
value1: '',
form: {
userId: '',
userName: '',
status: '',
attTime: new Date()
},
tableData: [],
dialogFormVisible: false,
rules: {
userId: [{ required: true, message: '请输入用户编号', trigger: 'change' }],
attTime: [{ required: true, message: '请选择考勤时间', trigger: 'change' }]
}
}
},
methods: {
SIZE_ICON_SM() {
return SIZE_ICON_SM
},
SIZE_ICON_XL() {
return SIZE_ICON_XL
},
formatDate(time) {
return new Date(time).toLocaleString()
},
handleDateFormatUTC(date) {
let newFormat = ''
const dateParse = new Date(Date.parse(date))
const yy = dateParse.getUTCFullYear()
const mm = _.padStart((dateParse.getUTCMonth() + 1).toString(), 2, '0')
const dd = _.padStart(dateParse.getUTCDate().toString(), 2, '0')
const hh = _.padStart(dateParse.getUTCHours().toString(), 2, '0')
const mf = _.padStart(dateParse.getUTCMinutes().toString(), 2, '0')
const ss = _.padStart(dateParse.getUTCSeconds().toString(), 2, '0')
newFormat = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
return newFormat
},
// 重置参数
resetParam() {
this.attTimeB = []
this.status = ''
this.getAttendancesByUserId()
ElMessage({
message: '重置成功',
type: 'success'
})
},
getOneAttendancesByTime() {
console.log(typeof this.attTimeB[0])
const start = this.handleDateFormatUTC(this.attTimeB[0])
const end = this.handleDateFormatUTC(this.attTimeB[1])
console.log(start + '\t' + end)
axios
.get('http://localhost:8621/attendance/findOneAttendanceByTime', {
params: {
startTime: start,
endTime: end,
userId: this.userId
}
})
.then((response) => {
console.log(response.data.data)
this.tableData = response.data.data
ElMessage({
message: '查询成功',
type: 'success'
})
})
.catch((reportError) => {
console.log(reportError)
ElMessage({
message: '查询失败',
type: 'error'
})
this.getAttendancesByUserId()
})
},
getAttendancesByUserId() {
axios
.get('http://localhost:8621/attendance/selectAttendance/' + this.userId)
.then((response) => {
console.log(response.data.data)
this.tableData = response.data.data
})
.catch((reportError) => {
console.log(reportError)
})
},
resetForm() {
this.$refs.form.resetFields()
},
handleAdd() {
this.dialogFormVisible = true
// this.getNowDate()
this.nowTime = new Date()
this.form.attTime = this.nowTime
this.$nextTick(() => {
this.form.userId = this.userId + ''
})
},
doSave() {
axios
.post('http://localhost:8621/attendance/saveOneAttendance', this.form)
.then((response) => {
this.dialogFormVisible = false
this.getAttendancesByUserId()
console.log(response.data.data)
})
.catch((reportError) => {
console.log(reportError)
})
},
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log(this.form.attTime)
this.doSave()
ElMessage({
message: '操作成功',
type: 'success'
})
} else {
ElMessage.error('操作失败')
return false
}
})
},
// 点击取消
cancel() {
this.dialogFormVisible = false
ElMessage({
message: '取消操作',
type: 'warning'
})
this.getAttendancesByUserId()
}
},
created() {
this.getAttendancesByUserId()
}
}
</script>
<style scoped></style>