feat(auth): 统一数据库运维菜单路由并添加装置单位及监测点限值配置功能
- 统一数据库监控菜单路径到 /system-ops/dbms 入口 - 添加 isDbmsMenu 函数处理多种数据库菜单路径匹配 - 在动态路由中增加多个数据库监控路径的重定向规则 - 添加设备单位配置功能包括新增 EquipmentUnitForm 接口定义 - 添加监测点限值配置功能包括新增 OverlimitDetail 接口定义 - 在装置表单中添加单位配置按钮并集成单位调试功能 - 在监测点表单中添加限值配置按钮并集成限值调试功能 - 添加电压等级变更时的默认容量和变比同步逻辑 - 配置监测点表单中的线路类型选择选项 - 添加装置表单中比率输入组的高度紧凑样式 - 新增数据库运维静态路由配置和别名支持
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user