chengjie 6 months ago
parent
commit
68d3d8b924
1 changed files with 184 additions and 102 deletions
  1. 184 102
      public/mg/kylx365_db_admin.html

+ 184 - 102
public/mg/kylx365_db_admin.html

@@ -581,7 +581,10 @@
581
                         <div class="loading-spinner"></div>
581
                         <div class="loading-spinner"></div>
582
                     </div>
582
                     </div>
583
                     
583
                     
584
-                    <div v-if="queryResults && queryResults.length > 0" class="table-container">
584
+                    <div v-if="queryExecuted && allResults && allResults.length > 0" class="table-container">
585
+                        <div style="margin-bottom: 10px; color: #666;">
586
+                            显示 {{ queryResults.length }} 条记录,共 {{ allResults.length }} 条
587
+                        </div>
585
                         <table class="data-table">
588
                         <table class="data-table">
586
                             <thead>
589
                             <thead>
587
                                 <tr>
590
                                 <tr>
@@ -589,16 +592,25 @@
589
                                 </tr>
592
                                 </tr>
590
                             </thead>
593
                             </thead>
591
                             <tbody>
594
                             <tbody>
592
-                                <tr v-for="(row, rowIndex) in queryResults" :key="rowIndex">
593
-                                    <td v-for="(column, colIndex) in tableColumns" :key="colIndex">
594
-                                        {{ row[column] }}
595
-                                    </td>
596
-                                </tr>
595
+                                <template v-if="queryResults.length > 0">
596
+                                    <tr v-for="(row, rowIndex) in queryResults" :key="rowIndex">
597
+                                        <td v-for="(column, colIndex) in tableColumns" :key="colIndex">
598
+                                            {{ row[column] || '' }}
599
+                                        </td>
600
+                                    </tr>
601
+                                </template>
602
+                                <template v-else>
603
+                                    <tr>
604
+                                        <td :colspan="tableColumns.length" style="text-align: center; color: #999;">
605
+                                            数据加载中...
606
+                                        </td>
607
+                                    </tr>
608
+                                </template>
597
                             </tbody>
609
                             </tbody>
598
                         </table>
610
                         </table>
599
                         
611
                         
600
                         <!-- 分页控件 -->
612
                         <!-- 分页控件 -->
601
-                        <div class="pagination" v-if="totalPages > 1">
613
+                        <div class="pagination" v-if="totalPages > 1 && allResults.length > pageSize">
602
                             <button class="pagination-btn" 
614
                             <button class="pagination-btn" 
603
                                     :class="{ disabled: currentPage === 1 }"
615
                                     :class="{ disabled: currentPage === 1 }"
604
                                     @click="changePage(1)">
616
                                     @click="changePage(1)">
@@ -802,27 +814,6 @@
802
                             this.showToastMessage(`获取表格列表失败: ${error.message}`, 'error');
814
                             this.showToastMessage(`获取表格列表失败: ${error.message}`, 'error');
803
                             this.isTablesLoading = false;
815
                             this.isTablesLoading = false;
804
                             
816
                             
805
-                            // 检查是否在本地环境
806
-                            if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
807
-                                //console.log('在本地环境中使用模拟数据');
808
-                                // 模拟数据用于开发测试
809
-                                this.tables = [
810
-                                    'users', 'products', 'orders', 'categories', 
811
-                                    'customers', 'suppliers', 'inventory', 'payments',
812
-                                    'shipping', 'reviews', 'logs', 'settings'
813
-                                ];
814
-                                
815
-                                // 模拟表格注释
816
-                                this.tableComments = {
817
-                                    'users': '用户信息表',
818
-                                    'products': '产品信息表',
819
-                                    'orders': '订单信息表',
820
-                                    'categories': '分类信息表',
821
-                                    'customers': '客户信息表'
822
-                                };
823
-                                
824
-                                this.filteredTables = [...this.tables];
825
-                            }
826
                         });
817
                         });
827
                 },
818
                 },
828
                 
819
                 
@@ -878,11 +869,11 @@
878
                     fetch(`/api/GetKylx365TableColumnByTable?table=${encodeURIComponent(tableName)}`)
869
                     fetch(`/api/GetKylx365TableColumnByTable?table=${encodeURIComponent(tableName)}`)
879
                         .then(response => response.json())
870
                         .then(response => response.json())
