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.
111 lines
2.7 KiB
111 lines
2.7 KiB
<template>
|
|
<div v-for="(item, index) in Butttondata" :key="index" class="btn-div">
|
|
<el-button
|
|
v-show="!item.hide"
|
|
:type="item.type"
|
|
:color="item.color"
|
|
:link="item.link ? item.link : false"
|
|
:disabled="item.disabled"
|
|
v-hasPermi="[item.hasPermi] || []"
|
|
v-if="item.name != 'set'"
|
|
@click="buttonBaseClick(item.name, item, $event)"
|
|
>
|
|
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
|
|
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span>
|
|
</el-button>
|
|
<!-- 设置按钮 -->
|
|
<el-popover
|
|
:visible="popoverVisible"
|
|
placement="bottom"
|
|
:width="300"
|
|
trigger="click"
|
|
v-if="item.name == 'set'&&!item.hide"
|
|
>
|
|
<rowDrop
|
|
ref="rowDropRef"
|
|
@updata-table-columns="updataTableColumns"
|
|
:allSchemas="allSchemas"
|
|
:detailAllSchemas="detailAllSchemas"
|
|
@closeRowDrop="closeRowDrop"
|
|
@updataTableColumns="updataTableColumns"
|
|
/>
|
|
<template #reference>
|
|
<el-button
|
|
v-show="!item.hide"
|
|
:type="item.type"
|
|
:color="item.color"
|
|
:disabled="item.disabled"
|
|
:link="item.link ? item.link : false"
|
|
v-hasPermi="[item.hasPermi] || []"
|
|
@click="buttonBaseClick(item.name, item, $event)"
|
|
>
|
|
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
|
|
{{ item.label }}
|
|
</el-button>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
<slot></slot>
|
|
</template>
|
|
<script setup>
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import { clearButtonBlurHandle } from '@/utils/index'
|
|
import rowDrop from '@/components/rowDrop/index.vue'
|
|
const props = defineProps({
|
|
Butttondata: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
allSchemas: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
detailAllSchemas: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
})
|
|
|
|
// 传递给父类
|
|
const emit = defineEmits(['buttonBaseClick', 'updataTableColumns'])
|
|
|
|
const buttonBaseClick = (val, item, $event) => {
|
|
let timer = null
|
|
if(!timer){
|
|
clearButtonBlurHandle($event) //解决el-button点击后颜色不恢复问题
|
|
emit('buttonBaseClick', val, item, $event)
|
|
timer = setTimeout(()=>{
|
|
if(timer){
|
|
clearTimeout(timer)
|
|
}
|
|
},2000)
|
|
}
|
|
|
|
}
|
|
const popoverVisible = ref(false)
|
|
// 关闭页面
|
|
const closeRowDrop = () => {
|
|
popoverVisible.value = false
|
|
}
|
|
defineExpose({
|
|
popoverVisible
|
|
})
|
|
// 更新主列表字段
|
|
const updataTableColumns = (val) => {
|
|
emit('updataTableColumns', val)
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.btn-div{
|
|
display: inline;
|
|
|
|
::v-deep(.el-button){
|
|
margin: 0px 5px;
|
|
}
|
|
::v-deep(.el-button.is-link){
|
|
margin: 0px;
|
|
}
|
|
}
|
|
</style>
|