forked from TALL/check-work
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
14 KiB
413 lines
14 KiB
<template>
|
|
<div>
|
|
<div
|
|
data-tname="考勤"
|
|
data-pid="1433332016270811136"
|
|
data-uid="1217647686598135808"
|
|
data-rid="rid333"
|
|
data-tid="tid444"
|
|
data-did="did555"
|
|
style="height: 50px; width: 100%"
|
|
>
|
|
<div data-root="p1449944565128896512" style="height: 100%; width: 100%">
|
|
<div class="title"></div>
|
|
<form action="">
|
|
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">报名信息</div>
|
|
<div class="bg-white pl-4 pr-4">
|
|
<div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">姓名<span class="text-red-500 ml-1 align-middle">*</span></label>
|
|
<input class="text-sm text-right outline-none" id="name" type="text" placeholder="请输入您的姓名" />
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">身份证号<span class="text-red-500 ml-1 align-middle">*</span></label>
|
|
<input class="text-sm text-right outline-none" id="idNumber" type="text" placeholder="请输入您的身份证号" />
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">年龄</label>
|
|
<input class="text-sm text-right outline-none" id="age" value="age" type="number" placeholder="请输入您的年龄" />
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">性别</label>
|
|
<div>
|
|
<input class="text-sm" type="radio" name="gender" value="woman" /> 女
|
|
<input class="text-sm" type="radio" name="gender" value="man" /> 男
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8">
|
|
<label class="text-sm text-gray-400" border-b>身份</label>
|
|
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
|
|
<div class="startBtn text-sm">跳绳爱好者</div>
|
|
<div class="flex flex-nowrap ml-4">
|
|
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">联系方式</div>
|
|
<div class="bg-white pl-4 pr-4">
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">地址</label>
|
|
<input class="text-sm text-right outline-none" id="address" type="text" placeholder="请输入您的详细地址" />
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">电话<span class="text-red-500 ml-1 align-middle">*</span></label>
|
|
<input class="text-sm text-right outline-none" id="phone" type="text" placeholder="请输入您的电话" />
|
|
</div>
|
|
</div>
|
|
<div class="h-12 pl-4 text-sm" style="line-height: 3rem; color: #595959">培训信息</div>
|
|
<div class="bg-white pl-4 pr-4">
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">培训目标<span class="text-red-500 ml-1 align-middle">*</span></label>
|
|
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
|
|
<div class="startBtn text-sm">裁判员</div>
|
|
<div class="flex flex-nowrap ml-4">
|
|
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center h-12 pl-8 pr-8 border-b">
|
|
<label class="text-sm text-gray-400">培训项目<span class="text-red-500 ml-1 align-middle">*</span></label>
|
|
<div class="flex flex-nowrap rounded-md startBtnBox" onclick="show()">
|
|
<div class="startBtn text-sm text-gray-400">请选择培训项目</div>
|
|
<div class="flex flex-nowrap ml-4">
|
|
<img style="width: 15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="apply pl-8 pr-8">
|
|
<button class="bg-blue-500 text-white text-base apply-btn" onclick="p1449944565128896512.immediatelyApply()">立即报名</button>
|
|
</div>
|
|
</form>
|
|
<div class="w-screen h-screen fixed z-10 statusChoose bg-black bg-opacity-50" style="display: none; top: 0; left: 0">
|
|
<div class="flex flex-col absolute w-full bg-white" style="bottom: 0">
|
|
<div class="flex flex-row justify-between px-5 py-4">
|
|
<span class="text-gray-400" onclick="hide()">取消</span>
|
|
<span class="text-blue-500" onclick="choose()">确定</span>
|
|
</div>
|
|
<div class="bg-gray-200" style="width: 100%; height: 1px"></div>
|
|
<ul class="flex flex-col text-center" style="height: 240px; overflow-y: auto"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex';
|
|
import { clockQuery, clockPunch, clockAudit } from '@/config/api';
|
|
|
|
const columns = [
|
|
{ title: '姓名', dataIndex: 'memberName', key: 'memberName', align: 'center', width: '16%' },
|
|
{ title: '早', dataIndex: 'morning', key: 'morning', scopedSlots: { customRender: 'morning' }, align: 'center', width: '27%' },
|
|
{ title: '晚', dataIndex: 'night', key: 'night', scopedSlots: { customRender: 'night' }, align: 'center', width: '27%' },
|
|
{
|
|
title: '审核人',
|
|
dataIndex: 'checkerName',
|
|
key: 'checkerName',
|
|
scopedSlots: { customRender: 'checkerName' },
|
|
align: 'center',
|
|
width: '30%',
|
|
},
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
columns,
|
|
clockInfos: [],
|
|
options: null,
|
|
checkerId: undefined,
|
|
placement: 'left',
|
|
timer: null,
|
|
chooseTime: '',
|
|
auditOptions: null,
|
|
morningLoading: false,
|
|
nightLoading: false,
|
|
today: this.$moment(new Date()).format('YYYY-MM-DD'),
|
|
selectedDate: '', // 当前选择的日期
|
|
};
|
|
},
|
|
|
|
computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList', 'roleId', 'checkers']),
|
|
|
|
mounted() {
|
|
this.timer = setInterval(async () => {
|
|
if (this.projectId) {
|
|
clearInterval(this.timer);
|
|
await this.setParams();
|
|
|
|
// 自动移动到目标位置
|
|
// document.querySelector('#scrollTo').scrollIntoView({
|
|
// behavior: 'smooth', // 平滑过渡
|
|
// block: 'start', // 上边框与视窗顶部平齐。默认值
|
|
// });
|
|
}
|
|
}, 300);
|
|
|
|
const time = this.$moment(Date.now()).format('YYYY-MM-DD');
|
|
if (!this.startTime) {
|
|
this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
|
|
}
|
|
if (!this.endTime) {
|
|
this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations('home', ['setStartTime', 'setEndTime', 'setMemberIdList']),
|
|
|
|
async setParams() {
|
|
const { projectId, startTime, endTime, memberIdList, roleId } = this;
|
|
const params = { param: { projectId, memberIdList, startTime, endTime, roleId } };
|
|
await this.getClockQuery(params);
|
|
},
|
|
|
|
/**
|
|
* 查询考勤信息
|
|
* @param {string} projectId
|
|
* @param {array} memberIdList
|
|
* @param {string} startTime
|
|
* @param {string} endTime
|
|
*/
|
|
async getClockQuery(params) {
|
|
try {
|
|
const res = await clockQuery(params);
|
|
const { code, msg, data } = res.data;
|
|
if (code === 200) {
|
|
data.forEach(item => {
|
|
item.recordList.forEach(clcok => {
|
|
clcok.morningVisible = false;
|
|
clcok.nightVisible = false;
|
|
clcok.showNightTime = false;
|
|
clcok.showMorningTime = false;
|
|
});
|
|
});
|
|
|
|
this.clockInfos = [...data];
|
|
} else {
|
|
this.$message.error(msg || '获取失败');
|
|
throw msg;
|
|
}
|
|
} catch (error) {
|
|
throw error || '获取失败';
|
|
}
|
|
},
|
|
|
|
// 选择审核人
|
|
chooseChecker(value) {
|
|
this.checkerId = value;
|
|
},
|
|
|
|
// 打卡
|
|
checkTime(listIndex, index, clockType, id, memberId, checkerId, clockTime) {
|
|
const time = Date.now();
|
|
const selectTime = this.$moment(time).format('HH:mm');
|
|
if (clockType === 0) {
|
|
this.clockInfos[listIndex].recordList[index].morning = selectTime;
|
|
} else {
|
|
this.clockInfos[listIndex].recordList[index].night = selectTime;
|
|
}
|
|
const dateTime = this.$moment(`${clockTime} ${selectTime}`).format('x') - 0;
|
|
const params = { param: { checkerId: this.checkerId || checkerId || this.checkers[0].memberId, clockType, dateTime, id, memberId } };
|
|
this.handleClockPunch(params);
|
|
},
|
|
|
|
/**
|
|
* 打卡
|
|
* @param {string} checkerId 审核员id
|
|
* @param {array} clockType 打卡类型(0-早,1-晚)
|
|
* @param {string} dateTime 打卡时间
|
|
* @param {string} id 记录id(没有则不传)
|
|
* @param {string} memberId 考勤信息中的成员id
|
|
*/
|
|
async handleClockPunch(params) {
|
|
try {
|
|
if (params.param.clockType === 0) {
|
|
this.morningLoading = true;
|
|
} else {
|
|
this.nightLoading = true;
|
|
}
|
|
const res = await clockPunch(params);
|
|
const { code, msg } = res.data;
|
|
if (code === 200) {
|
|
this.$message.success('打卡成功');
|
|
const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
|
|
this.setParams(options);
|
|
} else {
|
|
this.$message.error(msg || '打卡失败');
|
|
throw msg;
|
|
}
|
|
if (params.param.clockType === 0) {
|
|
this.morningLoading = false;
|
|
} else {
|
|
this.nightLoading = false;
|
|
}
|
|
} catch (error) {
|
|
if (params.param.clockType === 0) {
|
|
this.morningLoading = false;
|
|
} else {
|
|
this.nightLoading = false;
|
|
}
|
|
throw error || '打卡失败';
|
|
}
|
|
},
|
|
|
|
changeVisible(index, status, type) {
|
|
if (status !== 0) {
|
|
this.clockInfos.forEach(item => {
|
|
item.recordList.forEach((clcok, i) => {
|
|
if (i === index && type === 'morningVisible') {
|
|
clcok.morningVisible = !clcok.morningVisible;
|
|
clcok.nightVisible = false;
|
|
} else if (i === index && type === 'nightVisible') {
|
|
clcok.morningVisible = false;
|
|
clcok.nightVisible = !clcok.nightVisible;
|
|
} else {
|
|
clcok.morningVisible = false;
|
|
clcok.nightVisible = false;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
|
|
// 修改
|
|
changeStatus(id, type, record, visible, show, selectedDate) {
|
|
record[visible] = false;
|
|
record[show] = true;
|
|
this.selectedDate = selectedDate;
|
|
this.auditOptions = { id, type };
|
|
},
|
|
// 选择修改时间
|
|
timeChange(time) {
|
|
let updateTime = this.$moment(time).format('HH:mm:ss');
|
|
let updateDate = this.selectedDate + ' ' + updateTime;
|
|
this.chooseTime = this.$moment(updateDate).format('x');
|
|
},
|
|
async openChange(open, record, show, timeType) {
|
|
if (!open && this.chooseTime) {
|
|
this.auditOptions[timeType] = this.chooseTime;
|
|
this.auditOptions.projectId = this.projectId;
|
|
const params = { param: this.auditOptions };
|
|
await this.handleClockAudit(params, record, show);
|
|
}
|
|
if (!open && !this.chooseTime) {
|
|
record[show] = false;
|
|
}
|
|
},
|
|
|
|
// 驳回
|
|
async rejectStatus(id, type, timeType, time, record, show) {
|
|
record[show] = false;
|
|
const params = { param: { id, type, [timeType]: time, projectId: this.projectId } };
|
|
await this.handleClockAudit(params, record, show);
|
|
},
|
|
|
|
// 取消
|
|
cancel(record, type) {
|
|
record[type] = false;
|
|
},
|
|
|
|
/**
|
|
* 审核打卡
|
|
* @param {string} id 打卡记录id
|
|
* @param {string} morning 早打卡时间
|
|
* @param {string} night 晚打卡时间
|
|
* @param {string} projectId 项目id
|
|
* @param {string} type 审批类型(0-修改,1-驳回,2-通过)
|
|
*/
|
|
async handleClockAudit(params, record, show) {
|
|
try {
|
|
const res = await clockAudit(params);
|
|
const { code, msg } = res.data;
|
|
if (code === 200) {
|
|
this.$message.success(params.param.type === 0 ? '修改成功' : params.param.type === 1 ? '驳回成功' : '审核通过');
|
|
record[show] = false;
|
|
this.auditOptions = null;
|
|
this.chooseTime = '';
|
|
const options = { startTime: this.startTime, endTime: this.endTime, memberIdList: this.memberIdList };
|
|
this.setParams(options);
|
|
} else {
|
|
this.$message.error(msg || '审核失败');
|
|
throw msg;
|
|
}
|
|
} catch (error) {
|
|
throw error || '审核失败';
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content,
|
|
.task-bar {
|
|
overflow-y: scroll;
|
|
}
|
|
.content::-webkit-scrollbar,
|
|
.task-bar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.paymentDocument {
|
|
height: 10.25rem;
|
|
padding-top: 0.9375rem;
|
|
}
|
|
.uploadJpg {
|
|
width: 6.5rem;
|
|
height: 6.5rem;
|
|
margin-top: 0.8125rem;
|
|
}
|
|
.apply {
|
|
height: 2.5rem;
|
|
margin-top: 3.75rem;
|
|
}
|
|
.apply-btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.ant-popover-inner {
|
|
width: 256px;
|
|
}
|
|
|
|
.ant-popover-message {
|
|
position: absolute !important;
|
|
left: 2px;
|
|
top: 8px;
|
|
}
|
|
.ant-popover-buttons button:nth-child(1) {
|
|
background-color: #3b82f6 !important;
|
|
color: #fff;
|
|
}
|
|
.content,
|
|
.task-bar {
|
|
overflow-y: scroll;
|
|
}
|
|
.content::-webkit-scrollbar,
|
|
.task-bar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.paymentDocument {
|
|
height: 10.25rem;
|
|
padding-top: 0.9375rem;
|
|
}
|
|
.uploadJpg {
|
|
width: 6.5rem;
|
|
height: 6.5rem;
|
|
margin-top: 0.8125rem;
|
|
}
|
|
.apply {
|
|
height: 2.5rem;
|
|
margin-top: 3.75rem;
|
|
}
|
|
.apply-btn {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|