From 07c28f4ea9e3ab96ada2dd3f12768e61dc454163 Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Thu, 7 Dec 2023 10:46:33 +0800
Subject: [PATCH] Improve the editing button and interface with updated
 templates

---
 atune/web/src/components/atuneTemplete.vue | 106 ++++++++++++++-------
 atune/web/src/views/Home.vue               |  23 +++--
 2 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/atune/web/src/components/atuneTemplete.vue b/atune/web/src/components/atuneTemplete.vue
index f39e28ba..602011ec 100644
--- a/atune/web/src/components/atuneTemplete.vue
+++ b/atune/web/src/components/atuneTemplete.vue
@@ -29,19 +29,22 @@
 
 <script lang='ts' setup>
 import { ElMessage } from 'element-plus';
-import { ref, onUpdated, reactive, onMounted } from 'vue'
-import { getAtuneInfo, saveTune } from '@/api/atune'
+import { reactive, watchEffect } from 'vue'
+import { getAtuneInfo, saveTune, updateTune } from '@/api/atune'
+import { Atune } from '@/types/atune'
 
 let props = defineProps({
     selectedNodeData: {
         type: String,
         default: ""
+    },
+    selectedEditRow: {
+        type: Object as () => Atune,
+        default: null
     }
 })
-const atuneName = ref(props.selectedNodeData)
-const emit = defineEmits(['closeDialog', 'dataUpdated']);
-
 const form = reactive({
+    id: 0,
     tuneName: "",
     workDir: "",
     prepare: "",
@@ -49,32 +52,40 @@ const form = reactive({
     restore: "",
     note: ""
 })
+const emit = defineEmits(['closeDialog', 'dataUpdated']);
+
+// 编辑
+const handleEdit = () => {
+    form.id = props.selectedEditRow.id
+    form.tuneName = props.selectedEditRow.tuneName
+    form.workDir = props.selectedEditRow.workDir
+    form.prepare = props.selectedEditRow.prepare
+    form.tune = props.selectedEditRow.tune
+    form.restore = props.selectedEditRow.restore
+    form.note = props.selectedEditRow.note
+}
+
 const fetchAtuneInfo = () => {
-    atuneName.value = props.selectedNodeData
-    if (atuneName.value) {
-        getAtuneInfo({ name: atuneName.value })
-            .then((res) => {
-                if (res.data && res.data.code === 200) {
-                    const data = res.data.data;
-                    // 判断数据结构类型
-                    const baseTuneData = data.BaseTune || {};
-
-                    form.tuneName = baseTuneData.tuneName || data.tuneName || '';
-                    form.workDir = baseTuneData.workDir || data.workDir || '';
-                    form.prepare = baseTuneData.prepare || data.prepare || '';
-                    form.tune = baseTuneData.tune || data.tune || '';
-                    form.restore = baseTuneData.restore || data.restore || '';
-                    form.note = data.note || '';
-                } else {
-                    console.log('获取调优信息时出错:', res.data.msg)
-                }
-            })
-    } else {
-        console.warn('atuneName 为空，无法获取调优信息');
-    }
+    getAtuneInfo({ name: props.selectedNodeData })
+        .then((res) => {
+            if (res.data && res.data.code === 200) {
+                const data = res.data.data;
+                // 判断数据结构类型
+                const baseTuneData = data.BaseTune || {};
+
+                form.tuneName = baseTuneData.tuneName || data.tuneName || '';
+                form.workDir = baseTuneData.workDir || data.workDir || '';
+                form.prepare = baseTuneData.prepare || data.prepare || '';
+                form.tune = baseTuneData.tune || data.tune || '';
+                form.restore = baseTuneData.restore || data.restore || '';
+                form.note = data.note || '';
+            } else {
+                console.log('获取调优信息时出错:', res.data.msg)
+            }
+        })
 }
-const onSubmit = () => {
-    emit('closeDialog');
+
+const saveTuneData = () => {
     saveTune(form).then(res => {
         if (res.data.code === 200) {
             ElMessage.success(res.data.msg)
@@ -86,18 +97,43 @@ const onSubmit = () => {
         ElMessage.error("数据传输失败，请检查", err)
     })
 }
+const updateTuneData = () => {
+    updateTune(form).then(res => {
+        if (res.data.code === 200) {
+            ElMessage.success(res.data.msg)
+            emit('dataUpdated');
+        } else {
+            ElMessage.error(res.data.msg)
+        }
+    }).catch(err => {
+        ElMessage.error("数据传输失败，请检查", err)
+    })
+}
+
+const onSubmit = () => {
+    emit('closeDialog');
+    if (form.id === 0) {
+        saveTuneData();
+    } else {
+        updateTuneData();
+    }
+}
 
 const onCancel = () => {
     emit('closeDialog');
 };
 
-onMounted(() => {
-    fetchAtuneInfo();
-})
+watchEffect(() => {
+    if (props.selectedNodeData !== '') {
+        fetchAtuneInfo();
+    }
+});
 
-onUpdated(() => {
-    fetchAtuneInfo();
-})
+watchEffect(() => {
+    if (props.selectedEditRow) {
+        handleEdit();
+    }
+});
 </script>
 
 <style lang = 'less' scoped>
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 506438d4..bf3afeef 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -18,14 +18,15 @@
         <el-button class="delete-button" @click="handleDelete">删除</el-button>
       </div>
       <div class="table">
-        <atuneList @selectionChange="handleSelectionChange" :refreshData="refreshData" :searchTuneName="searchTuneName"
-          :searchTune="searchTune">
+        <atuneList @selectionChange="handleSelectionChange" @selectionEdit="handleSelectEdit" :refreshData="refreshData"
+          :searchTuneName="searchTuneName" :searchTune="searchTune">
         </atuneList>
       </div>
     </div>
   </div>
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
-    <atuneTemplete :selectedNodeData="selectedNodeData" @closeDialog="closeDialog" @dataUpdated="handleDataUpdated">
+    <atuneTemplete :selectedNodeData="selectedNodeData" :selectedEditRow="selectedEditRow" @closeDialog="closeDialog"
+      @dataUpdated="handleDataUpdated">
     </atuneTemplete>
   </el-dialog>
 </template>
@@ -35,16 +36,18 @@ import { onMounted, ref } from 'vue';
 import { getAtuneAllName, deleteTune } from '@/api/atune';
 import { ElTree, ElDialog, ElMessage, ElMessageBox } from 'element-plus';
 import { Search } from '@element-plus/icons-vue'
-import atuneList, { Atune } from '@/components/atuneList.vue'
+import atuneList from '@/components/atuneList.vue'
 import atuneTemplete from '@/components/atuneTemplete.vue'
+import { Atune } from '@/types/atune'
 
 const atuneTree = ref([]);
-const selectedNodeData = ref("");
+const selectedNodeData = ref("")
 const searchTuneName = ref("")
 const searchTune = ref(false)
-const showDialog = ref(false);
+const showDialog = ref(false)
 const selectedRows = ref([] as Atune[])
-const refreshData = ref(false);
+const selectedEditRow = ref()
+const refreshData = ref(false)
 const defaultProps = ref({
   label: 'label',
 });
@@ -65,6 +68,12 @@ const handleSelectionChange = (selected_Rows: any) => {
   selectedRows.value = selected_Rows;
 }
 
+// 编辑
+const handleSelectEdit = (editRow: any) => {
+  selectedEditRow.value = editRow
+  showDialog.value = true;
+}
+
 // 刷新
 const handleDataUpdated = () => {
   refreshData.value = !refreshData.value;
-- 
Gitee