|
@@ -1,111 +1,110 @@
|
|
|
<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, item)"
|
|
|
- v-for="(item, index) in latticeArr"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <component :is="componentsIdArr[pageLoction[index + 1]]"></component>
|
|
|
- </div>
|
|
|
+ <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, item)"
|
|
|
+ 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-2'
|
|
|
- },
|
|
|
- {
|
|
|
- className: 'list_2-2_3-2'
|
|
|
- },
|
|
|
- {
|
|
|
- className: 'list_1-4'
|
|
|
- },
|
|
|
- {
|
|
|
- className: 'list_2-1'
|
|
|
- },
|
|
|
- {
|
|
|
- className: 'list_2-4'
|
|
|
- },
|
|
|
+ mixins: [comp],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ thisUpper: null,
|
|
|
+ thisItems: null,
|
|
|
+ pageLoction: {},
|
|
|
+ latticeArr: [
|
|
|
+ {
|
|
|
+ className: 'list_1-2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: 'list_2-2_3-2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: 'list_1-4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: 'list_2-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: 'list_2-4'
|
|
|
+ },
|
|
|
|
|
|
- {
|
|
|
- className: 'list_3-1x2'
|
|
|
- },
|
|
|
- {
|
|
|
- className: 'list_3-3x2'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ {
|
|
|
+ className: 'list_3-1x2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: 'list_3-3x2'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 == 5
|
|
|
+ ? 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();
|
|
|
},
|
|
|
- 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 == 5
|
|
|
- ? JSON.parse(this.$parent.oldValue.positionInfo).pageLoction
|
|
|
- : {};
|
|
|
+ drop (e, item) {
|
|
|
+ //在div里拖拽停止时执行的事件
|
|
|
+ let itemValue = this.$store.getters['getDragItem'];
|
|
|
+ if (!itemValue.compatible) {
|
|
|
+ if (
|
|
|
+ itemValue.isPosition == '1x1' &&
|
|
|
+ item.className !== 'list_2-2_3-2' &&
|
|
|
+ item.className !== 'list_3-1x2' &&
|
|
|
+ item.className !== 'list_3-3x2'
|
|
|
+ ) {
|
|
|
+ this.setModel(itemValue);
|
|
|
+ } else if (itemValue.isPosition == '2x2' && item.className == 'list_2-2_3-2') {
|
|
|
+ this.setModel(itemValue);
|
|
|
+ } else if (itemValue.isPosition == '2x1' && (item.className == 'list_3-1x2' || item.className == 'list_3-3x2')) {
|
|
|
+ this.setModel(itemValue);
|
|
|
+ } else {
|
|
|
+ this.$message.error(`${itemValue.title}模块需要配置到${itemValue.isPosition}区域`);
|
|
|
}
|
|
|
+ } else {
|
|
|
+ this.setModel(itemValue);
|
|
|
+ }
|
|
|
},
|
|
|
- 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, item) {
|
|
|
- //在div里拖拽停止时执行的事件
|
|
|
- let itemValue = this.$store.getters['getDragItem'];
|
|
|
- debugger;
|
|
|
- if (!itemValue.compatible) {
|
|
|
- if (
|
|
|
- itemValue.isPosition == '1x1' &&
|
|
|
- item.className !== 'list_2-2_3-2' &&
|
|
|
- item.className !== 'list_3-1x2' &&
|
|
|
- item.className !== 'list_3-3x2'
|
|
|
- ) {
|
|
|
- this.setModel(itemValue);
|
|
|
- } else if (itemValue.isPosition == '2x2' && item.className == 'list_2-2_3-2') {
|
|
|
- this.setModel(itemValue);
|
|
|
- } else if (itemValue.isPosition == '2x1' && (item.className == 'list_3-1x2' || item.className == 'list_3-3x2')) {
|
|
|
- this.setModel(itemValue);
|
|
|
- } else {
|
|
|
- this.$message.error(`${itemValue.title}模块需要配置到${itemValue.isPosition}区域`);
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.setModel(itemValue);
|
|
|
- }
|
|
|
- },
|
|
|
- setModel(itemValue) {
|
|
|
- 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();
|
|
|
+ setModel (itemValue) {
|
|
|
+ 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">
|