pest_admin/src/views/device/components/ActionButtons.vue

<!--
 * @Author: chris
 * @Date: 2025-08-08 16:17:48
 * @LastEditors: chris
 * @LastEditTime: 2025-09-17 17:14:23
-->
<template>
  <common-action-toolbar
    :buttons="buttons"
    :selectedRows="props.selectedRows"
    :columns="props.columns"
    v-model:showSearch="showSearch"
    @buttonClick="handleButtonClick"
    @queryTable="handleQuery"
  ></common-action-toolbar>
</template>

<script setup>
import CommonActionToolbar from '@/components/CommonActionToolbar'

const props = defineProps({
  selectedRows: { type: Array, required: true },
  columns: { type: Array, required: true },
  showSearch: { type: Boolean, required: true }
})

const emits = defineEmits(['add', 'update', 'delete', 'export', 'query', 'update:showSearch'])
const showSearch = computed({
  get: () => props.showSearch,
  set: (value) => emits('update:showSearch', value)
})

// 按钮配置
const buttons = reactive([
  {
    key: 'add',
    text: '新增',
    type: 'primary',
    plain: true,
    icon: 'Plus',
    action: 'add'
  },
  {
    key: 'update',
    text: '修改',
    type: 'success',
    plain: true,
    icon: 'Edit',
    action: 'update',
    disabled: computed(() => props.selectedRows.length !== 1)
  },
  {
    key: 'delete',
    text: '删除',
    type: 'danger',
    plain: true,
    icon: 'Delete',
    action: 'delete',
    disabled: computed(() => props.selectedRows.length === 0)
  },
  {
    key: 'export',
    text: '导出',
    type: 'warning',
    plain: true,
    icon: 'Download',
    action: 'export'
  }
])

// 按钮点击处理
function handleButtonClick(action) {
  switch (action) {
    case 'add':
      emits('add')
      break
    case 'update':
      emits('update')
      break
    case 'delete':
      emits('delete')
      break
    case 'export':
      emits('export')
      break
  }
}

// 查询处理
function handleQuery() {
  emits('query')
}
</script>