<template>
|
<el-popover
|
v-bind="popoverProps"
|
>
|
<template #reference>
|
<el-button link>
|
<el-icon style="font-size: 15px">
|
<setting/>
|
</el-icon>
|
</el-button>
|
</template>
|
<template #default>
|
<div class="wrapper" ref="refNode">
|
<div v-for="(item,index) in fields" :key="item.prop + index" class="item">
|
<div>{{ item.label }}</div>
|
<div class="ignore-elements">
|
<el-switch size="small" v-model="item.isShow" @change="onSwitch"></el-switch>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-popover>
|
</template>
|
|
<script setup>
|
|
import * as tools from '@/utils/tools.js'
|
import Sortable from "sortablejs";
|
|
import {context} from '@/hooks';
|
|
const {useForceUpdate} = context;
|
|
import {useI18n} from 'vue-i18n';
|
|
const {t} = useI18n();
|
|
const refNode = ref();
|
|
const popoverProps = {
|
trigger: 'focus',
|
placement: 'bottom',
|
title: t('components.table.TableSearch.ColSetting.title'),
|
width: 280
|
}
|
|
|
const props = defineProps({
|
fields: {
|
type: Array,
|
default: () => {
|
}
|
},
|
subFields: {
|
type: Function,
|
default: () => {
|
}
|
}
|
});
|
|
const [$props, forceUpdate] = useForceUpdate(props);
|
|
const $forceUpdate = async (force) => {
|
forceUpdate(force);
|
fields.value = [...$props.fields];
|
}
|
|
const fields = ref([]);
|
|
const dragSortHandler = () => {
|
Sortable.create(refNode.value, {
|
animation: 500,
|
forceFallback: true,
|
filter: ".ignore-elements",
|
onEnd({newIndex, oldIndex}) {
|
const list = fields.value.map(e => ({...e}));
|
list.forEach(e => {
|
e.id = tools.uuid();
|
})
|
const currRow = list.splice(oldIndex, 1)[0];
|
list.splice(newIndex, 0, currRow);
|
fields.value = list;
|
props.subFields([...list]);
|
}
|
});
|
};
|
|
const onSwitch = () => {
|
props.subFields([...fields.value]);
|
}
|
|
onMounted(() => {
|
dragSortHandler();
|
})
|
|
defineExpose({
|
$forceUpdate
|
});
|
|
</script>
|
|
<style lang='scss' scoped>
|
.wrapper {
|
.item {
|
pointer-events: bounding-box;
|
position: relative;
|
top: 5px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 5px 10px;
|
margin-bottom: 4px;
|
box-sizing: border-box;
|
//font-size: 13px;
|
cursor: pointer;
|
border-radius: 5px;
|
font-size: var(--el-font-size-small);
|
background: var(--el-color-primary-light-9);
|
}
|
}
|
</style>
|
