<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>添加排除故障方案</title>
|
<link rel="stylesheet" type="text/css" href="../pages/css/base.css">
|
<link rel="stylesheet" type="text/css" href="../src/css/layui.css">
|
<link rel="stylesheet" type="text/css" href="../pages/css/mylayui.css">
|
<style>
|
.bottom-btn {
|
position: absolute;
|
bottom: 10px;
|
right: 20px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-page-container">
|
<!-- 页面主题内容 -->
|
<div class="layui-page-content abs">
|
<div class="abs-container">
|
<div class="layui-upload">
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>图片预览</th>
|
<th>文件名</th>
|
<th>大小</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="imgsInfo"></tbody>
|
</table>
|
</div>
|
</div>
|
<div class="layui-form layui-form-pane" style="margin-bottom: 60px;">
|
<label class="layui-form-label">方案描述</label>
|
<div class="layui-form-item layui-form-text">
|
<div class="layui-input-block">
|
<textarea placeholder="方案描述" class="layui-textarea" name="desc" id="desc"></textarea>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="bottom-btn">
|
<button type="button" class="layui-btn layui-btn-normal" id="addImgs">添加图片</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="addImgsAction">提交方案</button>
|
</div>
|
</div>
|
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="../src/layui.js"></script>
|
<script type="text/javascript" src="../pages/js/mylayui.js"></script>
|
<script type="text/javascript">
|
layui.use(['form', 'layer', 'upload'], function() {
|
var layer = layui.layer;
|
var upload = layui.upload;
|
var subPlanData = parent.$('#subPlan').data('data');
|
var closePage = parent.$('#closeUploadBtn');
|
|
// 填充默认内容
|
$('#desc').val(subPlanData.error_dispose);
|
|
// 点击提交方案方案
|
$('#subPlan').click(function() {
|
subPlanData.error_dispose = $('#desc').val();
|
subPlan(subPlanData);
|
});
|
|
// 图片上传
|
var imgsInfo = $('#imgsInfo');
|
var date = new Date();
|
var addImgsOpts = {
|
json:{
|
'solve_record_time': date.format('yyyy-MM-dd hh:mm:ss'), // 提交日期
|
'error_descript': '',
|
'error_dispose': '',
|
'error_en': 1,
|
'solve_picture_num': 0
|
},
|
files: {}
|
|
};
|
|
var uploadImgs = upload.render({
|
elem: '#addImgs'
|
,url: 'Deverror_recordAction!add'
|
,accept: 'file'
|
,multiple: true
|
,number: 4
|
,auto: false
|
,bindAction: '#addImgsActionTmp'
|
,choose: function(obj){
|
addImgsOpts.files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
var files = this.files = obj.pushFile();
|
//读取本地文件
|
obj.preview(function(index, file, result){
|
var tr = $(['<tr id="upload-'+ index +'">'
|
,'<td><img src="'+result+'">'
|
,'<td>'+ file.name +'</td>'
|
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
|
,'<td>'
|
,'<button class="layui-btn layui-btn-xs imgs-reload layui-hide">重传</button>'
|
,'<button class="layui-btn layui-btn-xs layui-btn-danger imgs-delete">删除</button>'
|
,'</td>'
|
,'</tr>'].join(''));
|
|
//单个重传
|
tr.find('.imgs-reload').on('click', function(){
|
obj.upload(index, file);
|
});
|
|
//删除
|
tr.find('.imgs-delete').on('click', function(){
|
delete files[index]; //删除对应的文件
|
tr.remove();
|
uploadImgs.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
});
|
|
imgsInfo.append(tr);
|
});
|
}
|
});
|
|
// 点击添加生成
|
$('#addImgsAction').click(function() {
|
subPlan();
|
});
|
|
// 上传
|
function subPlan() {
|
// 更新内容
|
createUploadData();
|
var formData = new FormData();
|
|
var files = addImgsOpts.files;
|
var filesArr = [];
|
Object.keys(files).forEach(function(key) {
|
filesArr.push(files[key]);
|
});
|
|
addImgsOpts.json.solve_picture_num = filesArr.length;
|
var json = JSON.stringify(addImgsOpts.json);
|
formData.append('json', json);
|
for(var i=0;i<filesArr.length; i++) {
|
var _files = filesArr[i];
|
formData.append('file', _files);
|
if(i==0) {
|
formData.append('fileType', 'solve_picture_one');
|
}
|
|
if(i==1) {
|
formData.append('fileType', 'solve_picture_two');
|
}
|
|
if(i==2) {
|
formData.append('fileType', 'solve_picture_three');
|
}
|
|
if(i==3) {
|
formData.append('fileType', 'solve_picture_four');
|
}
|
}
|
|
if(addImgsOpts.json.solve_picture_num>4) {
|
layer.msg('最多上传4张图片');
|
return;
|
}
|
|
var load = layer.load(1);
|
$.ajax({
|
type: "post",
|
url: "Deverror_recordAction!update",
|
async:true,
|
dataType:'text',
|
data:formData,
|
contentType: false,//这里
|
processData: false,//这两个一定设置为false
|
success: function(data){
|
layer.close(load);
|
layer.closeAll();
|
layer.msg('上传成功！3秒后自动关闭') ;
|
setTimeout(function() {
|
closePage.click();
|
}, 3000);
|
},
|
error:function(e){
|
layer.close(load);
|
layer.msg('上传失败！') ;
|
}
|
});
|
}
|
|
|
// 更新上传后台的信息
|
function createUploadData() {
|
var json = addImgsOpts.json;
|
json.solve_record_time = date.format('yyyy-MM-dd hh:mm:ss'); // 提交日期
|
json.error_dispose = $('#desc').val(); // 方案描述
|
json.num = subPlanData.num; // 标识
|
json.error_en = 1; // 确定
|
}
|
});
|
</script>
|
</body>
|
</html>
|
