mirror of
https://gitee.com/ShopeX/OMS
synced 2026-03-31 05:25:32 +08:00
292 lines
10 KiB
HTML
292 lines
10 KiB
HTML
<!--
|
||
Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
|
||
See LICENSE file for license details.
|
||
-->
|
||
|
||
<div class="form-layout">
|
||
<div class="form-layout-block">
|
||
<h3>配置表格</h3>
|
||
<form action="index.php?app=desktop&ctl=pagecols_setting&act=saveConfigs" method="post" id="config-form">
|
||
<div class="tableform">
|
||
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="config-table">
|
||
<thead>
|
||
<tr>
|
||
<th width="25%">场景</th>
|
||
<th width="30%">元素</th>
|
||
<th width="20%">必填</th>
|
||
<th width="25%">默认值</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="config-tbody">
|
||
<!-- 动态生成配置行 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="table-action" style="margin-top: 20px;">
|
||
<{button label="保存配置" type="submit" class="btn-primary"}>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
window.addEvent('domready', function() {
|
||
// 从后端获取预定义场景数据
|
||
var predefinedScenes = JSON.decode('<{$predefined_scenes|json_encode}>');
|
||
var groupedConfigs = JSON.decode('<{$grouped_configs|json_encode}>') || {};
|
||
|
||
// 解析配置结构，提取选项和标签
|
||
var defaultOptions = {};
|
||
var defaultOptionLabels = {};
|
||
var noDefaultFields = [];
|
||
|
||
// 遍历预定义场景，解析配置结构
|
||
for (var sceneKey in predefinedScenes) {
|
||
var scene = predefinedScenes[sceneKey];
|
||
var elements = scene.elements;
|
||
|
||
for (var elementKey in elements) {
|
||
var element = elements[elementKey];
|
||
|
||
if (typeof element === 'object' && element.options) {
|
||
// 有选项的字段
|
||
if (Object.keys(element.options).length > 0) {
|
||
defaultOptions[elementKey] = Object.keys(element.options);
|
||
defaultOptionLabels[elementKey] = element.options;
|
||
} else {
|
||
// 有配置结构但没有选项的字段
|
||
noDefaultFields.push(elementKey);
|
||
}
|
||
} else if (typeof element === 'object' && element.name) {
|
||
// 没有选项的字段，但有配置结构
|
||
noDefaultFields.push(elementKey);
|
||
} else if (typeof element === 'string') {
|
||
// 简单字符串字段
|
||
noDefaultFields.push(elementKey);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 生成配置表格
|
||
function generateConfigTable() {
|
||
var tbody = $('config-tbody');
|
||
tbody.empty();
|
||
|
||
for (var sceneKey in predefinedScenes) {
|
||
var scene = predefinedScenes[sceneKey];
|
||
var elements = scene.elements;
|
||
var elementKeys = Object.keys(elements);
|
||
|
||
for (var i = 0; i < elementKeys.length; i++) {
|
||
var elementKey = elementKeys[i];
|
||
var element = elements[elementKey];
|
||
var elementName = '';
|
||
|
||
// 处理不同的配置结构
|
||
if (typeof element === 'object' && element.name) {
|
||
elementName = element.name;
|
||
} else if (typeof element === 'string') {
|
||
elementName = element;
|
||
}
|
||
|
||
var row = new Element('tr');
|
||
|
||
// 场景列（第一行显示场景名称，其他行合并）
|
||
if (i === 0) {
|
||
var sceneCell = new Element('td', {
|
||
'rowspan': elementKeys.length,
|
||
'class': 'scene-cell'
|
||
});
|
||
sceneCell.set('html', scene.name);
|
||
row.appendChild(sceneCell);
|
||
}
|
||
|
||
// 元素列
|
||
var elementCell = new Element('td');
|
||
elementCell.set('html', elementName);
|
||
row.appendChild(elementCell);
|
||
|
||
// 必填列
|
||
var requiredCell = new Element('td');
|
||
var requiredRadio = new Element('input', {
|
||
'type': 'radio',
|
||
'name': 'scene_data[' + sceneKey + '][' + elementKey + '][required]',
|
||
'value': '1',
|
||
'class': 'required-radio'
|
||
});
|
||
var requiredLabel = new Element('label');
|
||
requiredLabel.set('html', '是');
|
||
requiredCell.appendChild(requiredRadio);
|
||
requiredCell.appendChild(requiredLabel);
|
||
|
||
var notRequiredRadio = new Element('input', {
|
||
'type': 'radio',
|
||
'name': 'scene_data[' + sceneKey + '][' + elementKey + '][required]',
|
||
'value': '0',
|
||
'class': 'required-radio'
|
||
});
|
||
var notRequiredLabel = new Element('label');
|
||
notRequiredLabel.set('html', '否');
|
||
requiredCell.appendChild(notRequiredRadio);
|
||
requiredCell.appendChild(notRequiredLabel);
|
||
|
||
// 设置默认选中状态
|
||
var isRequired = false;
|
||
if (groupedConfigs[sceneKey] && groupedConfigs[sceneKey][elementKey]) {
|
||
isRequired = groupedConfigs[sceneKey][elementKey].required;
|
||
}
|
||
|
||
if (isRequired) {
|
||
requiredRadio.set('checked', true);
|
||
} else {
|
||
notRequiredRadio.set('checked', true);
|
||
}
|
||
|
||
row.appendChild(requiredCell);
|
||
|
||
// 默认值列
|
||
var defaultCell = new Element('td');
|
||
var defaultValue = '';
|
||
if (groupedConfigs[sceneKey] && groupedConfigs[sceneKey][elementKey]) {
|
||
defaultValue = groupedConfigs[sceneKey][elementKey].default;
|
||
}
|
||
|
||
// 检查是否为不需要默认值的字段
|
||
if (noDefaultFields.indexOf(elementKey) !== -1) {
|
||
// 对于不需要默认值的字段，显示"无需设置"文本
|
||
defaultCell.set('html', '<span style="color: #999; font-style: italic;">无需设置</span>');
|
||
// 添加隐藏的输入框以保持表单结构
|
||
var hiddenInput = new Element('input', {
|
||
'type': 'hidden',
|
||
'name': 'scene_data[' + sceneKey + '][' + elementKey + '][default]',
|
||
'value': ''
|
||
});
|
||
defaultCell.appendChild(hiddenInput);
|
||
} else if (defaultOptions[elementKey]) {
|
||
// 下拉框
|
||
var select = new Element('select', {
|
||
'name': 'scene_data[' + sceneKey + '][' + elementKey + '][default]',
|
||
'class': 'default-select'
|
||
});
|
||
|
||
// 添加空选项
|
||
var emptyOption = new Element('option', {
|
||
'value': ''
|
||
});
|
||
emptyOption.set('html', '请选择');
|
||
select.appendChild(emptyOption);
|
||
|
||
for (var j = 0; j < defaultOptions[elementKey].length; j++) {
|
||
var option = new Element('option', {
|
||
'value': defaultOptions[elementKey][j]
|
||
});
|
||
option.set('html', defaultOptionLabels[elementKey] ? defaultOptionLabels[elementKey][defaultOptions[elementKey][j]] : defaultOptions[elementKey][j]);
|
||
if (defaultOptions[elementKey][j] === defaultValue) {
|
||
option.set('selected', true);
|
||
}
|
||
select.appendChild(option);
|
||
}
|
||
|
||
defaultCell.appendChild(select);
|
||
} else {
|
||
// 文本输入框
|
||
var input = new Element('input', {
|
||
'type': 'text',
|
||
'name': 'scene_data[' + sceneKey + '][' + elementKey + '][default]',
|
||
'class': 'default-input',
|
||
'placeholder': '请输入默认值',
|
||
'value': defaultValue
|
||
});
|
||
defaultCell.appendChild(input);
|
||
}
|
||
|
||
row.appendChild(defaultCell);
|
||
|
||
tbody.appendChild(row);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 表单提交处理
|
||
var form = $('config-form');
|
||
if (form) {
|
||
form.addEvent('submit', function(e) {
|
||
// 可以在这里添加表单验证
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// 初始化
|
||
generateConfigTable();
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.config-table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.config-table th,
|
||
.config-table td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
text-align: left;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.config-table th {
|
||
background-color: #f5f5f5;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.scene-cell {
|
||
background-color: #f9f9f9;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.required-radio {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.required-radio + label {
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.default-select,
|
||
.default-input {
|
||
width: 100%;
|
||
padding: 4px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.table-action {
|
||
text-align: center;
|
||
padding: 15px 0;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
/* 兼容性样式 */
|
||
.form-layout-block {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-layout-block h3 {
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.form-layout-fields {
|
||
padding: 0;
|
||
}
|
||
|
||
.tableform {
|
||
margin: 0;
|
||
}
|
||
</style> |