880
                         .then(data => {
871
                         .then(data => {
881
-                            console.log('收到的原始数据:', data);
872
+                            //console.log('收到的原始数据:', data);
882
                             
873
                             
883
                             // 验证数据格式
874
                             // 验证数据格式
884
                             if (!data) {
875
                             if (!data) {
885
-                                console.error('接收到空数据');
876
+                                //console.error('接收到空数据');
886
                                 throw new Error('接收到空数据');
877
                                 throw new Error('接收到空数据');
887
                             }
878
                             }
888
                             
879
                             
@@ -890,17 +881,17 @@
890
                             let columnsData = null;
881
                             let columnsData = null;
891
                             
882
                             
892
                             if (data && data.result && Array.isArray(data.result)) {
883
                             if (data && data.result && Array.isArray(data.result)) {
893
-                                console.log('标准格式: data.result 是数组');
884
+                                //console.log('标准格式: data.result 是数组');
894
                                 columnsData = data.result;
885
                                 columnsData = data.result;
895
                             } else if (data && Array.isArray(data)) {
886
                             } else if (data && Array.isArray(data)) {
896
-                                console.log('替代格式: data 本身是数组');
887
+                                //console.log('替代格式: data 本身是数组');
897
                                 columnsData = data;
888
                                 columnsData = data;
898
                             } else if (data && typeof data === 'object') {
889
                             } else if (data && typeof data === 'object') {
899
-                                console.log('检查对象中的数组属性');
890
+                                //console.log('检查对象中的数组属性');
900
                                 // 尝试在对象中找到数组属性
891
                                 // 尝试在对象中找到数组属性
901
                                 for (const key in data) {
892
                                 for (const key in data) {
902
                                     if (Array.isArray(data[key])) {
893
                                     if (Array.isArray(data[key])) {
903
-                                        console.log(`找到数组属性: ${key}`);
894
+                                        //console.log(`找到数组属性: ${key}`);
904
                                         columnsData = data[key];
895
                                         columnsData = data[key];
905
                                         break;
896
                                         break;
906
                                     }
897
                                     }
@@ -908,13 +899,13 @@
908
                             }
899
                             }
909
                             
900
                             
910
                             if (columnsData && Array.isArray(columnsData)) {
901
                             if (columnsData && Array.isArray(columnsData)) {
911
-                                console.log('数据验证通过,开始处理数据');
912
-                                console.log('字段数据长度:', columnsData.length);
902
+                                //console.log('数据验证通过,开始处理数据');
903
+                                //console.log('字段数据长度:', columnsData.length);
913
                                 
904
                                 
914
                                 if (columnsData.length > 0) {
905
                                 if (columnsData.length > 0) {
915
                                     // 检查第一个元素的格式
906
                                     // 检查第一个元素的格式
916
                                     const firstItem = columnsData[0];
907
                                     const firstItem = columnsData[0];
917
-                                    console.log('第一个字段项:', firstItem);
908
+                                    //console.log('第一个字段项:', firstItem);
918
                                     
909
                                     
919
                                     if (typeof firstItem === 'object' && !Array.isArray(firstItem)) {
910
                                     if (typeof firstItem === 'object' && !Array.isArray(firstItem)) {
920
                                         // 检查并适应不同的属性名称
911
                                         // 检查并适应不同的属性名称
@@ -950,7 +941,7 @@
950
                                             return comment.join(', ');
941
                                             return comment.join(', ');
951
                                         };
942
                                         };
952
                                         
943
                                         
953
-                                        console.log('使用的属性名:', { nameKey, typeKey, commentKey });
944
+                                        //console.log('使用的属性名:', { nameKey, typeKey, commentKey });
954
                                         
945
                                         
955
                                         if (nameKey) {
946
                                         if (nameKey) {
956
                                             // 转换为标准格式
947
                                             // 转换为标准格式
@@ -965,7 +956,7 @@
965
                                                 };
956
                                                 };
966
                                             }).filter(col => col.name); // 过滤掉没有名称的列
957
                                             }).filter(col => col.name); // 过滤掉没有名称的列
967
                                             
958
                                             
968
-                                            console.log('处理后的字段列表:', this.tableColumnsList);
959
+                                            //console.log('处理后的字段列表:', this.tableColumnsList);
969
                                         } else {
960
                                         } else {
970
                                             console.error('无法找到字段名属性');
961
                                             console.error('无法找到字段名属性');
971
                                             this.showToastMessage('数据格式错误:无法找到字段名属性', 'error');
962
                                             this.showToastMessage('数据格式错误:无法找到字段名属性', 'error');
@@ -980,18 +971,18 @@
980
                                                 comment: ''
971
                                                 comment: ''
981
                                             };
972
                                             };
982
                                         });
973
                                         });
