fix: 优化抽屉中操作对象的名称显示 (#982)

This commit is contained in:
ssongliu
2023-05-10 14:34:19 +08:00
committed by GitHub
parent 81c56a740c
commit 5101dace59
12 changed files with 41 additions and 24 deletions

View File

@@ -269,6 +269,7 @@ const onComposeOperate = async (operation: string) => {
name: composeName.value, name: composeName.value,
path: composePath.value, path: composePath.value,
operation: operation, operation: operation,
withFile: false,
}; };
loading.value = true; loading.value = true;
await composeOperator(params) await composeOperator(params)
@@ -288,13 +289,13 @@ const onComposeOperate = async (operation: string) => {
}; };
const dialogMonitorRef = ref(); const dialogMonitorRef = ref();
const onMonitor = (containerID: string) => { const onMonitor = (row: any) => {
dialogMonitorRef.value!.acceptParams({ containerID: containerID }); dialogMonitorRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
}; };
const dialogTerminalRef = ref(); const dialogTerminalRef = ref();
const onTerminal = (containerID: string) => { const onTerminal = (row: any) => {
dialogTerminalRef.value!.acceptParams({ containerID: containerID }); dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
}; };
const dialogContainerLogRef = ref(); const dialogContainerLogRef = ref();
@@ -306,7 +307,7 @@ const buttons = [
return row.state !== 'running'; return row.state !== 'running';
}, },
click: (row: Container.ContainerInfo) => { click: (row: Container.ContainerInfo) => {
onTerminal(row.containerID); onTerminal(row);
}, },
}, },
{ {
@@ -315,13 +316,13 @@ const buttons = [
return row.state !== 'running'; return row.state !== 'running';
}, },
click: (row: Container.ContainerInfo) => { click: (row: Container.ContainerInfo) => {
onMonitor(row.containerID); onMonitor(row);
}, },
}, },
{ {
label: i18n.global.t('commons.button.log'), label: i18n.global.t('commons.button.log'),
click: (row: Container.ContainerInfo) => { click: (row: Container.ContainerInfo) => {
dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID }); dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
}, },
}, },
]; ];

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-drawer v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<DrawerHeader :header="$t('commons.button.edit')" :back="handleClose" /> <DrawerHeader :header="$t('commons.button.edit')" :resource="name" :back="handleClose" />
</template> </template>
<div v-loading="loading"> <div v-loading="loading">
<codemirror <codemirror

View File

