278 lines
10 KiB
JavaScript
278 lines
10 KiB
JavaScript
/**
|
|
* 命令处理模块
|
|
* @type {module}
|
|
*/
|
|
import { escapeHtml } from './utils.js';
|
|
|
|
/**
|
|
* 渲染命令列表表格
|
|
* @param {Element} container - 容器元素
|
|
* @param {Element} rootElement - XML根元素
|
|
* @param {Function} showAddCommandDialog - 显示添加命令对话框的函数
|
|
* @param {Function} showEditCommandDialog - 显示编辑命令对话框的函数
|
|
* @param {Function} deleteCommand - 删除命令的函数
|
|
*/
|
|
export function renderCommandListTable(container, rootElement, showAddCommandDialog, showEditCommandDialog, deleteCommand) {
|
|
// 查找CommandList元素
|
|
const commandListElement = rootElement.querySelector('CommandList');
|
|
if (!commandListElement) {
|
|
// 创建CommandList部分
|
|
const commandListSection = document.createElement('div');
|
|
commandListSection.className = 'form-group';
|
|
commandListSection.innerHTML = `
|
|
<label for="commandListTable">命令列表</label>
|
|
<div id="commandListContainer" class="command-table-container">
|
|
<table id="commandListTable" class="command-table">
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th>调用</th>
|
|
<th>描述</th>
|
|
<th style="width: 100px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="4" style="text-align: center;">
|
|
<button id="addCommandButton" class="action-button">
|
|
添加命令
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(commandListSection);
|
|
|
|
// 添加命令事件监听
|
|
const addCommandButton = commandListSection.querySelector('#addCommandButton');
|
|
addCommandButton.addEventListener('click', () => {
|
|
showAddCommandDialog(rootElement);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// 创建CommandList部分
|
|
const commandListSection = document.createElement('div');
|
|
commandListSection.className = 'form-group';
|
|
commandListSection.innerHTML = `
|
|
<label for="commandListTable">命令列表</label>
|
|
<div id="commandListContainer" class="command-table-container">
|
|
<table id="commandListTable" class="command-table">
|
|
<thead>
|
|
<tr>
|
|
<th>名称</th>
|
|
<th>调用</th>
|
|
<th>描述</th>
|
|
<th style="width: 100px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 命令会在这里动态添加 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(commandListSection);
|
|
|
|
const tableBody = commandListSection.querySelector('tbody');
|
|
|
|
// 获取命令列表
|
|
const commandElements = commandListElement.querySelectorAll('Command');
|
|
|
|
// 如果没有命令，添加"添加命令"按钮
|
|
if (commandElements.length === 0) {
|
|
tableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="4" style="text-align: center;">
|
|
<button id="addCommandButton" class="action-button">
|
|
添加命令
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
// 添加命令事件监听
|
|
const addCommandButton = tableBody.querySelector('#addCommandButton');
|
|
addCommandButton.addEventListener('click', () => {
|
|
showAddCommandDialog(rootElement);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
// 添加命令到表格
|
|
commandElements.forEach((command, index) => {
|
|
const name = command.getAttribute('Name') || '';
|
|
const call = command.getAttribute('Call') || '';
|
|
const description = command.getAttribute('Description') || '';
|
|
|
|
const row = document.createElement('tr');
|
|
row.className = 'command-row';
|
|
row.dataset.index = index;
|
|
|
|
row.innerHTML = `
|
|
<td class="command-cell">${escapeHtml(name)}</td>
|
|
<td class="command-cell">${escapeHtml(call)}</td>
|
|
<td class="command-cell">${escapeHtml(description)}</td>
|
|
<td class="action-cell">
|
|
<div class="command-actions">
|
|
<button class="command-action-button edit-button">编辑</button>
|
|
<button class="command-action-button delete-button">删除</button>
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
// 编辑按钮事件
|
|
row.querySelector('.edit-button').addEventListener('click', () => {
|
|
showEditCommandDialog(command, index);
|
|
});
|
|
|
|
// 删除按钮事件
|
|
row.querySelector('.delete-button').addEventListener('click', () => {
|
|
deleteCommand(command, index);
|
|
});
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// 添加"添加命令"按钮行
|
|
const addRow = document.createElement('tr');
|
|
addRow.innerHTML = `
|
|
<td colspan="4" style="text-align: center;">
|
|
<button id="addCommandButton" class="action-button">
|
|
添加命令
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
// 添加命令事件监听
|
|
addRow.querySelector('#addCommandButton').addEventListener('click', () => {
|
|
showAddCommandDialog(rootElement);
|
|
});
|
|
|
|
tableBody.appendChild(addRow);
|
|
}
|
|
|
|
/**
|
|
* 渲染命令列表
|
|
* @param {Element} container - 容器元素
|
|
* @param {Element} commandListElement - 命令列表元素
|
|
* @param {Element} rootElement - XML根元素
|
|
* @param {Function} showAddCommandDialog - 显示添加命令对话框的函数
|
|
* @param {Function} showEditCommandDialog - 显示编辑命令对话框的函数
|
|
* @param {Function} deleteCommand - 删除命令的函数
|
|
*/
|
|
export function renderCommandList(container, commandListElement, rootElement, showAddCommandDialog, showEditCommandDialog, deleteCommand) {
|
|
// 创建命令列表容器
|
|
const commandListContainer = document.createElement('div');
|
|
commandListContainer.id = 'commandListContainer';
|
|
commandListContainer.className = 'section';
|
|
|
|
// 创建标题和添加按钮
|
|
const header = document.createElement('div');
|
|
header.className = 'section-header';
|
|
header.innerHTML = `
|
|
<h3>命令列表</h3>
|
|
<button id="addCommandBtn" class="action-button">添加命令</button>
|
|
`;
|
|
commandListContainer.appendChild(header);
|
|
|
|
// 添加按钮事件
|
|
const addBtn = header.querySelector('#addCommandBtn');
|
|
addBtn.addEventListener('click', () => {
|
|
showAddCommandDialog(rootElement);
|
|
});
|
|
|
|
// 创建表格
|
|
const table = document.createElement('table');
|
|
table.className = 'command-table';
|
|
|
|
// 创建表头
|
|
const thead = document.createElement('thead');
|
|
thead.innerHTML = `
|
|
<tr>
|
|
<th>命令名称</th>
|
|
<th>命令调用</th>
|
|
<th>描述</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
`;
|
|
table.appendChild(thead);
|
|
|
|
// 创建表体
|
|
const tbody = document.createElement('tbody');
|
|
|
|
// 如果存在命令列表元素，则渲染命令
|
|
if (commandListElement) {
|
|
const commands = commandListElement.querySelectorAll('Command');
|
|
|
|
if (commands.length === 0) {
|
|
// 如果没有命令，显示空行
|
|
const emptyRow = document.createElement('tr');
|
|
emptyRow.innerHTML = '<td colspan="4" style="text-align: center;">没有命令记录</td>';
|
|
tbody.appendChild(emptyRow);
|
|
} else {
|
|
// 渲染命令列表
|
|
commands.forEach((command, index) => {
|
|
const name = command.getAttribute('Name') || '';
|
|
const call = command.getAttribute('Call') || '';
|
|
const description = command.getAttribute('Description') || '';
|
|
|
|
const row = document.createElement('tr');
|
|
row.className = 'command-row';
|
|
row.dataset.index = index;
|
|
|
|
row.innerHTML = `
|
|
<td class="command-cell">${escapeHtml(name)}</td>
|
|
<td class="command-cell">${escapeHtml(call)}</td>
|
|
<td class="command-cell">${escapeHtml(description)}</td>
|
|
<td class="command-actions">
|
|
<button class="action-button edit-command">编辑</button>
|
|
<button class="action-button delete-command">删除</button>
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
|
|
// 添加编辑按钮事件
|
|
const editBtn = row.querySelector('.edit-command');
|
|
editBtn.addEventListener('click', () => {
|
|
showEditCommandDialog(command, index);
|
|
});
|
|
|
|
// 添加删除按钮事件
|
|
const deleteBtn = row.querySelector('.delete-command');
|
|
deleteBtn.addEventListener('click', () => {
|
|
deleteCommand(command, index);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
table.appendChild(tbody);
|
|
|
|
// 添加"添加命令"按钮行
|
|
const addRow = document.createElement('tr');
|
|
addRow.innerHTML = `
|
|
<td colspan="4" style="text-align: center;">
|
|
<button id="addCommandButton" class="action-button">
|
|
添加命令
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
// 添加命令事件监听
|
|
addRow.querySelector('#addCommandButton').addEventListener('click', () => {
|
|
showAddCommandDialog(rootElement);
|
|
});
|
|
|
|
tbody.appendChild(addRow);
|
|
|
|
commandListContainer.appendChild(table);
|
|
container.appendChild(commandListContainer);
|
|
}
|