fix: 概览界面实时数据展示
This commit is contained in:
ssongliu
@@ -1,57 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<Submenu activeName="mysql" />
|
||||
<AppStatus :app-key="'mysql'" style="margin-top: 20px" @setting="onSetting"></AppStatus>
|
||||
<Setting ref="settingRef"></Setting>
|
||||
<AppStatus :app-key="'mysql'" style="margin-top: 20px" @setting="onSetting" @is-exist="checkExist" />
|
||||
<div v-if="mysqlIsExist">
|
||||
<Setting ref="settingRef"></Setting>
|
||||
|
||||
<el-card v-if="!isOnSetting" style="margin-top: 5px">
|
||||
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button>phpMyAdmin</el-button>
|
||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column :label="$t('commons.table.name')" prop="name" />
|
||||
<el-table-column :label="$t('commons.login.username')" prop="username" />
|
||||
<el-table-column :label="$t('commons.login.password')" prop="password">
|
||||
<template #default="{ row }">
|
||||
<div v-if="!row.showPassword">
|
||||
<span style="float: left">***********</span>
|
||||
<div style="margin-top: 2px; cursor: pointer">
|
||||
<el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
|
||||
<View />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span style="float: left">{{ row.password }}</span>
|
||||
<div style="margin-top: 4px; cursor: pointer">
|
||||
<el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
|
||||
<Hide />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-card v-if="!isOnSetting" style="margin-top: 5px">
|
||||
<ComplexTable
|
||||
:pagination-config="paginationConfig"
|
||||
v-model:selects="selects"
|
||||
@search="search"
|
||||
:data="data"
|
||||
>
|
||||
<template #toolbar>
|
||||
<el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button>phpMyAdmin</el-button>
|
||||
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('commons.table.description')" prop="description" />
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
:label="$t('commons.table.date')"
|
||||
:formatter="dateFromat"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<fu-table-operations
|
||||
width="300px"
|
||||
:buttons="buttons"
|
||||
:ellipsis="10"
|
||||
:label="$t('commons.table.operate')"
|
||||
fix
|
||||
/>
|
||||
</ComplexTable>
|
||||
</el-card>
|
||||
<el-table-column type="selection" fix />
|
||||
<el-table-column :label="$t('commons.table.name')" prop="name" />
|
||||
<el-table-column :label="$t('commons.login.username')" prop="username" />
|
||||
<el-table-column :label="$t('commons.login.password')" prop="password">
|
||||
<template #default="{ row }">
|
||||
<div v-if="!row.showPassword">
|
||||
<span style="float: left">***********</span>
|
||||
<div style="margin-top: 2px; cursor: pointer">
|
||||
<el-icon style="margin-left: 5px" @click="row.showPassword = true" :size="16">
|
||||
<View />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span style="float: left">{{ row.password }}</span>
|
||||
<div style="margin-top: 4px; cursor: pointer">
|
||||
<el-icon style="margin-left: 5px" @click="row.showPassword = false" :size="16">
|
||||
<Hide />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('commons.table.description')" prop="description" />
|
||||
<el-table-column
|
||||
prop="createdAt"
|
||||
:label="$t('commons.table.date')"
|
||||
:formatter="dateFromat"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<fu-table-operations
|
||||
width="300px"
|
||||
:buttons="buttons"
|
||||
:ellipsis="10"
|
||||
:label="$t('commons.table.operate')"
|
||||
fix
|
||||
/>
|
||||
</ComplexTable>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-dialog v-model="changeVisiable" :destroy-on-close="true" width="30%">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
@@ -122,6 +129,7 @@ import { useDeleteData } from '@/hooks/use-delete-data';
|
||||
import { ElForm, ElMessage } from 'element-plus';
|
||||
import { Database } from '@/api/interface/database';
|
||||
import { Rules } from '@/global/form-rules';
|
||||
import { App } from '@/api/interface/app';
|
||||
|
||||
const selects = ref<any>([]);
|
||||
const mysqlInfo = reactive({
|
||||
@@ -138,6 +146,8 @@ const paginationConfig = reactive({
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const mysqlIsExist = ref(false);
|
||||
|
||||
const dialogRef = ref();
|
||||
const onOpenDialog = async () => {
|
||||
let params = {
|
||||
@@ -202,6 +212,10 @@ const search = async () => {
|
||||
paginationConfig.total = res.data.total;
|
||||
};
|
||||
|
||||
const checkExist = (data: App.CheckInstalled) => {
|
||||
mysqlIsExist.value = data.isExist;
|
||||
};
|
||||
|
||||
const onBatchDelete = async (row: Database.MysqlDBInfo | null) => {
|
||||
let ids: Array<number> = [];
|
||||
if (row) {
|
||||
|
||||
Reference in New Issue
Block a user