983
-                                        console.log('处理后的字段列表(仅名称):', this.tableColumnsList);
974
+                                        //console.log('处理后的字段列表(仅名称):', this.tableColumnsList);
984
                                     } else {
975
                                     } else {
985
                                         console.error('未知的字段数据格式');
976
                                         console.error('未知的字段数据格式');
986
                                         this.showToastMessage('未知的字段数据格式', 'error');
977
                                         this.showToastMessage('未知的字段数据格式', 'error');
987
                                         this.tableColumnsList = [];
978
                                         this.tableColumnsList = [];
988
                                     }
979
                                     }
989
                                 } else {
980
                                 } else {
990
-                                    console.log('字段列表为空');
981
+                                    //console.log('字段列表为空');
991
                                     this.tableColumnsList = [];
982
                                     this.tableColumnsList = [];
992
                                 }
983
                                 }
993
                             } else {
984
                             } else {
994
-                                console.error('无法找到有效的字段数据');
985
+                                //console.error('无法找到有效的字段数据');
995
                                 this.tableColumnsList = [];
986
                                 this.tableColumnsList = [];
996
                                 this.showToastMessage('获取字段列表失败', 'error');
987
                                 this.showToastMessage('获取字段列表失败', 'error');
997
                             }
988
                             }
@@ -1001,33 +992,6 @@
1001
                             this.showToastMessage('获取字段列表失败,请稍后重试', 'error');
992
                             this.showToastMessage('获取字段列表失败,请稍后重试', 'error');
1002
                             this.isColumnsLoading = false;
993
                             this.isColumnsLoading = false;
1003
                             
994
                             
1004
-                            // 模拟数据用于开发测试
1005
-                            if (tableName === 'users') {
1006
-                                this.tableColumnsList = [
1007
-                                    { name: 'id', type: 'int(11)', comment: '用户ID' },
1008
-                                    { name: 'username', type: 'varchar(50)', comment: '用户名' },
1009
-                                    { name: 'email', type: 'varchar(100)', comment: '电子邮箱' },
1010
-                                    { name: 'password', type: 'varchar(255)', comment: '密码' },
1011
-                                    { name: 'created_at', type: 'datetime', comment: '创建时间' },
1012
-                                    { name: 'status', type: 'tinyint(1)', comment: '状态' }
1013
-                                ];
1014
-                            } else if (tableName === 'products') {
1015
-                                this.tableColumnsList = [
1016
-                                    { name: 'id', type: 'int(11)', comment: '产品ID' },
1017
-                                    { name: 'name', type: 'varchar(100)', comment: '产品名称' },
1018
-                                    { name: 'price', type: 'decimal(10,2)', comment: '价格' },
1019
-                                    { name: 'category_id', type: 'int(11)', comment: '分类ID' },
1020
-                                    { name: 'stock', type: 'int(11)', comment: '库存' },
1021
-                                    { name: 'description', type: 'text', comment: '产品描述' }
1022
-                                ];
1023
-                            } else {
1024
-                                this.tableColumnsList = [
1025
-                                    { name: 'id', type: 'int(11)', comment: '主键ID' },
1026
-                                    { name: 'name', type: 'varchar(100)', comment: '名称' },
1027
-                                    { name: 'description', type: 'text', comment: '描述' },
1028
-                                    { name: 'created_at', type: 'datetime', comment: '创建时间' }
1029
-                                ];
1030
-                            }
1031
                         });
995
                         });
1032
                 },
996
                 },
1033
                 
997
                 
@@ -1142,21 +1106,78 @@
1142
                     this.queryExecuted = true;
1106
                     this.queryExecuted = true;
1143
                     this.currentPage = 1;
1107
                     this.currentPage = 1;
1144
                     
1108
                     
1145
-                    // 这里应该调用后端API执行SQL查询
1146
-                    fetch('/api/ExecuteSqlQuery', {
1147
-                        method: 'POST',
1109
+                    // 重置查询结果
1110
+                    this.queryResults = [];
1111
+                    this.tableColumns = [];
1112
+                    this.allResults = [];
1113
+                    this.totalPages = 1;
1114
+                    
1115
+                    console.log('执行SQL查询:', this.sqlQuery.trim());
1116
+                    
1117
+                    // 调用后端API执行SQL查询,使用RunKylx365DBSql接口
1118
+                    // 使用encodeURIComponent确保中文字符被正确编码
1119
+                    const encodedSql = encodeURIComponent(this.sqlQuery.trim());
1120
+                    const apiUrl = `/api/RunKylx365DBSql?sql=${encodedSql}`;
1121
+                    console.log('API URL:', apiUrl);
1122
+                    
1123
+                    fetch(apiUrl, {
1124
+                        method: 'GET',
1148
                         headers: {
1125
                         headers: {
1149
-                            'Content-Type': 'application/json'
1150
-                        },
1151
-                        body: JSON.stringify({
1152
-                            query: this.sqlQuery
1153
-                        })
1126
+                            'Accept': 'application/json'
1127
+                        }
1128
+                    })
1129
+                    .then(response => {
1130
+                        console.log('API响应状态:', response.status);
1131
+                        if (!response.ok) {
1132
+                            throw new Error(`HTTP error! status: ${response.status}`);
1133
+                        }
1134
+                        return response.json();
1154
                     })
1135
                     })
