CN_Tool_client/frontend/src/views/system-ops/dbms/components/DbmsOperationTable.vue

<template>
    <section class="table-main card dbms-connection-card">
        <div class="table-header">
            <div class="header-button-lf">
                <el-button type="primary" :icon="CirclePlus" @click="emit('add')">新增连接</el-button>
                <el-button type="primary" plain :icon="Connection" :disabled="!selectedRow" @click="handleTestSelected">
                    测试连接
                </el-button>
                <el-button type="danger" plain :icon="Delete" :disabled="!selectedRow" @click="handleDeleteSelected">
                    删除连接
                </el-button>
            </div>

            <div class="header-button-ri">
                <el-input
                    v-model="localQuery.connectionName"
                    class="query-input"
                    placeholder="连接名称"
                    clearable
                    @keyup.enter="emitQuery"
                    @clear="emitQuery"
                />
                <el-input
                    v-model="localQuery.schemaName"
                    class="query-input"
                    placeholder="Schema"
                    clearable
                    @keyup.enter="emitQuery"
                    @clear="emitQuery"
                />
                <el-button :icon="Search" @click="emitQuery">查询</el-button>
                <el-button circle :icon="Refresh" @click="emit('refresh')" />
            </div>
        </div>

        <div class="table-body">
            <el-table
                :data="rows"
                border
                stripe
                height="100%"
                highlight-current-row
                v-loading="loading"
                @current-change="handleCurrentChange"
                @row-dblclick="row => emit('edit', row)"
            >
                <el-table-column prop="connectionName" label="连接名称" min-width="150" fixed="left" show-overflow-tooltip />
                <el-table-column prop="host" label="主机" min-width="140" show-overflow-tooltip />
                <el-table-column prop="port" label="端口" width="90" align="center" />
                <el-table-column prop="connectType" label="连接类型" min-width="120" align="center" />
                <el-table-column prop="schemaName" label="Schema" min-width="120" show-overflow-tooltip />
                <el-table-column prop="username" label="用户名" min-width="120" show-overflow-tooltip />
                <el-table-column prop="directoryName" label="Directory" min-width="140" show-overflow-tooltip />
                <el-table-column label="保存密码" width="100" align="center">
                    <template #default="{ row }">
                        <el-tag :type="row.savePassword === 1 ? 'success' : 'info'" effect="light">
                            {{ row.savePassword === 1 ? '是' : '否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="测试状态" width="110" align="center">
                    <template #default="{ row }">
                        <el-tag :type="getConnectionStatusMeta(row.lastTestStatus).type" effect="light">
                            {{ getConnectionStatusMeta(row.lastTestStatus).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="lastTestMessage" label="测试消息" min-width="180" show-overflow-tooltip />
                <el-table-column label="操作" width="180" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button type="primary" link :icon="EditPen" @click="emit('edit', row)">编辑</el-button>
                        <el-button type="primary" link :icon="Connection" @click="emit('test', row)">测试</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="table-footer">
            <el-pagination
                background
                layout="total, prev, pager, next, sizes"
                :total="total"
                :page-size="pageSize"
                :current-page="pageNum"
                @current-change="page => emit('page-change', page)"
                @size-change="size => emit('size-change', size)"
            />
        </div>
    </section>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { CirclePlus, Connection, Delete, EditPen, Refresh, Search } from '@element-plus/icons-vue'
import type { Dbms } from '@/api/system/dbms/interface'
import { getConnectionStatusMeta } from '../utils/normalize'
import type { DbmsConnectionQuery } from './types'

defineOptions({
    name: 'DbmsOperationTable'
})

const props = defineProps<{
    rows: Dbms.ConnectionRecord[]
    query: DbmsConnectionQuery
    loading: boolean
    total: number
    pageNum: number
    pageSize: number
}>()

const emit = defineEmits<{
    add: []
    edit: [row: Dbms.ConnectionRecord]
    delete: [row: Dbms.ConnectionRecord]
    test: [row: Dbms.ConnectionRecord]
    select: [row: Dbms.ConnectionRecord | null]
    refresh: []
    search: [query: DbmsConnectionQuery]
    'page-change': [page: number]
    'size-change': [size: number]
}>()

const selectedRow = ref<Dbms.ConnectionRecord | null>(null)
const localQuery = reactive<DbmsConnectionQuery>({
    connectionName: props.query.connectionName,
    schemaName: props.query.schemaName
})

watch(
    () => props.query,
    query => {
        localQuery.connectionName = query.connectionName
        localQuery.schemaName = query.schemaName
    },
    { deep: true }
)

const emitQuery = () => {
    emit('search', {
        connectionName: localQuery.connectionName,
        schemaName: localQuery.schemaName
    })
}

const handleCurrentChange = (row?: Dbms.ConnectionRecord) => {
    selectedRow.value = row || null
    emit('select', selectedRow.value)
}

const handleTestSelected = () => {
    if (selectedRow.value) emit('test', selectedRow.value)
}

const handleDeleteSelected = () => {
    if (selectedRow.value) emit('delete', selectedRow.value)
}
</script>

<style scoped lang="scss">
.dbms-connection-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
}

.header-button-lf,
.header-button-ri {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.query-input {
    width: 150px;
}

.table-body {
    display: flex;
    flex: 1;
    min-height: 0;
    margin-top: 12px;
    overflow: hidden;
}

.table-footer {
    display: flex;
    justify-content: flex-end;
    flex: none;
    padding-top: 12px;
}

@media (max-width: 1280px) {
    .table-header {
        align-items: stretch;
        flex-direction: column;
    }

    .header-button-ri {
        flex-wrap: wrap;
    }
}
</style>