feat: 数据查询完善-支持直接选择列输入值过滤数据

2025-11-03 16:00:25 +08:00 · 2022-04-24 20:26:58 +08:00
parent 41c660894c
commit 6fe892ca9f
6 changed files with 71 additions and 14 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -12,7 +12,7 @@
    "countup.js": "^2.0.7",
    "cropperjs": "^1.5.11",
    "echarts": "^5.1.1",
-    "element-plus": "^2.1.4",
+    "element-plus": "^2.1.10",
    "@element-plus/icons-vue": "^1.1.3",
    "jsonlint": "^1.6.3",
    "lodash": "^4.17.21",
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -139,8 +139,29 @@
                        </el-tooltip>
                    </el-row>
                    <el-row class="mt5">
-                        <el-input v-model="dt.condition" placeholder="若需条件过滤，输入WHERE之后查询条件点击查询按钮即可" clearable size="small">
+                        <el-input v-model="dt.condition" placeholder="若需条件过滤，可选择列并点击对应的字段并输入需要过滤的内容点击查询按钮即可" clearable size="small">
                            <template #prepend>
+                                <el-popover trigger="click" :width="270" placement="right">
+                                    <template #reference>
+                                        <el-link type="success" :underline="false">选择列</el-link>
+                                    </template>
+                                    <el-table
+                                        :data="getColumns4Map(dt.name)"
+                                        max-height="500"
+                                        size="small"
+                                        @row-click="
+                                            (...event) => {
+                                                onConditionRowClick(event, dt);
+                                            }
+                                        "
+                                    >
+                                        <el-table-column property="columnName" label="列名" show-overflow-tooltip> </el-table-column>
+                                        <el-table-column property="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
+                                    </el-table>
+                                </el-popover>
+                            </template>
+
+                            <template #append>
                                <el-button @click="selectByCondition(dt.name, dt.condition)" icon="search" size="small"></el-button>
                            </template>
                        </el-input>
@@ -296,16 +317,16 @@ export default defineComponent({
                // 将sql提示去除
                changeObj.text[0] = text.split('  ')[0];
            });
-            
        };

        onMounted(() => {
            initCodemirror();
            setHeight();
            // 监听浏览器窗口大小变化,更新对应组件高度
-            window.onresize = () => (() => {
-                setHeight();
-            })();
+            window.onresize = () =>
+                (() => {
+                    setHeight();
+                })();
        });

        /**
@@ -315,7 +336,7 @@ export default defineComponent({
            // 默认300px
            codemirror.setSize('auto', `${window.innerHeight - 538}px`);
            state.dataTabsTableHeight = window.innerHeight - 258;
-        }
+        };

        /**
         * 项目及环境更改后的回调事件
@@ -498,7 +519,7 @@ export default defineComponent({

        const getColumnTip = (tableName: string, columnName: string) => {
            // 优先从 table map中获取
-            let columns = tableMap.get(tableName);
+            let columns = getColumns4Map(tableName);
            if (!columns) {
                return '';
            }
@@ -604,7 +625,7 @@ export default defineComponent({
         */
        const getColumns = async (tableName: string) => {
            // 优先从 table map中获取
-            let columns = tableMap.get(tableName);
+            let columns = getColumns4Map(tableName);
            if (columns) {
                return columns;
            }
@@ -616,6 +637,35 @@ export default defineComponent({
            return columns;
        };

+        // 从缓存map获取列信息
+        const getColumns4Map = (tableName: string) => {
+            return tableMap.get(tableName);
+        };
+
+        /**
+         * 条件查询，点击列信息后显示输入对应的值
+         */
+        const onConditionRowClick = (event: any, dataTab: any) => {
+            const row = event[0];
+            ElMessageBox.prompt(`请输入 [${row.columnName}] 的值`, '查询条件', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputPlaceholder: `${row.columnType}  ${row.columnComment}`,
+            })
+                .then(({ value }) => {
+                    if (!value) {
+                        value = '';
+                    }
+                    let condition = dataTab.condition;
+                    if (condition) {
+                        condition += ` AND `;
+                    }
+                    condition += `${row.columnName} = `;
+                    dataTab.condition = condition + wrapColumnValue(row, value);
+                })
+                .catch(() => {});
+        };
+
        const onRefresh = async (tableName: string) => {
            // 查询条件置空
            state.dataTabs[tableName].condition = '';
@@ -936,6 +986,8 @@ export default defineComponent({
            execSqlFileSuccess,
            flexColumnWidth,
            getColumnTip,
+            getColumns4Map,
+            onConditionRowClick,
            changeSqlTemplate,
            deleteSql,
            saveSql,
--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -22,7 +22,8 @@
                    <el-select v-model="params.projectId" placeholder="请选择项目" @clear="search" filterable clearable>
                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
                    </el-select>
-                    <el-input class="ml5" placeholder="请输入ip" style="width: 200px" v-model="params.ip" @clear="search" plain clearable></el-input>
+                    <el-input class="ml5" placeholder="请输入名称" style="width: 150px" v-model="params.name" @clear="search" plain clearable></el-input>
+                    <el-input class="ml5" placeholder="请输入ip" style="width: 150px" v-model="params.ip" @clear="search" plain clearable></el-input>
                    <el-button class="ml5" @click="search" type="success" icon="search"></el-button>
                </div>
            </div>
@@ -122,8 +123,8 @@ export default defineComponent({
            params: {
                pageNum: 1,
                pageSize: 10,
-                host: null,
-                clusterId: null,
+                ip: null,
+                name: null,
            },
            // 列表数据
            data: {