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

红头文件

tiaosheng-ms
xuesinan 4 years ago
parent
93670a00b2
commit
98df16ec1f
1 changed files with 387 additions and 210 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. 597
      index.html

597
index.html
View File

@ -28,7 +28,7 @@
<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="task-bar h-100 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>
@ -37,14 +37,14 @@
</div>
</div> -->
<div class="flex-1" style="height: 13rem;">
<div class="flex-1" style="height: 50rem;">
<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="p1449927427387301888" style="height:100%;width:100%;">
<div class="train-plan" style="display: none;">
<!-- <div class="train-plan" style="display: none;">
<div class="title"></div>
<div class="flex justify-between">
<div class="text-sm">制定培训计划</div>
@ -98,25 +98,113 @@
<p class="w-20 flex-shrink-0 text-gray-400">驳回原因</p>
<div class="reason"></div>
</div>
</div>
</div> -->
<div class="train-plan-null">
<div class="title"></div>
<!-- <div class="train-plan-null">
<div class="text-sm">制定培训计划</div>
</div> -->
<div class="formulate-plan">
<div class="flex justify-between">
<div class="text-sm">制定培训计划</div>
<div class="text-sm">生成红头文件</div>
<button class="train-plan-btn px-2.5 h-6 bg-blue-500 text-sm rounded text-white" onclick="p1449927427387301888.submit()">提交</button>
<div class="train-plan-status text-sm" style="display: none;">待审核</div>
</div>
<div class="mt-2.5 p-2 border border-gray-200 rounded-sm text-sm">
<div class="temp flex justify-between items-center w-full">
<p class="w-20 flex-shrink-0 text-gray-400">选择模板</p>
<div class="flex items-center">
<span class="sel-temp-name mr-1">模板1</span>
<img style="width: 15px;" src="https://www.tall.wiki/staticrec/icon/right.svg" />
</div>
</div>
<div class="mt-2 temp-list flex items-center">
</div>
</div>
<div class="temp-box">
<div class="organizer-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm">
<div class="flex justify-between items-center w-full" style="height: 20px;">
<p class="w-20 flex-shrink-0 text-gray-400">主办单位</p>
<input class="organizer-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入主办单位" />
</div>
</div>
<div class="title-box mt-2.5 px-2 py-1.5 w-full border border-gray-200 rounded-sm text-sm">
<div class="flex justify-between items-center w-full" style="height: 20px;">
<p class="w-20 flex-shrink-0 text-gray-400">标题</p>
<input class="train-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入文件标题" />
</div>
</div>
<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full h-16 border border-gray-200 rounded-sm text-sm">
<p class="w-20 flex-shrink-0 text-gray-400">描述</p>
<textarea class="train-desc text-right outline-none" style="width: calc(100% - 6rem)" placeholder="请输入培训描述"></textarea>
</div>
<div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
<div class="flex justify-between items-center w-full" style="height: 20px;">
<p class="w-20 flex-shrink-0 text-gray-400">开始时间</p>
<input class="train-start-time text-right outline-none" type="date" placeholder="请选择开始时间">
</div>
</div>
<div class="mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm">
<p class="w-20 flex-shrink-0 text-gray-400">结束时间</p>
<input class="train-end-time text-right outline-none" type="date">
</div>
<!-- <div class="mt-2.5 px-2 py-1.5 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
<p class="w-20 flex-shrink-0 text-gray-400">单选</p>
<div class="flex items-center flex-wrap justify-end">
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项1</label>
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项2</label>
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项3</label>
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项4</label>
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项5</label>
<label class="ml-3 my-1 flex items-center"><input class="mr-1.5" name="Fruit" type="radio" value="" />选项6</label>
</div>
</div> -->
</div>
<div class="preview-box" style="display: none;">
<div class="certificate-box mt-2.5 px-2 py-1 flex justify-between w-full border border-gray-200 rounded-sm text-sm">
<p class="w-20 flex-shrink-0 text-gray-400">预览</p>
<div class="certificate py-1 flex justify-end" style="max-width: 100px; max-height: 100px;">
<img style="max-width: 100%; max-height: 100%;" onclick="p1449927427387301888.bigImg()" src="http://test.tall.wiki/staticrec/plan.png" />
</div>
</div>
<div class="img-preview fixed z-10 inset-0 bg-black bg-opacity-60 p-4 flex justify-center items-center" style="display: none;">
<img id="img" src="http://test.tall.wiki/staticrec/plan.png" />
</div>
</div>
</div>
</div>
</div>
<script>
var fileElement = document.getElementById('file');
fileElement.addEventListener('change', function(event) {
var files = event.target.files;
var formData = new FormData();
formData.append('param', files[0]);
p1449927427387301888.upload(formData)
}, false);
// var fileElement = document.getElementById('file');
// fileElement.addEventListener('change', function(event) {
// var files = event.target.files;
// var formData = new FormData();
// formData.append('param', files[0]);
// p1449927427387301888.upload(formData)
// }, false);
//事件委托就是利用事件冒泡特性，给父元素绑定事件
//parent.contains(child) 判断是否是某个节点的子节点
//e.target 触发事件的源节点
let preview = document.querySelector('.img-preview'); // 预览
preview.onclick = function(e){
e = window.event || e;
let parentApp = document.getElementById('img');
if(!parentApp.contains(e.target)){
preview.style.display = 'none';
}
}
var p1449927427387301888 = {
token: '',
@ -125,6 +213,9 @@
dom: '',
fileId: '', // 上传文件ID
filePath: '', // 上传文件路径
curStatus: 0, // 当前状态 0 未提交 1 已提交待审核
curIndex: 0, // 当前选择的模板
tempList: [{name: '模板1', organizer: '国家体育总局社会体育指导中心', title: ''}, {name: '模板2', organizer: '', title: ''}, {name: '模板3', organizer: '', title: ''}],
init() {
this.dom = document.querySelector("div[data-root=p1449927427387301888]");
@ -152,6 +243,8 @@
that.token = data.token;
// 查询培训计划
that.getTrainPlan()
// 查询所有模板
that.getAllTemp();
} else {
console.log('msg: ', msg);
}
@ -179,55 +272,28 @@
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
if (!data) {
that.showOrHide(1, -1, 0, 0);
} else {
that.dom.querySelector('.train-name').value = data.name;
that.dom.querySelector('.train-desc').value = data.description;
let start = that.format(data.startTime);
that.dom.querySelector('.train-start-time').value = that.format(data.startTime);
that.dom.querySelector('.train-end-time').value = that.format(data.endTime);
that.fileId = data.fileId;
that.filePath = data.path;
that.dom.querySelector('.file-name').innerHTML = data.name;
console.log(data.startTime, start)
if (data && data.checkStatus === 0) {
that.showOrHide(1, 0, 1, 0);
} else if (data && data.checkStatus === 2) {
that.showOrHide(1, 2, 1, 1);
that.dom.querySelector('.reason').innerHTML = data.rejectCause;
} else {
that.showOrHide(2, 0, 0, 0);
}
}
} else {
console.log('msg: ', msg);
}
});
},
// 文件上传
upload(formData){
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/file/upload`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token
}),
method: 'POST',
body: formData,
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.fileId = data.fileId;
that.filePath = data.path;
let fileName = that.dom.querySelector('.file-name');
fileName.innerHTML = data.name;
that.showOrHide(1, -1, 1, 0);
// if (!data) {
// that.showOrHide(1, -1, 0, 0);
// } else {
// that.dom.querySelector('.train-name').value = data.name;
// that.dom.querySelector('.train-desc').value = data.description;
// let start = that.format(data.startTime);
// that.dom.querySelector('.train-start-time').value = that.format(data.startTime);
// that.dom.querySelector('.train-end-time').value = that.format(data.endTime);
// that.fileId = data.fileId;
// that.filePath = data.path;
// that.dom.querySelector('.file-name').innerHTML = data.name;
// console.log(data.startTime, start)
// if (data && data.checkStatus === 0) {
// that.showOrHide(1, 0, 1, 0);
// } else if (data && data.checkStatus === 2) {
// that.showOrHide(1, 2, 1, 1);
// that.dom.querySelector('.reason').innerHTML = data.rejectCause;
// } else {
// that.showOrHide(2, 0, 0, 0);
// }
// }
} else {
console.log('msg: ', msg);
}
@ -235,21 +301,18 @@
},
/**
* 下载红头文件模板
* 获取所有模板
*/
downLoad() {
getAllTemp() {
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/file/down`, {
fetch(`https://test.tall.wiki/gateway/sports/training/template`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {
projectId: that.projectId,
type: 0
}
param: {projectId: that.projectId}
})
})
.then(function(response) {
@ -258,6 +321,25 @@
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
for (let i = 0; i < data.length; i++) {
if (data[i].type === 0) {
that.tempList = data[i].templateList;
}
}
let html = '';
for (let j = 0; j < that.tempList.length; j++) {
html += `<div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px; ${j % 3 == 2 ? '' : 'margin-right: 5%;'}" onclick="p1449927427387301888.selTemp(${j}, ${that.tempList[j]}}})">
<img style="max-width: 100%; max-height: 100%;" src="${that.tempList[j].path}" />
</div>`;
}
that.dom.querySelector('.temp-list').html = html;
html += `<div class="temp-item border border-blue-400 flex justify-center items-center" style="width: 30%; height: 100px;" onclick="p1449927427387301888.selTemp(1)">
<img style="max-width: 100%; max-height: 100%;" src="http://test.tall.wiki/staticrec/plan.png" />
</div>`;
} else {
console.log('msg: ', msg);
@ -265,71 +347,166 @@
});
},
submit() {
var that = this;
let trainName = that.dom.querySelector('.train-name').value;
let trainDesc = that.dom.querySelector('.train-desc').value;
let trainStartTime = that.dom.querySelector('.train-start-time').value;
let trainEndTime = that.dom.querySelector('.train-end-time').value;
let startDate = new Date(trainStartTime);
let endDate = new Date(trainEndTime);
let startTime = startDate.getTime();
let endTime = endDate.getTime();
if (!that.fileId) {
window.alert("请上传红头文件");
return false;
}
if (!trainName) {
window.alert("请填写培训名称");
return false;
/**
* 选择模板
*/
selTemp(index) {
let tempName = document.querySelector('.sel-temp-name');
tempName.innerHTML = this.tempList[index - 1].name;
let temps = document.querySelectorAll('.temp-item');
for (let i = 0; i < temps.length; i++) {
temps[i].classList.remove("border-blue-400");
temps[i].classList.add("border-gray-200");
}
temps[index - 1].classList.add("border-blue-400");
this.curIndex = index - 1;
},
if (!trainStartTime) {
window.alert("请选择开始时间");
return false;
}
// 预览
bigImg() {
preview.style.display = 'flex';
},
if (!trainEndTime) {
window.alert("请选择结束时间");
return false;
}
submit() {
var that = this;
let previewBox = that.dom.querySelector('.preview-box');
let organizer = that.dom.querySelector('.organizer-name').value;
let planStatus = that.dom.querySelector('.train-plan-status');
let planBtn = that.dom.querySelector('.train-plan-btn');
// if (!organizer) {
// window.alert("请输入主办单位");
// return false;
// }
previewBox.style.display = 'block';
planStatus.style.display = 'block';
planBtn.style.display = 'none';
},
if (startTime > endTime) {
window.alert("结束时间不能小于开始时间");
return false;
}
// 文件上传
// upload(formData){
// var that = this;
// fetch(`https://test.tall.wiki/gateway/sports/file/upload`, {
// headers: new Headers({
// 'Authorization': 'Bearer ' + that.token
// }),
// method: 'POST',
// body: formData,
// })
// .then(function(response) {
// return response.json();
// })
// .then(function(res) {
// const { success, code, data, msg } = res;
// if (success && code === 200) {
// that.fileId = data.fileId;
// that.filePath = data.path;
// let fileName = that.dom.querySelector('.file-name');
// fileName.innerHTML = data.name;
// that.showOrHide(1, -1, 1, 0);
// } else {
// console.log('msg: ', msg);
// }
// });
// },
fetch(`https://test.tall.wiki/gateway/sports/training/save`, {
headers: new Headers({
'Authorization': 'Bearer ' + that.token,
'Content-Type': 'application/json; charset=utf-8'
}),
method: 'POST',
body: JSON.stringify({
param: {
projectId: that.projectId,
name: trainName,
description: trainDesc,
startTime: startTime,
endTime: endTime,
fileId: that.fileId
}
})
})
.then(function(response) {
return response.json();
})
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
that.showOrHide(1, 0, 1, 0);
} else {
console.log('msg: ', msg);
}
});
},
/**
* 下载红头文件模板
*/
// downLoad() {
// var that = this;
// fetch(`https://test.tall.wiki/gateway/sports/file/down`, {
// headers: new Headers({
// 'Authorization': 'Bearer ' + that.token,
// 'Content-Type': 'application/json; charset=utf-8'
// }),
// method: 'POST',
// body: JSON.stringify({
// param: {
// projectId: that.projectId,
// type: 0
// }
// })
// })
// .then(function(response) {
// return response.json();
// })
// .then(function(res) {
// const { success, code, data, msg } = res;
// if (success && code === 200) {
// } else {
// console.log('msg: ', msg);
// }
// });
// },
// submit() {
// var that = this;
// let trainName = that.dom.querySelector('.train-name').value;
// let trainDesc = that.dom.querySelector('.train-desc').value;
// let trainStartTime = that.dom.querySelector('.train-start-time').value;
// let trainEndTime = that.dom.querySelector('.train-end-time').value;
// let startDate = new Date(trainStartTime);
// let endDate = new Date(trainEndTime);
// let startTime = startDate.getTime();
// let endTime = endDate.getTime();
// if (!that.fileId) {
// window.alert("请上传红头文件");
// return false;
// }
// if (!trainName) {
// window.alert("请填写培训名称");
// return false;
// }
// if (!trainStartTime) {
// window.alert("请选择开始时间");
// return false;
// }
// if (!trainEndTime) {
// window.alert("请选择结束时间");
// return false;
// }
// if (startTime > endTime) {
// window.alert("结束时间不能小于开始时间");
// return false;
// }
// fetch(`https://test.tall.wiki/gateway/sports/training/save`, {
// headers: new Headers({
// 'Authorization': 'Bearer ' + that.token,
// 'Content-Type': 'application/json; charset=utf-8'
// }),
// method: 'POST',
// body: JSON.stringify({
// param: {
// projectId: that.projectId,
// name: trainName,
// description: trainDesc,
// startTime: startTime,
// endTime: endTime,
// fileId: that.fileId
// }
// })
// })
// .then(function(response) {
// return response.json();
// })
// .then(function(res) {
// const { success, code, data, msg } = res;
// if (success && code === 200) {
// that.showOrHide(1, 0, 1, 0);
// } else {
// console.log('msg: ', msg);
// }
// });
// },
/**
* 隐藏显示
@ -338,92 +515,92 @@
* @param int review 当前是否显示预览 1 是 0 否
* @param int reject 当前是否显示驳回原因 1 是 0 否
*/
showOrHide(plan, status, review, reject) {
let that = this;
let trainPlanNull = that.dom.querySelector('.train-plan-null'); // 内容未加载完成 - 制定培训计划
let trainPlan = that.dom.querySelector('.train-plan'); // 制定培训计划
let trainPlanBtn = that.dom.querySelector('.train-plan-btn'); // 提交按钮
let trainPlanStatus = that.dom.querySelector('.train-plan-status'); // 待审核状态
let trainPlanStatusRefuse = that.dom.querySelector('.train-plan-status-refuse'); // 已驳回
let fileCheck = that.dom.querySelector('.file-check'); // 文件预览
let refuseReason = that.dom.querySelector('.refuse-reason'); // 驳回原因
let fileDownLoad = that.dom.querySelector('.file-download'); // 文件下载
let fileUpload = that.dom.querySelector('.file-upload'); // 文件上传
if (plan === 1) {
trainPlan.style.display = 'block';
trainPlanNull.style.display = 'none';
} else if (plan === 0) {
trainPlan.style.display = 'none';
trainPlanNull.style.display = 'block';
} else if (plan === 2) {
trainPlan.style.display = 'none';
trainPlanNull.style.display = 'none';
}
if (status === -1) {
trainPlanBtn.style.display = 'block';
trainPlanStatus.style.display = 'none';
trainPlanStatusRefuse.style.display = 'none';
} else if (status === 0) {
trainPlanBtn.style.display = 'none';
trainPlanStatus.style.display = 'block';
trainPlanStatusRefuse.style.display = 'none';
} else if (status === 1) {
trainPlanBtn.style.display = 'none';
trainPlanStatus.style.display = 'none';
trainPlanStatusRefuse.style.display = 'none';
fileDownLoad.style.display = 'none';
fileUpload.style.display = 'none';
} else if (status === 2) {
trainPlanBtn.style.display = 'none';
trainPlanStatus.style.display = 'none';
trainPlanStatusRefuse.style.display = 'block';
}
if (that.fileId && review === 1) {
fileCheck.style.display = 'flex';
} else {
fileCheck.style.display = 'none';
}
if (reject === 1) {
refuseReason.style.display = 'flex';
} else {
refuseReason.style.display = 'none';
}
},
// showOrHide(plan, status, review, reject) {
// let that = this;
// let trainPlanNull = that.dom.querySelector('.train-plan-null'); // 内容未加载完成 - 制定培训计划
// let trainPlan = that.dom.querySelector('.train-plan'); // 制定培训计划
// let trainPlanBtn = that.dom.querySelector('.train-plan-btn'); // 提交按钮
// let trainPlanStatus = that.dom.querySelector('.train-plan-status'); // 待审核状态
// let trainPlanStatusRefuse = that.dom.querySelector('.train-plan-status-refuse'); // 已驳回
// let fileCheck = that.dom.querySelector('.file-check'); // 文件预览
// let refuseReason = that.dom.querySelector('.refuse-reason'); // 驳回原因
// let fileDownLoad = that.dom.querySelector('.file-download'); // 文件下载
// let fileUpload = that.dom.querySelector('.file-upload'); // 文件上传
// if (plan === 1) {
// trainPlan.style.display = 'block';
// trainPlanNull.style.display = 'none';
// } else if (plan === 0) {
// trainPlan.style.display = 'none';
// trainPlanNull.style.display = 'block';
// } else if (plan === 2) {
// trainPlan.style.display = 'none';
// trainPlanNull.style.display = 'none';
// }
// if (status === -1) {
// trainPlanBtn.style.display = 'block';
// trainPlanStatus.style.display = 'none';
// trainPlanStatusRefuse.style.display = 'none';
// } else if (status === 0) {
// trainPlanBtn.style.display = 'none';
// trainPlanStatus.style.display = 'block';
// trainPlanStatusRefuse.style.display = 'none';
// } else if (status === 1) {
// trainPlanBtn.style.display = 'none';
// trainPlanStatus.style.display = 'none';
// trainPlanStatusRefuse.style.display = 'none';
// fileDownLoad.style.display = 'none';
// fileUpload.style.display = 'none';
// } else if (status === 2) {
// trainPlanBtn.style.display = 'none';
// trainPlanStatus.style.display = 'none';
// trainPlanStatusRefuse.style.display = 'block';
// }
// if (that.fileId && review === 1) {
// fileCheck.style.display = 'flex';
// } else {
// fileCheck.style.display = 'none';
// }
// if (reject === 1) {
// refuseReason.style.display = 'flex';
// } else {
// refuseReason.style.display = 'none';
// }
// },
// 取消
hide(){
var statusChoose = this.dom.querySelector('.statusChoose');
statusChoose.style.display='none';
},
// hide(){
// var statusChoose = this.dom.querySelector('.statusChoose');
// statusChoose.style.display='none';
// },
// 时间戳转时间格式
format(shijianchuo){
//shijianchuo是整数，否则要parseInt转换
shijianchuo = parseInt(shijianchuo);
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(y) + '-' + this.add0(m) + '-' + this.add0(d);
},
add0(m){return m < 10 ? '0' + m : m },
// format(shijianchuo){
// //shijianchuo是整数，否则要parseInt转换
// shijianchuo = parseInt(shijianchuo);
// 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(y) + '-' + this.add0(m) + '-' + this.add0(d);
// },
// add0(m){return m < 10 ? '0' + m : m },
// 预览红头文件
preview() {
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://test.tall.wiki/ts/file?pid=${pId}&uid=${uId}&rid=${rId}`
}
// preview() {
// 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://test.tall.wiki/ts/file?pid=${pId}&uid=${uId}&rid=${rId}`
// }
}
p1449927427387301888.init()
</script>

Write Preview
Loading…
Cancel
Save