From 13fbaf1354f918829c4a4ec4ffdc692071055a94 Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Thu, 30 Nov 2023 20:08:09 +0800
Subject: [PATCH] Select multiple rows of data for deletion

---
 atune/web/src/components/atuneList.vue | 10 +++++--
 atune/web/src/views/Home.vue           | 38 +++++++++++++++++---------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/atune/web/src/components/atuneList.vue b/atune/web/src/components/atuneList.vue
index 58f77303..3a936f6b 100644
--- a/atune/web/src/components/atuneList.vue
+++ b/atune/web/src/components/atuneList.vue
@@ -16,14 +16,14 @@
 </template>
 
 <script lang='ts' setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, defineEmits } from 'vue';
 import { getTuneLists } from '@/api/atune'
 
 const tableData = ref([] as Atune[]);
 const currentPage = ref(1);
 const pageSize = ref(10);
 const totalItems = ref(0);
-const selectedRows = ref([] as Atune[])
+const emit = defineEmits(['selectionChange']);
 
 interface Atune {
   tuneName: string
@@ -34,6 +34,7 @@ interface Atune {
   note: string
 }
 
+// 获取tune模板列表
 const fetchData = async () => {
   try {
     const response = await getTuneLists({
@@ -48,18 +49,21 @@ const fetchData = async () => {
   }
 };
 
+// 页码大小
 const handleSizeChange = (newSize: number) => {
   pageSize.value = newSize;
   fetchData();
 };
 
+// 页数
 const handleCurrentChange = (newPage: number) => {
   currentPage.value = newPage;
   fetchData();
 };
 
+// 选中多选框
 const handleSelectionChange = (rows: Atune[]) => {
-  selectedRows.value = rows;
+  emit('selectionChange', rows);
 };
 
 onMounted(() => {
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 8f47ce2a..6c8080b1 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -15,10 +15,10 @@
         <el-input placeholder="请输入调优名称进行搜索..." :prefix-icon="Search" clearable
           style="width: 280px;margin-right: 10px;"></el-input>
         <el-button :icon="Search">搜索</el-button>
-        <el-button class="delete-button">删除</el-button>
+        <el-button class="delete-button" @click="handleDelete">删除</el-button>
       </div>
       <div class="table">
-        <atuneList></atuneList>
+        <atuneList @selectionChange="handleSelectionChange"></atuneList>
       </div>
     </div>
   </div>
@@ -38,28 +38,40 @@ import atuneTemplete from '@/components/atuneTemplete.vue'
 const atuneTree = ref([]);
 const selectedNodeData = ref("");
 const showDialog = ref(false);
+const selectedRows = ref([])
 const defaultProps = ref({
   label: 'label',
 });
 
-onMounted(async () => {
-  const res = await getAtuneAllName();
-  atuneTree.value = res.data.data.map((item: string, index: number) => ({
-    label: item,
-    key: index.toString(),
-  }));
-});
-
-function handleNodeClick(node: any) {
+// 选中调优对象
+const handleNodeClick = (node: any) => {
   selectedNodeData.value = node.label;
-  // 点击节点时显示dialog弹框
   showDialog.value = true;
 }
 
 // 关闭dialog弹框
-function closeDialog() {
+const closeDialog = () => {
   showDialog.value = false;
 }
+
+// 选中多选框
+const handleSelectionChange = (selected_Rows: any) => {
+  selectedRows.value = selected_Rows;
+}
+
+// 删除
+const handleDelete = () => {
+  console.log('删除行：', selectedRows.value);
+  // 调用删除 API 或执行其他操作
+}
+
+onMounted(async () => {
+  const res = await getAtuneAllName();
+  atuneTree.value = res.data.data.map((item: string, index: number) => ({
+    label: item,
+    key: index.toString(),
+  }));
+});
 </script>
 
 <style lang="less" scoped>
-- 
Gitee