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

2023-05-10 14:34:19 +08:00
parent 81c56a740c
commit 5101dace59
12 changed files with 41 additions and 24 deletions
--- a/frontend/src/views/container/compose/detail/index.vue
+++ b/frontend/src/views/container/compose/detail/index.vue
@@ -269,6 +269,7 @@ const onComposeOperate = async (operation: string) => {
            name: composeName.value,
            path: composePath.value,
            operation: operation,
+            withFile: false,
        };
        loading.value = true;
        await composeOperator(params)
@@ -288,13 +289,13 @@ const onComposeOperate = async (operation: string) => {
 };

 const dialogMonitorRef = ref();
-const onMonitor = (containerID: string) => {
-    dialogMonitorRef.value!.acceptParams({ containerID: containerID });
+const onMonitor = (row: any) => {
+    dialogMonitorRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
 };

 const dialogTerminalRef = ref();
-const onTerminal = (containerID: string) => {
-    dialogTerminalRef.value!.acceptParams({ containerID: containerID });
+const onTerminal = (row: any) => {
+    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
 };

 const dialogContainerLogRef = ref();
@@ -306,7 +307,7 @@ const buttons = [
            return row.state !== 'running';
        },
        click: (row: Container.ContainerInfo) => {
-            onTerminal(row.containerID);
+            onTerminal(row);
        },
    },
    {
@@ -315,13 +316,13 @@ const buttons = [
            return row.state !== 'running';
        },
        click: (row: Container.ContainerInfo) => {
-            onMonitor(row.containerID);
+            onMonitor(row);
        },
    },
    {
        label: i18n.global.t('commons.button.log'),
        click: (row: Container.ContainerInfo) => {
-            dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID });
+            dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
        },
    },
 ];
--- a/frontend/src/views/container/compose/edit/index.vue
+++ b/frontend/src/views/container/compose/edit/index.vue
@@ -1,7 +1,7 @@
 <template>
    <el-drawer v-model="composeVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
        <template #header>
-            <DrawerHeader :header="$t('commons.button.edit')" :back="handleClose" />
+            <DrawerHeader :header="$t('commons.button.edit')" :resource="name" :back="handleClose" />
        </template>
        <div v-loading="loading">
            <codemirror
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -215,13 +215,13 @@ const onCreate = () => {
 };

 const dialogMonitorRef = ref();
