表格类型需求变动完善

This commit is contained in:
mrs_12345@163.com 2022-06-28 20:00:29 +08:00
parent dae3b29c4e
commit d23715be50
7 changed files with 176 additions and 112 deletions

View File

@ -2665,9 +2665,9 @@ public class CoeProcessLevelWeb extends ActionWeb {
String tableInput = subTableSize > 1 ? "请查看" : "请输入";
String attrRef = attributeModel.getRef();
JSONObject refValue = JSON.parseObject(attrRef);
String tableTitle = attributeModel.getTitle();
input = "<span class=\"awsui-input-wrapper\" onclick=\"showTableDialog($(this),"+ ( StringUtils.isEmpty(jsonValue) ? new JSONObject() : jsonValue.replace("\"","'") )+",'" + id + "')\">"
input = "<span class=\"awsui-input-wrapper\" tableTitle="+ tableTitle +" ref="+ refValue +" onclick=\"showTableDialog($(this),"+ ( StringUtils.isEmpty(jsonValue) ? new JSONObject() : jsonValue.replace("\"","'") )+",'" + id + "')\">"
+ "<input type='text' id='" + id + "' value='" + tableInput + "' class=\"awsui-textbox\" />"
+ "<span class=\"awsui-input-suffix\" sid='" + sid + "' uuid='" + uuid + "' >"
+ " <i class=\"awsui-iconfont\" >&#xe7ff;</i>"

View File

@ -2758,7 +2758,6 @@
<!-- 数据属性弹框表格 -->
<div id="attribute-table-window" style="width:500px;height:325px;display:none;">
<div style='margin:0px;height:235px;width:500px;'>
<input id='attribute-title-content' class="attribute_input_css" style="font-size:20px;margin-bottom: 10px" value=""/>
<div style="height: 225px;width: 493px;overflow:auto;">
<table style="width: 100%;border-collapse:collapse;">
<tbody class="dialogTableTbody" id='attribute-table-content'>
@ -2773,7 +2772,6 @@
<!-- 文件属性弹框表格 -->
<div id="attribute-table-window1" style="width:500px;height:325px;display:none;">
<div style='margin:0px;height:235px;width:500px;'>
<input id='attribute-title-content1' class="attribute_input_css" style="font-size:20px;margin-bottom: 10px" value=""/>
<div style="height: 225px;width: 493px;overflow:auto;">
<table style="width: 100%;border-collapse:collapse;">
<tbody class="dialogTableTbody" id='attribute-table-content1'>

View File

@ -282,6 +282,14 @@
.tableContent{
padding-left : 20px;
}
.dialogTableTbody tr td{
height: 22px;
color: #666666;
border:1px solid #ccc;
padding:0 5px;
white-space: normal;
cursor: pointer;
}
#canvas_container{
padding:0px;
}
@ -528,6 +536,20 @@
</div>
</div>
</div>
<!-- 弹框表格 -->
<div id="attribute-table-window2" style="width:500px;height:325px;display:none;">
<div style='margin:0px;height:235px;width:500px;'>
<div style="height: 225px;width: 493px;overflow:auto;">
<table style="width: 100%;border-collapse:collapse;">
<tbody class="dialogTableTbody" id='attribute-table-content2'>
</tbody>
</table>
<div style="margin-top: 5px" id="attribute-add-content2"></div>
</div>
</div>
</div>
<div id="designer">
<div id="designer_viewport" class="readonly">

View File

