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

登录注册静态页面

21-tall-login
jarvis 4 years ago
parent
8dd9dbeb65
commit
de140598be
4 changed files with 1192 additions and 51 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. 522
      accountLogin.html
  2. 127
      index.html
  3. 9
      package-lock.json
  4. 585
      rigister.html

522
accountLogin.html
View File

@ -0,0 +1,522 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>插件模板</title>
<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>
<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>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<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="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">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</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>
<form action="">
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-base" style="outline: none;" id="uname" type="text" placeholder="请输入用户名">
<div id="unameStr" class="text-xs text-red-500"></div>
</div>
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-base" style="outline: none;" id="password" type="text" placeholder="请输入密码">
<div id="passWordStr" class="text-xs text-red-500"></div>
</div>
<div class="flex flex-nowrap flex-row-reverse">
<div class="flex-sub"></div>
<div class="text-xs text-gray-400 mt-2">忘记密码</div>
</div>
</form>
<div class="mt-9">
<button class="bg-blue-500 py-1 w-full rounded text-white" id="register">立即登录</button>
</div>
<div class="flex justify-between mt-3">
<div class="text-sm" id="jumpRigister" style="color: #2885ed"> 新用户注册</div>
<div class="text-sm" id="jumpLogin" style="color: #2885ed">手机号登录 </div>
</div>
</div>
<script>
// 跳转到手机号登录
var jumpLogin=document.querySelector('#jumpLogin')
jumpLogin.onclick=function(){
window.location.href='./index.html'
}
// 跳转到新用户注册页面
var jumpRigister=document.querySelector('#jumpRigister')
jumpRigister.onclick=function(){
window.location.href='./rigister.html'
}
var reguname=/^[a-zA-Z0-9._-]{2,20}$/
var regpassword=/^[a-zA-Z0-9._-]{6,20}$/
var register=document.querySelector('#register')
var uname=document.querySelector('#uname')
var password=document.querySelector('#password')
var unameStr=document.querySelector('#unameStr')
var passWordStr=document.querySelector('#passWordStr')
register.onclick=function(){
if (!uname.value) {
unameStr.innerHTML='请输入用户名'
}else if (!reguname.test(uname.value)){
unameStr.innerHTML='用户名长度在2到20个字符'
}else {
unameStr.innerHTML=''
}
if (!password.value){
passWordStr.innerHTML='请输入密码'
}else if(!regpassword.test(password.value)){
passWordStr.innerHTML='密码长度在6到20个字符'
}else{
passWordStr.innerHTML=''
}
}
/* uname.onblur=function(){
if (!this.value){
unameStr.innerHTML='请输入用户名'
}else if(!reguname.test(this.value)){
unameStr.innerHTML='用户名长度在2到20个字符'
}else{
unameStr.innerHTML=''
}
}
password.onblur=function(){
if (!this.value){
passWordStr.innerHTML='请输入密码'
}else if(!regpassword.test(this.value)){
passWordStr.innerHTML='密码长度在6到20个字符'
}else{
passWordStr.innerHTML=''
}
} */
var p1432643387798069248 = {
token: '',
projectId: '',
roleId: '',
dom: '',
lists: [],
currentIndex: '',
memberId: '', // 打卡人id
checkerId: '', // 审核员id
checkerName: '', // 审核员
id: '', // 记录id
init() {
this.dom = document.querySelector("div[data-root=p1432643387798069248]");
var domBox = this.dom.parentNode;
var title = this.dom.querySelector('.title');
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
this.projectId = domBox.getAttribute("data-pid");
this.roleId = domBox.getAttribute("data-rid");
// 初始化的时候 获取token
this.getTokenByUserId(userId);
},
// 获取token
getTokenByUserId(userId){
var that = this
fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.token = data.token;
// 查询考勤信息
that.getClockQuery()
} else {
console.log('msg: ', msg);
}
});
},
/**
* 批量查询打卡信息
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getClockQuery() {
var that = this
var timer = null;
let d = new Date()
let startTime = new Date(d).getTime()
const params = JSON.stringify({
param: { projectId: that.projectId,roleId: that.roleId, memberIdList: [], startTime, endTime: startTime }
});
var url = 'https://www.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.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 = ''
}
if(data[0].recordList[0].lastCheckerName){
that.checkerName = data[0].recordList[0].lastCheckerName
}else if(data[0].recordList[0].checkerName){
that.checkerName = data[0].recordList[0].checkerName
}else{
that.checkerName = ''
}
let morning = that.format(data[0].recordList[0].morning -0)
let night = that.format(data[0].recordList[0].night -0)
let morningStatus = data[0].recordList[0].morningStatus
let nightStatus = data[0].recordList[0].nightStatus
that.setDate(morning,morningStatus,night,nightStatus)
}
that.getQueryChecker()
} else {
console.log('msg: ', msg);
}
})
},
/**
* 查询项目成员列表
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getQueryChecker() {
var that = this
var timer = null;
let d = new Date()
const params = JSON.stringify({
param: { projectId: that.projectId }
});
var url = 'https://www.tall.wiki/gateway/defaultwbs/deliver/queryChecker';
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) {
for(var i = 0; i < data.length; i++){
data[i].choose = true
that.lists.push(data[i])
}
// 设置默认检查人
that.checkerName = that.checkerName ? that.checkerName : data[0].name
that.checkerId = that.checkerId ? that.checkerId : data[0].memberId
var startBtn = that.dom.querySelector('.startBtn');
startBtn.innerHTML = that.checkerName;
} 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(clockType){
var that = this
let { checkerId, id, memberId } = that
let d = new Date()
let dateTime = new Date(d).getTime()
const params = JSON.stringify({
param: { checkerId, id, memberId, dateTime, clockType }
});
var url = 'https://www.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.getClockQuery()
} else {
console.log('msg: ', msg);
}
})
},
// 显示选择框
show(){
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='block';
var list = ''
for (let i=0;i < this.lists.length; i++) {
list += `<li class="py-3" onclick="p1432643387798069248.chooseItem(${i})">` + this.lists[i].name + '</li>';
}
var ul = this.dom.querySelector('ul');
ul.innerHTML = list
},
// 选择
chooseItem(index){
this.currentIndex = index;
var lis = this.dom.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
var item = lis[i];
if(i === index){
item.classList.add('text-white');
item.style.backgroundColor = '#3b82f6';
}else{
item.classList.remove('text-white');
item.style.backgroundColor = '#fff';
}
}
},
/**
* 确定 选择审核人
* @param { Array } codeAndAnswerList code和答案
* @param { String } projectId 项目ID
* @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
*/
choose(){
const that = this;
const { dom } = that;
var startBtn = dom.querySelector('.startBtn');
startBtn.innerHTML = that.lists[that.currentIndex].name;
that.checkerId = that.lists[that.currentIndex].memberId
that.hide()
},
// 界面渲染 0未打卡,1已打卡,2驳回,3审核通过
setDate(morning,morningStatus,night,nightStatus) {
const { dom } = this;
var morningClockBtn = dom.querySelector('.morningClockBtn');
var morningClockText = dom.querySelector('.morningClockText');
var morningDot = dom.querySelector('.morningDot');
var morningClockAgree = dom.querySelector('.morningClockAgree');
var morningClockReject = dom.querySelector('.morningClockReject');
if(morningStatus === 0){
morningClockBtn.style.display='block';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='none';
morningClockReject.style.display='none';
}
if(morningStatus === 1){
morningClockBtn.style.display='none';
morningClockText.style.display='block';
morningDot.style.display='block';
morningClockAgree.style.display='none';
morningClockReject.style.display='none';
morningClockText.innerHTML = morning;
}
if(morningStatus === 2){
morningClockBtn.style.display='none';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='none';
morningClockReject.style.display='block';
morningClockReject.innerHTML = morning;
}
if(morningStatus === 3){
morningClockBtn.style.display='none';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='block';
morningClockReject.style.display='none';
morningClockAgree.innerHTML = morning;
}
var nightClockBtn = dom.querySelector('.nightClockBtn');
var nightClockText = dom.querySelector('.nightClockText');
var nightDot = dom.querySelector('.nightDot');
var nightClockAgree = dom.querySelector('.nightClockAgree');
var nightClockReject = dom.querySelector('.nightClockReject');
if(nightStatus === 0){
nightClockBtn.style.display='block';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='none';
nightClockReject.style.display='none';
}
if(nightStatus === 1){
nightClockBtn.style.display='none';
nightClockText.style.display='block';
nightDot.style.display='block';
nightClockAgree.style.display='none';
nightClockReject.style.display='none';
nightClockText.innerHTML = night;
}
if(nightStatus === 2){
nightClockBtn.style.display='none';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='none';
nightClockReject.style.display='block';
nightClockReject.innerHTML = night;
}
if(nightStatus === 3){
nightClockBtn.style.display='none';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='block';
nightClockReject.style.display='none';
nightClockAgree.innerHTML = night;
}
var startBtnBox = dom.querySelector('.startBtnBox');
var startText = dom.querySelector('.startText');
if(morningStatus && morningStatus !== 0 && nightStatus && nightStatus!== 0){
startBtnBox.style.display='none';
startText.style.display='block';
startText.innerHTML = this.checkerName;
}
},
// 取消
hide(){
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='none';
},
// 时间戳转时间格式
format(shijianchuo){
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
// 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);
},
add0(m){return m<10?'0'+m:m },
// 跳转详情
jumpDetails() {
const pId = this.dom.parentNode.getAttribute('data-pid');
const uId = this.dom.parentNode.getAttribute('data-uid');
const rId = this.dom.parentNode.getAttribute('data-rid');
location.href = `https://www.tall.wiki/checkwork/?pid=${pId}&uid=${uId}&rid=${rId}`;
}
}
p1432643387798069248.init()
</script>
</div>
</div>
</div>
<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">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</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>
<script>
const p100 = {
name: 'hello tall plugin',
show() {
alert(this.name)
}
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
.content, .task-bar{
overflow-y: scroll;
}
.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
display: none;
}
</style>
</html>

