XNSim/XNSimHtml/components/interface-config.js

import './interface-config/toolbar.js';
import './interface-config/data-table.js';
import './interface-config/variable-form.js';

class InterfaceConfig extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.data = [];
    }

    connectedCallback() {
        this.render();
        this.loadData();
        this.addEventListeners();
    }

    addEventListeners() {
        const toolbar = this.shadowRoot.querySelector('interface-toolbar');
        const dataTable = this.shadowRoot.querySelector('interface-data-table');
        const variableForm = this.shadowRoot.querySelector('variable-form');

        // 添加变量事件
        toolbar.addEventListener('add-variable', () => {
            variableForm.setMode('add');
            variableForm.show();
        });

        // 删除变量事件
        toolbar.addEventListener('delete-variable', async () => {
            const selectedRows = dataTable.getSelectedRows();
            if (selectedRows.length === 0) {
                alert('请选择要删除的接口');
                return;
            }

            if (!confirm(`确定要删除选中的 ${selectedRows.length} 个接口吗？`)) {
                return;
            }

            try {
                const deletePromises = selectedRows.map(row => {
                    const { SystemName, ProductName, ATAName, ModelStructName, InterfaceName } = row;
                    return fetch(`/api/interface/delete?systemName=${SystemName}&productName=${ProductName}&ataName=${ATAName}&modelStructName=${ModelStructName}&interfaceName=${InterfaceName}`, {
                        method: 'DELETE'
                    });
                });

                const results = await Promise.all(deletePromises);
                const failed = results.some(result => !result.ok);
                
                if (failed) {
                    throw new Error('删除失败');
                }

                await this.loadData();
                alert('删除成功');
            } catch (error) {
                console.error('删除接口时出错:', error);
                alert('删除接口失败');
            }
        });

        // 下载模板事件
        toolbar.addEventListener('download-template', async () => {
            try {
                const response = await fetch('/api/interface/template');
                if (!response.ok) {
                    throw new Error('下载模板失败');
                }

                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '接口变量模板.xlsx';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            } catch (error) {
                console.error('下载模板时出错:', error);
                alert('下载模板失败');
            }
        });

        // 导入数据事件
        toolbar.addEventListener('import-data', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.xlsx,.xls';
            input.onchange = async (e) => {
                const file = e.target.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('file', file);

                try {
                    const response = await fetch('/api/interface/import', {
                        method: 'POST',
                        body: formData
                    });

                    if (!response.ok) {
                        throw new Error('导入失败');
                    }

                    const result = await response.json();
                    if (result.success) {
                        await this.loadData();
                        alert(`导入完成，成功: ${result.results.filter(r => r.success).length}, 失败: ${result.results.filter(r => !r.success).length}`);
                    } else {
                        throw new Error(result.error || '导入失败');
                    }
                } catch (error) {
                    console.error('导入数据时出错:', error);
                    alert('导入数据失败');
                }
            };
            input.click();
        });

        // 表格编辑按钮事件
        dataTable.addEventListener('edit', (e) => {
            const { SystemName, ProductName, ATAName, ModelStructName, InterfaceName } = e.detail;
            const interfaceData = this.data.find(item => 
                item.SystemName === SystemName &&
                item.ProductName === ProductName &&
                item.ATAName === ATAName &&
                item.ModelStructName === ModelStructName &&
                item.InterfaceName === InterfaceName
            );
            if (interfaceData) {
                variableForm.setMode('edit', interfaceData);
                variableForm.show();
            }
        });

        // 表格删除按钮事件
        dataTable.addEventListener('delete', async (e) => {
            const { SystemName, ProductName, ATAName, ModelStructName, InterfaceName } = e.detail;
            if (!confirm('确定要删除这个接口吗？')) {
                return;
            }

            try {
                const response = await fetch(`/api/interface/delete?systemName=${SystemName}&productName=${ProductName}&ataName=${ATAName}&modelStructName=${ModelStructName}&interfaceName=${InterfaceName}`, {
                    method: 'DELETE'
                });

                if (!response.ok) {
                    throw new Error('删除失败');
                }

                await this.loadData();
                alert('删除成功');
            } catch (error) {
                console.error('删除接口时出错:', error);
                alert('删除接口失败');
            }
        });

        // 表单保存成功事件
        variableForm.addEventListener('save-success', async (e) => {
            const interfaceData = e.detail;
            try {
                const url = interfaceData.mode === 'add' ? '/api/interface/add' : '/api/interface/update';
                const method = interfaceData.mode === 'add' ? 'POST' : 'PUT';

                const response = await fetch(url, {
                    method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(interfaceData)
                });

                if (!response.ok) {
                    throw new Error('保存失败');
                }

                await this.loadData();
                alert('保存成功');
            } catch (error) {
                console.error('保存接口时出错:', error);
                alert('保存接口失败');
            }
        });
    }

    async loadData() {
        try {
            const response = await fetch('/api/interface/list');
            if (!response.ok) {
                throw new Error('获取数据失败');
            }
            this.data = await response.json();
            this.updateTable();
        } catch (error) {
            console.error('加载数据时出错:', error);
            alert('加载数据失败');
        }
    }

    updateTable() {
        const dataTable = this.shadowRoot.querySelector('interface-data-table');
        if (dataTable) {
            dataTable.setData(this.data);
        }
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    height: 100%;
                    overflow: auto;
                    padding: 16px;
                    box-sizing: border-box;
                    font-family: Arial, sans-serif;
                }

                .config-container {
                    background-color: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    padding: 16px;
                    height: 100%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }
            </style>
            <div class="config-container">
                <interface-toolbar></interface-toolbar>
                <interface-data-table></interface-data-table>
                <variable-form></variable-form>
            </div>
        `;
    }
}

customElements.define('interface-config', InterfaceConfig);