SmartCommunity/operationSupport/src/views/newWorkBench/editWorkbench.vue

<template>
    <div class="workbench">
        <div class="ComponentSave">
            <div class="saveColumn">
                <span class="title">工作台-自拟定</span>
                <el-select v-model="model" @change="changeSelect" class="saveColumn-select">
                    <el-option v-for="(item, index) in modelSelect" :key="index" :label="item.lable" :value="item.model_id"></el-option>
                </el-select>
            </div>
            <div class="saveColumn-buttons">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="saveWork">保存并使用</el-button>
            </div>
        </div>
        <div class="operation">
            <div class="leftAssembly">
                <el-select v-model="componentsValue" clearable @change="changeSelect" class="saveColumn-select">
                    <el-option
                        v-for="(item, index) in componentsSelect"
                        :key="index"
                        :label="item.lable"
                        :value="item.model_id"
                    ></el-option>
                </el-select>
                <div class="componentsBlock">
                    <template v-for="(item, index) in componentsArrar">
                        <div
                            class="moveBlock"
                            :data-id="item.data_id"
                            @mousedown="moveBlock($event, item.data_id)"
                            :key="index"
                            draggable
                            @dragstart="dragstart($event, item)"
                            @dragend="dragend($event)"
                            @drag="drag($event)"
                        >
                            <div class="moveBlock_titles">{{ item.title }}</div>
                            <div class="moveBlock_img">
                                <img :src="item.imgPng" :alt="item.title" />
                            </div>
                            <div class="moveBlock_icon">
                                <img :src="item.imgIcon" :alt="item.title" />
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <model-one v-if="model == 1" :ref="model + '_model'"></model-one>
            <model-two v-if="model == 2" :ref="model + '_model'"></model-two>
            <model-three v-if="model == 3" :ref="model + '_model'"></model-three>
            <model-four v-if="model == 4" :ref="model + '_model'"></model-four>
        </div>
    </div>
</template>
        
<script>
import workcommonFcuntion from './template/index.js';
export default {
    mixins: [workcommonFcuntion],
    data() {
        return {
            model: 1,
            oldValue: {},
            modelSelect: [
                {
                    model_id: 1,
                    lable: '模板一（默认模块）'
                },
                {
                    model_id: 2,
                    lable: '模板二（默认模块）'
                },
                {
                    model_id: 3,
                    lable: '模板三'
                }
                // {
                //     model_id: 4,
                //     lable: '模板四'
                // }
            ],
            componentsSelect: [
                {
                    model_id: 0,
                    lable: '全部'
                }
            ],
            componentsArrar: [
                {
                    data_id: 1,
                    title: '高德地图',
                    imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_4x@2x.png')
                },
                {
                    data_id: 2,
                    title: '投诉建议',
                    imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 3,
                    title: '常用功能',
                    imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 4,
                    title: '服务满意度趋势',
                    imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                {
                    data_id: 5,
                    title: '设备告警趋势',
                    imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_2x@2x.png')
                },
                // img_bing+baifenbi@2x
                {
                    data_id: 6,
                    title: '房屋租售率',
                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                },
                {
                    data_id: 7,
                    title: '收款率分析',
                    imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
                    imgIcon: require('@assets/img/formulation/tag_1x@2x.png')
                }
            ],
            componentsValue: 0,
            isEdit: false,
            dataId: null
        };
    },
    watch: {
        $route(to, from) {
            if (to.query.editWorkbench) {
                this.isEdit = true;
            }
        }
    },
    methods: {
        moveBlock(e, num) {
            this.dataId = num;
        },
        communityNameList() {
            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
                if (status == 0) {
                    this.$store.commit('setAreaSelect', data);
                }
            });
        },
        dragstart(e, item) {
            //拖拽开始时将item存入vuex
            this.$store.commit('setDragItem', item);
        },
        drag(e) {
            //拖拽中执行的事件
            // console.log('drag',e)s
        },
        dragend(e) {
            //拖拽结束执行的事件
            // console.log('dragend', e);
        },
        close() {
            let tagsList = this.$store.getters['getTagsList'];
            let activeRout = this.$route;
            if (tagsList.length > 1) {
                tagsList.forEach((item, index) => {
                    if (item.title == activeRout.meta.title || item.path == activeRout.path) {
                        tagsList.splice(index, 1);
                        this.$router.push({
                            path: tagsList[index - 1].path
                        });
                    }
                });
            } else {
                this.$router.push({
                    path: '/'
                });
            }
        },
        saveWork() {
            let simeCom = JSON.stringify({ model: this.model, pageLoction: this.$refs[this.model + '_model'].sumit() });
            let installVal = {
                positionInfo: simeCom,
                urls: '',
                id: ''
            };

            let url = '/sc-community/workbenchConfig/add';
            if (!!this.oldValue.id) {
                url = '/sc-community/workbenchConfig/update';
                installVal.id = this.oldValue.id;
            }
            this.$http.post(url, installVal).then(({ data, msg, status }) => {
                if (status == 0) {
                    this.close();
                }
            });
        },
        getData() {
            this.$http.get('/sc-community/workbenchConfig/list').then(({ data, msg, status }) => {
                if (status == 0) {
                    if (!!data[0]) {
                        let val = data[0];
                        this.model = JSON.parse(val.positionInfo).model;
                        this.oldValue = val;
                    }
                }
            });
        }
    },
    destroyed() {
        this.$store.dispatch('collapse', false);
    },
    created() {
        this.$store.dispatch('collapse', true);
        this.getData();
        this.communityNameList();
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
$BackColor: #171f32;
.overflowHidden {
    overflow: hidden;
}
.list_border {
    border: 1px solid $BackColor;
    border-radius: 4px;
}
.mr10 {
    margin: rem(10);
}
.workbench {
    background: #2c354a;
    height: 100%;
    min-height: rem(700);
    overflow: auto;
    color: white;
    &::-webkit-scrollbar {
        display: none;
    }
    .ComponentSave {
        height: rem(60);
        min-height: 60px;
        background: $BackColor;
        border-radius: 4px;
        margin-bottom: rem(20);
        padding: 0 rem(20);
        display: flex;
        justify-content: space-between;
        .saveColumn {
            display: flex;
            align-items: center;
            .saveColumn-select {
                margin-left: rem(20);
                /deep/ .el-input__inner {
                    background: transparent;
                    color: white;
                }
            }
        }
        .saveColumn-buttons {
            display: flex;
            align-items: center;
            /deep/ .el-button {
                padding: rem(8) rem(20);
            }
            /deep/ .el-button--default {
                background: transparent;
                border-color: #0eaeff;
                color: white;
                &:active {
                    opacity: 0.8;
                }
            }
        }
    }
    .operation {
        height: rem(794);
        min-height: 794px;
        display: flex;
        justify-content: space-between;
        .leftAssembly {
            width: 174px;
            background: $BackColor;
            border-radius: 4px;
            padding: rem(20) rem(8) rem(20) rem(20);
            .saveColumn-select {
                margin-bottom: rem(30);
                margin-right: rem(12);
                /deep/ .el-input__inner {
                    background: transparent;
                    color: white;
                    border-color: rgba(255, 255, 255, 0.2);
                }
            }
            // 块级模块
            .componentsBlock {
                height: calc(100% - #{rem(62)});
                overflow-y: auto;
                overflow-x: hidden;
                &::-webkit-scrollbar {
                    z-index: 11;
                    width: rem(4);
                }
                &::-webkit-scrollbar-track,
                &::-webkit-scrollbar-corner {
                    background: transparent;
                }
                &::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                    width: rem(4);
                    background: rgba(250, 250, 250, 0.09);
                }
                &::-webkit-scrollbar-track-piece {
                    background: transparent;
                    width: rem(4);
                }
                .moveBlock {
                    font-size: 12px;
                    width: rem(132);
                    height: rem(132);
                    background: rgba(0, 0, 0, 0.1);
                    box-sizing: border-box;
                    border-radius: 4px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    padding: rem(10);
                    margin-bottom: rem(20);
                    text-align: center;
                    position: relative;
                    cursor: move;
                    .moveBlock_titles {
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                    }
                    .moveBlock_img {
                        width: rem(60);
                        margin: auto;
                        img {
                            width: 100%;
                            margin-top: rem(20);
                        }
                    }
                    .moveBlock_icon {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        height: rem(20);
                        img {
                            width: rem(28);
                            height: rem(20);
                        }
                    }
                }
            }
        }
    }
}
</style>