0

public/mg/kylx365_db_admin.html

@@ -223,16 +223,21 @@
             overflow: auto;
             padding: 20px;
             background: white;
+            position: relative;
         }
 
         .table-container {
             width: 100%;
             overflow-x: auto;
+            max-height: calc(100vh - 380px); /* 减去其他元素的高度 */
+            overflow-y: auto;
+            position: relative; /* 为内部元素提供定位上下文 */
         }
 
         .data-table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate; /* 改为separate以支持边框样式 */
+            border-spacing: 0; /* 消除单元格间距 */
             font-size: 14px;
         }
 
@@ -244,6 +249,21 @@
             position: sticky;
             top: 0;
             z-index: 10;
+            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+        }
+
+        /* 确保表头单元格背景色完整覆盖 */
+        .data-table thead th {
+            background: #F5F5F5;
+        }
+        
+        /* 优化表头在滚动时的视觉效果 */
+        .table-container:not(:hover) .data-table th {
+            transition: box-shadow 0.3s ease;
+        }
+        
+        .table-container:hover .data-table th {
+            box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.2);
         }
 
         .data-table td {
@@ -481,6 +501,77 @@
             color: #CCCCCC;
             cursor: not-allowed;
         }
+
+        /* 完整内容弹出层样式 - 改进版 */
+        .complete-content-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            background-color: rgba(0, 0, 0, 0.5);
+            pointer-events: auto;
+        }
+        
+        .complete-content-container {
+            width: 80%;
+            max-width: 800px;
+            max-height: 80vh;
+            background-color: white;
+            border-radius: 8px;
+            padding: 20px;
+            padding-top: 50px; /* 为固定的关闭按钮留出空间 */
+            position: relative;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+            overflow: auto;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .close-btn {
+            position: absolute;
+            right: 15px; /* 根据弹窗宽度计算位置 */
+            top: 15px; /* 根据弹窗位置计算 */
+            z-index: 1010; /* 确保按钮在最上层 */
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            border-radius: 50%;
+            font-size: 24px;
+            cursor: pointer;
+            color: #999;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+        
+        .close-btn:hover {
+            color: #333;
+            background: #fff;
+        }
+        
+        .complete-content {
+            white-space: pre-wrap;
+            word-break: break-word;
+            font-family: monospace;
+            line-height: 1.5;
+        }
     </style>
 </head>
 
@@ -610,7 +701,9 @@
                                             :key="'tr-'+rowIndex">
                                             <td v-for="(column, colIndex) in tableColumns" 
                                                 :key="'td-'+rowIndex+'-'+colIndex"
-                                                v-show="!column.startsWith('__')">
+                                                v-show="!column.startsWith('__')"
+                                                @dblclick="formatTableCell(row[column]).endsWith('...') ? showCompleteField(row, column) : copyColumnName(formatTableCell(row[column]))"
+                                                >
                                                 {{ formatTableCell(row[column]) }}
                                             </td>
                                         </tr>
@@ -641,6 +734,16 @@
 
         <!-- Toast提示 -->
         <div class="toast" :class="{ show: showToast, [toastType]: showToast }">{{ toastMessage }}</div>
+        
+        <!-- 完整内容弹出层 -->
+        <div v-if="showCompleteContent" class="complete-content-overlay" @click.self="closeCompleteContent">
+            <div class="complete-content-container">
+                <button class="close-btn" @click="closeCompleteContent">×</button>
+                <div class="complete-content" @dblclick="copyToClipboard(completeContent)">
+                    {{ completeContent }}
+                </div>
+            </div>
+        </div>
     </div>
 
     <script>
@@ -665,7 +768,11 @@
                 allResults: [],
                 tableColumnsList: [], // 存储表格字段列表
                 limitOptions: [10, 100, 500, 1000, 2000, 3000], // LIMIT选项
-                selectedLimit: 100 // 默认选中的LIMIT值
+                selectedLimit: 100, // 默认选中的LIMIT值
+                showCompleteContent: false,
+                completeContent: '',
+                currentRow: null,
+                currentColumn: null
             },
             computed: {
                 
@@ -824,10 +931,19 @@
                 // 选择表格
                 selectTable(table) {
                     this.selectedTable = table;
-                    this.sqlQuery = `SELECT * FROM ${table} LIMIT 100;`;
-
+                    
                     // 获取表格字段列表
                     this.loadTableColumns(table);
+                    
+                    // 监听字段列表变化，当加载完成后构建查询语句
+                    this.$watch('tableColumnsList', (newVal) => {
+                        if (newVal && newVal.length > 0) {
+                            const columns = newVal.map(col => `\`${col.name}\``).join(',');
+                            this.sqlQuery = `SELECT ${columns} FROM \`${table}\` LIMIT 100;`;
+                        } else {
+                            this.sqlQuery = `SELECT * FROM \`${table}\` LIMIT 100;`;
+                        }
+                    }, {immediate: true});
                 },
 
                 // 加载表格字段列表
@@ -1009,6 +1125,8 @@
                 insertColumnName(columnName) {
                     // 获取文本框元素
                     const textarea = document.querySelector('.sql-textarea');
+                    // 添加反引号的字段名
+                    const quotedColumnName = `\`${columnName}\``;
 
                     // 如果文本框存在
                     if (textarea) {
@@ -1021,19 +1139,19 @@
                         const textAfter = this.sqlQuery.substring(endPos);
 
                         // 更新SQL查询
-                        this.sqlQuery = textBefore + columnName + textAfter;
+                        this.sqlQuery = textBefore + quotedColumnName + textAfter;
 
                         // 设置新的光标位置
                         this.$nextTick(() => {
                             textarea.focus();
-                            textarea.selectionStart = startPos + columnName.length;
-                            textarea.selectionEnd = startPos + columnName.length;
+                            textarea.selectionStart = startPos + quotedColumnName.length;
+                            textarea.selectionEnd = startPos + quotedColumnName.length;
                         });
 
                         this.showToastMessage(`已插入字段 "${columnName}" 到查询`, 'info');
                     } else {
                         // 如果无法获取文本框元素，则直接在末尾添加
-                        this.sqlQuery += ' ' + columnName;
+                        this.sqlQuery += ' ' + quotedColumnName;
                     }
                 },
 
@@ -1236,6 +1354,95 @@
                     return value;
                 },
 
+                // 显示完整字段内容
+                showCompleteField(row, column) {
+                    // 检查当前单元格内容是否有省略
+                    const cellContent = this.formatTableCell(row[column]);
+                    if (!cellContent.includes('...')) {
+                        return;
+                    }
+                    
+                    this.currentRow = row;
+                    this.currentColumn = column;
+                    this.showCompleteContent = true;
+                    this.completeContent = '加载中...';
+                    
+                    // 查找主键字段 - 优先使用实际存在的列名
+                    let primaryKey = null;
+                    
+                    // 检查当前行是否有id字段
+                    if ('id' in row) {
+                        primaryKey = 'id';
+                    } 
+                    // 检查是否有ID字段(大写)
+                    else if ('ID' in row) {
+                        primaryKey = 'ID';
+                    }
+                    // 检查表字段列表中是否有id字段
+                    else if (this.tableColumnsList.some(col => col.name.toLowerCase() === 'id')) {
+                        primaryKey = 'id';
+                    }
+                    // 检查表字段列表中是否有ID字段(大写)
+                    else if (this.tableColumnsList.some(col => col.name === 'ID')) {
+                        primaryKey = 'ID';
+                    }
+                    // 使用第一个存在的字段作为主键
+                    else if (this.tableColumnsList.length > 0) {
+                        const firstCol = this.tableColumnsList[0].name;
+                        if (firstCol in row) {
+                            primaryKey = firstCol;
+                        }
+                    }
+                    
+                    if (!primaryKey || !row[primaryKey]) {
+                        this.completeContent = '无法确定主键字段或主键值为空';
+                        return;
+                    }
+                    
+                    // 构建查询SQL
+                    const sql = `SELECT \`${column}\` FROM \`${this.selectedTable}\` WHERE \`${primaryKey}\`='${row[primaryKey]}';`;
+                    
+                    // 调用API获取完整数据
+                    fetch('/api/RunKylx365DBSql', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            sql: sql,
+                            IsCompleteField: true
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data && data.result && data.result.length > 0) {
+                            this.completeContent = this.formatTableCell(data.result[0][column]);
+                        } else {
+                            this.completeContent = '未获取到完整数据';
+                        }
+                    })
+                    .catch(error => {
+                        this.completeContent = '获取完整数据失败: ' + error.message;
+                    });
+                },
+                
+                // 关闭完整内容弹出层
+                closeCompleteContent() {
+                    this.showCompleteContent = false;
+                    this.completeContent = '';
+                    this.currentRow = null;
+                    this.currentColumn = null;
+                },
+                
+                // 复制到剪贴板
+                copyToClipboard(text) {
+                    navigator.clipboard.writeText(text).then(() => {
+                        this.showToastMessage('已复制到剪贴板', 'success');
+                    }).catch(err => {
+                        this.showToastMessage('复制失败: ' + err, 'error');
+                    });
+                },
+                
                 // 显示提示消息
                 showToastMessage(message, type = 'info') {
                     this.toastMessage = message;