oms/src/benyun/components/byTool/byTool.vue

<template>
  <div class="tool">
    <div class="tool-left">
      <el-button 
        v-for="(item,index) of showTools" 
        :icon="item.icon" 
        :key="index" 
        size="small" 
        v-hasPermi="[item.audit]" 
        @click="clickHandle(item)">
        {{ item.name }}
      </el-button>
      <slot name="tool-left" />
    </div>
    
    <div class="tool-right">
      <el-tooltip class="item" effect="dark" :content="openSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button :icon="openSearch?'el-icon-search':'el-icon-minus'" size="small" circle v-if="propTools.search" @click="toggleSearch"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button icon="el-icon-refresh" size="small" circle v-if="propTools.refresh" @click="refresh"></el-button>
      </el-tooltip>
      <slot name="tool-right" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Mixins } from 'vue-property-decorator'
@Component({
  // components: { logDrawer }
})
export default class GmTools extends Vue {
  openSearch:boolean = true

  @Prop()
  propConfig:any

  @Prop()
  customTools:any;

  get audit(){
    return this.propConfig?.audit ? this.propConfig.audit : {}
  }
  get propTools(){
    return this.propConfig?.tools ? this.propConfig.tools : {}
  }

  tools:Array<any>=[
		{ name: '返回', icon: 'el-icon-arrow-left', clickName: 'onReturn', _class: 'return' },
    { name: '新增', icon: 'el-icon-plus', clickName: 'onAdd', _class: 'add' },
		{ name: '保存', icon: 'el-icon-plus', clickName: 'onSave', _class: 'save' },
    { name: '提交', icon: 'el-icon-finished', clickName: 'onSmt', _class: 'smt' },
    { name: '反提交', icon: 'el-icon-finished', clickName: 'onReturnSmt', _class: 'returnSmt' },
    { name: '接单', icon: 'el-icon-sold-out', clickName: 'onOrder', _class: 'order' },
    { name: '派单', icon: 'el-icon-sell', clickName: 'onDispatch', _class: 'dispatch' },
    { name: '修改', icon: 'el-icon-edit', clickName: 'onUpdate', _class: 'edit' },
    { name: '取消提交', icon: 'el-icon-refresh-left', clickName: 'onReSmt', _class: 'reSmt' },
    { name: '删除', icon: 'el-icon-delete', clickName: 'onDelete', _class: 'delete' },
    { name: '导出', icon: 'el-icon-download', clickName: 'onExport', _class: 'export' },
  ]
  showTools:Array<any>=[]

  created(){
    this.initTools()
  }

  initTools(){
    this.showTools = [];
    if(this.propConfig?.tools){
      this.setTool(this.propConfig?.tools)
    }
    if(this.propConfig?.customTools && this.propConfig?.customTools.length > 0){
      this.setCustomTools(this.propConfig?.customTools)
    }
    if(this.customTools){
      this.setCustomTools(this.customTools)
    }
  }

  setTool(data:any){
		this.showTools = [];
    for(const item of this.tools){
      if(data[item._class]){
        let obj:any = (this as any).$lodash.cloneDeep(item);
        if(this.audit){
          obj.audit = this.audit[item._class]
        }
        this.showTools.push(obj)
      }
    }
  }
  //自定义工具栏按钮设置
  setCustomTools(tools:Array<any>){
    for(const item of tools){
      this.showTools.push(item)
    }
  }
  //点击刷新按钮
  refresh(){
    this.$emit('clickHandle','onRefresh')
  }
  //点击搜索
  toggleSearch(){
    this.openSearch = !this.openSearch;
    this.$emit('clickHandle','toggleSearch')
  }

  clickHandle(item:any){
    if(item?.event?.click){
      item.event.click()
    }else{
      this.$emit('clickHandle',item.clickName)
    }
  }
}
</script>

<style lang="scss" scoped>
.tool{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tool-left{
    width: 100%;
  }
  .tool-right{
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
}
</style>