@ -588,6 +588,11 @@ function saveDialogTableValue(tableValue,id,dom) {
if(awsui.decode(msg).result == "ok") {
let tableEvent = "showTableDialog($(this)," + JSON.stringify(tableValue).replace(/\"/g,"'") +", '"+id+"')"
dom.attr('onclick',tableEvent)
if (tableValue.table.length > 1) {
$("#" + id).val('请查看')
} else {
$("#" + id).val('请输入')
}
}
if (msg == "true") {
// 发送"修改属性"监听事件
@ -866,30 +871,31 @@ function openTextareaDialog(obj, title,id) {
// 打开文件属性表格弹框
function showTableDialog(obj,value,id) {
let tableRef = JSON.parse($(obj).attr('ref'))
let tableName = $(obj).attr('tableTitle')
let tableList = []
if (JSON.stringify(value) == '{}') {
tableList = [
{ id: 'table_head' ,name: '命名', desc: '描述'}
{ id: 'table_head' ,name: tableRef.firstColumn, desc: tableRef.secondColumn}
]
} else {
tableList = value.table
tableList[0] = { id: 'table_head' ,name: tableRef.firstColumn, desc: tableRef.secondColumn}
}
parent.operateList = tableList
let defaultTitle = $("#" + id).val() || '未命名表单'
var thead =
'<tr id="' + tableList[0].id + '">'
+ '<td style="width: 100px;" class="dialogTableHead">'
+ '<input style="" class="dialog_table_input_css" value="' + tableList[0].name + '"/>'
+ tableList[0].name
+ '</td>'
+ '<td style="width: 235px;" class="dialogTableHead">'
+ '<input class="dialog_table_input_css" value="' + tableList[0].desc + '"/>'
+ '<td style="width: 270px;" class="dialogTableHead">'
+ tableList[0].desc
+ '</td>'
+ '<td style="width: 100px;" class="dialogTableHead">操作</td>'
+ '<td style="width: 80px;" class="dialogTableHead">操作</td>'
+ '</tr>'
if (parent.isParentShow) {
parent.$('#attribute-table-content1').empty()
parent.$('#attribute-add-content1').empty()
parent.$("#attribute-title-content1").val(defaultTitle)
parent.$('#attribute-table-content1').append(thead)
for ( let i = 1; i < tableList.length; i++) {
let str =
@ -897,29 +903,30 @@ function showTableDialog(obj,value,id) {
+ '<td style="width: 100px;">'
+ '<input class="dialog_table_input_css" value="' + tableList[i].name + '"/>'
+ '</td>'
+ '<td style="width: 235px;">'
+ '<td style="width: 270px;">'
+ '<input class="dialog_table_input_css" value="' + tableList[i].desc + '"/>'
+ '</td>'
+ '<td style="width: 100px;" class="dialogTableDelete" onclick="removeTr(this)">删除</td>'
+ '<td style="width: 80px;text-align: center;" class="dialogTableDelete" onclick="removeTr(this)">删除</td>'
+'</tr>'
parent.$('#attribute-table-content1').append(str)
}
parent.$('#attribute-add-content1').append('<button onclick="addTr()">新增</button>')
parent.$("#attribute-table-window1").dialog({
draggable: true,
title: tableName,
buttons : [{
text : '确定',
cls : "blue",
handler : function() {
let name = parent.$("#attribute-title-content1").val()
$("#" + id).val(name)
// let name = parent.$("#attribute-title-content1").val()
// $("#" + id).val(name)
let inputs = parent.$('#attribute-table-content1').find('input')
parent.operateList.forEach((item,index) => {
item.name = inputs[2*index].value
item.desc = inputs[2*index+1].value
})
for (let i = 1; i < parent.operateList.length; i++) {
parent.operateList[i].name = inputs[2*(i-1)].value
parent.operateList[i].desc = inputs[2*(i-1) + 1].value
}
let value = {
name: name,
name: tableName,
table: parent.operateList
}
saveDialogTableValue(value,id,obj)
@ -942,11 +949,11 @@ function addTr() {
let newTrId = Date.now().toString(36)
let defaultStr =
' <tr id="'+ newTrId + '">'
+ '<td style="width: 100px;"><input class="dialog_table_input_css" value="命名"/></td>'
+ '<td style="width: 235px;"><input class="dialog_table_input_css" value="描述"/></td>'
+ '<td style="width: 100px;" class="dialogTableDelete" onclick="removeTr(this)">删除</td>'
+ '<td style="width: 100px;"><input class="dialog_table_input_css" value=""/></td>'
+ '<td style="width: 270px;"><input class="dialog_table_input_css" value=""/></td>'
+ '<td style="width: 80px;text-align: center" class="dialogTableDelete" onclick="removeTr(this)">删除</td>'
+ '</tr>'
operateList.push({ id: newTrId ,name: '命名',desc: '描述'})
operateList.push({ id: newTrId ,name: '',desc: ''})
$('#attribute-table-content1').append(defaultStr)
}

View File

@ -373,6 +373,7 @@ height: 25px;
.dialogTableHead {
font-size: 15px;
font-weight: bold;
text-align: center
}
.dialogTableTbody .dialogTableDelete {
color: red;
@ -404,16 +405,17 @@ background-color: rgb(255, 255, 255);
color: red;
}
.dialog_table_input_css {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
height: 22px;
border: none;
min-height: 22px;
width: 100%;
padding-left:0;
padding:0;
margin: 0;
float: left;
background-color: rgb(255, 255, 255);
text-overflow: ellipsis;
word-wrap:break-word;
word-break:break-all;
white-space: normal;
overflow-wrap: break-word;
cursor: pointer;
}

View File

@ -1432,7 +1432,7 @@ function getPrivateAttributeHtml(attributesJsonArray, tbodyId, shape) {
}
var requiredSpan = ''
if(obj.isRequired !== null && obj.isRequired) {
requiredSpan = '<span style="color: #f04134;float:right">*</span>'
requiredSpan = '<span style="color: #f04134;float:right">*</span>'
}
var constr = '<tr ' + mouseout + mouseover + ' objid="' + obj.id + '" class="tagContentTableTr">'
@ -1525,25 +1525,27 @@ function getPrivateAttributeHtml(attributesJsonArray, tbodyId, shape) {
//+ '<div objid="' + obj.id + '" onclick="removeTrAttribute(this)" id= "ico_attribute_delete_"' + obj.id + ' class="ico_attribute_delete"></div>'
+ '</td></tr>';
} else if (!objReadonly && objType == "DateTimePicker") {
constr = '<tr ' + mouseout + mouseover + ' objid="' + obj.id + '" class="tagContentTableTr">'
+ ' <td>' + objName + requiredSpan + '</td>'
+ ' <td class="tagContentTableTrTd">'
+ ' <input type="text" id="dateTimePicker_' + obj.id + '" objid="' + obj.id + '" placeholder="请选择日期" onblur="saveInputContent(this);" value="' + obj.value + '" class="attribute_input_css" data-shapeId="' + shape.id + '"/>'
+ ' </td></tr>';
} else if (!objReadonly && objType == "table") {
let objTableName = obj.value.name == undefined ? '未命名表单' : obj.value.name;
dialogTableList = obj.value.table == undefined ? [ { id: Utils.newId() ,name: '命名', desc: '描述'} ] : obj.value.table;
constr = '<tr ' + mouseout + mouseover + ' class="tagContentTableTr">'
+ ' <td>' + objName + requiredSpan + '</td>'
+ ' <td class="tagContentTableTrTd">'
+ '<span class="awsui-input-wrapper">'
+ ' <input type="text" placeholder="请输入表单名" id="' + obj.id + '" value="' + objTableName + '" class="attribute_input_css" data-shapeId="' + shape.id + '"/>'
+ ' <span class="awsui-input-suffix" objid="' + obj.id + '" onclick="openTableDialog(this)">'
+ ' <i class="awsui-iconfont" >&#xe7ff;</i>'
+ ' </span>'
+ '</span>'
+ ' </td></tr>';
}
constr = '<tr ' + mouseout + mouseover + ' objid="' + obj.id + '" class="tagContentTableTr">'
+ ' <td>' + objName + requiredSpan + '</td>'
+ ' <td class="tagContentTableTrTd">'
+ ' <input type="text" id="dateTimePicker_' + obj.id + '" objid="' + obj.id + '" placeholder="请选择日期" onblur="saveInputContent(this);" value="' + obj.value + '" class="attribute_input_css" data-shapeId="' + shape.id + '"/>'
+ ' </td></tr>';
} else if (!objReadonly && objType == "table") {
let objRef = JSON.parse(obj.ref)
console.log('ref',objRef)
let objTableInput = obj.value.table !== undefined && obj.value.table.length > 1 ? '请查看' : '请输入'
dialogTableList = obj.value.table == undefined ? [ { id: Utils.newId() ,name: objRef.firstColumn, desc: objRef.secondColumn} ] : obj.value.table;
constr = '<tr ' + mouseout + mouseover + ' class="tagContentTableTr">'
+ ' <td>' + objName + requiredSpan + '</td>'
+ ' <td class="tagContentTableTrTd">'
+ '<span class="awsui-input-wrapper" objid="' + obj.id + '" onclick="openTableDialog(this,' + JSON.stringify(obj.value).replace(/\"/g,"'") +')">'
+ ' <input type="text" id="' + obj.id + '" value="' + objTableInput + '" class="attribute_input_css" data-shapeId="' + shape.id + '"/>'
+ ' <span class="awsui-input-suffix" >'
+ ' <i class="awsui-iconfont" >&#xe7ff;</i>'
+ ' </span>'
+ '</span>'
+ ' </td></tr>';
}
$("#" + tbodyId).append(constr);
$("#dateTimePicker_" + obj.id).datepicker({dateFmt:"yyyy-MM-dd HH:mm:ss"});
}
@ -1946,9 +1948,9 @@ function saveInputContent(obj,value) {
return;
}
if(value !== undefined && value.isRequired && objValue == '') {
$(obj).attr('placeholder',value.name + '不能为空')
$(obj).addClass("required_input_css");
return;
$(obj).attr('placeholder',value.name + '不能为空')
$(obj).addClass("required_input_css");
return;
}
if ($(obj).attr("inputType") == "number") {
var val = $(obj).val();
@ -2001,7 +2003,7 @@ function showAttributedEditWindow(obj) {
for (var index = 0; index < attributesJsonArray.length; index++) {
var tempObj = attributesJsonArray[index];
if (tempObj.id == objId) {
objValue = tempObj
objValue = tempObj
windowTitle = tempObj.name;
// $("#attribute-edit-title").text(tempObj.name);
$("#attribute-edit-content").val(tempObj.value);
@ -2023,10 +2025,10 @@ function showAttributedEditWindow(obj) {
return;
}
if(objValue.isRequired && str == '') {
$("#attribute-edit-content").attr('placeholder',objValue.name + '不能为空')
$("#attribute-edit-content").addClass("required_input_css");
return
}
$("#attribute-edit-content").attr('placeholder',objValue.name + '不能为空')
$("#attribute-edit-content").addClass("required_input_css");
return
}
updateAttributeById($(obj).attr("objid"), str);
$(obj).val(str);
$("#attribute-edit-window").dialog('close');
@ -2042,22 +2044,39 @@ function showAttributedEditWindow(obj) {
}
// table表格
function openTableDialog(obj) {
let inputId = $(obj).attr('objid')
let tableName = $("#"+ inputId).val() || '未命名表单'
$("#attribute-title-content").val(tableName)
function openTableDialog(obj,value) {
let tableName = '提示'
let objId = $(obj).attr("objid");
let shape = Utils.getSelected()[0];
if (shape) {
let attributesJsonArray = [];
for (let i = 0; i < shape.dataAttributes.length; i++) {
var attr = shape.dataAttributes[i];
if (attr.attributesJsonArray) {
attributesJsonArray = attr.attributesJsonArray;
break;
}
}
for (let index = 0; index < attributesJsonArray.length; index++) {
var tempObj = attributesJsonArray[index];
if (tempObj.id == objId) {
tableName = tempObj.name;
break;
}
}
}
$('#attribute-table-content').empty()
$('#attribute-add-content').empty()
var thead =
'<tr id="' + dialogTableList[0].id + '">'
+ '<td style="width: 100px;" class="dialogTableHead">'
+ '<input style="" class="dialog_table_input_css" value="' + dialogTableList[0].name + '"/>'
+ '</td>'
+ '<td style="width: 235px;" class="dialogTableHead">'
+ '<input class="dialog_table_input_css" value="' + dialogTableList[0].desc + '"/>'
+ '</td>'
+ '<td style="width: 100px;" class="dialogTableHead">操作</td>'
+ '</tr>'
var thead =
'<tr id="' + dialogTableList[0].id + '">'
+ '<td style="width: 100px;" class="dialogTableHead">'
+ dialogTableList[0].name
+ '</td>'
+ '<td style="width: 270px;" class="dialogTableHead">'
+ dialogTableList[0].desc
+ '</td>'
+ '<td style="width: 60px;" class="dialogTableHead">操作</td>'
+ '</tr>'
$('#attribute-table-content').append(thead)
for ( let i = 1; i < dialogTableList.length; i++) {
let str =
@ -2065,53 +2084,52 @@ function openTableDialog(obj) {
+ '<td style="width: 100px;">'
+ '<input class="dialog_table_input_css" value="' + dialogTableList[i].name + '"/>'
+ '</td>'
+ '<td style="width: 235px;">'
+ '<td style="width: 270px;">'
+ '<input class="dialog_table_input_css" value="' + dialogTableList[i].desc + '"/>'
+ '</td>'
+ '<td style="width: 100px;" class="dialogTableDelete" onclick="removeTableTr(this)">删除</td>'
+ '<td style="width: 60px;text-align: center" class="dialogTableDelete" onclick="removeTableTr(this)">删除</td>'
+'</tr>'
$('#attribute-table-content').append(str)
}
$('#attribute-add-content').append('<button onclick="addTableTr(this)">新增</button>')
$("#attribute-table-window").dialog({
draggable: true,
buttons : [{
text : '确定',
cls : "blue",
handler : function() {
var title = $("#attribute-title-content").val()
$("#" + inputId).val(title)
$("#attribute-table-window").dialog({
draggable: true,
title: tableName,
buttons : [{
text : '确定',
cls : "blue",
handler : function() {
let inputs = $('#attribute-table-content').find('input')
dialogTableList.forEach((item,index) => {
item.name = inputs[2*index].value
item.desc = inputs[2*index+1].value
})
for (let i = 1; i < dialogTableList.length; i++) {
dialogTableList[i].name = inputs[2*(i-1)].value
dialogTableList[i].desc = inputs[2*(i-1) +1].value
}
let tableObj = {
name: title,
name: tableName,
table: dialogTableList
}
updateAttributeById($(obj).attr("objid"), tableObj);
$("#attribute-table-window").dialog('close');
}
}, {
text : '取消',
handler : function() {
$("#attribute-table-window").dialog('close');
}
}]
})
}
}, {
text : '取消',
handler : function() {
$("#attribute-table-window").dialog('close');
}
}]
})
}
function addTableTr(obj) {
let newTrId = Utils.newId()
let defaultStr =
' <tr id="'+ newTrId + '">'
+ '<td style="width: 100px;"><input class="dialog_table_input_css" value="命名"/></td>'
+ '<td style="width: 235px;"><input class="dialog_table_input_css" value="描述"/></td>'
+ '<td style="width: 100px;" class="dialogTableDelete" onclick="removeTableTr(this)">删除</td>'
+ '<td style="width: 100px;"><input class="dialog_table_input_css" value=""/></td>'
+ '<td style="width: 270px;"><input class="dialog_table_input_css" value=""/></td>'
+ '<td style="width: 60px;text-align: center" class="dialogTableDelete" onclick="removeTableTr(this)">删除</td>'
+ '</tr>'
dialogTableList.push({ id: newTrId ,name: '命名',desc: '描述'})
dialogTableList.push({ id: newTrId ,name: '',desc: ''})
$('#attribute-table-content').append(defaultStr)
}

View File

@ -388,9 +388,13 @@ function getPrivateAttributeHtml(attributesJsonArray, tbodyId, shape) {
//+ '<div objid="' + obj.id + '" onclick="removeTrAttribute(this)" id= "ico_attribute_delete_"' + obj.id + ' class="ico_attribute_delete"></div>'
+ '</td></tr>';
} else if (obj.type == "table") {
let tableInput = '请输入'
if(obj.value.table.length > 1) {
tableInput = '请查看'
}
constr = '<tr>';
constr += '<td style="padding-left:20px;" class="tableContent">' + obj.name + '</td>';
constr += '<td id="' + shape.id + obj.id + '" colspan="2" class="tableContent">' + '<span id="'+ obj.id +' " onclick="openTableDialog(' + JSON.stringify(obj.value).replace(/\"/g,"'") +')"> ' + obj.value.name + '</span>' + '</td>';
constr += '<td id="' + shape.id + obj.id + '" colspan="2" class="tableContent">' + '<span id="'+ obj.id +' " onclick="openDialog(' + JSON.stringify(obj.value).replace(/\"/g,"'") +')"> ' + tableInput + '</span>' + '</td>';
constr += '</tr>';
}
$('#' + tbodyId + ' table[name=' + shape.id + ']').append(constr);
@ -402,38 +406,38 @@ function getPrivateAttributeHtml(attributesJsonArray, tbodyId, shape) {
}
// table表格
function openTableDialog(obj) {
function openDialog(obj) {
let tableName = obj.name
let dialogTable = obj.table
$("#attribute-table-content").empty()
$("#attribute-table-content2").empty()
let thead =
'<tr id="' + dialogTable[0].id + '" >'
+ '<td style="width: 30%;" class="dialogTableHead">' + dialogTable[0].name + '</td>'
+ '<td style="width: 70%;" class="dialogTableHead">' + dialogTable[0].desc + '</td>'
+'</tr>'
$('#attribute-table-content').append(thead)
$('#attribute-table-content2').append(thead)
for ( let i = 1; i < dialogTable.length; i++) {
let str =
'<tr id="' + dialogTable[i].id + '">'
+ '<td style="width: 30%;">' + dialogTable[i].name + '</td>'
+ '<td style="width: 70%;">' + dialogTable[i].desc + '</td>'
+'</tr>'
$('#attribute-table-content').append(str)
$('#attribute-table-content2').append(str)
}
$("#attribute-table-window").dialog({
$("#attribute-table-window2").dialog({
title: tableName,
draggable: true,
buttons : [{
text : '确定',
cls : "blue",
handler : function() {
$("#attribute-table-window").dialog('close');
$("#attribute-table-window2").dialog('close');
}
}, {
text : '取消',
handler : function() {
$("#attribute-table-window").dialog('close');
$("#attribute-table-window2").dialog('close');
}
}]
})
@ -1450,11 +1454,24 @@ function initProcessDesc() {
var value = obj.value;
if (value == undefined) {
value = '';
} else {
value = value.replace(/\n/g,'<br>')
t += '<td colspan="2" class="tableContent">' + value + '</td>';
t += '</tr>';
} else if(obj.type == 'table') {
let tableValue = JSON.parse(value.replace(/&quot;/g,'\"'))
let tableFlag = '请输入'
if (tableValue.table.length > 1) {
tableFlag = '请查看'
}
t += '<td colspan="2" class="tableContent" onclick="openDialog(' + JSON.stringify(tableValue).replace(/\"/g,"'") +')">' + tableFlag + '</td>';
t += '</tr>';
}
t += '<td colspan="2" class="tableContent">' + value + '</td>';
t += '</tr>';
else {
value = value.replace(/\n/g,'<br>')
t += '<td colspan="2" class="tableContent">' + value + '</td>';
t += '</tr>';
}
// t += '<td colspan="2" class="tableContent">' + value + '</td>';
// t += '</tr>';
}
$('#portalDescDock').find('table').append(t);
// $('#portalDescDock').append('<table class="awsui-table"><tr><td>&nbsp;</td></tr></table>');