refactor: 代码优化与数据库表列显示配置优化

2025-11-04 00:10:25 +08:00 · 2024-05-09 21:29:34 +08:00
parent 1d0e91f1af
commit 4afeac5fdd
42 changed files with 509 additions and 381 deletions
--- a/mayfly_go_web/src/views/ops/component/TagTreeCheck.vue
+++ b/mayfly_go_web/src/views/ops/component/TagTreeCheck.vue
@@ -1,51 +1,53 @@
 <template>
-    <div class="w100" style="border: 1px solid var(--el-border-color)">
-        <el-input v-model="filterTag" clearable placeholder="输入关键字过滤" size="small" />
-        <el-scrollbar :style="{ height: props.height }">
-            <el-tree
-                v-bind="$attrs"
-                ref="tagTreeRef"
-                style="width: 100%"
-                :data="state.tags"
-                :default-expanded-keys="checkedTags"
-                :default-checked-keys="checkedTags"
-                multiple
-                :render-after-expand="true"
-                show-checkbox
-                check-strictly
-                :node-key="$props.nodeKey"
-                :props="{
-                    value: $props.nodeKey,
-                    label: 'codePath',
-                    children: 'children',
-                    disabled: 'disabled',
-                }"
-                @check="tagTreeNodeCheck"
-                :filter-node-method="filterNode"
-            >
-                <template #default="{ data }">
-                    <span class="custom-tree-node">
-                        <SvgIcon
-                            :name="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.icon"
-                            :color="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.iconColor"
-                        />
+    <div class="w100">
+        <el-input v-model="filterTag" @input="onFilterValChanged" clearable placeholder="输入关键字过滤" size="small" />
+        <div class="mt3" style="border: 1px solid var(--el-border-color)">
+            <el-scrollbar :style="{ height: props.height }">
+                <el-tree
+                    v-bind="$attrs"
+                    ref="tagTreeRef"
+                    style="width: 100%"
+                    :data="state.tags"
+                    :default-expanded-keys="checkedTags"
+                    :default-checked-keys="checkedTags"
+                    multiple
+                    :render-after-expand="true"
+                    show-checkbox
+                    check-strictly
+                    :node-key="$props.nodeKey"
+                    :props="{
+                        value: $props.nodeKey,
+                        label: 'codePath',
+                        children: 'children',
+                        disabled: 'disabled',
+                    }"
+                    @check="tagTreeNodeCheck"
+                    :filter-node-method="filterNode"
+                >
+                    <template #default="{ data }">
+                        <span class="custom-tree-node">
+                            <SvgIcon
+                                :name="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.icon"
+                                :color="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.iconColor"
+                            />

-                        <span class="font13 ml5">
-                            {{ data.code }}
-                            <span style="color: #3c8dbc">【</span>
-                            {{ data.name }}
-                            <span style="color: #3c8dbc">】</span>
-                            <el-tag v-if="data.children !== null" size="small">{{ data.children.length }} </el-tag>
+                            <span class="font13 ml5">
+                                {{ data.code }}
+                                <span style="color: #3c8dbc">【</span>
+                                {{ data.name }}
+                                <span style="color: #3c8dbc">】</span>
+                                <el-tag v-if="data.children !== null" size="small">{{ data.children.length }} </el-tag>
+                            </span>
                        </span>
-                    </span>
-                </template>
-            </el-tree>
-        </el-scrollbar>
+                    </template>
+                </el-tree>
+            </el-scrollbar>
+        </div>
    </div>
 </template>

 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { tagApi } from '../tag/api';
 import { TagResourceTypeEnum } from '@/common/commonEnum';
 import EnumValue from '@/common/Enum';
@@ -98,10 +100,6 @@ const search = async () => {
    }, 200);
 };

