chore: 文件目录树按钮显隐优化

src/views/infra/category/FolderTree.vue

@@ -1,20 +1,11 @@
 <template>
   <div className="folder-header" v-if="folderList && folderList.length > 0">
-    <el-input v-model="folderName" class="!w-240px" clearable placeholder="请输入文件夹名称">
+    <el-input v-model="folderName" class="!w-340px" clearable placeholder="请输入文件夹名称">
       <template #prefix>
         <Icon icon="ep:search" />
       </template>
     </el-input>
     <el-space>
-      <el-button
-        type="success"
-        plain
-        @click="handleExport"
-        :loading="exportLoading"
-        v-hasPermi="['infra:category:export']"
-      >
-        <Icon icon="ep:download" class="mr-5px" /> 导出
-      </el-button>
       <el-button type="danger" plain @click="toggleExpandAll">
         <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
       </el-button>
@@ -37,8 +28,8 @@
       <template #default="{ node, data }">
         <span class="custom-tree-node">
           <span>{{ node.label }}</span>
-          <span>
+          <span class="btns" :class="{ show: data.id === curCategoryId }">
-            <el-button type="primary" size="small" plain @click="appendFolder(data)"
+            <el-button type="primary" size="small" plain @click="appendFolder(data.id)"
               >新增</el-button
             >
             <el-button
@@ -46,7 +37,7 @@
               type="warning"
               size="small"
               plain
-              @click="updateFolder(data)"
+              @click="updateFolder(data.id)"
               >修改</el-button
             >
             <el-button
@@ -55,14 +46,14 @@
               type="danger"
               size="small"
               plain
-              @click="deleteFolder(data)"
+              @click="deleteFolder(data.id)"
               >删除</el-button
             >
           </span>
         </span>
       </template>
       <template #empty>
-        <el-button type="primary" plain @click="appendFolder({ id: 0 })">新增文件夹</el-button>
+        <el-button type="primary" plain @click="appendFolder(0)">新增文件夹</el-button>
       </template>
     </el-tree>
   </div>
@@ -90,6 +81,7 @@ const folderList = ref<Tree[]>([])
 const refreshTable = ref(true) // 重新渲染表格状态
 const exportLoading = ref(false) // 导出的加载中
 const isExpandAll = ref(true) // 是否展开，默认全部展开
+const curCategoryId = ref<number>()
 
 const treeRef = ref<InstanceType<typeof ElTree>>()
 const formRef = ref()
@@ -111,6 +103,7 @@ const getFolderList = async () => {
 
 /** 处理部门被点击 */
 const handleNodeClick = async (row: { [key: string]: any }) => {
+  curCategoryId.value = row.id
   emits('node-click', row)
 }
 
@@ -126,22 +119,22 @@ watch(folderName, (val) => {
 })
 
 /** 新增文件夹 */
-const appendFolder = (data: Tree) => {
+const appendFolder = (id: number) => {
-  formRef.value.open('create', data.id)
+  formRef.value.open('create', id)
 }
 
 /** 修改文件夹 */
-const updateFolder = (data: Tree) => {
+const updateFolder = (id: number) => {
-  formRef.value.open('update', data.id)
+  formRef.value.open('update', id)
 }
 
 /** 删除文件夹 */
-const deleteFolder = async (data: Tree) => {
+const deleteFolder = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await CategoryApi.deleteCategory(data.id)
+    await CategoryApi.deleteCategory(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     getFolderList()
@@ -195,7 +188,23 @@ getFolderList()
   visibility: hidden;
 }
 
+.show {
+  visibility: visible !important;
+}
+
 :deep(.el-tree-node__children) {
   margin-top: 7px;
 }
+
+:deep(.el-tree-node__content) {
+  .btns {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .btns {
+      visibility: visible;
+    }
+  }
+}
 </style>