-const onMonitor = (containerID: string) => {
-    dialogMonitorRef.value!.acceptParams({ containerID: containerID });
+const onMonitor = (row: any) => {
+    dialogMonitorRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
 };

 const dialogTerminalRef = ref();
-const onTerminal = (containerID: string) => {
-    dialogTerminalRef.value!.acceptParams({ containerID: containerID });
+const onTerminal = (row: any) => {
+    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
 };

 const onInspect = async (id: string) => {
@@ -312,7 +312,7 @@ const buttons = [
            return row.state !== 'running';
        },
        click: (row: Container.ContainerInfo) => {
-            onTerminal(row.containerID);
+            onTerminal(row);
        },
    },
    {
@@ -321,7 +321,7 @@ const buttons = [
            return row.state !== 'running';
        },
        click: (row: Container.ContainerInfo) => {
-            onMonitor(row.containerID);
+            onMonitor(row);
        },
    },
    {
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/views/container/container/log/index.vue
@@ -2,7 +2,7 @@
    <div>
        <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
            <template #header>
-                <DrawerHeader :header="$t('commons.button.log')" :back="handleClose" />
+                <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose" />
            </template>
            <div>
                <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -7,7 +7,7 @@
        size="50%"
    >
        <template #header>
-            <DrawerHeader :header="$t('container.monitor')" :back="handleClose" />
+            <DrawerHeader :header="$t('container.monitor')" :resource="title" :back="handleClose" />
        </template>
        <el-form label-position="top" @submit.prevent>
            <el-form-item :label="$t('container.refreshTime')">
@@ -68,20 +68,24 @@ import VCharts from '@/components/v-charts/index.vue';
 import i18n from '@/lang';
 import DrawerHeader from '@/components/drawer-header/index.vue';

+const title = ref();
 const monitorVisiable = ref(false);
 const timeInterval = ref();
 let timer: NodeJS.Timer | null = null;
 let isInit = ref<boolean>(true);
 interface DialogProps {
    containerID: string;
+    container: string;
 }
 const dialogData = ref<DialogProps>({
    containerID: '',
+    container: '',
 });

 const acceptParams = async (params: DialogProps): Promise<void> => {
    monitorVisiable.value = true;
    dialogData.value.containerID = params.containerID;
+    title.value = params.container;
    cpuDatas.value = [];
    memDatas.value = [];
    cacheDatas.value = [];
--- a/frontend/src/views/container/container/rename/index.vue
+++ b/frontend/src/views/container/container/rename/index.vue
@@ -1,7 +1,7 @@
 <template>
    <el-drawer v-model="newNameVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
        <template #header>
-            <DrawerHeader :header="$t('container.rename')" :back="handleClose" />
+            <DrawerHeader :header="$t('container.rename')" :resource="renameForm.name" :back="handleClose" />
        </template>
        <el-form @submit.prevent ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top">
            <el-row type="flex" justify="center">
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/frontend/src/views/container/container/terminal/index.vue
@@ -7,7 +7,7 @@
        size="50%"
    >
        <template #header>
-            <DrawerHeader :header="$t('container.containerTerminal')" :back="handleClose" />
+            <DrawerHeader :header="$t('container.containerTerminal')" :resource="title" :back="handleClose" />
        </template>
        <el-form ref="formRef" :model="form" label-position="top">
            <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 DrawerHeader from '@/components/drawer-header/index.vue';

+const title = ref();
 const terminalVisiable = ref(false);
 const terminalOpen = ref(false);
 const form = reactive({
@@ -64,16 +65,17 @@ const form = reactive({
    user: '',
    containerID: '',
 });
-type FormInstance = InstanceType<typeof ElForm>;
-const formRef = ref<FormInstance>();
+const formRef = ref();
 const terminalRef = ref<InstanceType<typeof Terminal> | null>(null);

 interface DialogProps {
    containerID: string;
+    container: string;
 }
 const acceptParams = async (params: DialogProps): Promise<void> => {
    terminalVisiable.value = true;
    form.containerID = params.containerID;
+    title.value = params.container;
    form.isCustom = false;
    form.user = '';
    form.command = '/bin/bash';
--- a/frontend/src/views/container/repo/operator/index.vue
+++ b/frontend/src/views/container/repo/operator/index.vue
@@ -1,7 +1,11 @@
 <template>
    <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
        <template #header>
-            <DrawerHeader :header="title + $t('container.repo')" :back="handleClose" />
+            <DrawerHeader
+                :header="title + $t('container.repo')"
+                :resource="dialogData.rowData?.name"
+                :back="handleClose"
+            />
        </template>
        <el-form
            ref="formRef"
--- a/frontend/src/views/container/template/operator/index.vue
+++ b/frontend/src/views/container/template/operator/index.vue
@@ -1,7 +1,11 @@
 <template>
    <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
        <template #header>
-            <DrawerHeader :header="title + $t('container.composeTemplate')" :back="handleClose" />
+            <DrawerHeader
+                :header="title + $t('container.composeTemplate')"
+                :resource="dialogData.rowData?.name"
+                :back="handleClose"
+            />
        </template>
        <el-form
            v-loading="loading"
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -1,7 +1,7 @@
 <template>
    <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
        <template #header>
-            <DrawerHeader :header="$t('cronjob.cronTask')" :back="handleClose" />
+            <DrawerHeader :header="$t('cronjob.cronTask')" :resource="dialogData.rowData?.name" :back="handleClose" />
        </template>
        <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
            <el-row type="flex" justify="center">
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -315,6 +315,7 @@ const buttons = [
        click: (row: Database.MysqlDBInfo) => {
            let param = {
                id: row.id,
+                mysqlName: row.name,
                operation: 'password',
                username: row.username,
                password: row.password,
@@ -327,6 +328,7 @@ const buttons = [
        click: (row: Database.MysqlDBInfo) => {
            let param = {
                id: row.id,
+                mysqlName: row.name,
                operation: 'privilege',
                privilege: '',
                privilegeIPs: '',
--- a/frontend/src/views/database/mysql/password/index.vue
+++ b/frontend/src/views/database/mysql/password/index.vue
@@ -2,7 +2,7 @@
    <div>
        <el-drawer v-model="changeVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="30%">
            <template #header>
-                <DrawerHeader :header="title" :back="handleClose" />
+                <DrawerHeader :header="title" :resource="changeForm.mysqlName" :back="handleClose" />
            </template>
            <el-form>
                <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" label-position="top">