330 lines
11 KiB
JavaScript
330 lines
11 KiB
JavaScript
class ImportDialog extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: 'open' });
|
||
this.data = [];
|
||
this.planes = [];
|
||
this.atas = [];
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.render();
|
||
this.addEventListeners();
|
||
}
|
||
|
||
// 接收父组件传递的选项数据
|
||
setOptions(planes, atas) {
|
||
this.planes = planes;
|
||
this.atas = atas;
|
||
this.updateAtaOptions();
|
||
}
|
||
|
||
updateAtaOptions() {
|
||
const select = this.shadowRoot.querySelector('#ata-select');
|
||
if (select) {
|
||
select.innerHTML = `
|
||
<option value="">请选择ATA章节</option>
|
||
${this.atas.map(ata => `
|
||
<option value="${ata}">${ata}</option>
|
||
`).join('')}
|
||
`;
|
||
}
|
||
}
|
||
|
||
show(data) {
|
||
this.data = data;
|
||
this.updateTable();
|
||
this.style.display = 'block';
|
||
}
|
||
|
||
hide() {
|
||
this.style.display = 'none';
|
||
}
|
||
|
||
updateTable() {
|
||
const tbody = this.shadowRoot.querySelector('tbody');
|
||
const lowercaseCheckbox = this.shadowRoot.querySelector('#lowercase-checkbox');
|
||
const shouldLowercase = lowercaseCheckbox.checked;
|
||
|
||
tbody.innerHTML = this.data.map(item => `
|
||
<tr>
|
||
<td>${shouldLowercase ? item.name.toLowerCase() : item.name}</td>
|
||
<td>${item.variableType || '-'}</td>
|
||
<td>${item.structName}</td>
|
||
<td>${item.isArray ? '是' : '否'}</td>
|
||
<td>${item.arraySize1 || '-'}</td>
|
||
<td>${item.arraySize2 || '-'}</td>
|
||
<td>${item.description}</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
addEventListeners() {
|
||
const closeBtn = this.shadowRoot.querySelector('.close-btn');
|
||
const confirmBtn = this.shadowRoot.querySelector('.confirm-btn');
|
||
const cancelBtn = this.shadowRoot.querySelector('.cancel-btn');
|
||
const lowercaseCheckbox = this.shadowRoot.querySelector('#lowercase-checkbox');
|
||
|
||
closeBtn.addEventListener('click', () => this.hide());
|
||
cancelBtn.addEventListener('click', () => this.hide());
|
||
|
||
// 添加小写复选框的事件监听
|
||
lowercaseCheckbox.addEventListener('change', () => {
|
||
this.updateTable();
|
||
});
|
||
|
||
confirmBtn.addEventListener('click', () => {
|
||
const ataSelect = this.shadowRoot.querySelector('#ata-select');
|
||
const modelInput = this.shadowRoot.querySelector('#model-input');
|
||
|
||
// 从 localStorage 获取机型信息
|
||
const savedSelection = localStorage.getItem('xnsim-selection');
|
||
if (!savedSelection) {
|
||
alert('请先选择机型');
|
||
return;
|
||
}
|
||
const selection = JSON.parse(savedSelection);
|
||
if (!selection.configurationId) {
|
||
alert('请先选择机型');
|
||
return;
|
||
}
|
||
|
||
if (!ataSelect.value) {
|
||
alert('请选择ATA章节');
|
||
return;
|
||
}
|
||
if (!modelInput.value.trim()) {
|
||
alert('请输入模型名称');
|
||
return;
|
||
}
|
||
|
||
const modelName = modelInput.value.trim();
|
||
|
||
// 处理数据，转换为数据库格式
|
||
const processedData = this.data.map(item => ({
|
||
SystemName: 'XNSim', // 系统名称固定为XNSim
|
||
PlaneName: selection.plane,
|
||
ATAName: ataSelect.value,
|
||
ModelStructName: `${modelName}_${item.structName}`,
|
||
InterfaceName: lowercaseCheckbox.checked ? item.name.toLowerCase() : item.name,
|
||
InterfaceType: item.variableType || '',
|
||
InterfaceOption: 1,
|
||
InterfaceIsArray: item.isArray ? 1 : 0, // 确保是数字类型
|
||
InterfaceArraySize_1: item.arraySize1 || 0, // 确保是数字类型
|
||
InterfaceArraySize_2: item.arraySize2 || 0, // 确保是数字类型
|
||
InterfaceNotes: item.description || '', // 确保不是null
|
||
ConfID: selection.configurationId
|
||
}));
|
||
|
||
// 验证数据
|
||
const invalidData = processedData.find(item => {
|
||
return !item.InterfaceType ||
|
||
(item.InterfaceIsArray === 1 && (!item.InterfaceArraySize_1 || item.InterfaceArraySize_1 <= 1));
|
||
});
|
||
|
||
if (invalidData) {
|
||
alert('数据格式不正确，请检查：\n1. 变量类型不能为空\n2. 如果是数组，第一维大小必须大于1');
|
||
return;
|
||
}
|
||
|
||
this.dispatchEvent(new CustomEvent('confirm-import', {
|
||
detail: processedData,
|
||
bubbles: true,
|
||
composed: true
|
||
}));
|
||
this.hide();
|
||
});
|
||
}
|
||
|
||
render() {
|
||
// 从 localStorage 获取机型信息
|
||
const savedSelection = localStorage.getItem('xnsim-selection');
|
||
const selection = savedSelection ? JSON.parse(savedSelection) : null;
|
||
const planeName = selection?.plane || '';
|
||
|
||
this.shadowRoot.innerHTML = `
|
||
<style>
|
||
:host {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.dialog {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
min-width: 800px;
|
||
max-width: 90%;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 1.2em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5em;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
color: #666;
|
||
}
|
||
|
||
.options {
|
||
margin-bottom: 20px;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.option-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-group label {
|
||
font-weight: bold;
|
||
}
|
||
|
||
select, input[type="text"] {
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
overflow: auto;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
text-align: left;
|
||
}
|
||
|
||
th {
|
||
background-color: #f5f5f5;
|
||
position: sticky;
|
||
top: 0;
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #f44336;
|
||
color: white;
|
||
}
|
||
|
||
.plane-info {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
<div class="dialog">
|
||
<div class="header">
|
||
<div class="title">导入数据预览</div>
|
||
<button class="close-btn">×</button>
|
||
</div>
|
||
<div class="plane-info">
|
||
当前机型：${planeName}
|
||
</div>
|
||
<div class="options">
|
||
<div class="option-group">
|
||
<label for="ata-select">ATA章节</label>
|
||
<select id="ata-select">
|
||
<option value="">请选择ATA章节</option>
|
||
</select>
|
||
</div>
|
||
<div class="option-group">
|
||
<label for="model-input">模型名称</label>
|
||
<input type="text" id="model-input" placeholder="请输入模型名称">
|
||
</div>
|
||
<div class="option-group">
|
||
<div class="checkbox-group">
|
||
<input type="checkbox" id="lowercase-checkbox">
|
||
<label for="lowercase-checkbox">小写所有变量名</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>变量名称</th>
|
||
<th>变量类型</th>
|
||
<th>结构体</th>
|
||
<th>是否数组</th>
|
||
<th>第一维大小</th>
|
||
<th>第二维大小</th>
|
||
<th>描述</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="footer">
|
||
<button class="confirm-btn">确认导入</button>
|
||
<button class="cancel-btn">取消</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
customElements.define('import-dialog', ImportDialog);
|