|
|
@@ -8,27 +8,20 @@
|
|
8
|
8
|
<script src="https://kylx365-1253256735.file.myqcloud.com/js/jquery-1.10.2.min.js"></script>
|
|
9
|
9
|
<script src="https://kylx365-1253256735.file.myqcloud.com/js/vue.min.js"></script>
|
|
10
|
10
|
<style>
|
|
11
|
|
- /* 添加表格注释提示样式 */
|
|
|
11
|
+ /* 表格项样式 */
|
|
12
|
12
|
.table-item {
|
|
13
|
|
- position: relative;
|
|
|
13
|
+ padding: 10px;
|
|
|
14
|
+ margin: 5px 0;
|
|
|
15
|
+ background: white;
|
|
|
16
|
+ border-radius: 4px;
|
|
|
17
|
+ cursor: pointer;
|
|
|
18
|
+ transition: background-color 0.2s;
|
|
14
|
19
|
}
|
|
15
|
|
-
|
|
|
20
|
+
|
|
16
|
21
|
.table-comment {
|
|
17
|
|
- display: none;
|
|
18
|
|
- position: absolute;
|
|
19
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
20
|
|
- color: white;
|
|
21
|
|
- padding: 5px 10px;
|
|
22
|
|
- border-radius: 4px;
|
|
23
|
22
|
font-size: 12px;
|
|
24
|
|
- z-index: 100;
|
|
25
|
|
- top: -30px;
|
|
26
|
|
- left: 0;
|
|
27
|
|
- white-space: nowrap;
|
|
28
|
|
- }
|
|
29
|
|
-
|
|
30
|
|
- .table-item:hover .table-comment {
|
|
31
|
|
- display: block;
|
|
|
23
|
+ color: #999;
|
|
|
24
|
+ margin-top: 2px;
|
|
32
|
25
|
}
|
|
33
|
26
|
.main00 {
|
|
34
|
27
|
width: 100%;
|
|
|
@@ -500,8 +493,8 @@
|
|
500
|
493
|
:key="index"
|
|
501
|
494
|
@click="selectTable(table)"
|
|
502
|
495
|
:class="['table-item', { active: selectedTable === table }]">
|
|
|
496
|
+ <div class="table-name">{{ table }}</div>
|
|
503
|
497
|
<div class="table-comment" v-if="tableComments[table]">{{ tableComments[table] }}</div>
|
|
504
|
|
- <div>{{ table }}</div>
|
|
505
|
498
|
</div>
|
|
506
|
499
|
<div v-if="filteredTables.length === 0" class="no-data">
|
|
507
|
500
|
没有匹配的表格
|
|
|
@@ -683,25 +676,25 @@
|
|
683
|
676
|
return response.json();
|
|
684
|
677
|
})
|
|
685
|
678
|
.then(data => {
|
|
686
|
|
- console.log('API返回数据:', data);
|
|
|
679
|
+ //console.log('API返回数据:', data);
|
|
687
|
680
|
// 检查数据格式,处理可能的不同响应结构
|
|
688
|
|
- console.log('检查数据格式:', data);
|
|
|
681
|
+ //console.log('检查数据格式:', data);
|
|
689
|
682
|
|
|
690
|
683
|
// 尝试确定数据的实际结构
|
|
691
|
684
|
let resultData = null;
|
|
692
|
685
|
|
|
693
|
686
|
if (data && data.result && Array.isArray(data.result)) {
|
|
694
|
|
- console.log('标准格式: data.result 是数组');
|
|
|
687
|
+ //console.log('标准格式: data.result 是数组');
|
|
695
|
688
|
resultData = data.result;
|
|
696
|
689
|
} else if (data && Array.isArray(data)) {
|
|
697
|
|
- console.log('替代格式: data 本身是数组');
|
|
|
690
|
+ //console.log('替代格式: data 本身是数组');
|
|
698
|
691
|
resultData = data;
|
|
699
|
692
|
} else if (data && typeof data === 'object') {
|
|
700
|
|
- console.log('检查对象中的数组属性');
|
|
|
693
|
+ //console.log('检查对象中的数组属性');
|
|
701
|
694
|
// 尝试在对象中找到数组属性
|
|
702
|
695
|
for (const key in data) {
|
|
703
|
696
|
if (Array.isArray(data[key])) {
|
|
704
|
|
- console.log(`找到数组属性: ${key}`);
|
|
|
697
|
+ //console.log(`找到数组属性: ${key}`);
|
|
705
|
698
|
resultData = data[key];
|
|
706
|
699
|
break;
|
|
707
|
700
|
}
|
|
|
@@ -709,12 +702,12 @@
|
|
709
|
702
|
}
|
|
710
|
703
|
|
|
711
|
704
|
if (resultData && Array.isArray(resultData)) {
|
|
712
|
|
- console.log('数据验证通过,开始处理数据');
|
|
713
|
|
- console.log('数据结果长度:', resultData.length);
|
|
|
705
|
+ //console.log('数据验证通过,开始处理数据');
|
|
|
706
|
+ //console.log('数据结果长度:', resultData.length);
|
|
714
|
707
|
|
|
715
|
708
|
if (resultData.length > 0 && typeof resultData[0] === 'object' && !Array.isArray(resultData[0])) {
|
|
716
|
|
- console.log('检测到对象数组格式,第一个对象:', resultData[0]);
|
|
717
|
|
- console.log('第一个对象的属性:', Object.keys(resultData[0]));
|
|
|
709
|
+ //console.log('检测到对象数组格式,第一个对象:', resultData[0]);
|
|
|
710
|
+ //console.log('第一个对象的属性:', Object.keys(resultData[0]));
|
|
718
|
711
|
|
|
719
|
712
|
// 检查并适应不同的属性名称
|
|
720
|
713
|
const firstItem = resultData[0];
|
|
|
@@ -726,17 +719,17 @@
|
|
726
|
719
|
'tableComment' in firstItem ? 'tableComment' :
|
|
727
|
720
|
'comment' in firstItem ? 'comment' : null;
|
|
728
|
721
|
|
|
729
|
|
- console.log('使用的属性名:', { tableNameKey, tableCommentKey });
|
|
|
722
|
+ //console.log('使用的属性名:', { tableNameKey, tableCommentKey });
|
|
730
|
723
|
|
|
731
|
724
|
if (tableNameKey) {
|
|
732
|
725
|
// 如果返回的是对象数组(包含name和comment)
|
|
733
|
726
|
this.tables = resultData.map(item => {
|
|
734
|
727
|
const tableName = item[tableNameKey] || '';
|
|
735
|
|
- console.log('处理表名:', tableName);
|
|
|
728
|
+ //console.log('处理表名:', tableName);
|
|
736
|
729
|
return tableName;
|
|
737
|
730
|
}).filter(name => name); // 过滤掉空表名
|
|
738
|
731
|
|
|
739
|
|
- console.log('处理后的表格列表:', this.tables);
|
|
|
732
|
+ //console.log('处理后的表格列表:', this.tables);
|
|
740
|
733
|
|
|
741
|
734
|
// 存储表格注释
|
|
742
|
735
|
if (tableCommentKey) {
|
|
|
@@ -748,24 +741,24 @@
|
|
748
|
741
|
}
|
|
749
|
742
|
});
|
|
750
|
743
|
|
|
751
|
|
- console.log('处理后的表格注释:', this.tableComments);
|
|
|
744
|
+ //console.log('处理后的表格注释:', this.tableComments);
|
|
752
|
745
|
}
|
|
753
|
746
|
} else {
|
|
754
|
|
- console.error('无法找到表名属性');
|
|
|
747
|
+ //console.error('无法找到表名属性');
|
|
755
|
748
|
this.showToastMessage('数据格式错误:无法找到表名属性', 'error');
|
|
756
|
749
|
}
|
|
757
|
750
|
} else {
|
|
758
|
|
- console.log('检测到简单数组格式');
|
|
|
751
|
+ //console.log('检测到简单数组格式');
|
|
759
|
752
|
// 如果返回的只是表名数组
|
|
760
|
753
|
this.tables = resultData.filter(name => {
|
|
761
|
|
- console.log('处理表名:', name);
|
|
|
754
|
+ //console.log('处理表名:', name);
|
|
762
|
755
|
return name && typeof name === 'string';
|
|
763
|
756
|
});
|
|
764
|
|
- console.log('处理后的表格列表:', this.tables);
|
|
|
757
|
+ //console.log('处理后的表格列表:', this.tables);
|
|
765
|
758
|
}
|
|
766
|
759
|
|
|
767
|
760
|
this.filteredTables = [...this.tables];
|
|
768
|
|
- console.log('更新后的过滤表格列表:', this.filteredTables);
|
|
|
761
|
+ // console.log('更新后的过滤表格列表:', this.filteredTables);
|
|
769
|
762
|
} else {
|
|
770
|
763
|
this.tables = [];
|
|
771
|
764
|
this.filteredTables = [];
|
|
|
@@ -774,13 +767,13 @@
|
|
774
|
767
|
this.isTablesLoading = false;
|
|
775
|
768
|
})
|
|
776
|
769
|
.catch(error => {
|
|
777
|
|
- console.error('获取表格列表失败详细错误:', error);
|
|
|
770
|
+ //console.error('获取表格列表失败详细错误:', error);
|
|
778
|
771
|
this.showToastMessage(`获取表格列表失败: ${error.message}`, 'error');
|
|
779
|
772
|
this.isTablesLoading = false;
|
|
780
|
773
|
|
|
781
|
774
|
// 检查是否在本地环境
|
|
782
|
775
|
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
|
783
|
|
- console.log('在本地环境中使用模拟数据');
|
|
|
776
|
+ //console.log('在本地环境中使用模拟数据');
|
|
784
|
777
|
// 模拟数据用于开发测试
|
|
785
|
778
|
this.tables = [
|
|
786
|
779
|
'users', 'products', 'orders', 'categories',
|
|
|
@@ -804,30 +797,30 @@
|
|
804
|
797
|
|
|
805
|
798
|
// 搜索表格
|
|
806
|
799
|
searchTables() {
|
|
807
|
|
- console.log('开始搜索表格,搜索文本:', this.searchText);
|
|
|
800
|
+ //console.log('开始搜索表格,搜索文本:', this.searchText);
|
|
808
|
801
|
|
|
809
|
802
|
if (!this.searchText.trim()) {
|
|
810
|
|
- console.log('搜索文本为空,显示所有表格');
|
|
|
803
|
+ //console.log('搜索文本为空,显示所有表格');
|
|
811
|
804
|
this.filteredTables = [...this.tables];
|
|
812
|
805
|
return;
|
|
813
|
806
|
}
|
|
814
|
807
|
|
|
815
|
808
|
const searchTerm = this.searchText.toLowerCase();
|
|
816
|
|
- console.log('过滤表格列表,搜索条件:', searchTerm);
|
|
|
809
|
+ //console.log('过滤表格列表,搜索条件:', searchTerm);
|
|
817
|
810
|
|
|
818
|
811
|
this.filteredTables = this.tables.filter(table => {
|
|
819
|
812
|
const tableName = table.toLowerCase();
|
|
820
|
813
|
const tableComment = (this.tableComments[table] || '').toLowerCase();
|
|
821
|
814
|
const matches = tableName.includes(searchTerm) || tableComment.includes(searchTerm);
|
|
822
|
815
|
|
|
823
|
|
- if (matches) {
|
|
824
|
|
- console.log(`表格匹配: ${table} (${this.tableComments[table] || '无注释'})`);
|
|
825
|
|
- }
|
|
|
816
|
+ // if (matches) {
|
|
|
817
|
+ // console.log(`表格匹配: ${table} (${this.tableComments[table] || '无注释'})`);
|
|
|
818
|
+ // }
|
|
826
|
819
|
|
|
827
|
820
|
return matches;
|
|
828
|
821
|
});
|
|
829
|
822
|
|
|
830
|
|
- console.log('过滤后的表格数量:', this.filteredTables.length);
|
|
|
823
|
+ //console.log('过滤后的表格数量:', this.filteredTables.length);
|
|
831
|
824
|
},
|
|
832
|
825
|
|
|
833
|
826
|
// 清空搜索
|
|
|
@@ -906,6 +899,11 @@
|
|
906
|
899
|
'columnType' in firstItem ? 'columnType' :
|
|
907
|
900
|
'data_type' in firstItem ? 'data_type' : null;
|
|
908
|
901
|
|
|
|
902
|
+ const commentKey = 'Comment' in firstItem ? 'Comment' :
|
|
|
903
|
+ 'comment' in firstItem ? 'comment' :
|
|
|
904
|
+ 'column_comment' in firstItem ? 'column_comment' :
|
|
|
905
|
+ 'columnComment' in firstItem ? 'columnComment' : null;
|
|
|
906
|
+
|
|
909
|
907
|
// 组合Default和Extra作为注释
|
|
910
|
908
|
const getComment = (item) => {
|
|
911
|
909
|
let comment = [];
|
|
|
@@ -929,7 +927,10 @@
|
|
929
|
927
|
return {
|
|
930
|
928
|
name: item[nameKey] || '',
|
|
931
|
929
|
type: typeKey ? (item[typeKey] || '') : '',
|
|
932
|
|
- comment: commentKey ? (item[commentKey] || '') : ''
|
|
|
930
|
+ comment: [
|
|
|
931
|
+ commentKey ? (item[commentKey] || '') : '',
|
|
|
932
|
+ getComment(item)
|
|
|
933
|
+ ].filter(Boolean).join(' | ')
|
|
933
|
934
|
};
|
|
934
|
935
|
}).filter(col => col.name); // 过滤掉没有名称的列
|
|
935
|
936
|
|