在数据管控系统中目录审核页面改为按目录结构显示

master
xiong_cl 5 months ago
parent dde249ccc3
commit 7b2742fc95
  1. 256
      shandan-control/src/main/resources/static/js/directory/reviewDirectory.js
  2. 140
      shandan-control/src/main/resources/view/review/directoryReview.html

@ -0,0 +1,256 @@
/**
* <p>
* 修改在数据管控系统中目录审核页面改为按目录结构显示
* xiongcl 20210412
* </p>
*
* @author Administrator
* @since 2021/6/1
*/
// 目录树数据缓存
const dirCache = new Map();
function startRender() {
layui.use(['ReviewComponent'], function () {
const ReviewComponent = layui.ReviewComponent;
// 目录树
let dirTree, metaListTable, tempNode;
/**
* 加载数据资源列表
*/
const loadMetadataList = function (directory) {
const {basicData} = directory;
if (!basicData) return;
let dirId = basicData.id, uploadPermis = true, viewPermis = true, removePermis = true,
permis = {uploadPermis, viewPermis, removePermis};
if (!WritePermisDirIds.includes(basicData.id) || dirId == DIR_ROOT_ID) {
permis.uploadPermis = false;
permis.removePermis = false;
}
if (!ReadPermisDirIds.includes(basicData.id)) {
permis.viewPermis = false;
dirId = DIR_ROOT_ID
}
metaListTable = listPage.init({
table: {
permis: permis,
id: 'dirMetadataTable',
//reviewStatusC: directory.basicData.reviewStatus,
toolbar: '#tableToolBar',
searchFieldNames: 'metadataName',
url: `${ctx}/business/metadata/list/directory?directoryId=${dirId}&allChild=true`,
height: 'full-110',
method: 'get',
text: {none: permis.viewPermis ? '没有数据' : '没有权限'},
parseData: function (res) { //res 即为原始返回的数据
let data = res.data || {};
data.records = data.records.map(item => {
item.permis = permis
return item;
});
return {
"flag": res.flag, //解析接口状态
"msg": res.msg, //解析提示文本
"records": data.records || res.records || data, //解析数据长度
"total": data.total || data.length //解析数据列表
};
},
cols: [[
{field: 'id', title: 'ID', hide: true},
{field: 'resourceName', title: '数据名称', width: 300},
{field: 'directoryPath', title: '所属目录'},
{field: 'resourceComment', title: '中文注释/描述'},
{field: 'themeTask', title: '主题任务', hide: true},
{
field: 'dataSource',
title: '数据来源',
width: 160,
templet: data => DICT.getText('data_source', data.dataSource) || data.dataSource
},
{field: 'taskTime', title: '任务时间', width: 160, align: 'center'},
{
fixed: 'right',
title: '操作',
toolbar: `#rowToolBar`,
width: 100,
align: 'center'
}
]],
},
});
// 查看按钮监听
metaListTable.addTableRowEvent('details', function (obj) {
if (obj.resourceType === 'file') {
openMaxLayerWithURL(`${ctx}/sys/file/view?fileId=${obj.id}`)
} else {
openMaxLayerWithURL(`${ctx}/business/metadata/details/${obj.id}`)
}
})
}
// 加载并渲染目录树
let currentNode, currentParentNode;
let treeChildrenUrl = `${ctx}/business/directory/tree?busType=` + bus_type
let treeOps = {
id: 'directoryTree',
url: treeChildrenUrl,
cache: false,
// type: 'all',
initLevel: 1, // 默认展开一级
scroll: '#tree-toobar-div',
width: 'fit-content',
toolbar: true,
toolbarShow: [], //置空默认菜单项
sendSuccess: function (res) {
if (res.flag) {
res.data.forEach(item => {
dirCache.set(item.id, item);
})
setTimeout(() => {
$('.dtree-nav-div.dtree-theme-item').each((index, elem) => {
let data = $(elem).data('basic');
if (data) {
if (typeof data === 'string') {
data = JSON.parse(data);
}
let title = data.metadataComment || data.directoryName || data.fileName + data.fileSuffix;
$(elem).attr('title', title)
}
});
}, 200)
}
},
done: function (nodes, elem) {
// 模拟鼠标点击事件展开第一层目录
elem.find('li:first>div:first>i:first').click();
$('#directoryTree cite span').on('click', function (event) {
event.stopPropagation();
const target = event.target;
const id = $(target).data('id');
const status = $(target).data('status')
if (status == ReviewStatus.FAIL || status == ReviewStatus.REJECTED) {
showLoading()
$.get(`${ctx}/business/review/get/entity?entityId=${id}`, {}, function (res) {
closeLoading()
if (res.flag) {
const reviewData = res.data;
const content = `
<div class="tips-box">
<div style="height: 32px;line-height: 32px;color: #dbdbdb;">审核人${reviewData.reviewUser}</div>
<div style="min-width: 200px;max-width: 500px;min-height: 30px;max-height: 300px; color: gray">原因${reviewData.reviewOpinion}</div>
</div>`;
layer.tips(content, `#${id}`, {
tips: [2],
closeBtn: 1,
shade: 0.3,
shadeClose: true,
time: 60000
});
} else {
showErrorMsg(res.msg);
}
})
}
})
},
onClick: function (node) {
tempNode = node;
currentNode = getCurrentNode();
currentParentNode = getCurrentParentNode();
const {basicData} = node.param;
setLocation(basicData.directoryPath)
loadMetadataList(node.param)
},
toolbarFun: {
// 显示右键菜单之前的回调,用于设置显示哪些菜单
loadToolbarBefore: function (buttons, param, $div) {
const {basicData} = param;
// 根据数据审核状态判断是否显示相关功能按钮
if (basicData && basicData.id !== DIR_ROOT_ID && basicData.id !== DIR_THEME_ROOT_ID) {
switch (basicData.reviewStatus) {
case ReviewStatus.SUBMITTED:
setDisabledButtons([]);
case ReviewStatus.PASS:
setDisabledButtons([]);
break;
case ReviewStatus.UN_SUBMIT:
case ReviewStatus.FAIL:
setDisabledButtons(['toolbar_dir_rejected']);
break
case ReviewStatus.REJECTED:
setDisabledButtons(['toolbar_dir_rejected']);
}
}
/**
* 设置需要禁用的按钮
* @param buttonIds 按钮ID数组
*/
function setDisabledButtons(buttonIds = []) {
for (let btnName of buttonIds) {
let $btn = $(buttons[btnName]);
let $a = $btn.find('a').addClass('layui-disabled');
$btn.html($a[0]);
buttons[btnName] = $btn[0];
}
}
return buttons;
}
},
toolbarExt: [
{
toolbarId: "toolbar_dir_rejected",
icon: "layui-icon layui-icon-release",
title: "驳回", handler: function (node, elem) {
ReviewComponent.renderDirectoryList(true)
ReviewComponent.openReviewLayer(node.id, ReviewStatus.REJECTED, res => {
let temp = Object.assign({}, node)
temp.basicData.reviewStatus = ReviewStatus.REJECTED;
temp.title = temp.context;
temp.title = formatterTitle(temp);
dirTree.partialRefreshEdit(elem, temp)
dirTree.getChild(elem);
loadMetadataList(node)
});
}
},
],
formatter: {
title: function (data) { // 文字过滤,返回null,"",undefined之后,都不会改变原有的内容返回。
return formatterTitle(data);
}
}
}
dirTree = globalTree.init(treeOps);
/**
* 获取当前节点
* @returns {*|jQuery|HTMLElement}
*/
function getCurrentNode() {
return $('li.dtree-nav-item div.dtree-theme-item-this');
}
/**
* 获取当前节点的父级节点
* @returns {*|jQuery}
*/
function getCurrentParentNode() {
return getCurrentNode().parent().parent().prev();
}
function reZhanKai(node) {
let iconNode = node.find('i:first');
if (iconNode.data('spread') === 'open') {
iconNode.click();
iconNode.click();
} else {
iconNode.click();
}
}
})
}

