新增:综合浏览查询结果列表表头改为根据配置动态加载

master
guoxin 1 year ago
parent b8850f414a
commit 78991bc6a9
  1. 156
      shandan-browser/src/main/resources/static/js/browser.js
  2. 10
      shandan-browser/src/main/resources/view/browser.html

@ -15,6 +15,7 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
laydate = layui.laydate, laydate = layui.laydate,
globalTree = layui.globalTree, globalTree = layui.globalTree,
DataLabel = layui.datalabel; DataLabel = layui.datalabel;
const tHeadSetLayer = new THeadSetLayer(layui);
let metaListTable, dirFileTable, tagSelector, tags = [], conditions = []; let metaListTable, dirFileTable, tagSelector, tags = [], conditions = [];
const unchecked_tags = new Set(); const unchecked_tags = new Set();
@ -126,6 +127,7 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
* 加载数据资源列表 * 加载数据资源列表
*/ */
function initMetadataTable(id) { function initMetadataTable(id) {
const theadConfig = THeadSetLayer.filterConfigData(resourceTableId);
metaListTable = listPage.init({ metaListTable = listPage.init({
table: { table: {
id: 'dirMetadataTable', id: 'dirMetadataTable',
@ -137,27 +139,12 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
autoSort: false, autoSort: false,
defaultToolbar: [ defaultToolbar: [
{title: '导出', layEvent: 'export', icon: 'layui-icon-export'}, {title: '导出', layEvent: 'export', icon: 'layui-icon-export'},
{title: '列表配置', layEvent: 'theadSet', icon: 'layui-icon-cols'} {title: '列表配置', layEvent: 'theadSet1', icon: 'layui-icon-cols'}
], ],
request: {pageName: 'page', limitName: 'size'}, request: {pageName: 'page', limitName: 'size'},
limit: 30, limit: 30,
cols: [[ minWidth: 80,
{field: 'id', title: 'ID', hide: true}, cols: THeadSetLayer.convertColumns(theadConfig, 'dirMetadataTable'),
{field: 'resourceName', title: '数据名称', width: 300, sort: true},
{field: 'resourceComment', title: '中文注释/描述', sort: true},
{field: 'directoryPath', title: '资源路径', sort: true},
{field: 'themeTask', title: '主题任务', hide: true, sort: true},
{
field: 'dataSource',
title: '数据来源',
width: 160,
templet: (data) => DICT.getText("data_source", data.dataSource) || data.dataSource || '',
sort: true
},
{field: 'taskTime', title: '任务时间', width: 180, align: 'center', sort: true},
{field: 'modifyTime', title: '注册时间', width: 160, align: 'center', hide: true},
{fixed: 'right', title: '操作', toolbar: '#rowToolBar', width: 100, align: 'center'}
]],
done: function (res, _table) { done: function (res, _table) {
initConditionBlock(); initConditionBlock();
if (_table.where) { if (_table.where) {
@ -218,10 +205,11 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
} }
}) })
new THeadSetLayer(layui, metaListTable, [...sourceTableConfigMap.values()]); metaListTable.addTableRowEvent('theadSet1', () => tHeadSetLayer.show(resourceTableId))
} }
function initFileSearchTable(id) { function initFileSearchTable(id) {
const theadConfig = THeadSetLayer.filterConfigData(fileTableId)
dirFileTable = listPage.init({ dirFileTable = listPage.init({
table: { table: {
id: 'dirFileTable', id: 'dirFileTable',
@ -232,45 +220,13 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
height: 'full-110', height: 'full-110',
request: {pageName: 'page', limitName: 'size'}, request: {pageName: 'page', limitName: 'size'},
defaultToolbar: [ defaultToolbar: [
{title: '列表配置', layEvent: 'theadSet', icon: 'layui-icon-cols'} {title: '列表配置', layEvent: 'theadSet2', icon: 'layui-icon-cols'}
], ],
autoSort: false, autoSort: false,
limit: 30, limit: 30,
method: 'get', method: 'get',
cols: [[ minWidth: 80,
{field: 'id', title: 'ID', hide: true}, cols: THeadSetLayer.convertColumns(theadConfig, 'dirFileTable')
{field: 'fileName', title: '文件名称', minWidth: 300, fixed: 'left'},
{
field: 'source',
title: '文件来源',
minWidth: 160,
sort: true,
templet: data => DICT.getText('data_source', data.source) || data.source || ''
},
{field: 'taskCode', title: '任务代号', sort: true, minWidth: 160},
{
field: 'taskNature',
title: '任务性质',
minWidth: 160,
sort: true,
templet: data => DICT.getText('task_nature', data.taskNature) || data.taskNature || ''
},
{field: 'troopCode', title: '部队代号', sort: true, minWidth: 160},
{field: 'missileNumber', title: '导弹编号', sort: true, minWidth: 160},
{field: 'equipmentModel', title: '装备型号', sort: true, minWidth: 160},
{
field: 'targetNumber',
title: '目标/靶标类型',
minWidth: 160,
sort: true,
templet: data => DICT.getText('target_type', data.targetNumber) || data.targetNumber || ''
},
{field: 'entryStaff', title: '录入人员', sort: true, minWidth: 160},
{field: 'inputDate', title: '收文时间', sort: true, width: 160, align: 'center'},
{field: 'remark', title: '文件描述', width: 300},
{field: 'text', title: '文件内容', width: 300},
{fixed: 'right', title: '操作', toolbar: '#fileRowToolBar', width: 100, align: 'center'}
]],
}, },
}); });
@ -290,7 +246,7 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
openMaxLayerWithURL(`${ctx}/sys/file/view?fileId=${obj.id}`) openMaxLayerWithURL(`${ctx}/sys/file/view?fileId=${obj.id}`)
}) })
new THeadSetLayer(layui, dirFileTable, [...fileTableConfigMap.values()]); dirFileTable.addTableRowEvent('theadSet2', () => tHeadSetLayer.show(fileTableId))
} }
/** /**
@ -520,18 +476,15 @@ layui.use(['layer', 'listPage', 'globalTree', 'gtable', 'form', 'element', 'drop
* 表格表头配置组件 * 表格表头配置组件
*/ */
class THeadSetLayer { class THeadSetLayer {
constructor(lay, pageTable, configData) { constructor(lay) {
this.id = 'theadConfig';
this.layer = lay.layer; this.layer = lay.layer;
this.form = lay.form; this.form = lay.form;
this.gtable = lay.gtable; this.gtable = lay.gtable;
this.pageTable = pageTable;
this.id = pageTable.table.id + 'Set';
this.configData = configData;
this.pageTable.addTableRowEvent('theadSet', () => this.show())
} }
show() { show(tableId) {
const {layer, pageTable, id} = this; const {layer, id} = this;
layer.open({ layer.open({
id: id + 'Layer', id: id + 'Layer',
title: '数据列表配置', title: '数据列表配置',
@ -543,26 +496,27 @@ class THeadSetLayer {
content: `<table id="${id}" lay-filter="${id}"></table>`, content: `<table id="${id}" lay-filter="${id}"></table>`,
btn: ['保存', '取消'], btn: ['保存', '取消'],
success: () => { success: () => {
this._renderInnerTable(); this._renderInnerTable(tableId);
}, },
yes: (layerIndex) => { yes: (layerIndex) => {
this._saveTheadSet().then(() => { this._saveTheadSet().then(() => {
pageTable.reloadTable(); window.location.reload();
layer.close(layerIndex); layer.close(layerIndex);
}) })
} }
}); });
} }
_renderInnerTable() { _renderInnerTable(tableId) {
const {gtable, form, id} = this; const {gtable, form, id} = this;
gtable.init({ gtable.init({
id, id,
data: this.configData, data: this.filterConfigData(tableId),
method: 'get', method: 'get',
toolbar: false, toolbar: false,
height: 'full-310', height: 'full',
page: false, page: false,
limit: 1000,
cols: [[ cols: [[
{field: 'id', hide: true}, {field: 'id', hide: true},
{field: 'colName', title: '列名'}, {field: 'colName', title: '列名'},
@ -582,23 +536,13 @@ class THeadSetLayer {
]], ]],
}); });
gtable.on(`edit(${id})`, ({field, value, data}) => { gtable.on(`edit(${id})`, ({field, value, data}) => {
this._setData(data.id, field, value); theadConfigMap.get(data.id)[field] = value;
if (this.id.startsWith('dirMetadataTable')) {
sourceTableConfigMap.get(data.id)[field] = value;
} else if (this.id.startsWith('dirFileTable')) {
fileTableConfigMap.get(data.id)[field] = value;
}
}) })
// 监听switch按钮 // 监听switch按钮
form.on(`switch(${id}-switch)`, ({elem}) => { form.on(`switch(${id}-switch)`, ({elem}) => {
const id = $(elem).attr('id'), name = $(elem).attr('name'); const id = $(elem).attr('id'), name = $(elem).attr('name');
if (this.id.startsWith('dirMetadataTable')) { const value = theadConfigMap.get(id)[name];
const value = sourceTableConfigMap.get(id)[name]; theadConfigMap.get(id)[name] = !value;
sourceTableConfigMap.get(id)[name] = !value;
} else if (this.id.startsWith('dirFileTable')) {
const value = fileTableConfigMap.get(id)[name];
fileTableConfigMap.get(id)[name] = !value;
}
}); });
function renderSwitch(colName, data) { function renderSwitch(colName, data) {
@ -607,17 +551,10 @@ class THeadSetLayer {
} }
} }
_setData(id, name, value) {
if (this.id.startsWith('dirMetadataTable')) {
sourceTableConfigMap.get(id)[name] = value;
} else if (this.id.startsWith('dirFileTable')) {
fileTableConfigMap.get(id)[name] = value;
}
}
_saveTheadSet() { _saveTheadSet() {
return new Promise(resolve => { return new Promise(resolve => {
Util.post(`/sys/thead/config/api/save`, {params: JSON.stringify([...sourceTableConfigMap.values(), ...fileTableConfigMap.values()])}).then(res => { Util.post(`/sys/thead/config/api/save`, {params: JSON.stringify([...theadConfigMap.values()])}).then(res => {
if (res.flag) { if (res.flag) {
showOkMsg('保存成功') showOkMsg('保存成功')
} else { } else {
@ -627,4 +564,47 @@ class THeadSetLayer {
resolve(); resolve();
}) })
} }
static filterConfigData(tableId){
return theadConfig.filter(item => item.tableId === tableId);
}
static convertColumns(tHeadConfig = [], tableId) {
// 提前定义好需要使用templet属性的字段
const templets = {
source: data => DICT.getText('data_source', data.source) || data.source || '',
dataSource: data => DICT.getText('data_source', data.source) || data.source || '',
dataType: data => DICT.getText('data_type', data.dataType) || data.dataType || '',
taskCode: data => DICT.getText('task_code', data.taskCode) || data.taskCode || '',
taskNature: data => DICT.getText('task_nature', data.taskNature) || data.taskNature || '',
troopCode: data => DICT.getText('troop_code', data.troopCode) || data.troopCode || '',
missileNumber: data => DICT.getText('missile_number', data.missileNumber) || data.missileNumber || '',
equipmentModel: data => DICT.getText('equipment_model', data.equipmentModel) || data.equipmentModel || '',
targetNumber: data => DICT.getText('target_type', data.targetNumber) || data.targetNumber || '',
secretLevel: data => DICT.getText('secret_level', data.secretLevel) || data.secretLevel || '',
exerciseData: data => data.exerciseData ? '是' : '否',
resourceType: data => data.resourceType === 'file' ? '文件' : '数据库表'
}
// 遍历配置项转换为列
const cols = tHeadConfig.map(conf => {
const {colName, colTitle, colWidth, isShow, isSort} = conf;
const width = !colWidth ? undefined : (Number.isInteger(colWidth) ? parseInt(colWidth) : colWidth);
let col = {field: colName, title: colTitle, width, sort: isSort, hide: !isShow}
if(templets[colName]){
col['templet'] = templets[colName];
}
return col;
});
// 设置操作列
let operateCol = {fixed: 'right', title: '操作', toolbar: '', width: 100, align: 'center'};
if(tableId === 'dirMetadataTable'){
operateCol.toolbar = '#rowToolBar'
}else if(tableId === 'dirFileTable'){
operateCol.toolbar = '#fileRowToolBar'
}
cols.push(operateCol);
return [cols];
}
} }

@ -14,14 +14,8 @@
const resourceTableId = 'browser_resource_table', const resourceTableId = 'browser_resource_table',
fileTableId = 'browser_file_table', fileTableId = 'browser_file_table',
theadConfig = /*[[${theadConfig}]]*/ []; theadConfig = /*[[${theadConfig}]]*/ [];
const sourceTableConfigMap = new Map(), fileTableConfigMap = new Map(); const theadConfigMap = new Map();
theadConfig.forEach(item => { theadConfig.forEach(item => theadConfigMap.set(item.id, item));
if (item.tableId === resourceTableId) {
sourceTableConfigMap.set(item.id, item);
} else if (item.tableId === fileTableId) {
fileTableConfigMap.set(item.id, item);
}
});
</script> </script>
</head> </head>