2 changed files with 463 additions and 5 deletions
@ -0,0 +1,458 @@ |
|||
<!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="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" style="height: 13rem;"> |
|||
<div class="rounded-lg bg-white p-3" style="height: 100%;"> |
|||
<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="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" style="height:100%;width:100%;"> |
|||
<div class="title"></div> |
|||
<ul> |
|||
<li class="flex h-12 items-center border-b"> |
|||
<span class="flex-1 text-center text-xs text-gray-400">姓名</span> |
|||
<span class="flex-1 text-center text-xs text-gray-400">年龄</span> |
|||
<span class="flex-1 text-center text-xs text-gray-400">性别</span> |
|||
<span class="flex-1 text-center text-xs text-gray-400">联系方式</span> |
|||
<span class="flex-1 text-center text-xs text-gray-400">目标</span> |
|||
</li> |
|||
<li class="flex h-12 items-center border-b"> |
|||
<span class="flex-1 text-center text-xs">张三</span> |
|||
<span class="flex-1 text-center text-xs">32</span> |
|||
<span class="flex-1 text-center text-xs">女</span> |
|||
<span class="flex-1 text-center text-xs">15525082578</span> |
|||
<span class="flex-1 text-center text-xs">裁判员</span> |
|||
</li> |
|||
|
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<script> |
|||
|
|||
// 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(that) { |
|||
// 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> |
Loading…
Reference in new issue