389 lines
13 KiB
HTML
389 lines
13 KiB
HTML
<style type="text/css">
|
||
|
||
#content {
|
||
border: 1px solid saddlebrown;
|
||
padding: 16px;
|
||
border-radius: 2px
|
||
}
|
||
|
||
.list {
|
||
top: 15px;
|
||
width: 140px;
|
||
height: 40px;
|
||
border: 1px solid #0082E6;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
}
|
||
|
||
#file {
|
||
position: absolute;
|
||
opacity: 0;
|
||
color: white;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 100;
|
||
}
|
||
|
||
.list span {
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 100%;
|
||
line-height: 40px;
|
||
position: absolute;
|
||
color: #0082E6;
|
||
}
|
||
|
||
video {
|
||
margin-top: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
._p {
|
||
margin: 14px;
|
||
}
|
||
|
||
._p input {
|
||
display: inline-block;
|
||
width: 70%;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
._p span {
|
||
font-size: 15px;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
height: 20px;
|
||
background-color: gray;
|
||
|
||
}
|
||
|
||
#progress {
|
||
height: 20px;
|
||
background-color: orange;
|
||
display: inline-block;
|
||
|
||
}
|
||
.btn {
|
||
text-align: center;
|
||
color: #0082E6;
|
||
width: 140px;
|
||
height: 41px;
|
||
border: 1px solid #0082E6;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
background-color: white;
|
||
}
|
||
.ploadname {
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #0082E6;
|
||
height: 40px;
|
||
display: inline-block;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
background-color: white;
|
||
}
|
||
|
||
</style>
|
||
<div id="edubar" style="padding: 4px;height: 40px;background-color:#FCFCFC">
|
||
<div id="wasteTableBar">
|
||
<a onclick="addAechives()" class="easyui-linkbutton" data-options="iconCls: 'fa-plus',plain: true">新增</a>
|
||
|
||
<a onclick="delArchives()" class="easyui-linkbutton" data-options="iconCls: 'fa-trash',plain: true">删除</a>
|
||
</div>
|
||
|
||
</div>
|
||
<table id="mgttab" style="width:100%;height:100%;text-align: center;"></table>
|
||
<div id="arechivesDialog" class="easyui-dialog" style="width:600px;height:600px;padding:5px 15px;"
|
||
data-options="resizable:true,modal:true,closed:true,border:false">
|
||
<form method="post" id="arechivesForm">
|
||
<input name="id" type="hidden">
|
||
<div style="margin-bottom:10px">
|
||
<input name="title" data-options="label:'档案名称：'" class="easyui-textbox" style="width:480px;" required></input>
|
||
</div>
|
||
<div style="margin-bottom:10px">
|
||
<input name="createdate" data-options="label:'上传时间：'" class="easyui-datetimebox" style="width:480px;" data-options="currentText:'今天',closeText:'关闭',showSeconds:false" required></input>
|
||
|
||
</div>
|
||
<div style="margin-bottom:10px">
|
||
<input id="type" name="type" data-options="label:'文件类型：'" class="easyui-textbox" style="width:480px">
|
||
</div>
|
||
<div style="margin-bottom:10px">
|
||
<input name="note" data-options="label:'备注',multiline:true" class="easyui-textbox" style="width:480px;height:60px" ></input>
|
||
</div>
|
||
<div id="content">
|
||
|
||
<p class="_p">
|
||
<span>选择文件： </span>
|
||
<!--文件选择按钮-->
|
||
<a class="list" href="javascript:;">
|
||
<input id="file" type="file" name="myfile" accept=".txt,.ppt,.doc,.pdf,dot" onchange="UpladFile(this);" /><span>选择文件</span>
|
||
</a>
|
||
|
||
<a class="el-upload-list__item-name">
|
||
<i class="el-icon-document"></i><span class="ploadname" id="fileName"></span>
|
||
</a>
|
||
<span id="url" style="display:none"></span>
|
||
</p>
|
||
|
||
|
||
<!--进度条-->
|
||
<div class="el-progress el-progress--line" style="display: none;">
|
||
<div class='container'>
|
||
<span id="progress"></span>
|
||
|
||
</div>
|
||
<!--上传速度显示-->
|
||
<span id="time"></span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div style="text-align: center;margin-top:20px">
|
||
<a class="easyui-linkbutton" iconCls="fa-floppy-o" onclick="saveArchives()">保存</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script>
|
||
$("#type").combobox({
|
||
url: '/api/enp/archives/dic/?dicclass=60',
|
||
valueField: 'value',
|
||
textField: 'text',
|
||
editable: false,
|
||
});
|
||
|
||
$('#mgttab').datagrid({
|
||
url: '/api/enp/archives/listall/',
|
||
rownumbers: true,
|
||
singleSelect: true,
|
||
striped: true,
|
||
fitColumns: true,
|
||
method: 'get',
|
||
pagination: 'true',
|
||
pageSize: 20,
|
||
border: false,
|
||
toolbar:'#edubar',
|
||
columns: [[
|
||
{ field: 'id', title: 'ID', hidden: true },
|
||
{ field: 'title', title: '档案名称', width: 100 },
|
||
{ field: 'type__dickeyname', title: '档案类型', width: 100 },
|
||
{ field: 'createdate', title: '上传时间', width: 100 },
|
||
{ field: 'createuser__name', title: '创建人', width: 100 },
|
||
{ field: 'note', title: '备注', width: 100 },
|
||
{
|
||
field: 'path', title: '点击观看', width: 100, formatter: function (value, row, index) {
|
||
return '<a style="color:blue" target="_blank" href="' + row.path + '" id="one">点击查看</a>';
|
||
}
|
||
},
|
||
|
||
|
||
|
||
]]
|
||
});
|
||
var xhr;//异步请求对象
|
||
var ot; //时间
|
||
var oloaded;//大小
|
||
//上传文件方法
|
||
function UpladFile(target, id) {
|
||
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
|
||
if (fileObj.name) {
|
||
$(".el-upload-list").css("display", "block");
|
||
$(".el-upload-list li").css("border", "1px solid #20a0ff");
|
||
if (fileObj == undefined || fileObj == "") {
|
||
alert("请选择文件");
|
||
return false;
|
||
};
|
||
|
||
var filetypes = [ ".txt", ".ppt", ".doc", ".pdf", ".dot"];//判断上传文件格式类型
|
||
var filepath = target.value;
|
||
if (filepath) {
|
||
var isnext = false;
|
||
var fileend = filepath.substring(filepath.indexOf("."));
|
||
if (filetypes && filetypes.length > 0) {
|
||
for (var i = 0; i < filetypes.length; i++) {
|
||
if (filetypes[i] == fileend) {
|
||
isnext = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (!isnext) {
|
||
alert("不接受此文件类型！");
|
||
target.value = "";
|
||
|
||
return false;
|
||
}
|
||
} else {
|
||
return false;
|
||
}
|
||
var imagSize = fileObj.size;
|
||
|
||
if (imagSize > 1024 * 1024 * 10) {
|
||
alert("文件大小为：" + (imagSize / (1024 * 1024)).toFixed(2) + "M，超出了10M！");
|
||
|
||
return false;
|
||
}
|
||
|
||
var url = "/api/enp/archives/upload/"; // 接收上传文件的后台地址
|
||
var form = new FormData(); // FormData 对象
|
||
form.append("mf", fileObj); // 文件对象
|
||
|
||
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
||
|
||
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
||
|
||
xhr.onload = uploadComplete; //请求完成
|
||
xhr.onerror = uploadFailed; //请求失败
|
||
xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
|
||
xhr.upload.onloadstart = function () { //上传开始执行方法
|
||
ot = new Date().getTime(); //设置上传开始时间
|
||
oloaded = 0; //设置上传开始时，以上传的文件大小为0
|
||
};
|
||
xhr.send(form); //开始上传，发送form数据
|
||
|
||
$("#fileName").text(fileObj.name);
|
||
|
||
}
|
||
|
||
else {
|
||
alert("请选择文件");
|
||
}
|
||
}
|
||
|
||
|
||
|
||
//上传进度实现方法，上传过程中会频繁调用该方法
|
||
function progressFunction(evt) {
|
||
// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
|
||
if (evt.lengthComputable) {
|
||
|
||
$(".el-progress--line").css("display", "block");
|
||
var percent = Math.round(evt.loaded * 100 / evt.total);
|
||
|
||
/*进度条显示进度*/
|
||
document.getElementById('progress').innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
|
||
document.getElementById('progress').style.width = percent.toFixed(2) + '%';
|
||
|
||
}
|
||
|
||
var time = document.getElementById("time");
|
||
var nt = new Date().getTime(); //获取当前时间
|
||
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
|
||
ot = new Date().getTime(); //重新赋值时间，用于下次计算
|
||
|
||
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
|
||
oloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算
|
||
|
||
//上传速度计算
|
||
var speed = perload / pertime; //单位b/s
|
||
var bspeed = speed;
|
||
var units = 'b/s'; //单位名称
|
||
if (speed / 1024 > 1) {
|
||
speed = speed / 1024;
|
||
units = 'k/s';
|
||
}
|
||
if (speed / 1024 > 1) {
|
||
speed = speed / 1024;
|
||
units = 'M/s';
|
||
}
|
||
speed = speed.toFixed(1);
|
||
//剩余时间
|
||
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
|
||
time.innerHTML = '上传速度：' + speed + units + ',剩余时间：' + resttime + 's';
|
||
if (bspeed == 0)
|
||
time.innerHTML = '上传已取消';
|
||
}
|
||
//上传成功响应
|
||
function uploadComplete(evt) {
|
||
//服务断接收完文件返回的结果 注意返回的字符串要去掉双引号
|
||
|
||
if (evt.target.responseText) {
|
||
var data = JSON.parse(evt.target.responseText);
|
||
if (data.code = 1) {
|
||
|
||
var str = data.filepath;
|
||
document.getElementById('url').innerHTML = str;
|
||
alert("上传成功！");
|
||
}
|
||
} else {
|
||
alert("上传失败");
|
||
}
|
||
}
|
||
//上传失败
|
||
function uploadFailed(evt) {
|
||
alert("上传失败！");
|
||
}
|
||
|
||
//新增档案
|
||
function addAechives() {
|
||
$('#arechivesDialog').dialog('open').dialog('setTitle', '新增档案文件').window('center');
|
||
$('#arechivesForm').form('clear');
|
||
$('#typeFormItem').attr('value',1);
|
||
waste_action_url = '/api/enp/archives/create/'
|
||
}
|
||
//提交
|
||
function saveArchives(){
|
||
var data = $('#arechivesForm').serializeJSON();
|
||
data['filepath'] = document.getElementById('url').innerHTML;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: waste_action_url,
|
||
data: JSON.stringify(data),
|
||
datatype: "json",
|
||
processData: false,
|
||
contentType: "application/json;charset=utf-8",
|
||
beforeSend: function () {
|
||
return $('#arechivesForm').form('validate')
|
||
},
|
||
success: function (data) {
|
||
$("#mgttab").datagrid('reload');
|
||
$("#arechivesDialog").dialog("close");
|
||
},
|
||
});
|
||
}
|
||
//编辑数据
|
||
|
||
function editArchives(){
|
||
var row = $('#mgttab').datagrid('getSelected');
|
||
if(row){
|
||
$('#arechivesDialog').dialog('open').dialog('setTitle', '编辑档案文件').window('center');
|
||
$('#arechivesForm').form('load', row);
|
||
waste_action_url = '/api/enp/archives/update/'}
|
||
else{
|
||
$.messager.alert('提示', '请选择一条数据!');
|
||
}
|
||
}
|
||
//删除数据
|
||
function delArchives() {
|
||
var row = $('#mgttab').datagrid('getSelected');
|
||
if (row) {
|
||
$.messager.confirm('提示', '确定删除吗?', function (r) {
|
||
if (r) {
|
||
var data = { id: row.id }
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/api/enp/archives/delete/',
|
||
data: JSON.stringify(data),
|
||
datatype: "json",
|
||
beforeSend: function () { },
|
||
success: function (data) {
|
||
if (data.code == 1) {
|
||
$("#mgttab").datagrid('reload');
|
||
}
|
||
else {
|
||
$.messager.alert('提示', '操作失败!');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
else { $.messager.alert('提示', '请选择一条数据!'); }
|
||
}
|
||
</script> |