2 changed files with 219 additions and 3 deletions
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<el-dropdown :hide-on-click="false"> |
|||
<el-button :icon="'Setting'" plain :type="hasChange ? 'primary' : null">字段设置</el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item> |
|||
<el-checkbox |
|||
v-model="checkAll" |
|||
@change="handleCheckAllChange" |
|||
:indeterminate="isIndeterminate" |
|||
><span style="color:#333">全选</span></el-checkbox> |
|||
</el-dropdown-item> |
|||
<el-checkbox-group |
|||
class="columsList" |
|||
v-model="checkedItems" |
|||
> |
|||
<el-dropdown-item |
|||
v-for="(colum,index) in columsList" |
|||
:key="index" |
|||
:draggable="true" |
|||
@dragstart="dragstart(colum)" |
|||
@dragenter="dragenter(colum,$event)" |
|||
@dragend="dragend(colum,$event)" |
|||
@dragover="dragover($event)" |
|||
> |
|||
<el-checkbox @change="(data)=>{handleCheckedItemChange(data,colum)}" :label="colum.title" :value="colum.prop"></el-checkbox> |
|||
</el-dropdown-item> |
|||
</el-checkbox-group> |
|||
</el-dropdown-menu> |
|||
<el-button class="restBtn" @click="reset">重置</el-button> |
|||
</template> |
|||
</el-dropdown> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineOptions({ name: 'setColumsPop' }) |
|||
import { reactive, ref, onMounted } from 'vue' |
|||
import { useRoute } from 'vue-router' |
|||
|
|||
const props = defineProps({ |
|||
// table表头 |
|||
tableColumns: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
//初始化表头，未从缓存获取之前 |
|||
initTableColums: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
localTableColumnsName: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
}) |
|||
|
|||
const checkAll = ref(false)//是否全选 |
|||
const isIndeterminate = ref(false)//半选样式 |
|||
const checkedItems = ref([]) |
|||
const columsList = ref([]) |
|||
const hasChange = ref(false)//是否有变化 |
|||
|
|||
// 判断是否有变化 |
|||
const getHasChange = () => { |
|||
hasChange.value = false |
|||
let _noShow = columsList.value.filter(item=>item.setNoShow == true) |
|||
// 显示发生变化 |
|||
if(_noShow && _noShow.length > 0){ |
|||
hasChange.value = true |
|||
} |
|||
// 顺序发生变化 |
|||
else{ |
|||
let _initIndex = [] |
|||
props.initTableColums.forEach(item=>{_initIndex.push(item.prop)}) |
|||
let _nowIndex = [] |
|||
columsList.value.forEach(item=>{ _nowIndex.push(item.prop)}) |
|||
hasChange.value = _initIndex.join(",") != _nowIndex.join(",") |
|||
} |
|||
} |
|||
|
|||
// 初始化数据 |
|||
const getLocalColumsList = () => { |
|||
// 设置字段列表 |
|||
columsList.value = props.tableColumns |
|||
checkedItems.value = [] |
|||
// 设置已选字段 |
|||
columsList.value.forEach(item=>{ if(!item.setNoShow)checkedItems.value.push(item.prop) }) |
|||
// 设置全选是否全选 |
|||
setCheckAllSta() |
|||
// 判断是否有变化 |
|||
getHasChange() |
|||
} |
|||
|
|||
// 配置全选状态 |
|||
const setCheckAllSta = () => { |
|||
checkAll.value = checkedItems.value.length === columsList.value.length |
|||
isIndeterminate.value = (checkedItems.value.length < columsList.value.length) && checkedItems.value.length != 0 |
|||
} |
|||
|
|||
// 全选/全不选 |
|||
const handleCheckAllChange = (val) => { |
|||
// 全选 |
|||
if(val){ |
|||
hasChange.value = false |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ |
|||
checkedItems.value.push(item.prop) |
|||
item.setNoShow = false |
|||
}) |
|||
save() |
|||
} |
|||
// 全不选 |
|||
else{ |
|||
hasChange.value = true |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ item.setNoShow = true}) |
|||
save() |
|||
} |
|||
} |
|||
|
|||
// 更改 |
|||
const handleCheckedItemChange = (isCheck,colum) => { |
|||
let _prop = colum.prop |
|||
checkedItems.value = [] |
|||
columsList.value.forEach(item=>{ |
|||
if(item.prop == _prop){item.setNoShow = !isCheck} |
|||
if(!item.setNoShow)checkedItems.value.push(item.prop) |
|||
}) |
|||
setCheckAllSta() |
|||
getHasChange() |
|||
save() |
|||
} |
|||
|
|||
// 重置 |
|||
const reset = () => { |
|||
hasChange.value = false |
|||
checkedItems.value = [] |
|||
columsList.value = JSON.parse(JSON.stringify(props.initTableColums)) |
|||
columsList.value.forEach(item=>{ checkedItems.value.push(item.prop) }) |
|||
setCheckAllSta() |
|||
save() |
|||
} |
|||
|
|||
// 存入缓存 |
|||
const save = () => { |
|||
localStorage.setItem(props.localTableColumnsName,JSON.stringify(columsList.value)) |
|||
//判断是否有变化 |
|||
getHasChange() |
|||
// 判断全选按钮状态 |
|||
setCheckAllSta() |
|||
} |
|||
|
|||
const dragOldData = ref(null) |
|||
const dragNewData = ref(null) |
|||
// 拖拽相关功能 |
|||
const dragstart = (value) => { |
|||
dragOldData.value = value |
|||
} |
|||
// 记录移动过程中信息 |
|||
const dragenter = (value, e) => { |
|||
dragNewData.value = value |
|||
e.preventDefault() |
|||
} |
|||
const dragend = (value, e) => { |
|||
// 拖拽最终操作 |
|||
if (dragOldData.value !== dragNewData.value) { |
|||
let oldIndex = columsList.value.indexOf(dragOldData.value) |
|||
let newIndex = columsList.value.indexOf(dragNewData.value) |
|||
let newItems = [...columsList.value] |
|||
// 删除老的节点 |
|||
newItems.splice(oldIndex, 1) |
|||
// 在列表中目标位置增加新的节点 |
|||
newItems.splice(newIndex, 0, dragOldData.value) |
|||
columsList.value = [...newItems] |
|||
save() |
|||
} |
|||
} |
|||
const dragover = (e) => { |
|||
// 拖动事件（主要是为了拖动时鼠标光标不变为禁止） |
|||
e.preventDefault() |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getLocalColumsList() |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.columsList{ |
|||
height:calc(100vh - 400px) !important; |
|||
overflow:auto !important; |
|||
padding:10 20px !important; |
|||
} |
|||
::v-deep .el-checkbox{ |
|||
min-width:200px !important; |
|||
} |
|||
.restBtn{ |
|||
width:calc(100% - 20px); |
|||
margin:10px; |
|||
text-align:center |
|||
} |
|||
::-webkit-scrollbar{ |
|||
width:6px; |
|||
height:6px; |
|||
} |
|||
::-webkit-scrollbar-track{ |
|||
border-radius: 10px; |
|||
background-color: #F5F5F5; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
border-radius:10px; |
|||
background-color:#ddd; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue