You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.2 KiB
82 lines
2.2 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-13 14:36:07
|
|
@ 备注: App表单头部控制
|
|
-->
|
|
<script lang='ts' setup>
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
|
|
hideKey?: string[] // 设置了showKey时，hideKey无效
|
|
customerformid?: string,
|
|
}>(),
|
|
{
|
|
showKey: () => {
|
|
return []
|
|
},
|
|
hideKey: () => {
|
|
return []
|
|
},
|
|
customerformid: () => {
|
|
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: 'branch',iconFont:"fa-code-fork", label: '另存为新版', key: 4 },
|
|
// { 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('click', type)
|
|
}
|
|
|
|
</script>
|
|
<template>
|
|
<div class="main-head-tools">
|
|
<div></div>
|
|
<div>
|
|
<span v-for="item in btnList">
|
|
<el-button
|
|
link
|
|
v-if="(item.icon != 'branch') || (item.icon == 'branch' && (props.customerformid !=''))"
|
|
@click="btnClick(item.icon)"
|
|
:key="item.icon"
|
|
:type="item.key==6?'danger':item.key==5?'success':item.key==4?'warning':''"
|
|
>
|
|
<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }}
|
|
</el-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.main-head-tools{
|
|
line-height: 26px;
|
|
border-bottom: 2px solid #e4e7ed;
|
|
padding: 6px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:space-between;
|
|
}
|
|
</style>
|
|
|