chenfang
8 months ago
5 changed files with 94 additions and 233 deletions
@ -1,160 +0,0 @@ |
|||
<template> |
|||
<div class="tableNavBtnsContent" ref="tableNavBtnsContent_Ref"> |
|||
<div class="searchBox"> |
|||
<div class="tableNavLeftBtns"> |
|||
<ButtonBase |
|||
:Butttondata="buttonsLeft" |
|||
@button-base-click="buttonBaseClick" |
|||
/> |
|||
</div> |
|||
<div class="tableNavRightBtns"> |
|||
<!-- 右侧按钮 --> |
|||
<ButtonBase :Butttondata="buttonsRight" @button-base-click="buttonBaseClick" @updata-table-columns="updataTableColumns" |
|||
:allSchemas="allSchemas" ref="rowDropRef"/> |
|||
</div> |
|||
</div> |
|||
<slot></slot> |
|||
</div> |
|||
<!-- 字段设置弹窗 --> |
|||
<!-- <rowDrop |
|||
ref="rowDropRef" |
|||
@updata-table-columns="updataTableColumns" |
|||
:allSchemas="allSchemas" |
|||
/> --> |
|||
<!-- 高级筛选 --> |
|||
<SearchHigh |
|||
ref="searchHigh_Ref" |
|||
class="searchHighClass" |
|||
:routeName="routeName" |
|||
:masterId="masterId" |
|||
:showPrimaryBaseButton="false" |
|||
@search-form-click="searchFormClick" |
|||
:isHighExcludePrimary="false" |
|||
:primarySearchCustomButton="[]" |
|||
:highSearchCustomButton="[]" |
|||
:allSchemas="allSchemas" |
|||
/> |
|||
</template> |
|||
<script setup> |
|||
import ButtonBase from '@/components/XButton/src/ButtonBase.vue' |
|||
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|||
import rowDrop from "@/components/rowDrop/index.vue" |
|||
|
|||
const props = defineProps({ |
|||
HeadButttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 主组件name值 |
|||
routeName: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 从子表进行高级搜索 |
|||
masterId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
allSchemas: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}) |
|||
const buttonsLeft = ref([]) |
|||
const buttonsRight = ref([]) |
|||
const tableNavBtnsContent_Ref = ref() |
|||
|
|||
// 更新主列表字段 |
|||
const updataTableColumns = (val) => { |
|||
emit('updataTableColumns', val) |
|||
} |
|||
|
|||
// const defaultButtons = inject('global').defaultButtons |
|||
// 创建左右按钮数据 |
|||
const buttonsLeftOrRight = () => { |
|||
buttonsRight.value = [] |
|||
buttonsLeft.value = [] |
|||
// 判断是否有筛选按钮(判断筛选按钮的逻辑位置，影响筛选按钮的位置) |
|||
// 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() |
|||
|
|||
watch( |
|||
() => props.HeadButttondata, |
|||
() => { |
|||
buttonsLeftOrRight() |
|||
} |
|||
) |
|||
|
|||
|
|||
// 传递给父类 |
|||
const emit = defineEmits([ |
|||
'buttonBaseClick', |
|||
'updataTableColumns', |
|||
'searchFormClick' |
|||
]) |
|||
|
|||
// 设置显示隐藏变量 |
|||
const rowDropRef = ref() |
|||
|
|||
|
|||
const buttonBaseClick = (val, item) => { |
|||
// 设置按钮 |
|||
if (val == 'set') { |
|||
rowDropRef.value.popoverVisible = !rowDropRef.value.popoverVisible |
|||
} else if (val == 'filtrate') { |
|||
searchHigh_Ref.value.popoverVisible = true |
|||
} else { |
|||
emit('buttonBaseClick', val, item) |
|||
} |
|||
} |
|||
|
|||
const quicklySearchDom_Ref = ref() |
|||
|
|||
// 筛选组件 |
|||
const searchHigh_Ref = ref(false) |
|||
// 高级筛选所有的按钮事件 |
|||
const searchFormClick = (searchData) => { |
|||
emit('searchFormClick', searchData) |
|||
searchHigh_Ref.value.popoverVisible = false |
|||
} |
|||
|
|||
defineExpose({ |
|||
tableNavBtnsContent_Ref, |
|||
quicklySearchDom_Ref |
|||
}) |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tableNavBtnsContent{ |
|||
padding-bottom: 10px; |
|||
.searchBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.tableNavLeftBtns{ |
|||
display: flex; |
|||
|
|||
margin-left: -5px; |
|||
} |
|||
.tableNavRightBtns{ |
|||
display: flex; |
|||
margin-left: 10px; |
|||
margin-right: -5px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue