mirror of
https://gitee.com/ShopeX/OMS
synced 2026-03-31 21:25:33 +08:00
303 lines
10 KiB
HTML
303 lines
10 KiB
HTML
<!--
|
|
Copyright 2012-2026 ShopeX (https://www.shopex.cn)
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<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> |