zhzf/client/src/components/Toolbar.vue

<template>
  <el-container :direction="direction" class="toolbar">
    <slot name="bottomPanel"></slot>
    <el-row class="top-panel">
      <slot name="button" :toolbar-context="{ deleteIsDisabled }">
        <el-col :span="21">
          <el-button type="primary" v-show="permissions.add" @click="add" title="新增">
            <template #icon>
              <font-awesome-icon icon="plus" />
            </template>
            新增
          </el-button>
          <el-button type="danger" plain v-show="permissions.deleteAll" :disabled="deleteIsDisabled" @click="handleBatchDelete">
            <template #icon>
            <font-awesome-icon icon="trash" />
            </template>
            删除 ({{ selection.length }})
          </el-button>
          <el-button type="success" v-show="permissions.importFile" @click="importFile" title="导入">
            <template #icon>
              <font-awesome-icon icon="file-import" />
            </template>
            导入
          </el-button>
          <el-button type="primary" v-show="permissions.exportFile" @click="exportFile" title="导出">
            <template #icon>
              <font-awesome-icon icon="file-export" />
            </template>
            导出
          </el-button>
          <el-button type="primary" v-show="permissions.exportSelectFile" @click="exportSelectFile" title="选择导出">
            <template #icon>
              <font-awesome-icon icon="file-export" />
            </template>
            选择导出
          </el-button>
          <el-button type="warning" v-show="permissions.downloadTemp" @click="downloadTemp" title="下载样表">
            <template #icon>
              <font-awesome-icon icon="download" />
            </template>
            下载样表
          </el-button>
          <el-button type="primary" v-show="permissions.senior" @click="senior" title="高级检索">
            <template #icon>
              <font-awesome-icon icon="angle-double-right" rotation="90" v-if="!showSenior"/>
              <font-awesome-icon icon="angle-double-left" rotation="90" v-if="showSenior"/>
            </template>
            高级检索
          </el-button>
          <slot name="extraButton" />
        </el-col>
      </slot>
      <slot name="otherButton">
        <el-col :span="3" class="other-button">
          <el-button type="primary" v-show="permissions.query" @click="query" title="查询">
            <template #icon>
              <font-awesome-icon icon="search" />
            </template>
            查询
          </el-button>
          <el-button type="info" v-show="permissions.query" @click="$emit('do-reset')" title="重置">
            <template #icon>
              <font-awesome-icon icon="undo" />
            </template>
            重置
          </el-button>
          <el-button type="danger" v-show="permissions.help" @click="$emit('help')" title="帮助">
            <template #icon>
              <font-awesome-icon icon="question" />
            </template>
            帮助
          </el-button>
        </el-col>
      </slot>
    </el-row>
  </el-container>
</template>

<script setup>
import {computed, ref} from 'vue'
  import { ElMessageBox } from 'element-plus'

  const emit = defineEmits([
    'do-add',
    'batch-delete',
    'do-query',
    'do-importFile',
    'do-exportFile',
    'do-exportSelectFile',
    'do-downloadTemp',
    'help',
    'do-reset',
    'do-senior'
    ])

  const props = defineProps({
    selection: {
      type: Array,
      default: () => [],
    },
    direction: {
      type: String,
      default: 'vertical',
    },
    permissions: {
      type: Object,
      default: () => ({
        add: false,
        delete: false,
        deleteAll: false,
        query: false,
        importFile: false,
        exportFile: false,
        exportSelectFile: false,
        downloadTemp: false,
        help: false,
        senior: false
      }),
    },
  })

const showSenior = ref(false)

  const deleteIsDisabled = computed(() => props.selection.length === 0)

  const add = () => emit('do-add')

  const handleBatchDelete = () => {
    ElMessageBox.confirm(`确定要删除选中的 ${props.selection.length} 项记录吗？`, {
      title: '确认删除',
      type: 'warning',
    })
      .then(() => {
        emit('batch-delete')
      })
      .catch(() => {})
  }

  const query = () => emit('do-query')
  const senior = () => {
    showSenior.value = !showSenior.value
    emit('do-senior', showSenior.value)
  }
  const importFile = () => emit('do-importFile')
  const exportFile = () => emit('do-exportFile')
  const exportSelectFile = () => emit('do-exportSelectFile')
  const downloadTemp = () => emit('do-downloadTemp')
</script>

<style scoped lang="scss">
.other-button {
 display: flex;
 justify-content: flex-end;
}
</style>