<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
<head>
|
<th:block th:include="include :: header('新增第三方检测')" />
|
<th:block th:include="include :: datetimepicker-css" />
|
<th:block th:include="include :: bootstrap-fileinput-css"/>
|
<th:block th:include="include :: layui-css"/>
|
</head>
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<form class="form-horizontal m" id="form-thirdPartyTesting-add">
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">检测名称：</label>
|
<div class="col-sm-8">
|
<input type="text" name="testingName" class="form-control" required>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">检测时间：</label>
|
<div class="col-sm-8">
|
<div class="input-group date">
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
<input name="testingDetectionTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
|
|
</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">检测结论：</label>
|
<div class="col-sm-8">
|
<textarea name="testingTestConclusion" class="form-control" required></textarea>
|
</div>
|
</div>
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">报告有效期：</label>
|
<div class="col-sm-8">
|
<div class="input-group date">
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
<input name="testingReportValidityPeriod" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">所属图片：</label>
|
<div class="col-sm-8">
|
<input name="testingOwnedPicture" type="hidden" id="testingOwnedPicture">
|
<div class="file-loading">
|
<input name="file" id="testingOwnedPictureUpload" type="file">
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">所属文件：
|
</label>
|
|
<div class="col-sm-8" >
|
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">
|
</label>
|
|
<div class="col-sm-8" >
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr><th>文件名</th>
|
<th>状态</th>
|
<th>操作</th>
|
</tr></thead>
|
<tbody id="demoList"></tbody>
|
</table>
|
</div>
|
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
|
</div>
|
</div>
|
|
</form>
|
</div>
|
<th:block th:include="include :: footer" />
|
<th:block th:include="include :: bootstrap-fileinput-js"/>
|
<th:block th:include="include :: datetimepicker-js" />
|
<th:block th:include="include :: layui-js"/>
|
<!-- 封装layui上传方法 -->
|
<script src="/js/common/fileUpload.js"></script>
|
|
<script type="text/javascript">
|
//存放已上传的附件的数组
|
var attachmentListArray = new Array();
|
|
$(function() {
|
fileUpload("#testList","#testListAction","#demoList",attachmentListArray);
|
imageUploadEdit($("#testingOwnedPictureUpload"),$("#testingOwnedPicture"));
|
});
|
|
var prefix = ctx + "dc/thirdPartyTesting";
|
$("#form-thirdPartyTesting-add").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
if ($.validate.form()) {
|
|
var data = $('#form-thirdPartyTesting-add').serializeArray();
|
data.push({"name": "testingOwnedFile", "value": JSON.stringify(attachmentListArray)});
|
|
$.operate.save(prefix + "/add", data);
|
}
|
}
|
|
$("input[name='testingDetectionTime']").datetimepicker({
|
format: "yyyy-mm-dd",
|
minView: "month",
|
autoclose: true
|
});
|
|
$("input[name='testingReportValidityPeriod']").datetimepicker({
|
format: "yyyy-mm-dd",
|
minView: "month",
|
autoclose: true
|
});
|
</script>
|
|
|
|
<script>
|
//图片上传
|
function imageUploadEdit(thatFile, thatUrl) {
|
//处理预览数据
|
var urlObj = $(thatUrl).val();
|
var previewUrl = [];
|
var config = [];
|
var previewKeys = [];
|
if (urlObj) {
|
urlObj = JSON.parse(urlObj);
|
for (var key in urlObj) {
|
previewUrl.push(urlObj[key]);
|
var tem = {};
|
tem['key'] = key;
|
config.push(tem);
|
previewKeys.push(key);
|
}
|
}
|
;
|
|
//图片上传
|
var params = {
|
'theme': 'explorer-fas',
|
'uploadUrl': ctx + 'common/defUpload',
|
'deleteUrl': '#',
|
showUpload: false,
|
overwriteInitial: false,
|
initialPreviewAsData: true,
|
language: 'zh',
|
uploadAsync: true,
|
dropZoneEnabled: false,
|
maxFileCount: 10,
|
resizeImage: false,
|
showCaption: false,
|
showPreview: true,
|
browseClass: "btn btn-primary btn-lg",
|
allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg', 'bmp'],
|
previewFileIcon: "",
|
initialPreviewConfig: config,
|
initialPreview: previewUrl
|
};
|
var lastThatFile =
|
$(thatFile).fileinput(params)
|
.on("filebatchselected", function (event, data) {
|
//选择即上传
|
$(thatFile).fileinput("upload");
|
})
|
.on('fileuploaded', function (event, data, previewId, index) {
|
//处理上传后数据，上传后插件会将现有上传文件previewId重排，，此时需对现有地址数据做重排处理，此时有预览数据，预览数据不做处理
|
let count = 0;
|
let imgUrl = {};
|
if ($(thatUrl).val()) {
|
let temp = JSON.parse($(thatUrl).val());
|
for(let key in temp){
|
if (previewKeys.indexOf(key) == -1){
|
imgUrl[previewId.substr(0, previewId.length - 1) + count] = temp[key];
|
count++;
|
}else {
|
imgUrl[key] = temp[key];
|
}
|
}
|
};
|
previewId = previewId.substr(0, previewId.length - 1) + count;
|
imgUrl[previewId] = data.response.url;
|
$(thatUrl).val(JSON.stringify(imgUrl));
|
})
|
.on('filesuccessremove', function (event, previewId) {
|
//点击缩略图中删除按钮触发此事件（此事件是新上传图片缩略图触发）
|
var imgUrl = JSON.parse($(thatUrl).val());
|
delete imgUrl[previewId];
|
$(thatUrl).val(JSON.stringify(imgUrl));
|
})
|
.on('filedeleted', function (event, key) {
|
//点击缩略图中删除按钮触发此事件（此事件是初始化预览图片缩略图触发）
|
var tem = JSON.parse($(thatUrl).val());
|
delete tem[key];
|
let index = previewKeys.indexOf(key);
|
if (index != -1)
|
delete previewKeys[index];
|
$(thatUrl).val(JSON.stringify(tem));
|
})
|
.on('filecleared', function (event) {
|
//点击左下角移除或者右上角×号按钮触发此事件，此时需把初始化预览图片置空
|
$(thatUrl).val("");
|
$(thatFile).fileinput('refresh', {initialPreview: []});
|
});
|
}
|
</script>
|
</body>
|
</html>
|
