super-fusion-platform/src/views/screenAdaptation/pages/adminCenter/SystemList.vue

<template>
    <div class="system-list-style clearfix">
        <template v-if="systemList.length > 0">
            <div v-for="system in systemList" :key="system.id" class="system-style" @click="accessSubsystem(system)">
                <img :src="getImgSrc(system)"
                     class="img-style">
                <div class="system-name-style">{{system.name}}</div>
            </div>
        </template>
        <!--八大中心后台管理系统-->
        <template v-if="systemCenterList.length > 0">
            <div v-for="system in systemCenterList" :key="system.id" class="system-style"
                 @click="servicePlatform(system)">
                <img :src="getImgSrc(system)"
                     class="img-style">
                <div class="system-name-style">{{system.title}}</div>
            </div>
        </template>
        <div v-if="systemList.length === 0 && systemCenterList.length === 0" class="tips-style">您的当前角色暂未被开放任何系统功能，请联系管理员</div>
    </div>
</template>

<script>
    import {systemConfigData, systemCenterConfig} from './systemConfig'
    import _ from 'lodash'
    export default {
        name: "SystemList",
        props: ["crmData"],
        data: function () {
            return {
                systemList: _.cloneDeep(systemConfigData),
                systemCenterList: [],
                crm: this.crmData,
            }
        },
        mounted() {
            this.calculateData()
            //角色八大中心菜单逻辑关系
            this.systemCenterList = _.cloneDeep(systemCenterConfig)
            //this.calulateCenterData()
        },
        methods: {
            accessSubsystem: function (system) {
                this.$emit('accessSubsystem', system);
            },
            //综合服务平台管理中心
            servicePlatform: function (system) {
                this.$emit('servicePlatform', system);
            },
            getImgSrc: function (system) {
                return require('../../../../assets/systemImg/' + (system.icon && system.icon !== '' ? system.icon : system.id + '.png'));
            },
            calculateData: function () {
                if (this.crm && this.TypesCheck.isArray(this.crm) && this.crm.length > 0) {
                    for (let i = this.systemList.length - 1; i >= 0; i--) {
                        let system = this.systemList[i];
                        let isExist = true;
                        let node = this.crm.filter((item) => {
                            return item.id === system.relative_crm[0]
                        })[0];
                        if (typeof (node) !== "undefined") {
                            system.purview_code = node.purview_code;
                            // system.menu_code = '001002';
                            // system.purview_id = '3';
                            for (let k = 1; k < system.relative_crm.length; k++) {
                                if (typeof (node) !== "undefined" && node.children) {
                                    let nodeAry = node.children.filter((item) => {
                                        return item.id === system.relative_crm[k]
                                    });
                                    if (typeof (nodeAry) !== "undefined" && nodeAry.length > 0) {
                                        node = nodeAry[0];
                                    } else {
                                        isExist = false;
                                        break;
                                    }
                                } else {
                                    isExist = false;
                                    break;
                                }
                            }
                        } else {
                            isExist = false
                        }
                        if (!isExist) {
                            this.systemList.splice(i, 1);
                        }
                    }
                } else {
                    this.systemList = [];
                }
            },
            calulateCenterData:function () {
                let roles = this.BaseConfig.person_info_my.roles;
                let centerSourceData = _.cloneDeep(systemCenterConfig);
                if(roles && roles.length > 0){
                    for(let i = 0,len = roles.length;i < len;i ++){
                        let role_code = roles[i].role_code;
                        for(let j = 0,mLen = centerSourceData.length;j < mLen;j ++){
                            let roleCode = centerSourceData[j].roleCode;
                            if(role_code === roleCode){
                                this.systemCenterList.push(centerSourceData[j]);
                                break
                            }
                        }
                    }
                }
            }
        },
        watch: {
            crmData: function (newData) {
                this.crm = newData;
                this.SystemList = _.cloneDeep(systemConfigData);
                this.calculateData();
            }
        }
    }

</script>

<style scoped lang="scss">
    .system-list-style {
        width: 774px;
        background-color: white;
        border-radius: 14px;
        /*height: 577px;*/
        padding: 2px 32px 34px 6px;
        .system-style {
            float: left;
            margin-left: 26px;
            margin-top: 32px;
            width: 79px;
            height: 111px;
            cursor: pointer;
            position: relative;
            .img-style {
                position: absolute;
                top: 0;
                left: 0;
                width: 79px;
                height: 79px;
                &:hover {
                    left: -5px;
                    top: -5px;
                    width: 89px;
                    height: 89px;
                }
            }
            .system-name-style {
                margin-top: 90px;
                text-align: center;
                width: 79px;
                font-size: 14px;
                color: #221815;
                word-break: keep-all;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .tips-style {
            width: 100%;
            height: 10rem;
            text-align: center;
            line-height: 10rem;
            font-size: 14px;
        }
    }

</style>