<!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-incidentReport-edit" th:object="${incidentReport}">
|
<input name="incidentReportId" th:field="*{incidentReportId}" type="hidden">
|
<!-- <div class="form-group"> -->
|
<!-- <label class="col-sm-3 control-label">创建人id：</label>-->
|
<!-- <div class="col-sm-8">-->
|
<!-- <input name="createUserId" th:field="*{createUserId}" class="form-control" type="text">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="form-group"> -->
|
<!-- <label class="col-sm-3 control-label">更新者id：</label>-->
|
<!-- <div class="col-sm-8">-->
|
<!-- <input name="updateUserId" th:field="*{updateUserId}" class="form-control" type="text">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="form-group">
|
<label class="col-sm-3 control-label is-required">事件名称：</label>
|
<div class="col-sm-8">
|
<input name="eventName" th:field="*{eventName}" class="form-control" type="text" required>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">事件简介：</label>
|
<div class="col-sm-8">
|
<textarea name="introduction" class="form-control" required>[[*{introduction}]]</textarea>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label is-required">事件地点：</label>
|
<div class="col-sm-8">
|
<input name="eventLocation" th:field="*{eventLocation}" class="form-control" type="text" 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="eventTime" th:value="${#dates.format(incidentReport.eventTime, 'yyyy-MM-dd')}" 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">
|
<div class="radio-box" th:each="dict : ${@dict.getType('dc_whether_to_report')}">
|
<input type="radio" th:id="${'whetherToReport_' + dict.dictCode}" name="whetherToReport" th:value="${dict.dictValue}" th:field="*{whetherToReport}">
|
<label th:for="${'whetherToReport_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">处理状态：</label>
|
<div class="col-sm-8">
|
<div class="radio-box" th:each="dict : ${@dict.getType('dc_processing_status')}">
|
<input type="radio" th:id="${'processingStatus_' + dict.dictCode}" name="processingStatus" th:value="${dict.dictValue}" th:field="*{processingStatus}">
|
<label th:for="${'processingStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="form-group"> -->
|
<!-- <label class="col-sm-3 control-label">事件所属图片：</label>-->
|
<!-- <div class="col-sm-8">-->
|
<!-- <input name="ownedPicture" th:field="*{ownedPicture}" class="form-control" type="text">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">事件所属图片：</label>
|
<div class="col-sm-8">
|
<input name="ownedPicture" th:value="*{ownedPicture}" type="hidden" id="ownedPicture">
|
<div class="file-loading">
|
<input name="file" id="ownedPictureUpload" type="file">
|
</div>
|
</div>
|
</div>
|
|
|
<!-- <div class="form-group"> -->
|
<!-- <label class="col-sm-3 control-label">事件所属文件：</label>-->
|
<!-- <div class="col-sm-8">-->
|
<!-- <input name="ownedFile" th:field="*{ownedFile}" class="form-control" type="text">-->
|
<!-- </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" >
|
<tr th:each="file :${fileList}" th:id="${file.attachmentId}">
|
<td>[[${file.originalFileName}]]</td>
|
<td>已上传</td>
|
<td>
|
<a target="_blank" th:if="${#strings.contains(file.filePath,'.pdf')}" th:href="${serviceDomainName}+${file.filePath}"><button type="button" class="layui-btn layui-btn-xs layui-btn-primary">阅览</button></a>
|
<a target="_blank" th:if="${!#strings.contains(file.filePath,'.pdf')}" th:href="'https://view.officeapps.live.com/op/view.aspx?src='+${serviceDomainName}+${file.filePath}"><button type="button" class="layui-btn layui-btn-xs layui-btn-primary">阅览</button></a>
|
<a th:href="${file.filePath}" th:download="${file.originalFileName}"><button type="button" class="layui-btn layui-btn-xs layui-btn-normal" >下载</button></a>
|
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" th:onclick="'deleteFile('+${file.attachmentId}+')'">删除</button>
|
</td>
|
|
</tr>
|
</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 :: datetimepicker-js" />
|
<th:block th:include="include :: bootstrap-fileinput-js"/>
|
<th:block th:include="include :: layui-js"/>
|
<!-- 封装layui上传方法 -->
|
<script src="/js/common/fileUpload.js"></script>
|
<script type="text/javascript">
|
//存放已上传的附件的数组
|
var attachmentListArray = new Array();
|
|
var prefix = ctx + "dc/incidentReport";
|
$("#form-incidentReport-edit").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
if ($.validate.form()) {
|
var data = $('#form-incidentReport-edit').serializeArray();
|
data.push({"name": "ownedFile", "value": JSON.stringify(attachmentListArray)});
|
|
$.operate.save(prefix + "/edit", data);
|
}
|
}
|
|
$("input[name='eventTime']").datetimepicker({
|
format: "yyyy-mm-dd",
|
minView: "month",
|
autoclose: true
|
});
|
</script>
|
|
|
<script>
|
|
$(function() {
|
fileUpload("#testList","#testListAction","#demoList",attachmentListArray);
|
imageUploadEdit($("#ownedPictureUpload"),$("#ownedPicture"));
|
});
|
|
//图片上传
|
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>
|