@@ -215,13 +215,13 @@ const onCreate = () => {
}; };
const dialogMonitorRef = ref(); const dialogMonitorRef = ref();
const onMonitor = (containerID: string) => { const onMonitor = (row: any) => {
dialogMonitorRef.value!.acceptParams({ containerID: containerID }); dialogMonitorRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
}; };
const dialogTerminalRef = ref(); const dialogTerminalRef = ref();
const onTerminal = (containerID: string) => { const onTerminal = (row: any) => {
dialogTerminalRef.value!.acceptParams({ containerID: containerID }); dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
}; };
const onInspect = async (id: string) => { const onInspect = async (id: string) => {
@@ -312,7 +312,7 @@ const buttons = [
return row.state !== 'running'; return row.state !== 'running';
}, },
click: (row: Container.ContainerInfo) => { click: (row: Container.ContainerInfo) => {
onTerminal(row.containerID); onTerminal(row);
}, },
}, },
{ {
@@ -321,7 +321,7 @@ const buttons = [
return row.state !== 'running'; return row.state !== 'running';
}, },
click: (row: Container.ContainerInfo) => { click: (row: Container.ContainerInfo) => {
onMonitor(row.containerID); onMonitor(row);
}, },
}, },
{ {

View File

@@ -2,7 +2,7 @@
<div> <div>
<el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<DrawerHeader :header="$t('commons.button.log')" :back="handleClose" /> <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose" />
</template> </template>
<div> <div>
<el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode"> <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">

View File

@@ -7,7 +7,7 @@
size="50%" size="50%"
> >
<template #header> <template #header>
<DrawerHeader :header="$t('container.monitor')" :back="handleClose" /> <DrawerHeader :header="$t('container.monitor')" :resource="title" :back="handleClose" />
</template> </template>
<el-form label-position="top" @submit.prevent> <el-form label-position="top" @submit.prevent>
<el-form-item :label="$t('container.refreshTime')"> <el-form-item :label="$t('container.refreshTime')">
@@ -68,20 +68,24 @@ import VCharts from '@/components/v-charts/index.vue';
import i18n from '@/lang'; import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue'; import DrawerHeader from '@/components/drawer-header/index.vue';
const title = ref();
const monitorVisiable = ref(false); const monitorVisiable = ref(false);
const timeInterval = ref(); const timeInterval = ref();
let timer: NodeJS.Timer | null = null; let timer: NodeJS.Timer | null = null;
let isInit = ref<boolean>(true); let isInit = ref<boolean>(true);
interface DialogProps { interface DialogProps {
containerID: string; containerID: string;
container: string;
} }
const dialogData = ref<DialogProps>({ const dialogData = ref<DialogProps>({
containerID: '', containerID: '',
container: '',
}); });
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
monitorVisiable.value = true; monitorVisiable.value = true;
dialogData.value.containerID = params.containerID; dialogData.value.containerID = params.containerID;
title.value = params.container;
cpuDatas.value = []; cpuDatas.value = [];
memDatas.value = []; memDatas.value = [];
cacheDatas.value = []; cacheDatas.value = [];

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-drawer v-model="newNameVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%"> <el-drawer v-model="newNameVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
<template #header> <template #header>
<DrawerHeader :header="$t('container.rename')" :back="handleClose" /> <DrawerHeader :header="$t('container.rename')" :resource="renameForm.name" :back="handleClose" />
</template> </template>
<el-form @submit.prevent ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top"> <el-form @submit.prevent ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top">
<el-row type="flex" justify="center"> <el-row type="flex" justify="center">

View File

@@ -7,7 +7,7 @@
size="50%" size="50%"
> >
<template #header> <template #header>
<DrawerHeader :header="$t('container.containerTerminal')" :back="handleClose" /> <DrawerHeader :header="$t('container.containerTerminal')" :resource="title" :back="handleClose" />
</template> </template>
<el-form ref="formRef" :model="form" label-position="top"> <el-form ref="formRef" :model="form" label-position="top">
<el-form-item :label="$t('container.user')" prop="user"> <el-form-item :label="$t('container.user')" prop="user">
@@ -56,6 +56,7 @@ import { Rules } from '@/global/form-rules';
import Terminal from '@/components/terminal/index.vue'; import Terminal from '@/components/terminal/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue'; import DrawerHeader from '@/components/drawer-header/index.vue';
const title = ref();
const terminalVisiable = ref(false); const terminalVisiable = ref(false);
const terminalOpen = ref(false); const terminalOpen = ref(false);
const form = reactive({ const form = reactive({
@@ -64,16 +65,17 @@ const form = reactive({
user: '', user: '',
containerID: '', containerID: '',
}); });
type FormInstance = InstanceType<typeof ElForm>; const formRef = ref();
const formRef = ref<FormInstance>();
const terminalRef = ref<InstanceType<typeof Terminal> | null>(null); const terminalRef = ref<InstanceType<typeof Terminal> | null>(null);
interface DialogProps { interface DialogProps {
containerID: string; containerID: string;
container: string;
} }
const acceptParams = async (params: DialogProps): Promise<void> => { const acceptParams = async (params: DialogProps): Promise<void> => {
terminalVisiable.value = true; terminalVisiable.value = true;
form.containerID = params.containerID; form.containerID = params.containerID;
title.value = params.container;
form.isCustom = false; form.isCustom = false;
form.user = ''; form.user = '';
form.command = '/bin/bash'; form.command = '/bin/bash';

View File

@@ -1,7 +1,11 @@
<template> <template>
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<DrawerHeader :header="title + $t('container.repo')" :back="handleClose" /> <DrawerHeader
:header="title + $t('container.repo')"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template> </template>
<el-form <el-form
ref="formRef" ref="formRef"

View File

@@ -1,7 +1,11 @@
<template> <template>
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<DrawerHeader :header="title + $t('container.composeTemplate')" :back="handleClose" /> <DrawerHeader
:header="title + $t('container.composeTemplate')"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template> </template>
<el-form <el-form
v-loading="loading" v-loading="loading"

View File

@@ -1,7 +1,7 @@
<template> <template>
<el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
<template #header> <template #header>
<DrawerHeader :header="$t('cronjob.cronTask')" :back="handleClose" /> <DrawerHeader :header="$t('cronjob.cronTask')" :resource="dialogData.rowData?.name" :back="handleClose" />
</template> </template>
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules"> <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center"> <el-row type="flex" justify="center">

View File

@@ -315,6 +315,7 @@ const buttons = [
click: (row: Database.MysqlDBInfo) => { click: (row: Database.MysqlDBInfo) => {
let param = { let param = {
id: row.id, id: row.id,
mysqlName: row.name,
operation: 'password', operation: 'password',
username: row.username, username: row.username,
password: row.password, password: row.password,
@@ -327,6 +328,7 @@ const buttons = [
click: (row: Database.MysqlDBInfo) => { click: (row: Database.MysqlDBInfo) => {
let param = { let param = {
id: row.id, id: row.id,
mysqlName: row.name,
operation: 'privilege', operation: 'privilege',
privilege: '', privilege: '',
privilegeIPs: '', privilegeIPs: '',

View File

@@ -2,7 +2,7 @@
<div> <div>
<el-drawer v-model="changeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%"> <el-drawer v-model="changeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
<template #header> <template #header>
<DrawerHeader :header="title" :back="handleClose" /> <DrawerHeader :header="title" :resource="changeForm.mysqlName" :back="handleClose" />
</template> </template>
<el-form> <el-form>
<el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-position="top"> <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-position="top">