hxgksystemapp/src/views/sysworkflow/lowcodepage/pageListHeadTools.vue

<!-- Created by weiXin:337547038 -->
<template>
	<div class="main-toolsTable">
	  <slot></slot>
	  <el-button
		link
		
		@click="btnClick(item.icon)"
		v-for="item in btnList"
		:key="item.icon"
		:type="item.key==6?'danger':'primary'"
	  >
		<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }}
	  </el-button>
	</div>
</template>
  
  <script lang="ts" setup>
	import { computed } from 'vue'
  
	const props = withDefaults(
	  defineProps<{
		showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
		hideKey?: string[] // 设置了showKey时，hideKey无效
	  }>(),
	  {
		showKey: () => {
		  return []
		},
		hideKey: () => {
		  return []
		}
	  }
	)
	const emits = defineEmits<{
	  (e: 'click', value: string): void
	}>()
  
	const btnList = computed(() => {
	  const list = [
		{ icon: 'del',iconFont:"", label: '清空', key: 1 },
		{ icon: 'eye',iconFont:"", label: '预览', key: 2 },
		{ icon: 'json',iconFont:"", label: '生成脚本预览', key: 3 },
		// { icon: 'vue', label: '导出vue文件', key: 4 },
		{ icon: 'save',iconFont:"fa-save", label: '保存', key: 5 },
		{ icon: 'close',iconFont:"fa-close", label: '关闭', key: 6 }
	  ]
	  if (props.showKey?.length) {
		// 按照指定的key显示
		return list.filter((item: any) => {
		  return props.showKey.includes(item.key)
		})
	  } else if (props.hideKey?.length) {
		// 按照指定的key隐藏
		return list.filter((item: any) => {
		  return !props.hideKey.includes(item.key)
		})
	  } else {
		return list // 否则显示全部
	  }
	})
	const btnClick = (type: string) => {
	  emits('clearData', type)
	}
  </script>
<style  lang='scss' scoped>
.main-toolsTable{
	line-height: 26px;
    border-bottom: 2px solid #e4e7ed;
    /* margin-right: 10px; */
    padding: 8px 10px 8px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>