列表头部按钮组件

src/components/TableHead/index.ts

@@ -0,0 +1,3 @@
+import TableHead from './src/TableHead.vue'
+
+export { TableHead }

src/components/TableHead/src/TableHead.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="tableNavBtnsContent" ref="tableNavBtnsContent_Ref">
+    <div class="searchBox">
+      <div class="tableNavLeftBtns">
+        <ButtonBase
+          :Butttondata="buttonsLeft"
+          @buttonBaseClick="buttonBaseClick"
+        />
+      </div>
+      <div class="tableNavRightBtns">
+        <!-- 快速搜索 -->
+        <!-- <SearchNormal 
+          ref="quicklySearchDom_Ref"
+          :vueName="vueName"
+          :quicklySearchOption="quicklySearchOption"
+          @searchNormalClick="quicklySearchClick"
+          @searchNormalClear="quicklySearchClear"
+          style="margin-right: 15px;"
+        ></SearchNormal> -->
+        <!-- 右侧按钮 -->
+        <ButtonBase :Butttondata="buttonsRight" @buttonBaseClick="buttonBaseClick" />
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
+// import SearchNormal from '@/components/SearchNormal/index.vue'
+// import * as highSearch from '@/utils/search/highSearch'
+// import * as primarySearch from '@/utils/search/primarySearch'
+
+  const props = defineProps({
+    HeadButttondata: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // vue文件的name值
+    // vueName:{
+    //   type: String,
+    //   default: ''
+    // },
+    // 快速搜索条件（业务线特殊搜索条件--非utils/search/quicklySearch.ts）
+    // quicklySearchOption:{
+    //   type: Object,
+    //   default: null
+    // },
+  })
+
+  const buttonsLeft = ref([])
+  const buttonsRight = ref([])
+  const tableNavBtnsContent_Ref = ref()
+
+  // const defaultButtons = inject('global').defaultButtons
+  // 创建左右按钮数据
+  const buttonsLeftOrRight = () => {
+    // 判断是否有筛选按钮(判断筛选按钮的逻辑位置，影响筛选按钮的位置)
+    // let _primarySearchOption = primarySearch[props.vueName]
+    // let _highSearchOption = highSearch[props.vueName]
+    // if(_primarySearchOption || _highSearchOption){
+    //   buttonsRight.value.push(defaultButtons.defaultFilterBtn())
+    // }
+    // 父级传参处理左右
+    props.HeadButttondata.forEach(item=>{
+      if(item.float && item.float == 'right'){
+        buttonsRight.value.push(item)
+      }else{
+        buttonsLeft.value.push(item)
+      }
+    })
+  }
+  buttonsLeftOrRight()
+
+
+  // 传递给父类
+  const emit = defineEmits([
+    'buttonBaseClick',
+    'quicklySearchClick',
+    'quicklySearchClear'
+  ])
+
+  const buttonBaseClick = (val, item) => {
+    emit('buttonBaseClick', val, item)
+  }
+
+  // 快速搜索事件
+  const quicklySearchClick = (val, option) => {
+    emit('quicklySearchClick', val, option)
+  }
+
+  // 快速搜索清空事件
+  const quicklySearchClear = (val, option) => {
+    emit('quicklySearchClear', val, option)
+  }
+
+  const quicklySearchDom_Ref = ref()
+
+  defineExpose({
+    tableNavBtnsContent_Ref,
+    quicklySearchDom_Ref
+  })
+
+</script>
+<style lang="scss" scoped>
+.tableNavBtnsContent{
+  padding-bottom: 10px;
+  .searchBox{
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .tableNavRightBtns{
+    display: flex;
+    margin-left: 10px;
+    .currenButton .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>

src/components/XButton/index.ts

@@ -1,4 +1,5 @@
 import XButton from './src/XButton.vue'
 import XTextButton from './src/XTextButton.vue'
+import ButtonBase from './src/ButtonBase.vue'
 
-export { XButton, XTextButton }
+export { XButton, XTextButton, ButtonBase }

src/components/XButton/src/ButtonBase.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-button 
+    v-for="(item, index) in Butttondata" :key="index"
+    v-show="!item.hide"
+    :type="item.type" 
+    :color="item.color"
+    :link = "item.link ? item.link : false" 
+    @click="buttonBaseClick(item.name,item,$event)"
+  >
+  <Icon :icon="item.icon" class="mr-1px" />
+  {{ item.label }}
+  </el-button>
+  <slot></slot>
+</template>
+<script setup>
+ import { Plus } from '@element-plus/icons-vue'
+ import { clearButtonBlurHandle } from '@/utils/index'
+  const props = defineProps({
+    Butttondata: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+  })
+
+  // 传递给父类
+  const emit = defineEmits([
+    'buttonBaseClick',
+  ])
+
+  const buttonBaseClick = (val, item, $event) => {
+    clearButtonBlurHandle($event)//解决el-button点击后颜色不恢复问题
+    emit('buttonBaseClick', val, item, $event)
+  }
+  
+</script>