悬浮按钮

src/views/system/tenant/index.vue

@@ -54,6 +54,8 @@ const { t } = useI18n();
 /**左侧导航是否可收起 */
 let collapsible = ref<boolean>(true);
 
+const showButtonsKey = ref(null);
+
 /**改变收起状态 */
 function changeCollapsible() {
   collapsible.value = !collapsible.value;
@@ -362,7 +364,7 @@ function fnModalOk() {
               duration: 2,
             });
             modalState.visibleByEdit = false;
-            // 新增时清空上级部门树重新获取
+
             modalStateFrom.resetFields();
             fnGetList(undefined, 'tree'); //渲染树状
             tableState.data = []; //清空表格数据
@@ -477,7 +479,7 @@ function fnModalTypeOk() {
               duration: 2,
             });
             modalState.visibleByType = false;
-            // 新增时清空上级部门树重新获取
+
             fnGetList(from.parentId, 'table'); //渲染表格
             modalStateTypeFrom.resetFields();
           } else {
@@ -528,28 +530,15 @@ function fnTypeRecordDelete(
     },
   });
 }
+function showButtons(key: any) {
+  console.log(key);
+  showButtonsKey.value = key;
+}
 
+function hideButtons() {
+  showButtonsKey.value = null;
+}
 onMounted(() => {
-  // 获取网元网元列表
-  listDept({}).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-      // 渲染左侧树列表
-      console.log(res.data);
-      state.selectedNode = res.data[1]?.tenantId;
-      //fnSelectNode(res.data[1]?.tenantId);
-
-      res.data.forEach((item: any) => {
-        if (item.parentId === '0') {
-          state.tenantTreeData.push({
-            childern: undefined,
-            title: item.tenantName,
-            key: item.tenantId,
-            ...item,
-          });
-        }
-      });
-    }
-  });
   Promise.allSettled([
     getDict('sys_normal_disable'),
     getDict('tenancy_type'),
@@ -561,6 +550,9 @@ onMounted(() => {
       dict.sysTenancyType = resArr[1].value;
     }
   });
+
+  // 初始渲染左侧树状数据
+  fnGetList(undefined, 'tree');
 });
 </script>
 <template>
@@ -584,28 +576,31 @@ onMounted(() => {
 
           <a-form layout="vertical" autocomplete="off">
             <a-form-item name="mmlTree">
-              <a-directory-tree
+              <a-tree :tree-data="state.tenantTreeData" @select="fnSelectNode">
-                :tree-data="state.tenantTreeData"
-                @select="fnSelectNode"
-              >
                 <!-- treeKey is tenantId -->
+
                 <template #title="{ key: treeKey, title }">
+                  <div
+                    @mouseover="showButtons(treeKey)"
+                    @mouseleave="hideButtons"
+                    style="display: flex; align-items: center"
+                  >
                     <span>{{ title }}</span>
-                  <span
+                    <div style="flex: 1"></div>
+                    <!-- 占位符，推动后面的按钮到最右边 -->
+                    <EditOutlined
                       class="iconMyStyle"
                       @click.stop="fnModalVisibleByEdit(treeKey)"
-                  >
+                      v-show="showButtonsKey === treeKey"
-                    <EditOutlined />
+                    />
-                  </span>
+                    <DeleteOutlined
-
-                  <span
                       class="iconMyStyle"
                       @click.stop="fnRecordDelete(treeKey)"
-                  >
+                      v-show="showButtonsKey === treeKey"
-                    <DeleteOutlined />
+                    />
-                  </span>
+                  </div>
                 </template>
-              </a-directory-tree>
+              </a-tree>
             </a-form-item>
           </a-form>
         </a-card>
@@ -724,15 +719,12 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :labelWrap="true"
       >
-        {{ modalState.from }}
-
         <a-form-item
           :label="t('views.system.dept.className')"
           name="tenantName"
           v-bind="modalStateFrom.validateInfos.tenantName"
           :label-col="{ span: 4 }"
           :labelWrap="true"
-          v-show="modalState.from.parentId === '0' && state.selectedNode"
         >
           <a-input
             v-model:value="modalState.from.tenantName"
@@ -784,19 +776,6 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.system.dept.classSort')"
-              name="orderNum"
-            >
-              <a-input-number
-                v-model:value="modalState.from.orderNum"
-                :min="0"
-                :max="9999"
-                :step="1"
-              ></a-input-number>
-            </a-form-item>
-          </a-col>
         </a-row>
       </a-form>
     </a-modal>
@@ -818,7 +797,6 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :labelWrap="true"
       >
-        {{ modalState.typeFrom }}
         <a-row :gutter="16">
           <a-col :span="12">
             <a-form-item
@@ -867,6 +845,6 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .iconMyStyle {
-  margin-left: 12px;
+  margin-left: 14px;
 }
 </style>