1155
-                    .then(response => response.json())
1156
                     .then(data => {
1136
                     .then(data => {
1157
-                        if (data && data.result) {
1158
-                            this.processQueryResults(data.result);
1137
+                        console.log('查询返回原始数据:', data); // 添加日志
1138
+                        
1139
+                        // 检查数据格式
1140
+                        let resultData = null;
1141
+                        let errorMessage = null;
1142
+                        
1143
+                        // 检查标准格式 {"errcode": 10000, result: [...]}
1144
+                        if (data && typeof data === 'object' && 'errcode' in data) {
1145
+                            console.log('检测到标准响应格式,errcode:', data.errcode);
1146
+                            
1147
+                            if (data.errcode !== 10000) {
1148
+                                errorMessage = data.errmsg || '查询返回错误';
1149
+                                console.error('查询返回错误:', errorMessage);
1150
+                            } else if (data.result && Array.isArray(data.result)) {
1151
+                                console.log('标准格式: data.result 是数组');
1152
+                                resultData = data.result;
1153
+                            }
1154
+                        } 
1155
+                        // 检查其他可能的格式
1156
+                        else if (data && Array.isArray(data)) {
1157
+                            console.log('替代格式: data 本身是数组');
1158
+                            resultData = data;
1159
+                        } else if (data && typeof data === 'object') {
1160
+                            console.log('检查对象中的数组属性');
1161
+                            // 尝试在对象中找到数组属性
1162
+                            for (const key in data) {
1163
+                                if (Array.isArray(data[key])) {
1164
+                                    console.log(`找到数组属性: ${key}`);
1165
+                                    resultData = data[key];
1166
+                                    break;
1167
+                                }
1168
+                            }
1169
+                        }
1170
+                        
1171
+                        if (errorMessage) {
1172
+                            this.showToastMessage(errorMessage, 'error');
1173
+                            this.queryResults = [];
1174
+                            this.tableColumns = [];
1175
+                        } else if (resultData && Array.isArray(resultData)) {
1176
+                            console.log('处理查询结果,数据长度:', resultData.length);
1177
+                            console.log('第一条记录:', JSON.stringify(resultData[0]));
1178
+                            this.processQueryResults(resultData);
1159
                         } else {
1179
                         } else {
1180
+                            console.log('未找到有效的查询结果数据');
1160
                             this.queryResults = [];
1181
                             this.queryResults = [];
1161
                             this.tableColumns = [];
1182
                             this.tableColumns = [];
1162
                             this.showToastMessage('查询未返回数据', 'info');
1183
                             this.showToastMessage('查询未返回数据', 'info');
@@ -1205,42 +1226,103 @@
1205
                 
1226
                 
1206
                 // 处理查询结果
1227
                 // 处理查询结果
1207
                 processQueryResults(results) {
1228
                 processQueryResults(results) {
1229
+                    console.log('进入processQueryResults方法,结果类型:', typeof results);
1230
+                    console.log('结果是否为数组:', Array.isArray(results));
1231
+                    console.log('结果长度:', results ? results.length : 0);
1232
+                    
1208
                     if (!results || !Array.isArray(results) || results.length === 0) {
1233
                     if (!results || !Array.isArray(results) || results.length === 0) {
1234
+                        console.log('结果为空或非数组');
1209
                         this.queryResults = [];
1235
                         this.queryResults = [];
1210
                         this.tableColumns = [];
1236
                         this.tableColumns = [];
1211
                         this.allResults = [];
1237
                         this.allResults = [];
1212
                         this.totalPages = 1;
1238
                         this.totalPages = 1;
1239
+                        this.showToastMessage('查询未返回数据', 'info');
1213
                         return;
1240
                         return;
1214
                     }
1241
                     }
1215
                     
1242
                     
1216
-                    // 存储所有结果
1217
-                    this.allResults = [...results];
1218
-                    
1219
-                    // 提取表格列
1220
-                    this.tableColumns = Object.keys(results[0]);
1243
+                    console.log('第一条记录:', JSON.stringify(results[0]));
1221
                     
1244
                     
1222
-                    // 计算总页数
1223
-                    this.totalPages = Math.ceil(results.length / this.pageSize);
1224
-                    
1225
-                    // 显示第一页数据
1226
-                    this.changePage(1);
1227
-                    
1228
-                    this.showToastMessage(`查询成功,返回 ${results.length} 条记录`, 'success');
1245
+                    try {
1246
+                        // 存储所有结果
1247
+                        this.allResults = [...results];
1248
+                        
1249
+                        // 提取表格列
1250
+                        this.tableColumns = Object.keys(results[0]);
1251
+                        console.log('提取的表格列:', this.tableColumns);
1252
+                        
1253
+                        // 计算总页数
1254
+                        this.totalPages = Math.ceil(results.length / this.pageSize);
1255
+                        console.log('计算的总页数:', this.totalPages);
1256
+                        
1257
+                        // 显示第一页数据
1258
+                        this.changePage(1);
1259
+                        
1260
+                        this.showToastMessage(`查询成功,返回 ${results.length} 条记录`, 'success');
1261
+                    } catch (error) {
1262
+                        console.error('处理查询结果时出错:', error);
1263
+                        this.showToastMessage('处理查询结果时出错: ' + error.message, 'error');
1264
+                        this.queryResults = [];
1265
+                        this.tableColumns = [];
1266
+                        this.allResults = [];
1267
+                        this.totalPages = 1;
1268
+                    }
1229
                 },
1269
                 },
1230
                 
1270
                 
1231
                 // 切换页面
1271
                 // 切换页面
1232
                 changePage(page) {
1272
                 changePage(page) {
1233
-                    if (page < 1 || page > this.totalPages || page === this.currentPage) {
1234
-                        return;
1273
+                    console.log('切换页面,目标页码:', page);
1274
+                    console.log('当前页码:', this.currentPage);
1275
+                    console.log('总页数:', this.totalPages);
1276
+                    console.log('所有结果数量:', this.allResults.length);
1277
+                    console.log('每页显示数量:', this.pageSize);
1278
+
1279
+                    try {
1280
+                        // 验证页码
1281
+                        if (page < 1 || page > this.totalPages) {
1282
+                            console.log('页码超出范围');
1283
+                            return;
1284
+                        }
1285
+
1286
+                        if (page === this.currentPage) {
1287
+                            console.log('已经在当前页面');
1288
+                            return;
1289
+                        }
1290
+
1291
+                        this.currentPage = page;
1292
+                        
1293
+                        // 计算当前页的数据
1294
+                        const startIndex = (page - 1) * this.pageSize;
1295
+                        const endIndex = Math.min(startIndex + this.pageSize, this.allResults.length);
1296
+                        
1297
+                        console.log('计算的起始索引:', startIndex);
1298
+                        console.log('计算的结束索引:', endIndex);
1299
+
1300
+                        // 确保数据是普通对象数组
1301
+                        const slicedData = this.allResults.slice(startIndex, endIndex);
1302
+                        this.queryResults = slicedData.map(item => {
1303
+                            // 确保每个属性都是基本类型
1304
+                            const plainItem = {};
1305
+                            Object.keys(item).forEach(key => {
1306
+                                plainItem[key] = item[key] !== null && item[key] !== undefined 
1307
+                                    ? String(item[key]) 
1308
+                                    : '';
1309
+                            });
1310
+                            return plainItem;
1311
+                        });
1312
+                        
1313
+                        console.log('当前页数据数量:', this.queryResults.length);
1314
+                        console.log('第一条记录:', JSON.stringify(this.queryResults[0]));
1315
+                        
1316
+                        // 强制Vue更新视图
1317
+                        this.$forceUpdate();
1318
+                    } catch (error) {
1319
+                        console.error('切换页面时出错:', error);
1320
+                        this.showToastMessage('切换页面时出错: ' + error.message, 'error');
1321
+                        // 重置为第一页
1322
+                        this.currentPage = 1;
1323
+                        this.queryResults = this.allResults.slice(0, this.pageSize);
1324
+                        this.$forceUpdate();
1235
                     }
1325
                     }
1236
-                    
1237
-                    this.currentPage = page;
1238
-                    
1239
-                    // 计算当前页的数据
1240
-                    const startIndex = (page - 1) * this.pageSize;
1241
-                    const endIndex = Math.min(startIndex + this.pageSize, this.allResults.length);
1242
-                    
1243
-                    this.queryResults = this.allResults.slice(startIndex, endIndex);
1244
                 },
1326
                 },
1245
                 
1327
                 
1246
                 // 显示提示消息
1328
                 // 显示提示消息