Browse Source

设置按钮弹窗

master
zhang_li 1 year ago
parent
commit
2d8c81fe7c
  1. 20
      src/components/TableHead/src/TableHead.vue
  2. 76
      src/components/XButton/src/ButtonBase.vue
  3. 22
      src/components/rowDrop/index.vue

20
src/components/TableHead/src/TableHead.vue

@ -18,17 +18,18 @@
style="margin-right: 15px;" style="margin-right: 15px;"
></SearchNormal> --> ></SearchNormal> -->
<!-- 右侧按钮 --> <!-- 右侧按钮 -->
<ButtonBase :Butttondata="buttonsRight" @button-base-click="buttonBaseClick" /> <ButtonBase :Butttondata="buttonsRight" @button-base-click="buttonBaseClick" @updata-table-columns="updataTableColumns"
:allSchemas="allSchemas" ref="rowDropRef"/>
</div> </div>
</div> </div>
<slot></slot> <slot></slot>
</div> </div>
<!-- 字段设置弹窗 --> <!-- 字段设置弹窗 -->
<rowDrop <!-- <rowDrop
ref="rowDropRef" ref="rowDropRef"
@updata-table-columns="updataTableColumns" @updata-table-columns="updataTableColumns"
:allSchemas="allSchemas" :allSchemas="allSchemas"
/> /> -->
<!-- 高级筛选 --> <!-- 高级筛选 -->
<SearchHigh <SearchHigh
ref="searchHigh_Ref" ref="searchHigh_Ref"
@ -126,7 +127,7 @@ watch(
const buttonBaseClick = (val, item) => { const buttonBaseClick = (val, item) => {
// //
if (val == 'set') { if (val == 'set') {
rowDropRef.value.popoverVisible = true rowDropRef.value.popoverVisible = !rowDropRef.value.popoverVisible
} else if (val == 'filtrate') { } else if (val == 'filtrate') {
searchHigh_Ref.value.popoverVisible = true searchHigh_Ref.value.popoverVisible = true
} else { } else {
@ -167,12 +168,17 @@ watch(
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.tableNavLeftBtns{
display: flex;
::v-deep(>div){
margin-right: 10px;
}
}
.tableNavRightBtns{ .tableNavRightBtns{
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
.currenButton .el-button { ::v-deep(>div){
margin-left: 10px !important; margin-left: 10px;
} }
} }
} }

76
src/components/XButton/src/ButtonBase.vue

@ -1,38 +1,84 @@
<template> <template>
<div v-for="(item, index) in Butttondata" :key="index">
<el-button <el-button
v-for="(item, index) in Butttondata" :key="index"
v-show="!item.hide" v-show="!item.hide"
:type="item.type" :type="item.type"
:color="item.color" :color="item.color"
:link = "item.link ? item.link : false" :link="item.link ? item.link : false"
v-hasPermi="[item.hasPermi] || []" v-hasPermi="[item.hasPermi] || []"
@click="buttonBaseClick(item.name,item,$event)" v-if="item.name != 'set'"
@click="buttonBaseClick(item.name, item, $event)"
> >
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> <Icon v-if="item.icon" :icon="item.icon" class="mr-1px" />
{{ item.label }} {{ item.label }}
</el-button> </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"
@closeRowDrop="closeRowDrop"
@updataTableColumns="updataTableColumns"
/>
<template #reference>
<el-button
v-show="!item.hide"
:type="item.type"
:color="item.color"
: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> <slot></slot>
</template> </template>
<script setup> <script setup>
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import { clearButtonBlurHandle } from '@/utils/index' import { clearButtonBlurHandle } from '@/utils/index'
const props = defineProps({ import rowDrop from '@/components/rowDrop/index.vue'
const props = defineProps({
Butttondata: { Butttondata: {
type: Array, type: Array,
default: () => { default: () => {
return [] return []
} }
}, },
}) allSchemas: {
type: Object,
default: null
}
})
// console.log('buttonsRight', props.Butttondata)
const emit = defineEmits([ //
'buttonBaseClick', const emit = defineEmits(['buttonBaseClick', 'updataTableColumns'])
])
const buttonBaseClick = (val, item, $event) => { const buttonBaseClick = (val, item, $event) => {
clearButtonBlurHandle($event)//el-button clearButtonBlurHandle($event) //el-button
emit('buttonBaseClick', val, item, $event) emit('buttonBaseClick', val, item, $event)
} }
const popoverVisible = ref(false)
//
const closeRowDrop = () => {
popoverVisible.value = false
}
defineExpose({
popoverVisible
})
//
const updataTableColumns = (val) => {
emit('updataTableColumns', val)
}
</script> </script>

22
src/components/rowDrop/index.vue

@ -1,5 +1,5 @@
<template> <template>
<Dialog title="字段设置" width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500"> <!-- <Dialog title="字段设置" width="270" v-model="popoverVisible" :scroll="true" :maxHeight="500"> -->
<div class="test_wrapper" @dragover="dragover($event)"> <div class="test_wrapper" @dragover="dragover($event)">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handlecheckallchange">全部</el-checkbox> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handlecheckallchange">全部</el-checkbox>
<el-checkbox-group v-model="checkedDataList" @change="handlecheckedchange"> <el-checkbox-group v-model="checkedDataList" @change="handlecheckedchange">
@ -10,11 +10,13 @@
</draggable> </draggable>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<template #footer> <div class="footer">
<!-- <template #footer> -->
<el-button size="small" @click="reset">重置</el-button> <el-button size="small" @click="reset">重置</el-button>
<el-button size="small" @click="closeRowDrop">关闭</el-button> <el-button size="small" @click="closeRowDrop">关闭</el-button>
</template> <!-- </template> -->
</Dialog> </div>
<!-- </Dialog> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
@ -68,7 +70,7 @@ const reset = () => {
// //
const closeRowDrop = () => { const closeRowDrop = () => {
popoverVisible.value = false emit('closeRowDrop')
} }
// //
@ -182,7 +184,8 @@ const updataTableColumns = (val) => {
// //
const emit = defineEmits([ const emit = defineEmits([
'updataTableColumns' 'updataTableColumns',
'closeRowDrop'
]) ])
/** 初始化 **/ /** 初始化 **/
@ -202,4 +205,11 @@ defineExpose({
// padding: 15px; // padding: 15px;
// border-top: #eee solid 1px; // border-top: #eee solid 1px;
// } // }
.test_wrapper{
max-height: calc(100vh - 350px);
overflow-y: auto;
}
.footer{
margin-top: 10px;
}
</style> </style>
Loading…
Cancel
Save