127
index.html
View File

@ -47,56 +47,90 @@
<!-- 示例插件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="1433332016270811136" data-uid="1217647686598135808" data-rid="rid333" data-tid="tid444" data-did="did555" style="height:50px;width:100%">
<!-- 考勤插件 -->
<div data-root="p1432643387798069248" class="flex flex-row justify-space items-center" style="height:100%;width:100%;">
<div class="title"></div>
<div class="flex flex-1 flex-row">
<!-- 早打卡 -->
<div class="flex-1">
<button class="morningClockBtn bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1432643387798069248.punch(0)">早打卡</button>
<div style="position: relative;float: left;">
<div class="morningClockText" style="display: none;font-weight: 700;"></div>
<span class="morningDot rounded-full bg-red-500" style="position: absolute;top: 0;right: -10px;width: 6px;height: 6px;display: none;"></span>
</div>
<div class="morningClockReject" style="text-decoration:line-through;color: #f00;font-weight: 700;display: none;"></div>
<div class="morningClockAgree" style="color: #13acc4;font-weight: 700;display: none;"></div>
</div>
<!-- 晚打卡 -->
<div class="flex-1">
<button class="nightClockBtn bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1432643387798069248.punch(1)">晚打卡</button>
<div style="position: relative;float: left;">
<span class="nightClockText" style="display: none;font-weight: 700;"></span>
<span class="nightDot rounded-full bg-red-500" style="position: absolute;top: 0;right: -10px;width: 6px;height: 6px;display: none;"></span>
</div>
<span class="nightClockReject" style="text-decoration:line-through;color: #f00;font-weight: 700;display: none;"></span>
<span class="nightClockAgree" style="color: #13acc4;font-weight: 700;display: none;"></span>
</div>
<div>
<form action="">
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-base" style="outline: none;" id="phone" type="text" placeholder="请输入手机号">
<div id="phoneStr" class="text-xs text-red-500"></div>
</div>
<div class="flex flex-nowrap border py-1 px-3 rounded-md startBtnBox" onclick="p1432643387798069248.show()">
<div class="startBtn mr-1">审核人</div>
<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/down.svg" />
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<div class="flex justify-between">
<input class="text-base" style="outline: none;" id="verificationCodeValue" type="text" placeholder="请输入图形验证码">
<!-- <div>1234</div> -->
</div>
<div id="verificationCodeValueStr" class="text-xs text-red-500"></div>
</div>
<div class="startText mr-1" style="display: none;">审核人</div>
<div class="flex flex-nowrap ml-4" onclick="p1432643387798069248.jumpDetails(this)">
<img style="width:15px" src="https://www.tall.wiki/staticrec/icon/right.svg" />
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<div class="flex justify-between">
<input class="text-base w-28" style="outline: none;" id="smsCode" type="text" placeholder="请输入验证码">
<button class="text-xs bg-white border-yz border-blue-400 text-blue-400">获取验证码</button>
</div>
<div id="smsCodeStr" class="text-xs text-red-500"></div>
</div>
<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="p1432643387798069248.hide()">取消</span>
<span class="font-bold">选择审核人</span>
<span class="text-blue-500" onclick="p1432643387798069248.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>
</form>
<div class="mt-9">
<button class="bg-blue-500 py-1 w-full rounded text-white" id="register">立即登录</button>
</div>
<div class="flex justify-between mt-3">
<div class="text-sm" id="jumpRigister" style="color: #2885ed"> 新用户注册</div>
<div class="text-sm" id="jumpAccountLogin" style="color: #2885ed">用户名登录 </div>
</div>
</div>
<script>
// 跳转到用户名登录
var jumpAccountLogin=document.querySelector('#jumpAccountLogin')
jumpAccountLogin.onclick=function(){
window.location.href='./accountLogin.html'
}
// 跳转到新用户注册页面
var jumpRigister=document.querySelector('#jumpRigister')
jumpRigister.onclick=function(){
window.location.href='./rigister.html'
}
var regphone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
var regverificationCodeValue=/^[0-9]*$/
var phone=document.querySelector('#phone')
var verificationCodeValue=document.querySelector('#verificationCodeValue')
var smsCode=document.querySelector('#smsCode')
var phoneStr=document.querySelector('#phoneStr')
var verificationCodeValueStr=document.querySelector('#verificationCodeValueStr')
var smsCodeStr=document.querySelector('#smsCodeStr')
var register=document.querySelector('#register')
register.onclick=function(){
if (!phone.value) {
phoneStr.innerHTML='请输入手机号'
}else if (!regphone.test(phone.value)){
phoneStr.innerHTML='手机号码不正确'
}else {
phoneStr.innerHTML=''
}
if (!verificationCodeValue.value){
verificationCodeValueStr.innerHTML='请输入图形验证码'
}else if(!regverificationCodeValue.test(verificationCodeValue.value)){
verificationCodeValueStr.innerHTML='图形验证码只能为数字'
}else{
verificationCodeValueStr.innerHTML=''
}
if (!smsCode.value){
smsCodeStr.innerHTML='请输入验证码'
}else if (!regverificationCodeValue.test(smsCode.value)){
smsCodeStr.innerHTML='验证码只能为数字'
}else {
smsCodeStr.innerHTML=''
}
}
var p1432643387798069248 = {
token: '',
projectId: '',
@ -434,7 +468,7 @@
add0(m){return m<10?'0'+m:m },
// 跳转详情
jumpDetails(that) {
jumpDetails() {
const pId = this.dom.parentNode.getAttribute('data-pid');
const uId = this.dom.parentNode.getAttribute('data-uid');
const rId = this.dom.parentNode.getAttribute('data-rid');
@ -484,5 +518,12 @@
.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
display: none;
}
.code-image {
width: 200rpx;
height: 70rpx;
}
.border-yz{
border: 1px solid;
}
</style>
</html>

9
package-lock.json
View File

@ -1,12 +1,5 @@
{
"name": "plugin-templete",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "1.0.0",
"license": "ISC"
}
}
"lockfileVersion": 1
}

585
rigister.html
View File

@ -0,0 +1,585 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>插件模板</title>
<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>
<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>
<div class="h-6 mb-2 bg-gray-100"></div>
<div class="h-6 mb-2 bg-gray-100"></div>
<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="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">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</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>
<form action="">
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-sm" style="outline: none;" id="phone" type="text" placeholder="请输入手机号">
<div id="phoneStr" class="text-xs text-red-500"></div>
</div>
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-sm" style="outline: none;" id="verificationCodeValue" type="text" placeholder="请输入图形验证码">
<!-- <image slot="right" mode="aspectFit" class="code-image"></image> -->
<div id="verificationCodeValueStr" class="text-xs text-red-500"></div>
</div>
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<div class="flex justify-between">
<input class="text-base w-28" style="outline: none;" id="smsCode" type="text" placeholder="请输入验证码">
<button class="text-xs bg-white border-yz border-blue-400 text-blue-400">获取验证码</button>
</div>
<div id="smsCodeStr" class="text-xs text-red-500"></div>
</div>
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-sm" style="outline: none;" id="uname" type="text" placeholder="请设置用户名">
<div id="unameStr" class="text-xs text-red-500"></div>
</div>
<div class="p-4" style="border-bottom: 1px solid #ecf5ff;">
<input class="text-sm" style="outline: none;" id="password" type="text" placeholder="请设置密码">
<div id="passWordStr" class="text-xs text-red-500"></div>
</div>
</form>
<div class="mt-9">
<button class="bg-blue-500 py-1 w-full rounded text-white" id="register">注册</button>
</div>
<div class="flex-direction mt-3.5">
<div class="flex flex-nowrap">
<input type="checkbox">
<div class="text-xs ml-2">
已阅读并同意
<span class="text-xs" id="agreement" style="color: #2885ed">《协议名称》</span>
</div>
</div>
</div>
<div class="flex justify-between mt-7">
<div></div>
<div class="text-sm" id="jumpAccountLogin" style="color: #2885ed">已有账号，去登录</div>
</div>
</div>
<script>
// 跳转到用户名登录
var jumpAccountLogin=document.querySelector('#jumpAccountLogin')
jumpAccountLogin.onclick=function(){
window.location.href='./accountLogin.html'
}
// 跳转到用户协议
var agreement = document.querySelector('#agreement')
agreement.onclick=function(){
window.location.href='https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》'
}
var reguname=/^[a-zA-Z0-9._-]{2,20}$/
var regpassword=/^[a-zA-Z0-9._-]{6,20}$/
var regphone=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
regverificationCodeValue=/^[0-9]*$/
var phone=document.querySelector('#phone')
var verificationCodeValue=document.querySelector('#verificationCodeValue')
var smsCode=document.querySelector('#smsCode')
var phoneStr=document.querySelector('#phoneStr')
var verificationCodeValueStr=document.querySelector('#verificationCodeValueStr')
var smsCodeStr=document.querySelector('#smsCodeStr')
var register=document.querySelector('#register')
var uname=document.querySelector('#uname')
var password=document.querySelector('#password')
var unameStr=document.querySelector('#unameStr')
var passWordStr=document.querySelector('#passWordStr')
register.onclick=function(){
if (!phone.value) {
phoneStr.innerHTML='请输入手机号'
}else if (!regphone.test(phone.value)){
phoneStr.innerHTML='手机号码不正确'
}else {
phoneStr.innerHTML=''
}
if (!verificationCodeValue.value){
verificationCodeValueStr.innerHTML='请输入图形验证码'
}else if(!regverificationCodeValue.test(verificationCodeValue.value)){
verificationCodeValueStr.innerHTML='图形验证码只能为数字'
}else{
verificationCodeValueStr.innerHTML=''
}
if (!smsCode.value){
smsCodeStr.innerHTML='请输入验证码'
}else if (!regverificationCodeValue.test(smsCode.value)){
smsCodeStr.innerHTML='验证码只能为数字'
}else {
smsCodeStr.innerHTML=''
}
if (!uname.value) {
unameStr.innerHTML='请输入用户名'
}else if (!reguname.test(uname.value)){
unameStr.innerHTML='用户名长度在2到20个字符'
}else {
unameStr.innerHTML=''
}
if (!password.value){
passWordStr.innerHTML='请输入密码'
}else if(!regpassword.test(password.value)){
passWordStr.innerHTML='密码长度在6到20个字符'
}else{
passWordStr.innerHTML=''
}
}
/* uname.onblur=function(){
if (!this.value){
unameStr.innerHTML='请输入用户名'
}else if(!reguname.test(this.value)){
unameStr.innerHTML='用户名长度在2到20个字符'
}else{
unameStr.innerHTML=''
}
}
password.onblur=function(){
if (!this.value){
passWordStr.innerHTML='请输入密码'
}else if(!regpassword.test(this.value)){
passWordStr.innerHTML='密码长度在6到20个字符'
}else{
passWordStr.innerHTML=''
}
} */
var p1432643387798069248 = {
token: '',
projectId: '',
roleId: '',
dom: '',
lists: [],
currentIndex: '',
memberId: '', // 打卡人id
checkerId: '', // 审核员id
checkerName: '', // 审核员
id: '', // 记录id
init() {
this.dom = document.querySelector("div[data-root=p1432643387798069248]");
var domBox = this.dom.parentNode;
var title = this.dom.querySelector('.title');
// 获取父元素携带的参数
var userId = domBox.getAttribute("data-uid");
this.projectId = domBox.getAttribute("data-pid");
this.roleId = domBox.getAttribute("data-rid");
// 初始化的时候 获取token
this.getTokenByUserId(userId);
},
// 获取token
getTokenByUserId(userId){
var that = this
fetch(`https://www.tall.wiki/gateway/tall/v1.0/users/userId?userId=${userId}`)
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.token = data.token;
// 查询考勤信息
that.getClockQuery()
} else {
console.log('msg: ', msg);
}
});
},
/**
* 批量查询打卡信息
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getClockQuery() {
var that = this
var timer = null;
let d = new Date()
let startTime = new Date(d).getTime()
const params = JSON.stringify({
param: { projectId: that.projectId,roleId: that.roleId, memberIdList: [], startTime, endTime: startTime }
});
var url = 'https://www.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.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 = ''
}
if(data[0].recordList[0].lastCheckerName){
that.checkerName = data[0].recordList[0].lastCheckerName
}else if(data[0].recordList[0].checkerName){
that.checkerName = data[0].recordList[0].checkerName
}else{
that.checkerName = ''
}
let morning = that.format(data[0].recordList[0].morning -0)
let night = that.format(data[0].recordList[0].night -0)
let morningStatus = data[0].recordList[0].morningStatus
let nightStatus = data[0].recordList[0].nightStatus
that.setDate(morning,morningStatus,night,nightStatus)
}
that.getQueryChecker()
} else {
console.log('msg: ', msg);
}
})
},
/**
* 查询项目成员列表
* @param {string} projectId 项目id
* @param {Array} codeList
*/
getQueryChecker() {
var that = this
var timer = null;
let d = new Date()
const params = JSON.stringify({
param: { projectId: that.projectId }
});
var url = 'https://www.tall.wiki/gateway/defaultwbs/deliver/queryChecker';
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) {
for(var i = 0; i < data.length; i++){
data[i].choose = true
that.lists.push(data[i])
}
// 设置默认检查人
that.checkerName = that.checkerName ? that.checkerName : data[0].name
that.checkerId = that.checkerId ? that.checkerId : data[0].memberId
var startBtn = that.dom.querySelector('.startBtn');
startBtn.innerHTML = that.checkerName;
} 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(clockType){
var that = this
let { checkerId, id, memberId } = that
let d = new Date()
let dateTime = new Date(d).getTime()
const params = JSON.stringify({
param: { checkerId, id, memberId, dateTime, clockType }
});
var url = 'https://www.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.getClockQuery()
} else {
console.log('msg: ', msg);
}
})
},
// 显示选择框
show(){
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='block';
var list = ''
for (let i=0;i < this.lists.length; i++) {
list += `<li class="py-3" onclick="p1432643387798069248.chooseItem(${i})">` + this.lists[i].name + '</li>';
}
var ul = this.dom.querySelector('ul');
ul.innerHTML = list
},
// 选择
chooseItem(index){
this.currentIndex = index;
var lis = this.dom.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
var item = lis[i];
if(i === index){
item.classList.add('text-white');
item.style.backgroundColor = '#3b82f6';
}else{
item.classList.remove('text-white');
item.style.backgroundColor = '#fff';
}
}
},
/**
* 确定 选择审核人
* @param { Array } codeAndAnswerList code和答案
* @param { String } projectId 项目ID
* @param { Number } codeAndAnswerList 提交人类型（0平车 1人）
*/
choose(){
const that = this;
const { dom } = that;
var startBtn = dom.querySelector('.startBtn');
startBtn.innerHTML = that.lists[that.currentIndex].name;
that.checkerId = that.lists[that.currentIndex].memberId
that.hide()
},
// 界面渲染 0未打卡,1已打卡,2驳回,3审核通过
setDate(morning,morningStatus,night,nightStatus) {
const { dom } = this;
var morningClockBtn = dom.querySelector('.morningClockBtn');
var morningClockText = dom.querySelector('.morningClockText');
var morningDot = dom.querySelector('.morningDot');
var morningClockAgree = dom.querySelector('.morningClockAgree');
var morningClockReject = dom.querySelector('.morningClockReject');
if(morningStatus === 0){
morningClockBtn.style.display='block';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='none';
morningClockReject.style.display='none';
}
if(morningStatus === 1){
morningClockBtn.style.display='none';
morningClockText.style.display='block';
morningDot.style.display='block';
morningClockAgree.style.display='none';
morningClockReject.style.display='none';
morningClockText.innerHTML = morning;
}
if(morningStatus === 2){
morningClockBtn.style.display='none';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='none';
morningClockReject.style.display='block';
morningClockReject.innerHTML = morning;
}
if(morningStatus === 3){
morningClockBtn.style.display='none';
morningClockText.style.display='none';
morningDot.style.display='none';
morningClockAgree.style.display='block';
morningClockReject.style.display='none';
morningClockAgree.innerHTML = morning;
}
var nightClockBtn = dom.querySelector('.nightClockBtn');
var nightClockText = dom.querySelector('.nightClockText');
var nightDot = dom.querySelector('.nightDot');
var nightClockAgree = dom.querySelector('.nightClockAgree');
var nightClockReject = dom.querySelector('.nightClockReject');
if(nightStatus === 0){
nightClockBtn.style.display='block';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='none';
nightClockReject.style.display='none';
}
if(nightStatus === 1){
nightClockBtn.style.display='none';
nightClockText.style.display='block';
nightDot.style.display='block';
nightClockAgree.style.display='none';
nightClockReject.style.display='none';
nightClockText.innerHTML = night;
}
if(nightStatus === 2){
nightClockBtn.style.display='none';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='none';
nightClockReject.style.display='block';
nightClockReject.innerHTML = night;
}
if(nightStatus === 3){
nightClockBtn.style.display='none';
nightClockText.style.display='none';
nightDot.style.display='none';
nightClockAgree.style.display='block';
nightClockReject.style.display='none';
nightClockAgree.innerHTML = night;
}
var startBtnBox = dom.querySelector('.startBtnBox');
var startText = dom.querySelector('.startText');
if(morningStatus && morningStatus !== 0 && nightStatus && nightStatus!== 0){
startBtnBox.style.display='none';
startText.style.display='block';
startText.innerHTML = this.checkerName;
}
},
// 取消
hide(){
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='none';
},
// 时间戳转时间格式
format(shijianchuo){
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
// 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);
},
add0(m){return m<10?'0'+m:m },
// 跳转详情
jumpDetails() {
const pId = this.dom.parentNode.getAttribute('data-pid');
const uId = this.dom.parentNode.getAttribute('data-uid');
const rId = this.dom.parentNode.getAttribute('data-rid');
location.href = `https://www.tall.wiki/checkwork/?pid=${pId}&uid=${uId}&rid=${rId}`;
}
}
p1432643387798069248.init()
</script>
</div>
</div>
</div>
<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">
<div class="w-0.5 flex-1 bg-gray-300"></div>
</div>
</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>
<script>
const p100 = {
name: 'hello tall plugin',
show() {
alert(this.name)
}
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
.content, .task-bar{
overflow-y: scroll;
}
.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
display: none;
}
.code-image {
width: 200rpx;
height: 70rpx;
}
.border-yz{
border: 1px solid;
}
</style>
</html>
Write Preview
Loading…
Cancel
Save