Browse Source

制定培训计划

tiaosheng-ms
xuesinan 4 years ago
parent
commit
4544de0a4a
  1. 394
      index.html

394
index.html

@ -44,50 +44,87 @@
<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">
<div class="train-plan" style="display: none;">
<div class="title"></div>
<div class="flex justify-between">
<div class="text-sm">制定培训计划</div>
<div class="train-plan-btn bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1449927427387301888.submit()">提交</div>
<button class="train-plan-btn bg-blue-500 text-sm rounded w-12 h-6 text-white" onclick="p1449927427387301888.submit()">提交</button>
<div class="train-plan-status text-xs" style="display: none;">待审核</div>
<div class="train-plan-status-refuse" style="display: none;">
<span class="text-red-500 text-xs">已驳回</span>
<button class="bg-blue-500 text-xs rounded-md py-1 px-3 text-white" onclick="p1449927427387301888.submit()">提交</button>
<button class="bg-blue-500 text-xs rounded py-1 px-3 text-white" onclick="p1449927427387301888.submit()">提交</button>
</div>
</div>
<div class="border-2 w-full mt-2.5 flex justify-between p-2 text-sm">
<p style="color: #999999;">红头文件模板</p>
<button>下载</button>
<div class="file-download mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm">
<p class="text-gray-400">红头文件模板</p>
<button onclick="p1449927427387301888.downLoad()">下载</button>
</div>
<div class="border-2 w-full mt-2.5 flex justify-between p-2 text-sm">
<!-- <p style="color: #999999;">文件上传</p>
<div onclick="p1432643387798069248.upload()">上传</div> -->
<input type="file" id="iptFile">
<!-- <input type="button" id="upload" value="点击上传"/> -->
<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-name text-right outline-none" style="width: calc(100% - 6rem)" type="text" placeholder="请输入培训名称" />
</div>
<div class="border-2 w-full mt-2.5 flex justify-between p-2 text-sm file-check" style="display: none;">
<p style="color: #999999;">山西跳协**培训红头文件</p>
<div class="mt-2.5 px-2 py-1 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 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-start-time text-right outline-none" type="date" placeholder="请选择开始时间">
</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="file-upload mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm">
<p class="text-gray-400">文件上传</p>
<div class="relative flex items-center">
<button>上传</button>
<input class="input-file absolute z-10 opacity-0" type="file" name="files" id="file" multiple>
</div>
</div>
<div class="file-check mt-2.5 px-2 flex justify-between items-center w-full h-8 border border-gray-200 rounded-sm text-sm" style="display: none;">
<p class="file-name text-gray-400 truncate" style="width: calc(100vw - 9rem)"></p>
<button class="text-xs text-blue-400 border border-blue-400 rounded-full w-10 h-5" onclick="p1449927427387301888.preview()">预览</button>
</div>
<div class="refuse-reason border-2 w-full mt-2.5 flex justify-between p-2 text-sm" style="display: none;">
<p class="w-20 flex-shrink-0" style="color: #999999;">驳回原因</p>
<div class="refuse-reason mt-2.5 px-2 py-1 flex justify-between w-full border border-gray-200 rounded-sm text-sm" style="display: none;">
<p class="w-20 flex-shrink-0 text-gray-400">驳回原因</p>
<div>驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因</div>
</div>
</div>
<div class="train-plan-null">
<div class="title"></div>
<div class="flex justify-between">
<div class="text-sm">制定培训计划</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 p1449927427387301888 = {
token: '',
projectId: '',
roleId: '',
dom: '',
file: '', // 上传文件路径
fileId: '', // 上传文件ID
filePath: '', // 上传文件路径
init() {
this.dom = document.querySelector("div[data-root=p1449927427387301888]");
@ -121,6 +158,9 @@
});
},
/**
* 查询当前培训计划
*/
getTrainPlan(){
var that = this;
fetch(`https://test.tall.wiki/gateway/sports/training/get`, {
@ -139,46 +179,26 @@
.then(function(res) {
const { success, code, data, msg } = res;
if (success && code === 200) {
var trainPlan = that.dom.querySelector('.train-plan');
var fileCheck = that.dom.querySelector('.file-check');
if (!data) {
trainPlan.style.display = 'block';
fileCheck.style.display = 'flex'; // 预览开启
// document.querySelector('#upload').on('click',function(){
// var xhr = new XMLHttpRequest();
// // xhr.open('post','../PHP/post_file.php',true);
// xhr.onload = ()=>{
// console.log('上传成功');
// };
// // 通过file表单的files属性拿到文件数据 通过formData将数据转换为二进制格式
// var fileInfo = new FormData();
// fileInfo.append( 'file',document.querySelector('#iptFile')[0].files[0] );
// // 发送数据
// xhr.send(fileInfo);
// fileCheck.style.display = 'flex'; // 预览开启
// });
} else if (data && data.checkStatus === 0 || data && data.checkStatus === 2) {
trainPlan.style.display = 'block';
fileCheck.style.display = 'flex';
var trainPlanBtn = that.dom.querySelector('.train-plan-btn ');
trainPlanBtn.style.display = 'none';
if (data.checkStatus === 0) {
var trainPlanStatus = that.dom.querySelector('.train-plan-status');
trainPlanStatus.style.display = 'block';
} else if (data.checkStatus === 2) {
var trainPlanStatusRefuse = that.dom.querySelector('.train-plan-status-refuse');
trainPlanStatusRefuse.style.display = 'block';
var refuseReason = that.dom.querySelector('.refuse-reason');
refuseReason.style.display = 'flex';
}
that.showOrHide(1, -1, 0, 0);
} else {
trainPlan.style.display = 'none';
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);
} else {
that.showOrHide(2, 0, 0, 0);
}
}
} else {
console.log('msg: ', msg);
@ -187,81 +207,215 @@
},
// 文件上传
upload(){
// console.log(1);
// var input = document.createElement("input");
// input.type = "file";
// input.click();
// input.onchange = function(){
// var file = input.files[0];
// var form = new FormData();
// form.append("file", file); //第一个参数是后台读取的请求key值
// form.append("fileName", file.name);
// form.append("other", "666666"); //实际业务的其他请求参数
// var xhr = new XMLHttpRequest();
// var action = "http://localhost:8080/upload.do"; //上传服务的接口地址
// xhr.open("POST", action);
// xhr.send(form); //发送表单数据
// xhr.onreadystatechange = function(){
// if(xhr.readyState==4 && xhr.status==200){
// var resultObj = JSON.parse(xhr.responseText);
// //处理返回的数据......
// }
// }
// }
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);
}
});
},
/**
* 下载红头文件模板
*/
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
if (!that.file) {
// 弹框提示请上传文件
that.statusChange();
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);
}
});
},
/**
* 隐藏显示
* @param int plan 当前培训计划是否加载完成 1 完成 0 未完成 2 已通过
* @param int status 当前培训计划状态 -1 待提交 0 待审核 1 通过 2 拒绝
* @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 {
that.statusChange();
// 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: '',
// description: '',
// startTime: '',
// endTime: '',
// fileId: ''
// }
// })
// })
// .then(function(response) {
// return response.json();
// })
// .then(function(res) {
// const { success, code, data, msg } = res;
// if (success && code === 200) {
// var submitBtn = that.dom.querySelector('.train-plan-btn')
// submitBtn.style.display = 'none'
// var trainStatus = that.dom.querySelector('.train-plan-status')
// trainStatus.style.display = 'block'
// } else {
// console.log('msg: ', msg);
// }
// });
fileCheck.style.display = 'none';
}
if (reject === 1) {
refuseReason.style.display = 'flex';
} else {
refuseReason.style.display = 'none';
}
},
// 按钮切换成状态值
statusChange() {
var that = this
var submitBtn = that.dom.querySelector('.train-plan-btn')
submitBtn.style.display = 'none'
var trainStatus = that.dom.querySelector('.train-plan-status')
trainStatus.style.display = 'block'
// 取消
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 },
// 预览红头文件
preview() {
const pId = this.dom.parentNode.getAttribute('data-pid');

Loading…
Cancel
Save