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

请假插件

tall-leave
xuesinan 3 years ago
parent
b1f9afba23
commit
19cc32e735
1 changed files with 359 additions and 127 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. 486
      index.html

486
index.html
View File

@ -49,17 +49,16 @@
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="p100.show()">测试组建2</button>
<div data-tname="考勤" data-pid="1473556016628244480" data-uid="1217647686598135808"
<div data-tname="考勤" data-pid="1547498024522227712" data-uid="1499664987928662016"
data-rid="1473556018582790144"
data-token="eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NTM2MTQwOTksInN1YiI6IjE0ODE0NTg3NDEyOTU3MTQzMDQiLCJhdXRoSWQiOiIxNDgxNDU4NzQxNTMwNTk1MzI4IiwiZXhwIjoxNjUzNjIxMjk5fQ.kM15-gERv5j5qWBeWEG0kDxLWMJesHInnwFQnUaKcGg"
data-url="http://101.201.226.163:7320/v1.0" data-type="1" data-tid="tid444"
data-token="eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2NTgxMzI2NjgsInN1YiI6IjE0ODE0NTg3NDEyOTU3MTQzMDQiLCJhdXRoSWQiOiIxNDgxNDU4NzQxNTMwNTk1MzI4IiwiZXhwIjoxNjU4MTM5ODY4fQ.tdryM9VEav-CvmYGDmJl2fROhNx8lpGQIestuhzgaSg"
data-url="" data-type="1" data-tid="tid444"
data-did="did555" style="height:500px;width:100%">
<!-- 考勤插件 -->
<div data-root="p1539144813097783296" style="height: 100%; width: 100%;">
<div class="pb-3 flex justify-between items-center">
<div class="flex justify-between items-center">
<div class="flex items-center border border-blue-500 rounded">
<span class="px-2 py-1 text-xs text-white bg-blue-500 rounded"
onclick="p1539144813097783296.showPopup()">请假申请</span>
<span class="px-2 py-1 text-xs text-white bg-blue-500 rounded" onclick="p1539144813097783296.showPopup()">请假申请</span>
</div>
<div class="flex items-center">
@ -70,7 +69,7 @@
</div>
</div>
<div style="border-width: 1px 0 0 0" class="border-gray-200 border-solid">
<div style="border-width: 1px 0 0 0; display: none;" class="table-box pt-3 border-gray-200 border-solid">
<div class="border-solid border-gray-200 text-center flex items-center" style="border-width: 0 0 1px 0">
<div class="px-1 py-2 text-sm" style="width: 20%;">姓名</div>
<div class="px-1 py-2 text-sm" style="width: 16%;">类型</div>
@ -78,135 +77,81 @@
<div class="px-1 py-2 text-sm" style="width: 22%;">审核状态</div>
</div>
<div class="record-wrap">
<div class="py-2 flex items-center text-center border-solid border-gray-200" style="border-width: 0 0 1px 0">
<div class="px-1 text-sm" style="width: 20%;">薛思男</div>
<div class="px-1 text-sm" style="width: 16%;">请假</div>
<div class="px-1 text-sm" style="width: 42%;">5.21 9:00 - 5.21 18:00
</div>
<div class="px-1 text-sm" style="width: 22%;">待审批</div>
</div>
<div class="leave-apply-list">
<div class="py-2 flex items-center text-center border-solid border-gray-200" style="border-width: 0 0 1px 0">
<div class="px-1 text-sm" style="width: 20%;">张三</div>
<div class="px-1 text-sm" style="width: 16%;">加班</div>
<div class="px-1 text-sm" style="width: 42%;">
<div>5.21 09:00 - 5.21 18:00</div>
</div>
<div class="px-1 text-sm" style="width: 22%;">
<div
class="inline-block px-2 py-1 text-xs text-white bg-blue-500 rounded">
通过</div>
</div>
</div>
</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="w-screen h-screen fixed z-10 leave-apply-popup 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="pt-1 pb-2 flex justify-center items-center font-bold"
style="font-size: 17px;">请假申请</div>
<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" />
<input id="leaveStartTime" class="leave-start-time px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="datetime-local" />
</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" />
<input id="leaveEndTime" class="leave-end-time px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="datetime-local" />
</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 class="leave-type-box flex"></div>
</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" />
<input class="leave-duration px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" value="1" 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="leave-mode-box flex">
<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="p1539144813097783296.show(1)" />
</div>
</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="p1539144813097783296.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="p1539144813097783296.show(3)" />
<div class="leave-reviewer">
<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="p1539144813097783296.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="p1539144813097783296.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="p1539144813097783296.show(3)" />
</div>
</div>
</div>
<div class="mt-4 flex text-center" style="border-top: 1px solid rgba(0, 0, 0, .1);">
<div
style="font-size: 16px; width: 50%; height: 50px; line-height: 50px; border-right: 1px solid rgba(0, 0, 0, .1);"
onclick="p1539144813097783296.hidePopup()"
>取消</div>
<div class="bg-blue-500 text-white"
style="font-size: 16px; width: 50%; height: 50px; line-height: 50px;"
onclick="p1539144813097783296.punch()"
>提交</div>
<div style="font-size: 16px; width: 50%; height: 50px; line-height: 50px; border-right: 1px solid rgba(0, 0, 0, .1);" onclick="p1539144813097783296.hidePopup()">取消</div>
<div class="bg-blue-500 text-white" style="font-size: 16px; width: 50%; height: 50px; line-height: 50px;" onclick="p1539144813097783296.leaveSubmit()">提交</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="w-screen h-screen fixed z-20 leave-checker-popup 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="p1539144813097783296.hide()">取消</span>
<span class="text-gray-400" onclick="p1539144813097783296.hide()">取消</span>
<span class="font-bold">选择审核人</span>
<span class="text-blue-500"
onclick="p1539144813097783296.choose()">确定</span>
<span class="text-blue-500" onclick="p1539144813097783296.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>
<ul class="flex flex-col text-center" style="height: 240px;overflow-y: auto;"></ul>
</div>
</div>
</div>
@ -214,11 +159,20 @@
<script>
var p1539144813097783296_config = {
urlAddress: 'http://101.201.226.163:7320/v1.0',
// urlAddress: 'http://192.168.0.101:8083',
urlAddress: 'http://101.201.226.21:8092',
}
</script>
<script>
document.getElementById("leaveStartTime").addEventListener("input", function(e) {
p1539144813097783296.handleLeaveDays();
})
document.getElementById("leaveEndTime").addEventListener("input", function(e) {
p1539144813097783296.handleLeaveDays();
})
var p1539144813097783296 = {
dom: '',
token: '',
@ -238,58 +192,164 @@
// 查询项目成员列表
this.getQueryChecker();
// 获取事务(请假、调休等)分类和事务方式列表
this.getQueryCate();
// 查询请假信息
this.getClockQuery()
this.getLeaveQuery();
},
/**
* 批量查询请假信息
* 查询项目成员列表
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getClockQuery() {
getQueryChecker() {
var that = this;
const params = JSON.stringify({
param: {
projectId: that.projectId,
cid: 1
}
});
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/getMemberList`;
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 { code, data, msg } = res;
if (code === 200) {
that.lists = [];
for (var i = 0; i < data.length; i++) {
data[i].choose = true
that.lists.push(data[i])
}
} else {
console.log('msg: ', msg);
}
})
},
/**
* 查询项目成员列表
* 批量查询请假信息
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getQueryChecker() {
var that = this
var timer = null;
let d = new Date()
getLeaveQuery() {
var that = this;
let startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime();
let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*59*1000).getTime();
const params = {
param: {
projectId: that.projectId,
cid: 1,
start_time: startTime,
end_time: endTime,
size: 10,
page: 1
}
};
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/getAffairsList`;
fetch(`${url}?param=${JSON.stringify(params.param)}`, {
method: 'GET',
mode: 'cors',
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 { code, data, msg } = res;
if (code === 200) {
if (data.list.length === 0) {
that.dom.querySelector('.table-box').style.display = 'none';
} else {
that.dom.querySelector('.table-box').style.display = 'block';
let html = '';
data.list.forEach(item => {
html += `<div class="py-2 flex items-center text-center border-solid border-gray-200" style="border-width: 0 0 1px 0">
<div class="px-1 text-sm" style="width: 20%;">${item.name}</div>
<div class="px-1 text-sm" style="width: 16%;">${item.type_desc}</div>
<div class="px-1 text-sm" style="width: 42%;">${item.start_time_desc} - ${record.end_time_desc}</div>`
if (item.status === 1 && item.stay_my_check) {
html += `<div class="px-1 text-sm" style="width: 22%;">
<div class="inline-block px-2 py-1 text-xs text-white bg-blue-500 rounded" @click="p1539144813097783296.handleExamine(${item.id})">通过</div>
</div>`;
} else {
html += `<div class="px-1 text-sm" style="width: 22%;">${item.status_desc}</div>`;
}
html += `</div>`;
});
that.dom.querySelector('.leave-apply-list').innerHTML = html;
}
} else {
console.log('msg: ', msg);
}
})
},
/**
* 获取事务(请假、调休等)分类和事务方式列表
*/
getQueryCate() {
var that = this;
const params = JSON.stringify({
param: {
projectId: that.projectId
projectId: that.projectId,
cid: 1
}
});
var url = `${p1539144813097783296_config.urlAddress}/deliver/queryChecker`;
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/getParam`;
fetch(url, {
method: 'POST',
mode: 'cors',
body: params,
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json;charset=utf-8'
'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) {
for (var i = 0; i < data.length; i++) {
data[i].choose = true
that.lists.push(data[i])
const { code, data, msg } = res;
if (code === 200) {
let modeHtml = '', typeHtml = '';
for (let i = 0; i < data.type_list.length; i++) {
typeHtml += `<label class="mr-2 flex items-center">
<input class="mr-1" type="radio" name="leaveType" value="${data.type_list[i].id}" ${i === 0 ? 'checked' : ''} />
${data.type_list[i].name}
</label>`;
}
that.dom.querySelector('.leave-type-box').innerHTML = typeHtml;
for (let i = 0; i < data.mode_list.length; i++) {
modeHtml += `<label class="mr-2 flex items-center">
<input class="mr-1" type="radio" name="leaveMode" value="${data.mode_list[i].id}" ${i === 0 ? 'checked' : ''} />
${data.mode_list[i].name}
</label>`;
}
that.dom.querySelector('.leave-mode-box').innerHTML = modeHtml;
} else {
console.log('msg: ', msg);
}
@ -298,35 +358,106 @@
// 显示申请弹框
showPopup() {
var clockInPopup = this.dom.querySelector('.clockInPopup');
clockInPopup.style.display = 'block';
var leaveApplyPopup = this.dom.querySelector('.leave-apply-popup');
leaveApplyPopup.style.display = 'block';
let time = this.format(new Date()); // 当前时间
let arr = time.split(' ');
// 默认开始时间
let startTime = arr[0] + 'T' + '09:00';
this.dom.querySelector('.start-time').value = startTime;
this.dom.querySelector('.leave-start-time').value = startTime;
// 默认结束时间
let endTime = arr[0] + 'T' + '18:00';
this.dom.querySelector('.end-time').value = endTime;
this.dom.querySelector('.leave-end-time').value = endTime;
},
// 隐藏申请弹框
hidePopup() {
var clockInPopup = this.dom.querySelector('.clockInPopup');
clockInPopup.style.display = 'none';
var leaveApplyPopup = this.dom.querySelector('.leave-apply-popup');
leaveApplyPopup.style.display = 'none';
},
// 根据时间获取时长和审核人
handleLeaveDays(type) {
var that = this;
const start_time = that.dom.querySelector('.leave-start-time').value;
const end_time = that.dom.querySelector('.leave-end-time').value;
if (!start_time) {
alert('请选择开始时间');
return false;
}
if (!end_time) {
alert('请选择结束时间');
return false;
}
if (end_time < start_time) {
alert('结束时间不能小于开始时间');
return false;
}
const currType = document.querySelector("input[name='leaveType']:checked").value;
const params = JSON.stringify({
param: {
projectId: that.projectId,
start_time: new Date(start_time).valueOf(),
end_time: new Date(end_time).valueOf(),
type: currType, // 类型
}
});
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/countDays`;
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 { code, data, msg } = res;
if (code === 200) {
that.dom.querySelector('.leave-duration').value = data.day_count;
this.checkerList = data.check_list;
const html = '';
for (let i = 0; i < data.check_list.length; i++) {
const checker = data.check_list[i];
html += `<div class="mt-3 flex items-center text-sm" style="color: #595959;">`;
if (i === 0) {
html += `<div class="text-right" style="width: 80px">审核人：</div>`;
} else {
html += `<div class="text-right" style="width: 80px"></div>`;
}
html += `<input class="reviewer-1 px-1 focus:outline-none border border-gray-300 rounded" style="width: 180px; height: 32px" type="text" value="${checker.id}" onFocus="p1539144813097783296.show(${i + 1})" />
</div>`;
}
that.dom.querySelector('.leave-reviewer').innerHTML = html;
} else {
console.log('msg: ', msg);
}
})
},
// 显示选择框
show(type) {
this.currReviewer = type; // 当前选择的审核人等级
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display = 'block';
var leaveCheckerPopup = this.dom.querySelector('.leave-checker-popup'); // 审核人弹框
leaveCheckerPopup.style.display = 'block';
var list = ''
for (let i = 0; i < this.lists.length; i++) {
list += `<li class="py-3" onclick="p1539144813097783296.chooseItem(${i})">` + this.lists[i]
.name + '</li>';
list += `<li class="py-3" onclick="p1539144813097783296.chooseItem(${i})">` + this.lists[i].name + '</li>';
}
var ul = this.dom.querySelector('ul');
ul.innerHTML = list;
@ -360,8 +491,8 @@
// 取消
hide() {
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display = 'none';
var leaveCheckerPopup = this.dom.querySelector('.leave-checker-popup');
leaveCheckerPopup.style.display = 'none';
},
// 时间戳转时间格式
@ -382,6 +513,107 @@
return m < 10 ? '0' + m : m
},
// 审核
handleExamine(id) {
let that = this;
const params = JSON.stringify({
param: {
projectId: that.projectId,
affairs_id: id,
status: 10,
},
});
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/examine`;
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 { code, data, msg } = res;
if (code === 200) {
this.getLeaveQuery();
} else {
console.log('msg: ', msg);
}
})
},
leaveSubmit() {
let that = this;
const start_time = that.dom.querySelector('.leave-start-time').value; // 开始时间
const end_time = that.dom.querySelector('.leave-end-time').value; // 结束时间
// 请假时长
const duration = that.dom.querySelector('.leave-duration').value;
// 请假类型，请假方式
const currType = document.querySelector("input[name='leaveType']:checked").value;
const currMode = document.querySelector("input[name='leaveMode']:checked").value;
if (!start_time) {
alert('请选择开始时间');
return false;
}
if (!end_time) {
alert('请选择结束时间');
return false;
}
if (end_time < start_time) {
alert('结束时间不能小于开始时间');
return false;
}
if (duration <= 0) {
alert('请重新确认请假时长');
return false;
}
const params = JSON.stringify({
param: {
cid: 1,
projectId: that.projectId,
start_time: new Date(startTime).valueOf(),
end_time: new Date(endTime).valueOf(),
time_long: duration, // 时长（天）
type: currType, // 类型
mode: currMode, // 方式
},
});
var url = `${p1539144813097783296_config.urlAddress}/api_1.0.0/Affairs/apply`;
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 { code, data, msg } = res;
if (code === 200) {
this.getLeaveQuery();
} else {
console.log('msg: ', msg);
}
})
},
// 跳转详情
jumpDetails(that) {
// const pId = this.dom.parentNode.getAttribute('data-pid');

Write Preview
Loading…
Cancel
Save