DdOperMenu 操作区域按钮组组件

组件介绍

DdOperMenu是一个通用的操作区域按钮组组件，主要用于表格上方的操作按钮集合，支持权限控制、内置常用按钮（如新增、删除、导入、导出）以及自定义按钮功能。

该组件通常与DdTable组件配合使用，提供标准化的操作按钮布局和交互体验，支持权限控制和动态按钮配置。

基本用法

引入组件

在DdTable组件中内置使用：

<template>
  <dd-table>
    <!-- 其他表格内容 -->
    <dd-oper-menu
      :show-excel-export="showExcelExport"
      :show-excel-import="showExcelImport"
      :btns="operMenuBtns"
      :auth="auth"
      @handleCreate="handleCreate"
      @handleDeleteAll="handleDeleteAll"
      @handleImport="handleImport"
    />
  </dd-table>
</template>

<script>
export default {
  data() {
    return {
      // 按钮权限控制
      auth: {
        create: true,    // 创建权限
        delete: true,    // 删除权限
        import: true,    // 导入权限
        export: true     // 导出权限
      },
      // 自定义操作按钮
      operMenuBtns: [
        {
          name: "变更跟进人",
          type: "primary",
          icon: "el-icon-user",
          auth: auth.bglxr,
          handleClick: this.handleChangeFollower,
        },
        {
          name: "释放",
          type: "danger",
          icon: "el-icon-delete",
          auth: auth.sf,
          handleClick: this.handleRelease,
        }
      ],
      // 显示导出/导入按钮
      showExcelExport: true,
      showExcelImport: true
    };
  },
  methods: {
    // 创建按钮点击事件
    handleCreate() {
      // 处理创建逻辑
    },
    // 批量删除事件
    handleDeleteAll() {
      // 处理批量删除逻辑
    },
    // 导入事件
    handleImport() {
      // 处理导入逻辑
    },
    // 变更跟进人事件
    handleChangeFollower() {
      // 处理变更跟进人逻辑
    },
    // 释放事件
    handleRelease() {
      // 处理释放逻辑
    }
  }
};
</script>

属性说明

属性名	类型	默认值	说明
showExcelExport	Boolean	false	是否显示Excel导出按钮
showExcelImport	Boolean	false	是否显示Excel导入按钮
btns	Array	[]	自定义按钮组配置数组
auth	Object	{}	权限控制对象，用于控制按钮显示隐藏
showAdd	Boolean	true	是否显示新增按钮
showDelete	Boolean	false	是否显示批量删除按钮

事件说明

事件名	参数	说明
handleCreate	-	点击新增按钮时触发
handleDeleteAll	-	点击批量删除按钮时触发
handleImport	-	点击导入按钮时触发
handleExport	-	点击导出按钮时触发

按钮配置(btns)

每个按钮配置对象支持以下属性：

属性名	类型	说明
name	String	按钮名称
type	String	按钮类型，如'primary'、'danger'、'success'等
icon	String	按钮图标，使用element-ui图标类名
auth	Boolean	是否有权限显示该按钮
handleClick	Function	按钮点击事件处理函数
isPop	Boolean	是否需要确认弹窗
title	String	确认弹窗标题

按钮配置示例

operMenuBtns: [
  {
    name: "变更跟进人",
    type: "primary",
    icon: "el-icon-user",
    auth: auth.bglxr,
    handleClick: this.handleChangeFollower,
  },
  {
    name: "释放",
    type: "danger",
    icon: "el-icon-delete",
    auth: auth.sf,
    handleClick: this.handleRelease,
    isPop: true,
    title: "确认释放所选商机？"
  },
  {
    name: "变更状态",
    type: "warning",
    icon: "el-icon-refresh",
    auth: auth.change,
    handleClick: this.handleChangeStatus,
  }
]

权限控制

通过auth属性控制按钮的显示与隐藏：

权限对象结构

auth: {
  create: true,    // 控制新增按钮
  delete: true,    // 控制删除按钮
  import: true,    // 控制导入按钮
  export: true,    // 控制导出按钮
  bglxr: true,     // 控制变更跟进人按钮
  sf: true,        // 控制释放按钮
  change: true     // 控制变更状态按钮
}

权限控制原理

