SmartCommunity/operationSupport/src/views/newWorkBench/template/styleThree.vue

<template>
    <div class="contentShow">
        <div
            class="overflowHidden list_border mr10"
            :class="thisUpper == index + 1 && !!thisItems ? `moveHover ${item.className}` : item.className"
            @dragleave="dragleave($event, index + 1)"
            @dragover="dragover($event, index + 1)"
            @drop="drop($event, index + 1)"
            v-for="(item, index) in latticeArr"
            :key="index"
        >
            <component :is="componentsIdArr[pageLoction[index + 1]]"></component>
        </div>
    </div>
</template>
<script>
import comp from '@views/newWorkBench/components/index.js';
export default {
    mixins: [comp],
    data() {
        return {
            thisUpper: null,
            thisItems: null,
            pageLoction: {},
            latticeArr: [
                {
                    className: 'list_1-1'
                },
                {
                    className: 'list_2-2_3-2'
                },
                {
                    className: 'list_1-4'
                },
                {
                    className: 'list_2-1'
                },
                {
                    className: 'list_2-4'
                },

                {
                    className: 'list_3-1'
                },
                {
                    className: 'list_3-2'
                },

                {
                    className: 'list_3-3'
                },
                {
                    className: 'list_3-4'
                }
            ]
        };
    },
    created() {
        if (!!this.$parent.oldValue.positionInfo) {
            this.pageLoction =
                typeof this.$parent.oldValue.positionInfo == 'object'
                    ? this.$parent.oldValue.positionInfo
                    : JSON.parse(this.$parent.oldValue.positionInfo).model == 3
                    ? JSON.parse(this.$parent.oldValue.positionInfo).pageLoction
                    : {};
        }
    },
    mounted() {},
    computed: {},
    methods: {
        dragleave(e, index) {
            //当拖拽离开这个div时执行的事件
            this.thisItems = null;
        },
        dragover(e, index) {
            this.thisUpper = index;
            this.thisItems = index;
            //拖拽在这个div里面拖拽时执行的事件
            //一定要执行preventDefault(),否则drop事件不会被触发
            e.preventDefault();
        },
        drop(e, index) {
            //在div里拖拽停止时执行的事件
            let itemValue = this.$store.getters['getDragItem'];
            for (let k in this.pageLoction) {
                if (this.pageLoction[k] == itemValue.data_id) {
                    this.pageLoction[k] = null;
                }
            }
            this.pageLoction[this.thisUpper] = itemValue.data_id;
            this.thisItems = null;
            this._watcher.run();
        }
    }
};
</script>
<style scoped lang="scss">
@import './style.scss';

.contentShow {
    border: 1px solid $BackColor;
    width: calc(100% - 194px);
    border-radius: 4px;
    padding: rem(10);
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px;
    height: 100%;
    .list_1-1 {
        grid-area: 1 / 1 / 1 / 1;
    }
    .list_2-2_3-2 {
        grid-area: 2 span/ 2 / 3 / span 2;
    }
    .list_1-4 {
        grid-area: 1 / 4 / 1 / 4;
    }
    .list_2-1 {
        grid-area: 2 / 1 / 2 / 1;
    }
    .list_2-4 {
        grid-area: 2 / 4 / 2 / 4;
    }
    .list_3-1 {
        grid-area: 3 / 1 / 3 / 1;
    }
    .list_3-2 {
        grid-area: 3 / 2 / 3 / 2;
    }
    .list_3-3 {
        grid-area: 3 / 3 / 3 / 3;
    }
    .list_3-4 {
        grid-area: 3 / 4 / 3 / 4;
    }
}
</style>