qimall/addons/DepositPresale/backend/views/default/components/style-components/diy-header.php

<template id="diy-header">
    <div>
        <div class="headers-box" flex="cross:center">
            <div class="header-tab-lists" :class="{activeName: current == 0}" flex="cross:center" v-if="activeItem && activeItem.funcListItem" @click="toggleTab(0)">
                <div class="header-tab-img" flex="cross:center" v-if="funcIcon">
                    <el-image :src="funcIcon">
                        <div slot="error" class="image-slot">
                            <el-image src="resources/img/decorate/top_nav.png"></el-image>
                        </div>
                    </el-image>
                </div>
                <div class="header-tab-title">{{ activeItem.funcListItem.title }}</div>
            </div>
            <div class="header-tab-lists" :class="{activeName: current == 1}" flex="cross:center" v-if="activeItem && activeItem.is_show_permission" @click="toggleTab(1)">
                <div class="header-tab-img" flex="cross:center">
                    <el-image :src="quanxianIcon"></el-image>
                </div>
                <div class="header-tab-title">权限</div>
            </div>
        </div>
        <div v-if="current == 0">
            <slot></slot>
        </div>
        <div v-else>
            <diy-style-contain :show-title="false">
                <div class="func-box" v-for="(item, index) in permission" :key="index">
                    <div class="func-title">{{ item.title }}</div>
                    <div class="func-checkbox-boxs" v-if="item.list && item.list.length">
                        <el-checkbox class="func-checkbox-item" v-for="(it, i) in item.list" :key="i" v-model="it.checked" @change="funcChange($event, it, i)">
                            {{ it.name }}
                        </el-checkbox>
                    </div>
                </div>
            </diy-style-contain>
        </div>
    </div>
</template>

<script>
    /**
     * 最右侧头部组件
     */
    Vue.component('diy-header', {
        template: '#diy-header',
        name: 'diy-header',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            allPermission: {
                type: Array,
                default () {
                    return []
                }
            },
        },
        data() {
            return {
                current: 0,
                permission: [],
                selectedArr: [],
                result: '',
                tempPermi: [],
            }
        },
        created() {
            var isCheck = this.activeItem && this.activeItem.permission && this.activeItem.permission.length; //
            if (this.activeItem && this.activeItem.permission && this.activeItem.permission.length) {
                // 有初始值 - 不需要更新数据
                const newList = deepClone(this.allPermission)
                const oldList = deepClone(this.activeItem.permission)
                const result = newList.map((item, index) => {
                    return Object.assign(item, {
                        list: item.list.map((item1, index1) => {
                            var checked = true
                            const it = getObjValue(oldList, [index])
                            const it1 = getObjValue(oldList, [index, 'list', index1])
                            // 匹配对比
                            if (it1 && (it.name === item.name) && (it1.level === item1.level)) {
                                checked = it1.checked
                            }
                            return Object.assign(item1, {
                                checked
                            })
                        })
                    })
                })
                this.permission = this.setChecked(result);
            } else {
                // 初始化 - 更新一下数据
                this.tempPermi = this.setChecked(this.allPermission)
                this.permission = deepClone(this.tempPermi)
                if (this.activeItem) {
                    // 判断是否选中 - 只会走一次
                    this.$emit("permis-change", this.permission)
                }
            }
        },
        computed: {
            quanxianIcon() {
                return this.current == 0 ? 'resources/img/decorate/quanxian_icon_noact.png' : 'resources/img/decorate/quanxian_icon_act.png'
            },
            funcIcon() {
                const str = "resources/img/decorate/func/template.png"
                return str.replace("template", this.activeItem.funcListItem.type)
            }
        },
        methods: {
            setChecked(list) {
                return list.map(item => {
                    return Object.assign(item, {
                        list: item.list.map(item1 => {
                            return Object.assign({
                                checked: true
                            }, item1)
                        })
                    })
                })
            },
            toggleTab(i) {
                this.current = i
            },
            funcChange(e, it, i) {
                it.checked = e
                this.$emit("permis-change", this.permission)
            }
        }
    })
</script>

<style>
    .headers-box {
        width: 100%;
        height: 53px;
        padding: 0 20px;
    }

    .header-tab-lists {
        width: 50%;
        cursor: pointer;
    }

    .header-tab-title {
        font-size: 14px;
        font-weight: 700;
        color: #999;
        /* padding-left: 16px; */
    }

    .activeName .header-tab-title {
        color: var(--diy-color);
    }

    .header-tab-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 53px;
    }

    .header-tab-img .el-image {
        width: 30px;
    }

    .func-box {
        padding-bottom: 20px;
    }

    .func-title {
        font-size: 14px;
        color: #999999;
        font-weight: 700;
        padding-bottom: 15px;
    }

    .func-checkbox-item {
        padding-bottom: 13px;
    }
</style>