内置按钮（新增、删除、导入、导出）通过auth对象中对应的属性控制
自定义按钮通过按钮配置中的auth属性控制
当权限为false时，对应按钮将被隐藏

内置按钮

组件默认提供以下内置按钮，可通过属性控制显示：

按钮名称	显示控制属性	事件	说明
新增	showAdd	handleCreate	触发创建新记录操作
删除	showDelete	handleDeleteAll	触发批量删除操作
导入	showExcelImport	handleImport	触发Excel导入操作
导出	showExcelExport	handleExport	触发Excel导出操作

高级特性

带确认弹窗的按钮

通过配置isPop和title属性，实现带确认弹窗的按钮：

{
  name: "删除",
  type: "danger",
  icon: "el-icon-delete",
  auth: auth.delete,
  handleClick: this.handleDelete,
  isPop: true,
  title: "确认删除所选记录吗?"
}

动态按钮配置

可以根据不同条件动态修改operMenuBtns数组，实现动态按钮展示：

// 根据条件动态添加按钮
dynamicAddButton() {
  if (this.someCondition) {
    this.operMenuBtns.push({
      name: "特殊操作",
      type: "info",
      icon: "el-icon-setting",
      auth: true,
      handleClick: this.specialOperation
    });
  }
}

完整示例

模板部分

<template>
  <dd-oper-menu
    :show-excel-export="showExcelExport"
    :show-excel-import="showExcelImport"
    :btns="operMenuBtns"
    :auth="auth"
    @handleCreate="handleCreate"
    @handleDeleteAll="handleDeleteAll"
    @handleImport="handleImport"
    @handleExport="handleExport"
  />
</template>

脚本部分

<script>
export default {
  data() {
    return {
      // 权限控制
      auth: {
        create: true,
        delete: true,
        import: true,
        export: true,
        bglxr: true,
        sf: true,
        change: true
      },
      // 显示导出/导入按钮
      showExcelExport: true,
      showExcelImport: true,
      // 操作按钮组配置
      operMenuBtns: [
        {
          name: "变更跟进人",
          type: "primary",
          icon: "el-icon-user",
          auth: this.auth.bglxr,
          handleClick: this.handleChangeFollower,
        },
        {
          name: "释放",
          type: "danger",
          icon: "el-icon-delete",
          auth: this.auth.sf,
          handleClick: this.handleRelease,
          isPop: true,
          title: "确认释放所选商机？"
        },
        {
          name: "变更状态",
          type: "warning",
          icon: "el-icon-refresh",
          auth: this.auth.change,
          handleClick: this.handleChangeStatus,
        }
      ]
    };
  },
  methods: {
    // 新增按钮点击事件
    handleCreate() {
      this.$emit('handleCreate');
    },

    // 批量删除事件
    handleDeleteAll() {
      this.$emit('handleDeleteAll');
    },

    // 导入事件
    handleImport() {
      this.$emit('handleImport');
    },

    // 导出事件
    handleExport() {
      this.$emit('handleExport');
    },

    // 变更跟进人事件
    handleChangeFollower() {
      // 实现变更跟进人逻辑
      this.$emit('handleChangeFollower');
    },

    // 释放事件
    handleRelease() {
      // 实现释放逻辑
      this.$emit('handleRelease');
    },

    // 变更状态事件
    handleChangeStatus() {
      // 实现变更状态逻辑
      this.$emit('handleChangeStatus');
    }
  }
};
</script>

注意事项

确保在使用前正确配置auth权限对象，避免权限控制失效
自定义按钮的handleClick方法应使用箭头函数或绑定this上下文
当按钮数量较多时，组件会自动处理溢出显示
内置按钮和自定义按钮会统一按照配置顺序排列
权限控制为false的按钮会完全从DOM中移除，而非仅隐藏

常见问题

Q: 如何调整按钮的显示顺序？

A: 按钮的显示顺序由operMenuBtns数组的顺序决定，内置按钮始终显示在自定义按钮之前。

Q: 如何自定义按钮样式？

A: 可以通过type属性选择element-ui提供的按钮类型，或通过style属性自定义样式。

Q: 按钮点击事件不触发怎么办？

A: 确保handleClick方法正确绑定了this上下文，或使用箭头函数定义事件处理函数。