|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<!--解决idea thymeleaf 表达式模板报红波浪线-->
|
|
|
|
|
<!--suppress ALL -->
|
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<!-- 引入公用部分 -->
|
|
|
|
|
<script th:replace="common/head::static"></script>
|
|
|
|
|
<!-- 样式 -->
|
|
|
|
|
<link th:href="@{/css/common/contianer.css}" rel="stylesheet" type="text/css"/>
|
|
|
|
|
<link th:href="@{/css/sys/file/fileView.css}" rel="stylesheet" type="text/css"/>
|
|
|
|
|
<style>
|
|
|
|
|
.layui-input-block{
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
|
const file = /*[[${fileData}]]*/ {};
|
|
|
|
|
const fileViewUrl = /*[[${fileViewUrl}]]*/ '';
|
|
|
|
|
const downloadUrl = /*[[${downloadUrl}]]*/ '';
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="layui-row">
|
|
|
|
|
<div class="layui-col-md10">
|
|
|
|
|
<div class="layui-card">
|
|
|
|
|
<!--<div class="layui-card-header"></div>-->
|
|
|
|
|
<div class="layui-card-body" id="fileViewer">
|
|
|
|
|
<div class="file-viewer-container">
|
|
|
|
|
<iframe id="office-online" height="100%" width="100%" scrolling="0"
|
|
|
|
|
style="overflow: hidden; border: 0;"></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-col-md2">
|
|
|
|
|
<div class="layui-card">
|
|
|
|
|
<!--<div class="layui-card-header">文件属性</div>-->
|
|
|
|
|
<div class="layui-card-body" style="padding: 0; padding-top: 15px;">
|
|
|
|
|
<div class="file-property">
|
|
|
|
|
<label class="field-name">文件名称</label>
|
|
|
|
|
<label class="field-value" name="fileName"></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="file-property"
|
|
|
|
|
th:each="field,iterStat : ${uploadFormConfig}"
|
|
|
|
|
th:if="${field.isShow}"
|
|
|
|
|
th:style="${field.fieldType == 'textarea' ? 'width: calc(100% - 30px);' : ''}"
|
|
|
|
|
th:with="username=*{userName}">
|
|
|
|
|
<label class="field-name" th:text="${field.showTitle}">文件名称</label>
|
|
|
|
|
<label class="field-value" th:name="${field.fieldName}" th:value="${field.fieldName}"></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="file-property" th:each="labelSet, iterState:${LabelConfigSet}">
|
|
|
|
|
<label class="field-name" th:text="${labelSet.fieldTitle}">标签类型</label>
|
|
|
|
|
<div class="field-value label-set-component read-only"
|
|
|
|
|
th:data-id="${labelSet.id}"
|
|
|
|
|
th:data-field-title="${labelSet.fieldTitle}"
|
|
|
|
|
th:data-label-id="${labelSet.labelId}"
|
|
|
|
|
th:data-label-title="${labelSet.labelTitle}"
|
|
|
|
|
th:data-label-id-path="${labelSet.labelIdPath}"
|
|
|
|
|
th:data-label-title-path="${labelSet.labelTitlePath}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="file-property">
|
|
|
|
|
<label class="field-name">其他标签</label>
|
|
|
|
|
<div class="other-label-item layui-input-block read-only"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-form-item" style="display: flex; flex-direction: column;">
|
|
|
|
|
<input type="hidden" name="id">
|
|
|
|
|
<button class="layui-btn layui-btn-sm" type="button" id="download-btn" style="margin: 10px 70px"
|
|
|
|
|
th:text="${'下载('+ readableFileSize +')'}">
|
|
|
|
|
下载该文件
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<!-- js -->
|
|
|
|
|
<script th:replace="common/head::static-foot"></script>
|
|
|
|
|
<script th:src="@{/js/sys/file/view.js}"></script>
|
|
|
|
|
<script>
|
|
|
|
|
/**
|
|
|
|
|
* 切换显示文件展示区域
|
|
|
|
|
* @param type 展示类型
|
|
|
|
|
*/
|
|
|
|
|
function showFileViewer(type) {
|
|
|
|
|
$('#fileViewer .file-viewer').addClass('layui-hide');
|
|
|
|
|
$(`#file-viewer-${type}`).removeClass('layui-hide');
|
|
|
|
|
$('ul.file-viewer-tab li:first').click()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const sizeInit = () => {
|
|
|
|
|
$("div.layui-card:eq(0) .layui-card-body").height(window.innerHeight - 6).css('padding', 0);
|
|
|
|
|
$("div.layui-card:eq(1) .layui-card-body").height(window.innerHeight - 20);
|
|
|
|
|
}
|
|
|
|
|
window.onresize = sizeInit;
|
|
|
|
|
sizeInit();
|
|
|
|
|
|
|
|
|
|
//返回列表页
|
|
|
|
|
$('#backBtn').on('click', function () {
|
|
|
|
|
window.parent.closeDetailsLayer();
|
|
|
|
|
});
|
|
|
|
|
$('ul.file-viewer-tab li').on('click', function () {
|
|
|
|
|
$(this).siblings().removeClass('tab-active');
|
|
|
|
|
$(this).addClass('tab-active');
|
|
|
|
|
let index = $('ul.file-viewer-tab li').index(this);
|
|
|
|
|
$(`#fileViewer .file-viewer-item`).removeClass('item-show');
|
|
|
|
|
$(`#fileViewer .file-viewer-item:eq(${index})`).addClass('item-show');
|
|
|
|
|
})
|
|
|
|
|
$('#download-btn').on('click', function () {
|
|
|
|
|
window.open(downloadUrl)
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