@ -1,5 +1,6 @@
<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!-- 修改:在数据管控系统中目录审核页面改为按目录结构显示 20240412-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
@ -7,45 +8,82 @@
<script th:replace="common/head::static"></script>
<!-- 样式 -->
<link th:href="@{/css/common/contianer.css}" rel="stylesheet" type="text/css"/>
<script th:inline="javascript">
const user_str = sessionStorage.getItem("login_user");
const user = JSON.parse(user_str);
const ReadPermisDirIds = /*[[${readDirIds}]]*/ [];
const WritePermisDirIds = /*[[${writeDirIds}]]*/ [];
// 目录业务类型,0:资源目录;1:基础数据目录
const bus_type = 0;
</script>
</head>
<body>
<body onselectstart="return false">
<div class="layui-row">
<!---->
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">目录审核列表</div>
<div class="layui-col-md3">
<div class="layui-card" style="border-right: 1px solid #ebebeb;">
<div class="layui-card-body">
<!-- 表格主体 -->
<table class="layui-hide" id="reviewTable" lay-filter="reviewTable"></table>
<!-- 模板 -->
<script type="text/html" id="tableToolBar">
<div class="layui-btn-container layui-form" lay-filter="tableToolForm">
<input type="text" id="searchKeyInput" name="searchKeyInput" autocomplete="off"
placeholder="请输入目录名称" class="layui-input layui-btn-sm">
<button class="layui-btn layui-btn-sm" lay-event="query">查询</button>
<div class="layui-inline">
<label class="layui-form-label">审核状态</label>
<div class="layui-input-inline">
<input type="radio" name="reviewStatus" value="SUBMITTED" title="已提交"
lay-filter="statusRadio">
<!--<input type="radio" name="reviewStatus" value="PASS" title="审核通过"
lay-filter="statusRadio">
<input type="radio" name="reviewStatus" value="FAIL" title="审核不通过"
lay-filter="statusRadio">-->
<input type="radio" name="reviewStatus" value="REJECTED" title="已驳回"
lay-filter="statusRadio">
<div class="layui-tab layui-tab-brief" id="directoryTreeBody" lay-filter="directoryTreeBody">
<ul class="layui-tab-title">
<li class="layui-this metadata-table">资源目录</li>
</ul>
<div class="layui-tab-content">
<div class="layui-form" lay-filter="directoryFilterForm">
<div class="layui-form-item" style="margin-bottom: 0">
<div class="layui-inline" style="width: 100%">
<div class="layui-input-inline" style="width: 100%">
<input type="text" class="layui-input layui-icon-search" placeholder="请输入关键词检索"
style="padding-right: 40px;" id="directoryTreeSearchBox">
<i class="layui-icon layui-icon-search"
style="font-size: 24px;position: absolute;top: 7px;right: 10px;color: #b5b5b5;"></i>
</div>
</div>
</div>
</div>
<div class="layui-tab-item layui-show" style="overflow: auto; padding: 10px 0"
id="tree-toobar-div">
<ul id="directoryTree" class="dtree" data-id="ROOT" data-value="ROOT"
style="min-width: 100%"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-body right-card">
<div class="layui-tab layui-tab-brief" id="metadataListCardBody" lay-filter="metadataListCardBody">
<ul class="layui-tab-title">
<li class="layui-this metadata-table">资源列表</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="current-position">当前位置:<label id="currentPosition"></label></div>
<table class="layui-hide" id="dirMetadataTable" lay-filter="dirMetadataTable"></table>
<script type="text/html" id="tableToolBar">
<div class="layui-btn-container">
<div class="layui-layout-left" style="top:10px; left: 20px">
<input type="text" id="searchKeyInput" name="searchKeyInput"
autocomplete="off"
placeholder="请输入关键字查询" class="layui-input layui-btn-sm">
<button class="layui-btn layui-btn-sm" lay-event="query">查询</button>
</div>
<div class="layui-layout-right" style="padding-right: 20px; top:10px">
</div>
</div>
</script>
<script type="text/html" id="rowToolBar">
<div class="layui-btn-container">
<a class="layui-btn layui-btn-xs " lay-event="details">查看</a>
</div>
</script>
</div>
</div>
</script>
<script type="text/html" id="rowToolBar">
{{#
let disable = d.reviewStatus == 'SUBMITTED';
}}
<a class="layui-btn layui-btn-xs " lay-event="details">查看</a>
<a class="layui-btn layui-btn-xs {{disable ? '' : 'layui-disabled'}}"
lay-event="{{disable ? 'review' : ''}}">驳回</a>
</script>
</div>
</div>
</div>
</div>
@ -54,11 +92,37 @@
<!-- js -->
<script th:replace="common/head::static-foot"></script>
<script th:src="@{/js/business/directory/dirCommon.js}"></script>
<script th:src="@{/js/business/directory/member.js}"></script>
<script th:src="@{/js/review/review.js}"></script>
<script>
layui.use(['ReviewComponent'], function () {
window.ReviewComponent = layui.ReviewComponent;
ReviewComponent.renderDirectoryList();
});
<script th:src="@{/js/directory/reviewDirectory.js}"></script>
<script type="text/javascript">
const toggleRightCard = (showType, callback) => {
if (showType === 'metadata') {
$('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
$("#metadataCardBody").removeClass('layui-hide').addClass('layui-show');
} else if (showType === 'directory') {
$('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
$("#metadataListCardBody").removeClass('layui-hide').addClass('layui-show');
} else if (showType === 'file') {
$('div.layui-card-body.right-card div.layui-tab.layui-tab-brief').addClass('layui-hide');
$("#fileCardBody").removeClass('layui-hide').addClass('layui-show');
}
callback && callback();
}
let imageWidth;
let imageHeight;
const sizeInit = () => {
$(".layui-card-body").height(window.innerHeight - 20);
$("#tree-toobar-div").height($(".layui-card-body").height() - 40 - 25 - 45);
$('#fileCardBody').height(window.innerHeight - 40 - 20);
$('#fileViewer .file-viewer').height(window.innerHeight - 40 - 20 - 80);
imageWidth = $('.layui-col-md9:first').innerWidth() - 54;
imageHeight = $('#file-viewer-image').innerHeight();
}
window.onresize = sizeInit;
sizeInit();
</script>
</html>
</html>