-watch(filterTag, (val) => {
-    tagTreeRef.value!.filter(val);
-});
-
 const filterNode = (value: string, data: any) => {
    if (!value) {
        return true;
@@ -109,6 +107,10 @@ const filterNode = (value: string, data: any) => {
    return data.codePath.toLowerCase().includes(value) || data.name.includes(value);
 };

+const onFilterValChanged = (val: string) => {
+    tagTreeRef.value!.filter(val);
+};
+
 const tagTreeNodeCheck = (data: any) => {
    const node = tagTreeRef.value.getNode(data.codePath);
    console.log('check node: ', node);
--- a/mayfly_go_web/src/views/ops/component/tag.ts
+++ b/mayfly_go_web/src/views/ops/component/tag.ts
@@ -199,3 +199,16 @@ export function getTagTypeCodeByPath(codePath: string) {

    return result;
 }
+
+export function expandCodePath(codePath: string) {
+    const parts = codePath.split('/');
+    const result = [];
+    let currentPath = '';
+
+    for (let i = 0; i < parts.length - 1; i++) {
+        currentPath += parts[i] + '/';
+        result.push(currentPath);
+    }
+
+    return result;
+}
--- a/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue
+++ b/mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue
@@ -13,14 +13,27 @@
                        title="表格字段配置"
                        trigger="click"
                    >
-                        <div v-for="(item, index) in columns" :key="index">
+                        <div><el-input v-model="checkedShowColumns.searchKey" size="small" placeholder="输入列名或备注过滤" /></div>
+                        <div>
                            <el-checkbox
-                                v-model="item.show"
-                                :label="`${!item.columnComment ? item.columnName : item.columnName + ' [' + item.columnComment + ']'}`"
-                                :true-value="true"
-                                :false-value="false"
+                                v-model="checkedShowColumns.checkedAllColumn"
+                                :indeterminate="checkedShowColumns.isIndeterminate"
+                                @change="handleCheckAllColumnChange"
                                size="small"
-                            />
+                            >
+                                选择所有
+                            </el-checkbox>
+
+                            <el-checkbox-group v-model="checkedShowColumns.columnNames" @change="handleCheckedColumnChange">
+                                <div v-for="(item, index) in filterCheckedColumns" :key="index">
+                                    <el-checkbox
+                                        :key="index"
+                                        :label="`${!item.columnComment ? item.columnName : item.columnName + ' [' + item.columnComment + ']'}`"
+                                        :value="item.columnName"
+                                        size="small"
+                                    />
+                                </div>
+                            </el-checkbox-group>
                        </div>
                        <template #reference>
                            <el-link icon="Operation" size="small" :underline="false"></el-link>
@@ -329,9 +342,17 @@ const state = reactive({
    tableHeight: '600px',
    hasUpdatedFileds: false,
    dbDialect: {} as DbDialect,
+
+    checkedShowColumns: {
+        searchKey: '',
+        checkedAllColumn: true,
+        isIndeterminate: false,
+        columnNames: [] as any,
+    },
 });

-const { datas, condition, loading, columns, pageNum, pageSize, pageSizes, sql, hasUpdatedFileds, conditionDialog, addDataDialog } = toRefs(state);
+const { datas, condition, loading, columns, checkedShowColumns, pageNum, pageSize, pageSizes, sql, hasUpdatedFileds, conditionDialog, addDataDialog } =
+    toRefs(state);

 watch(
    () => props.tableHeight,
@@ -351,6 +372,8 @@ onMounted(async () => {

    state.dbDialect = getNowDbInst().getDialect();
    useEventListener('click', handlerWindowClick);
+
+    state.checkedShowColumns.columnNames = state.columns.map((item: any) => item.columnName);
 });

 const handlerWindowClick = () => {
@@ -414,6 +437,7 @@ const handleSetPageNum = async () => {
    state.pageNum = state.setPageNum;
    await selectData();
 };
+
 const handleCount = async () => {
    state.counting = true;

@@ -431,6 +455,26 @@ const handleCount = async () => {
    state.counting = false;
 };

+const handleCheckAllColumnChange = (val: boolean) => {
+    state.checkedShowColumns.columnNames = val ? state.columns.map((x: any) => x.columnName) : [];
+    state.checkedShowColumns.isIndeterminate = false;
+    triggerCheckedColumns();
+};
+
+const handleCheckedColumnChange = (value: string[]) => {
+    const checkedCount = value.length;
+    state.checkedShowColumns.checkedAllColumn = checkedCount === state.columns.length;
+    state.checkedShowColumns.isIndeterminate = checkedCount > 0 && checkedCount < state.columns.length;
+    triggerCheckedColumns();
+};
+
+const triggerCheckedColumns = () => {
+    const checkedColumnNames = state.checkedShowColumns.columnNames;
+    for (let column of state.columns) {
+        column.show = checkedColumnNames.includes(column.columnName);
+    }
+};
+
 // 完整的条件,每次选中后会重置条件框内容，故需要这个变量在获取建议时将文本框内容保存
 let completeCond = '';
 // 是否存在列建议
@@ -490,16 +534,23 @@ const chooseCondColumnName = () => {
 * 过滤条件列名
 */
 const filterCondColumns = computed(() => {
+    return filterColumns(state.columnNameSearch);
+});
+
+const filterCheckedColumns = computed(() => {
+    return filterColumns(state.checkedShowColumns.searchKey);
+});
+
+const filterColumns = (searchKey: string) => {
    const columns = state.columns;
-    let columnNameSearch = state.columnNameSearch;
-    if (!columnNameSearch) {
+    if (!searchKey) {
        return columns;
    }
-    columnNameSearch = columnNameSearch.toLowerCase();
+    searchKey = searchKey.toLowerCase();
    return columns.filter((data: any) => {
-        return data.columnName.toLowerCase().includes(columnNameSearch) || data.columnComment.toLowerCase().includes(columnNameSearch);
+        return data.columnName.toLowerCase().includes(searchKey) || data.columnComment.toLowerCase().includes(searchKey);
    });
-});
+};

 /**
 * 条件查询，点击列信息后显示输入对应的值
--- a/mayfly_go_web/src/views/ops/tag/TagTreeList.vue
+++ b/mayfly_go_web/src/views/ops/tag/TagTreeList.vue
@@ -195,6 +195,9 @@ const contextmenuAdd = new ContextmenuItem('addTag', '添加子标签')
 const contextmenuEdit = new ContextmenuItem('edit', '编辑')
    .withIcon('edit')
    .withPermission('tag:save')
+    .withHideFunc((data: any) => {
+        return data.type != TagResourceTypeEnum.Tag.value;
+    })
    .withOnClick((data: any) => showEditTagDialog(data));

 const contextmenuDel = new ContextmenuItem('delete', '删除')
@@ -376,6 +379,11 @@ const search = async () => {
    state.data = res;
 };

+const getDetail = async (id: number) => {
+    const tags = await tagApi.listByQuery.request({ id });
+    return tags?.[0];
+};
+
 // 树节点右击事件
 const nodeContextmenu = (event: any, data: any) => {
    const { clientX, clientY } = event;
@@ -384,8 +392,8 @@ const nodeContextmenu = (event: any, data: any) => {
    contextmenuRef.value.openContextmenu(data);
 };

-const treeNodeClick = (data: any) => {
-    state.currentTag = data;
+const treeNodeClick = async (data: any) => {
+    state.currentTag = await getDetail(data.id);
    // 关闭可能存在的右击菜单
    contextmenuRef.value.closeContextmenu();
 };