From f0a7c3c62e61d987dfeaff383e5135e9325c77b8 Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Thu, 30 Nov 2023 09:32:51 +0800
Subject: [PATCH] Add save and cancel buttons

---
 atune/web/src/components/atuneTemplete.vue | 38 +++++++++--
 atune/web/src/views/Home.vue               | 75 +++++++++++-----------
 2 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/atune/web/src/components/atuneTemplete.vue b/atune/web/src/components/atuneTemplete.vue
index 78927fb2..9b99988a 100644
--- a/atune/web/src/components/atuneTemplete.vue
+++ b/atune/web/src/components/atuneTemplete.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-form :model="form" label-width="120px">
+        <el-form :model="form" class="custom-form">
             <el-form-item label="调优对象">
                 <el-input v-model="form.tuneName"></el-input>
             </el-form-item>
@@ -17,9 +17,13 @@
                 <el-input v-model="form.restore"></el-input>
             </el-form-item>
             <el-form-item label="注意事项">
-                <el-input v-model="form.note"></el-input>
+                <el-input v-model="form.note" class="custom-input" type="text" :rows="4"></el-input>
             </el-form-item>
         </el-form>
+        <el-form class="centered-buttons">
+            <el-button type="primary" @click="onSubmit" class="custom-button">保存</el-button>
+            <el-button class="custom-button">取消</el-button>
+        </el-form>
     </div>
 </template>
 
@@ -80,7 +84,33 @@ const fetchAtuneInfo = () => {
         console.warn('atuneName 为空，无法获取调优信息');
     }
 }
-
+const onSubmit = () => {
+    console.log('submit!')
+}
 </script>
 
-<style lang = 'less' scoped></style>
+<style lang = 'less' scoped>
+.custom-form {
+    margin-left: 25px;
+    margin-right: 20px;
+    outline-width: 120px;
+
+    .custom-input {
+        white-space: pre-wrap;
+        text-align: left; // 靠左
+        vertical-align: top; // 靠上
+        height: 150px;
+    }
+}
+
+
+.centered-buttons {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+
+    .custom-button {
+        margin-right: 7px;
+    }
+}
+</style>
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 50be19bc..505ac9b0 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -13,12 +13,10 @@
         <atuneList></atuneList>
       </div>
     </div>
-    <div>
-      <el-dialog title="调优模板信息" width="70%" @close="closeDialog" v-model="showDialog">
-        <atuneTemplete :selectedNodeData="selectedNodeData"></atuneTemplete>
-      </el-dialog>
-    </div>
   </div>
+  <el-dialog title="调优模板信息" width="70%" @close="closeDialog" v-model="showDialog">
+    <atuneTemplete :selectedNodeData="selectedNodeData"></atuneTemplete>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -76,43 +74,44 @@ function closeDialog() {
   display: flex;
   min-width: 100%;
   height: 95%;
-}
 
-.tree-container,
-.table-container {
-  border-radius: 10px;
-  overflow: hidden;
-  margin: 10px;
-  background-color: #fff;
-}
 
-.tree-container {
-  height: 95%;
-  width: 20%;
-  border: 1px solid #ddd;
-  margin-left: 30px;
-}
+  .tree-container,
+  .table-container {
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 10px;
+    background-color: #fff;
+  }
 
-.table-container {
-  height: 95%;
-  width: 76%;
-  border: 2px solid #ddd;
-  display: flex;
-  flex-direction: column;
-}
+  .tree-container {
+    height: 95%;
+    width: 20%;
+    border: 1px solid #ddd;
+    margin-left: 30px;
+  }
 
-.table {
-  flex: 1;
-  padding: 10px;
-}
+  .table-container {
+    height: 95%;
+    width: 76%;
+    border: 2px solid #ddd;
+    display: flex;
+    flex-direction: column;
+  }
 
-.title {
-  height: 30px;
-  background-color: #395a9c;
-  color: #fff;
-  padding: 10px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  text-indent: 15px;
+  .table {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .title {
+    height: 30px;
+    background-color: #395a9c;
+    color: #fff;
+    padding: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    text-indent: 15px;
+  }
 }
 </style>
-- 
Gitee