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

请假

tall-leave
xuesinan 3 years ago
parent
d7faf3bd7d
commit
ffcde7b43a
1 changed files with 490 additions and 437 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. 279
      index.html

279
index.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
@ -8,18 +8,18 @@
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<!-- <script type="text/javascript" src="plugin.js"></script> -->
</head>
<body>
</head>
<body>
<div class="">
<div class="h-10 w-full flex justify-center items-center border-b-2">项目名称</div>
<!-- 角色栏-->
<!-- 角色栏-->
<div class="w-full h-16 flex items-center border-b-2">
<div class="p-2 m-4">项目经理</div>
<div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
</div>
<div class="w-full p-4 bg-gray-100">
<!-- 日常任务面板-->
<!-- 日常任务面板-->
<div class="content p-3 h-46 bg-white rounded-lg">
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
@ -28,10 +28,10 @@
<div class="h-6 bg-gray-100"></div>
</div>
</div>
<!-- <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>-->
<!-- <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>-->
<div class="task-bar h-96 w-full bg-gray-100 p-4">
<div class="flex mb-3">
<!-- 序号-->
<!-- 序号-->
<div class="flex flex-col items-center">
<div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
<div class="w-8 flex-1 flex flex-col items-center">
@ -40,34 +40,30 @@
</div>
<div class="flex-1">
<!-- 定期任务面板-->
<!-- 定期任务面板-->
<div class="rounded-lg ml-4 bg-white p-3">
<!-- 示例插件1-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
<!-- 示例插件2 id=100-->
<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"
<!-- 示例插件1-->
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="alert('hello')">测试组建1</button>
<!-- 示例插件2 id=100-->
<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"
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-did="did555"
style="height:500px;width:100%"
>
data-url="http://101.201.226.163:7320/v1.0" data-type="1" 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">
<div class="flex items-center border border-blue-500 rounded-sm">
<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>
<span class="px-2 py-1.5 text-sm text-white bg-blue-500 rounded-sm"
onclick="p1473554031225085952.showPopup()">请假申请</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>
@ -77,120 +73,155 @@
<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 class="px-1 py-2 text-sm" style="width: 20%;">姓名</div>
<div class="px-1 py-2 text-sm" style="width: 16%;">类型</div>
<div class="px-1 py-2 text-sm" style="width: 42%;">时间</div>
<div class="px-1 py-2 text-sm" style="width: 22%;">审核状态</div>
</div>
<div class="record-wrap">
<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 class="py-1.5 flex items-center text-center border-b">
<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</div>-<div>5.21 18:00</div>
</div>
<div class="px-1 text-sm" style="width: 22%;">
<div
class="inline-block px-2 py-1.5 text-xs text-white bg-blue-500 rounded-sm">
通过</div>
</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 class="py-1.5 flex items-center text-center border-b">
<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="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 class="py-1.5 flex items-center text-center border-b">
<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="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 class="py-1.5 flex items-center text-center border-b">
<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>
</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 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="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
class="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
class="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>
<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" />
<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>
<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)" />
<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)" />
<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)" />
<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: 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 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="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="text-gray-400"
onclick="p1473554031225085952.hide()">取消</span>
<span class="font-bold">选择审核人</span>
<span class="text-blue-500" onclick="p1473554031225085952.choose()">确定</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>
<ul class="flex flex-col text-center"
style="height: 240px;overflow-y: auto;"></ul>
</div>
</div>
</div>
@ -221,14 +252,19 @@
},
// 获取token
getTokenByUserId(userId){
getTokenByUserId(userId) {
var that = this
fetch(`https://test.tall.wiki/gateway/tall3/v3.0/users/userId?userId=${userId}`)
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
const {
success,
code,
data,
msg
} = res;
if (success && code === 200) {
that.token = data.token;
// 查询项目成员列表
@ -258,7 +294,9 @@
var timer = null;
let d = new Date()
const params = JSON.stringify({
param: { projectId: that.projectId }
param: {
projectId: that.projectId
}
});
var url = 'https://test.tall.wiki/gateway/defaultwbs/deliver/queryChecker';
fetch(url, {
@ -266,16 +304,22 @@
mode: 'cors',
body: params,
headers: new Headers({
'Authorization': 'Bearer ' + that.token ,'Content-Type': 'application/json;charset=utf-8'
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json;charset=utf-8'
})
}).then(function(response) {
return response.json();
}).catch(function(error){
}).catch(function(error) {
console.error('Error:', error)
}).then(function(res){
const { success, code, data, msg } = res;
}).then(function(res) {
const {
success,
code,
data,
msg
} = res;
if (success && code === 200) {
for(var i = 0; i < data.length; i++){
for (var i = 0; i < data.length; i++) {
data[i].choose = true
that.lists.push(data[i])
}
@ -288,7 +332,7 @@
},
// 显示申请弹框
showPopup(){
showPopup() {
var clockInPopup = this.dom.querySelector('.clockInPopup');
clockInPopup.style.display = 'block';
@ -309,29 +353,30 @@
},
// 显示选择框
show(type){
show(type) {
this.currReviewer = type; // 当前选择的审核人等级
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='block';
statusChoose.style.display = 'block';
var list = ''
for (let i = 0; i < this.lists.length; i++) {
list += `<li class="py-3" onclick="p1473554031225085952.chooseItem(${i})">` + this.lists[i].name + '</li>';
list += `<li class="py-3" onclick="p1473554031225085952.chooseItem(${i})">` + this.lists[i]
.name + '</li>';
}
var ul = this.dom.querySelector('ul');
ul.innerHTML = list
},
// 选择
chooseItem(index){
chooseItem(index) {
this.currentIndex = index;
var lis = this.dom.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
for (var i = 0; i < lis.length; i++) {
var item = lis[i];
if(i === index){
if (i === index) {
item.classList.add('text-white');
item.style.backgroundColor = '#3b82f6';
}else{
} else {
item.classList.remove('text-white');
item.style.backgroundColor = '#fff';
}
@ -344,7 +389,7 @@
* @param { String } projectId 项目ID
* @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
*/
choose(){
choose() {
const that = this;
that.dom.querySelector('.reviewer-' + that.currReviewer).value = that.lists[that.currentIndex].name;
that.checkerId = that.lists[that.currentIndex].memberId;
@ -352,25 +397,28 @@
},
// 取消
hide(){
hide() {
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='none';
statusChoose.style.display = 'none';
},
// 时间戳转时间格式
format(shijianchuo){
format(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth()+1;
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
// var s = time.getSeconds();
return this.add0(y) + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + 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 },
add0(m) {
return m < 10 ? '0' + m : m
},
// 跳转详情
jumpDetails(that) {
@ -387,12 +435,12 @@
const type = this.dom.parentNode.getAttribute('data-type') ? 1 : 0;
const longitude = this.dom.parentNode.getAttribute('data-longitude');
const latitude = this.dom.parentNode.getAttribute('data-latitude');
const path = "http://101.201.226.163/tall/v4.0.0/pages/detailWebview/detailWebview";
const param = `pid=${pId}&uid=${uId}&rid=${rId}&token=${token}&url=${url}&longitude=${longitude}&latitude=${latitude}`;
const param =
`http://101.201.226.163/leaveProcess/?pid=${pId}&uid=${uId}&rid=${rId}&token=${token}&url=${url}&longitude=${longitude}&latitude=${latitude}`;
if (type === 1) {
sessionStorage.setItem('targetUrl', `http://101.201.226.163/leaveProcess/?${param}`);
sessionStorage.setItem('targetUrl', `${param}`);
} else {
location.href = `${path}/?url=${encodeURIComponent(param)}`;
location.href = param;
}
}
}
@ -415,9 +463,11 @@
<!-- 定期任务面板-->
<div class="rounded-lg ml-4 bg-white p-3">
<!-- 示例插件1-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="alert('hello')">测试组建1</button>
<!-- 示例插件2 id=100-->
<button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
<button class="bg-blue-500 py-2 px-5 rounded text-white"
onclick="p100.show()">测试组建2</button>
<script>
const p100 = {
name: 'hello tall plugin',
@ -431,13 +481,16 @@
</div>
</div>
</div>
</body>
<style>
.content, .task-bar{
</body>
<style>
.content,
.task-bar {
overflow-y: scroll;
}
.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
}
.content::-webkit-scrollbar,
.task-bar::-webkit-scrollbar {
display: none;
}
</style>
}
</style>
</html>

Write Preview
Loading…
Cancel
Save