wally
/
plugin-templete
1
0
Fork 1
Code Issues Releases Wiki Activity
Browse Source

请假插件

tall-leave
xuesinan 3 years ago
parent
5f8670be69
commit
7546e6a65c
1 changed files with 131 additions and 453 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 584
      index.html

584
index.html
View File

@ -50,88 +50,137 @@
<div data-tname="考勤" data-pid="1473556016628244480" data-uid="1217647686598135808" data-rid="1473556018582790144" data-tid="tid444" data-did="did555" style="height:500px;width:100%">
<!-- 考勤插件 -->
<div data-root="p1473554031225085952" style="height: 100%; width: 100%;">
<div class="pb-3 flex justify-between items-center border-b">
<div class="pb-3 flex justify-between items-center">
<div class="flex items-center border border-blue-500 rounded-sm">
<span class="px-2.5 h-6 leading-6 text-sm text-white bg-blue-500">签到</span>
<span class="px-2.5 h-6 leading-6 text-sm text-blue-500">请假</span>
</div>
<div onclick="p1473554031225085952.jumpDetails(this)">
<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
<span class="px-2 py-1.5 text-xs text-white bg-blue-500">今日请假</span>
<span class="px-2 py-1.5 text-xs text-blue-500">我的请假</span>
</div>
<div class="flex items-center">
<span class="px-2 py-1.5 text-xs text-white bg-blue-500 rounded-sm" onclick="p1473554031225085952.showPopup()">请假申请</span>
<div class="ml-2" onclick="p1473554031225085952.jumpDetails(this)">
<!-- <img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" /> -->
<span class="text-blue-500 text-xs">查看更多</span>
</div>
</div>
</div>
<div class="mt-2 px-2">
<!-- <div class="flex items-center text-center h-10 border-b">
<div class="text-sm" style="width: 20%;">姓名</div>
<div class="text-sm" style="width: 25%;">早打卡</div>
<div class="text-sm" style="width: 25%;">晚打卡</div>
<div class="text-sm" style="width: 30%;">审核人</div>
</div> -->
<div class="border-t border-gray-200">
<div class="border-b text-center flex items-center">
<div class="p-1 text-sm" style="width: 18%;">姓名</div>
<div class="p-1 text-sm" style="width: 18%;">类型</div>
<div class="p-1 text-sm" style="width: 28%;">时间</div>
<div class="p-1 text-sm" style="width: 18%;">时长(天)</div>
<div class="p-1 text-sm" style="width: 18%;">审核状态</div>
</div>
<div class="record-wrap">
<div class="flex items-center text-center h-10 border-b">
<div class="text-sm" style="width: 20%;">姓名</div>
<div class="flex items-center text-center border-b">
<div class="p-1 text-sm" style="width: 18%;">张三</div>
<div class="p-1 text-sm" style="width: 18%;">加班</div>
<div class="p-1 text-sm" style="width: 28%;">5.21 9:00 - 5.21 18:00</div>
<div class="p-1 text-sm" style="width: 18%;">1</div>
<div class="p-1 text-sm" style="width: 18%;">
<div class="inline-block px-2 py-1.5 text-xs text-white bg-blue-500 rounded-sm">通过</div>
</div>
</div>
<div class="text-sm" style="width: 25%;">
<div class="flex-1">
<button class="morningClockBtn bg-blue-500 text-xs rounded py-1 text-white" style="width: 50px;">早打卡</button>
</div>
</div>
<div class="flex items-center text-center border-b">
<div class="p-1 text-sm" style="width: 18%;">张三</div>
<div class="p-1 text-sm" style="width: 18%;">请假</div>
<div class="p-1 text-sm" style="width: 28%;">5.21 9:00 - 5.21 18:00</div>
<div class="p-1 text-sm" style="width: 18%;">1</div>
<div class="p-1 text-sm" style="width: 18%;">待审批</div>
</div>
<div class="text-sm" style="width: 25%;">
<div class="flex-1">
<button class="nightClockBtn bg-blue-500 text-xs rounded py-1 text-white" style="width: 50px;">晚打卡</button>
</div>
</div>
<div class="text-sm" style="width: 30%;">
<div class="flex justify-between flex-nowrap border py-1 px-3 rounded-md" onclick="p1473554031225085952.show()">
<div class="startBtn mr-1">审核人</div>
<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/down.svg" />
</div>
</div>
<div class="flex items-center text-center border-b">
<div class="p-1 text-sm" style="width: 18%;">张三</div>
<div class="p-1 text-sm" style="width: 18%;">调休</div>
<div class="p-1 text-sm" style="width: 28%;">5.21 9:00 - 5.21 18:00</div>
<div class="p-1 text-sm" style="width: 18%;">1</div>
<div class="p-1 text-sm" style="width: 18%;">待审批</div>
</div>
</div>
</div>
<!-- 选择审核人 -->
<div class="w-screen h-screen fixed z-20 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="p1473554031225085952.hide()">取消</span>
<span class="font-bold">选择审核人</span>
<span class="text-blue-500" onclick="p1473554031225085952.choose()">确定</span>
<div class="flex items-center text-center border-b">
<div class="p-1 text-sm" style="width: 18%;">张三</div>
<div class="p-1 text-sm" style="width: 18%;">弹性</div>
<div class="p-1 text-sm" style="width: 28%;">5.21 9:00 - 5.21 18:00</div>
<div class="p-1 text-sm" style="width: 18%;">1</div>
<div class="p-1 text-sm" style="width: 18%;">待审批</div>
</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 class="w-screen h-screen fixed z-10 clockInPopup bg-black bg-opacity-50" style="display: none; top: 0; left: 0;">
<div class="flex flex-col absolute bg-white rounded-lg" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%;">
<div class="p-4">
<div class="h-14 flex justify-center items-center font-bold" style="font-size: 17px;">打卡</div>
<div class="h-12 flex justify-between items-center text-sm" style="border-bottom: 1px solid rgba(0, 0, 0, .1); color: #595959;">
<div>打卡原因</div>
<input class="punch-reason text-right focus:outline-none" type="text" placeholder="请输入打卡原因" />
<div class="pt-1 pb-2 flex justify-center items-center font-bold" style="font-size: 17px;">请假申请</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px">时间：</div>
<input class="start-time px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="datetime-local" />
</div>
<div class="h-12 flex justify-between items-center text-sm" style="border-bottom: 1px solid rgba(0, 0, 0, .1); color: #595959;">
<div>打卡时间</div>
<div class="flex items-center">
<input class="clockIn text-right focus:outline-none" type="time" value="00:00" />
<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px"></div>
<input class="end-time px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="datetime-local" />
</div>
<div class="h-12 flex justify-between items-center text-sm" style="border-bottom: 1px solid rgba(0, 0, 0, .1); color: #595959;" onclick="p1473554031225085952.show()">
<div>审核人</div>
<div class="flex items-center"><span class="checker">周勇</span><img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" /></div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px">类型：</div>
<label class="flex items-center"><input class="mr-1" type="radio" name="type" value="请假" checked />请假</label>
<label class="ml-3 flex items-center"><input class="mr-1" type="radio" name="type" value="调休" />调休</label>
<label class="ml-3 flex items-center"><input class="mr-1" type="radio" name="type" value="加班" />加班</label>
<label class="ml-3 flex items-center"><input class="mr-1" type="radio" name="type" value="弹性" />弹性</label>
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px">时长：</div>
<input class="punch-reason px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="number" />
<span class="ml-1">天</span>
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px">请假方式：</div>
<label class="flex items-center"><input class="mr-1" type="radio" name="leaveType" value="微信" checked />微信</label>
<label class="ml-3 flex items-center"><input class="mr-1" type="radio" name="leaveType" value="口头" />口头</label>
<label class="ml-3 flex items-center"><input class="mr-1" type="radio" name="leaveType` " value="PT" />PT</label>
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px">审核人：</div>
<input class="reviewer-1 px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="text" onFocus="p1473554031225085952.show(1)" />
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px"></div>
<input class="reviewer-2 px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="text" onFocus="p1473554031225085952.show(2)" />
</div>
<div class="mt-3 flex items-center text-sm" style="color: #595959;">
<div class="text-right" style="width: 80px"></div>
<input class="reviewer-3 px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="text" onFocus="p1473554031225085952.show(3)" />
</div>
</div>
<div class="mt-4 flex" style="border-top: 1px solid rgba(0, 0, 0, .1);">
<div class="w-2/4 h-14 flex justify-center items-center" style="font-size: 17px; border-right: 1px solid rgba(0, 0, 0, .1);" onclick="p1473554031225085952.hidePopup()">取消</div>
<div class="w-2/4 h-14 flex justify-center items-center text-blue-500" style="font-size: 17px;" onclick="p1473554031225085952.punch()">提交</div>
<div class="w-2/4 h-14 flex justify-center items-center" style="font-size: 16px; border-right: 1px solid rgba(0, 0, 0, .1);" onclick="p1473554031225085952.hidePopup()">取消</div>
<div class="w-2/4 h-14 flex justify-center items-center text-blue-500" style="font-size: 16px;" onclick="p1473554031225085952.punch()">提交</div>
</div>
</div>
</div>
<!-- 选择审核人 -->
<div class="w-screen h-screen fixed z-20 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="p1473554031225085952.hide()">取消</span>
<span class="font-bold">选择审核人</span>
<span class="text-blue-500" onclick="p1473554031225085952.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>
@ -144,23 +193,15 @@
roleId: '',
dom: '',
lists: [],
recordList: [], // 打卡列表
recordTime: '', // 打卡列表时间
currentIndex: '',
memberId: '', // 打卡人id
currentIndex: '', // 当前点击的审核人下标
checkerId: '', // 审核员id
id: '', // 记录id
today: '', // 今天日期
clockType: -1, // 打卡类型 0 早打卡 1 晚打卡
currReviewer: 1, // 当前选择的审核人等级
init() {
this.dom = document.querySelector("div[data-root=p1473554031225085952]");
var domBox = this.dom.parentNode;
var title = this.dom.querySelector('.title');
let currTime = new Date();
this.today = currTime.getFullYear() + '-' + (currTime.getMonth() + 1) + '-' + currTime.getDate();
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
this.projectId = domBox.getAttribute("data-pid");
@ -189,75 +230,12 @@
},
/**
* 批量查询打卡信息
* 批量查询请假信息
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getClockQuery() {
var that = this
var timer = null;
// let d = new Date()
// let startTime = new Date(d).getTime()
let startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime();
let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime();
const params = JSON.stringify({
param: { projectId: that.projectId,roleId: that.roleId, memberIdList: [], startTime, endTime }
});
var url = 'https://test.tall.wiki/gateway/defaultwbs/clock/query';
fetch(url, {
method: 'POST',
mode: 'cors',
body: params,
headers: new Headers({
'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
})
}).then(function(response) {
return response.json();
}).catch(function(error){
console.error('Error:', error)
}).then(function(res){
const { success, code, data, msg } = res;
if (success && code === 200) {
if(data && data.length && data[0].recordList && data[0].recordList.length){
that.recordList = data[0].recordList;
that.recordTime = data[0].dateTime;
let html = '';
for (let i = 0; i < that.recordList.length; i++) {
html += `<div class="record-item-${i} flex items-center text-center h-10 border-b"></div>`;
}
that.dom.querySelector('.record-wrap').innerHTML = html;
for (let i = 0; i < that.recordList.length; i++) {
that.renderData(i);
}
that.memberId = data[0].recordList[0].memberId
that.id = data[0].recordList[0].id
// 审核人
if (data[0].recordList[0].lastCheckerId) {
that.checkerId = data[0].recordList[0].lastCheckerId
} else if(data[0].recordList[0].checkerId) {
that.checkerId = data[0].recordList[0].checkerId
} else{
that.checkerId = that.lists[0].memberId;
}
let checkerName = '';
if (data[0].recordList[0].lastCheckerName) {
checkerName = data[0].recordList[0].lastCheckerName;
} else if (data[0].recordList[0].checkerName) {
checkerName = data[0].recordList[0].checkerName;
} else {
checkerName = that.lists[0].name;
}
that.dom.querySelector('.checker').innerHTML = checkerName;
}
} else {
console.log('msg: ', msg);
}
})
},
/**
@ -291,48 +269,7 @@
data[i].choose = true
that.lists.push(data[i])
}
// 查询考勤信息
that.getClockQuery()
} else {
console.log('msg: ', msg);
}
})
},
/**
* 打卡
* @param {string} checkerId 审核员id
* @param {string} clockType 打卡类型 0-早,1-晚
* @param {string} dateTime 打卡日期
* @param {string} id 记录id(没有则不传)
* @param {string} memberId 成员id
*/
punch(){
var that = this
let { checkerId, id, memberId, clockType } = that
let d = new Date()
let dateTime = new Date(d).getTime()
let remark = that.dom.querySelector('.punch-reason').value;
const params = JSON.stringify({
param: { checkerId, id, memberId, dateTime, clockType, remark }
});
var url = 'https://test.tall.wiki/gateway/defaultwbs/clock/punch';
fetch(url, {
method: 'POST',
mode: 'cors',
body: params,
headers: new Headers({
'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
})
}).then(function(response) {
return response.json();
}).catch(function(error) {
console.error('Error:', error)
}).then(function(res){
const { success, code, data, msg } = res;
if (success && code === 200) {
that.hidePopup();
// 查询考勤信息
// 查询请假信息
that.getClockQuery()
} else {
console.log('msg: ', msg);
@ -340,25 +277,31 @@
})
},
// 显示打卡弹框
showPopup(type){
// 显示申请弹框
showPopup(){
var clockInPopup = this.dom.querySelector('.clockInPopup');
clockInPopup.style.display = 'block';
this.clockType = type;
let time = this.format(new Date());
let clockIn = this.dom.querySelector('.clockIn');
clockIn.value = time;
let time = this.format(new Date()); // 当前时间
let arr = time.split(' ');
// 默认开始时间
let startTime = arr[0] + 'T' + '09:00';
this.dom.querySelector('.start-time').value = startTime;
// 默认结束时间
let endTime = arr[0] + 'T' + '18:00';
this.dom.querySelector('.end-time').value = endTime;
},
// 隐藏打卡弹框
// 隐藏申请弹框
hidePopup() {
var clockInPopup = this.dom.querySelector('.clockInPopup');
clockInPopup.style.display = 'none';
},
// 显示选择框
show(){
show(type){
this.currReviewer = type; // 当前选择的审核人等级
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='block';
var list = ''
@ -393,10 +336,7 @@
*/
choose(){
const that = this;
const { dom } = that;
var startBtn = dom.querySelector('.startBtn');
startBtn.innerHTML = that.lists[that.currentIndex].name;
that.dom.querySelector('.checker').innerHTML = that.lists[that.currentIndex].name;
that.dom.querySelector('.reviewer-' + that.currReviewer).value = that.lists[that.currentIndex].name;
that.checkerId = that.lists[that.currentIndex].memberId;
that.hide();
},
@ -407,279 +347,17 @@
statusChoose.style.display='none';
},
// 显示操作面板
showAction(index, type) {
for (let i = 0; i < this.recordList.length; i++) {
this.renderData(i);
}
let action = '';
if (type === 'morning') {
action = this.dom.querySelector('.morning-action-' + index);
} else {
action = this.dom.querySelector('.night-action-' + index);
}
action.style.display = 'inline-block';
},
// 隐藏操作面板
hideAction(index, type) {
let action = '';
if (type === 'morning') {
action = this.dom.querySelector('.morning-action-' + index);
} else {
action = this.dom.querySelector('.night-action-' + index);
}
action.style.display = 'none';
},
// 确认、驳回
rejectStatus(index, type, timeType) {
let record = this.recordList[index];
const param = { id: record.id, type: type, projectId: this.projectId };
if (timeType === 'morning') {
param.morning = record.morning;
} else {
param.night = record.night;
}
this.handleClockAudit(param, index);
},
// 修改时间
changeTimeData(time, index, type) {
let record = this.recordList[index];
let date = new Date(this.recordTime + ' ' + time);
let dateTime = date.getTime();
const param = { id: record.id, type: 0, projectId: this.projectId };
if (type === 'morning') {
param.morning = dateTime;
} else {
param.night = dateTime;
}
this.handleClockAudit(param, index);
},
/**
* 审核打卡
* @param {string} id 打卡记录id
* @param {string} morning 早打卡时间
* @param {string} night 晚打卡时间
* @param {string} projectId 项目id
* @param {string} type 审批类型(0-修改,1-驳回,2-通过)
*/
handleClockAudit(param, index) {
var that = this
const params = JSON.stringify({
param: param
});
var url = 'https://test.tall.wiki/gateway/defaultwbs/clock/audit';
fetch(url, {
method: 'POST',
mode: 'cors',
body: params,
headers: new Headers({
'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
})
}).then(function(response) {
return response.json();
}).catch(function(error){
console.error('Error:', error)
}).then(function(res){
const { success, code, data, msg } = res;
if (success && code === 200) {
// that.getClockQuery();
if (param.morning) {
if (param.type === 0) { // 修改
that.recordList[index].morningStatus = 1;
} else if (param.type === 1) { // 驳回
that.recordList[index].morningStatus = 2;
} else if (param.type === 2) { // 审核
that.recordList[index].morningStatus = 3;
}
that.recordList[index].morning = param.morning;
} else {
if (param.type === 0) { // 修改
that.recordList[index].nightStatus = 1;
} else if (param.type === 1) { // 驳回
that.recordList[index].nightStatus = 2;
} else if (param.type === 2) { // 审核
that.recordList[index].nightStatus = 3;
}
that.recordList[index].night = param.night;
}
} else {
console.log('msg: ', msg);
}
that.renderData(index);
})
},
// 修改时间
changePunchTime(index, type) {
if (type === 'morning') {
this.dom.querySelector('.morning-input-' + index).style.display = 'block';
this.dom.querySelector('.morning-time-' + index).style.display = 'none';
} else {
this.dom.querySelector('.night-input-' + index).style.display = 'block';
this.dom.querySelector('.night-time-' + index).style.display = 'none';
}
this.hideAction(index, type);
},
// 数据渲染
renderData(index) {
let that = this;
let html = '';
let record = that.recordList[index];
let morning = Number(record.morning) ? that.format(Number(record.morning)) : '';
let night = Number(record.night) ? that.format(Number(record.night)) : '';
html += `<div class="text-sm" style="width: 20%;">${record.memberName}</div>`;
html += `<div class="text-sm" style="width: 25%;">`;
// 早打卡
html += `<div class="morning-punch-box-${index} relative inline-block max-w-full">`;
if (!record.isMine && !record.isChecker) {
if (record.morningStatus === 2) {
html += `<div class="line-through">${morning}</div>`;
} else {
html += `<div class="">${morning ? morning : '未打卡'}</div>`;
}
}
if (record.isMine) {
if (record.morningStatus === 1) {
html += `<div class="relative font-bold inline-block">${morning}
<span class="absolute inline-block rounded-full bg-red-500" style="top: 0; right: -10px; width: 6px; height: 6px;"></span>
</div>`;
} else if (record.morningStatus === 2) {
html += `<div class="line-through font-bold">${morning}</div>`;
} else if (record.morningStatus === 3) {
html += `<div class="font-bold">${morning}</div>`;
} else {
html += `<button class="morningClockBtn m-auto py-1 rounded bg-blue-500 text-xs text-white" style="width: 50px;" onclick="p1473554031225085952.showPopup(0)">早打卡</button>`;
}
}
if (record.isChecker) {
html += `<input class="morning-input-${index} border max-w-full focus:outline-none" style="display: none;" type="time" value="${morning}" onblur="p1473554031225085952.changeTimeData(this.value, ${index}, 'morning')" />`;
if (record.morningStatus === 1) {
html += `<div class="morning-time-${index} relative inline-block" onclick="p1473554031225085952.showAction(${index}, 'morning')">${morning}
<span class="absolute inline-block rounded-full bg-red-500" style="top: 0; right: -10px; width: 6px; height: 6px;"></span>
</div>`;
} else if (record.morningStatus === 2) {
html += `<div class="morning-time-${index} line-through" onclick="p1473554031225085952.showAction(${index}, 'morning')">${morning}</div>`;
} else if (record.morningStatus === 3) {
html += `<div class="morning-time-${index}" onclick="p1473554031225085952.showAction(${index}, 'morning')">${morning}</div>`;
} else {
html += `<div class="morning-time-${index}" onclick="p1473554031225085952.showAction(${index}, 'morning')">未打卡</div>`;
}
}
// 操作面板
html += `<div class="morning-action-${index} absolute bg-white shadow-lg" style="display: none; bottom: 30px; left: -74px; border-radius: 5px; width: 248px;">
<div class="relative flex justify-between" style="padding: 8px;">
<button class="text-white bg-green-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.rejectStatus(${index}, 2, 'morning')">审核</button>
<button class="text-white bg-red-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.rejectStatus(${index}, 1, 'morning')">驳回</button>
<button class="text-white bg-blue-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.changePunchTime(${index}, 'morning')">修改</button>
<button class="border" style="width: 52px; height: 26px; border-radius: 5px; border-color: #999; color: #595959;" onclick="p1473554031225085952.hideAction(${index}, 'morning')">取消</button>
<div class="absolute w-0 h-0" style="left: 88px; top: 42px; font-size: 0; line-height: 0; border-width: 7px; border-color: #fff transparent transparent;"></div>
</div>
</div>`;
html += `</div>`;
html += `</div>`;
html += `<div class="text-sm" style="width: 25%;">`;
// 晚打卡
html += `<div class="night-punch-box relative max-w-full inline-block">`;
if (!record.isMine && !record.isChecker) {
if (record.nightStatus === 2) {
html += `<div class="line-through">${night}</div>`;
} else {
html += `<div class="">${night ? night : '未打卡'}</div>`;
}
} else {
if (record.isMine) {
if (record.nightStatus === 1) {
html += `<div class="relative font-bold inline-block">${night}
<span class="absolute inline-block rounded-full bg-red-500" style="top: 0; right: -10px; width: 6px; height: 6px;"></span>
</div>`;
} else if (record.nightStatus === 2) {
html += `<div class="line-through font-bold">${night}</div>`;
} else if (record.nightStatus === 3) {
html += `<div class="font-bold">${night}</div>`;
} else {
html += `<button class="nightClockBtn m-auto py-1 rounded bg-blue-500 text-xs text-white" style="width: 50px;" onclick="p1473554031225085952.showPopup(1)">晚打卡</button>`;
}
}
if (record.isChecker) {
html += `<input class="night-input-${index} border max-w-full focus:outline-none" style="display: none;" type="time" value="${night}" onblur="p1473554031225085952.changeTimeData(this.value, ${index}, 'night')" />`;
if (record.nightStatus === 1) {
html += `<div class="night-time-${index} relative inline-block" onclick="p1473554031225085952.showAction(${index}, 'night')">${night}
<span class="absolute inline-block rounded-full bg-red-500" style="top: 0; right: -10px; width: 6px; height: 6px;"></span>
</div>`;
} else if (record.nightStatus === 2) {
html += `<div class="night-time-${index} line-through" onclick="p1473554031225085952.showAction(${index}, 'night')">${night}</div>`;
} else if (record.nightStatus === 3) {
html += `<div class="night-time-${index}" onclick="p1473554031225085952.showAction(${index}, 'night')">${night}</div>`;
} else {
html += `<div class="night-time-${index}" onclick="p1473554031225085952.showAction(${index}, 'night')">未打卡</div>`;
}
}
}
html += `<div class="night-action-${index} absolute bg-white shadow-lg" style="display: none; bottom: 30px; right: -74px; border-radius: 5px; width: 248px;">
<div class="relative flex justify-between" style="padding: 8px;">
<button class="text-white bg-green-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.rejectStatus(${index}, 2, 'night')">审核</button>
<button class="text-white bg-red-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.rejectStatus(${index}, 1, 'night')">驳回</button>
<button class="text-white bg-blue-500" style="width: 52px; height: 26px; border-radius: 5px;" onclick="p1473554031225085952.changePunchTime(${index}, 'night')">修改</button>
<button class="border" style="width: 52px; height: 26px; border-radius: 5px; border-color: #999; color: #595959;" onclick="p1473554031225085952.hideAction(${index}, 'night')">取消</button>
<div class="absolute w-0 h-0" style="right: 88px; top: 42px; font-size: 0; line-height: 0; border-width: 7px; border-color: #fff transparent transparent;"></div>
</div>
</div>`;
html += `</div>`;
html += `</div>`;
let checker = record.lastCheckerId ? record.lastCheckerName : record.checkerName ? record.checkerName : that.lists[0].name;
html += `<div class="text-sm" style="width: 30%;">`;
if (!record.isMine || record.isMine && record.morningStatus && record.nightStatus || that.today !== that.recordTime) {
html += `<div class="mr-1">${record.checkerName ? record.checkerName : that.lists[0].name}</div>`;
} else {
html += `<div class="flex justify-between flex-nowrap border py-1 px-3 rounded-md" onclick="p1473554031225085952.show()">`;
html += `<div class="startBtn mr-1">${checker}</div>`;
html += `<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/down.svg" />`;
html += `</div>`;
}
html += `</div>`;
that.dom.querySelector('.record-item-' + index).innerHTML = html;
},
// 时间戳转时间格式
format(shijianchuo){
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
// var y = time.getFullYear();
// var m = time.getMonth()+1;
// var d = time.getDate();
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
// var s = time.getSeconds();
return this.add0(h)+':' + this.add0(mm);
return this.add0(y) + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm);
},
add0(m){return m<10?'0'+m:m },

Write Preview
Loading…
Cancel
Save