物业主开发

src/components/RightToolbar/index.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="top-right-btn" :style="style">
-    <el-row>
-      <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
-        <el-button circle icon="Search" @click="toggleSearch()" />
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button circle icon="Refresh" @click="refresh()" />
-      </el-tooltip>
+    <div>
+      <!-- 添加按钮 -->
+      <el-button :disabled="props.disableAdd" v-if="props.showAdd" icon="Plus" type="primary" @click="toggleSearch()"> 新建 </el-button>
+
+      <!-- 批量操作下拉框 -->
+      <el-dropdown v-if="props.showDelete || props.showEdit || $slots.dropdown" trigger="click" style="margin-left: 10px">
+        <el-button @click.stop="refresh"> {{ props.moreTitle }} </el-button>
+
+        <!-- 👇 核心：优先使用外部插槽，没有则使用默认内容 -->
+        <template #dropdown>
+          <!-- 这里直接渲染，不嵌套插槽 -->
+          <el-dropdown-menu v-if="!$slots.dropdown">
+            <el-dropdown-item :disabled="props.disableEdit" v-if="props.showEdit" @click="emits('update:edit')"> 编辑 </el-dropdown-item>
+            <el-dropdown-item :disabled="props.disableDelete" v-if="props.showDelete" @click="emits('update:delete')"> 批量删除 </el-dropdown-item>
+          </el-dropdown-menu>
+          <!-- 外部自定义内容直接渲染，不包任何多余标签 -->
+          <template v-else>
+            <slot name="dropdown" />
+          </template>
+        </template>
+      </el-dropdown>
+
+      <!-- 显隐列（保留你原有逻辑） -->
       <el-tooltip v-if="columns" class="item" effect="dark" content="显示/隐藏列" placement="top">
         <div class="show-btn">
           <el-popover placement="bottom" trigger="click">
@@ -16,7 +32,7 @@
               :data="columns"
               show-checkbox
               node-key="key"
-              :props="{ label: 'label', children: 'children' } as any"
+              :props="{ label: 'label', children: 'children' }"
               @check="columnChange"
             ></el-tree>
             <template #reference>
@@ -25,65 +41,77 @@
           </el-popover>
         </div>
       </el-tooltip>
-    </el-row>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes';
+import { CSSProperties } from 'vue';
 
 const props = defineProps({
-  showSearch: propTypes.bool.def(true),
   columns: propTypes.fieldOption,
-  search: propTypes.bool.def(true),
-  gutter: propTypes.number.def(10)
+  gutter: propTypes.number.def(10),
+  moreTitle: propTypes.string.def('批量操作'),
+
+  showAdd: propTypes.bool.def(true),
+  showDelete: propTypes.bool.def(true),
+  showEdit: propTypes.bool.def(true),
+
+  disableAdd: propTypes.bool.def(false),
+  disableDelete: propTypes.bool.def(false),
+  disableEdit: propTypes.bool.def(false)
 });
 
-const columnRef = ref<ElTreeInstance>();
-const emits = defineEmits(['update:showSearch', 'queryTable']);
+const columnRef = ref();
+const emits = defineEmits(['update:add', 'update:edit', 'update:delete']);
 
-const style = computed(() => {
-  const ret: any = {};
+const style = computed<CSSProperties>(() => {
+  const ret: CSSProperties = {};
   if (props.gutter) {
     ret.marginRight = `${props.gutter / 2}px`;
   }
   return ret;
 });
 
-// 搜索
+// 添加
 function toggleSearch() {
-  emits('update:showSearch', !props.showSearch);
+  emits('update:add');
 }
 
-// 刷新
+const isExpent = ref(false);
+// 批量操作展开
 function refresh() {
-  emits('queryTable');
+  isExpent.value = !isExpent.value;
 }
 
-// 更改数据列的显示和隐藏
-function columnChange(...args: any[]) {
+// 更改显示隐藏列
+function columnChange(...args) {
   props.columns?.forEach((item) => {
     item.visible = args[1].checkedKeys.includes(item.key);
   });
 }
 
-// 显隐列初始默认隐藏列
 onMounted(() => {
   props.columns?.forEach((item) => {
     if (item.visible) {
       columnRef.value?.setChecked(item.key, true, false);
-      // value.value.push(item.key);
     }
   });
 });
 </script>
 
 <style lang="scss" scoped>
+.hiddenActions {
+  margin-left: 10px;
+}
+
 :deep(.el-transfer__button) {
   border-radius: 50%;
   display: block;
   margin-left: 0px;
 }
+
 :deep(.el-transfer__button:first-child) {
   margin-bottom: 10px;
 }
@@ -91,11 +119,13 @@ onMounted(() => {
 .my-el-transfer {
   text-align: center;
 }
+
 .tree-header {
   width: 100%;
   line-height: 24px;
   text-align: center;
 }
+
 .show-btn {
   margin-left: 12px;
 }