windLifecontrolPro/src/components/generatingCapacityComponent/excel.vue

<template>
    <div class="excelData" :style="{ height: height, overflow: 'auto' }">
        <el-empty v-if="!data.length" :image="nodata" image-size="100" description="暂无数据，敬请期待" />
        <el-checkbox-group size="small" v-model="excelCheckIds" v-if="showCheckbox" @change="funCheckChange">
            <el-checkbox size="small" class="excelDatahaveCheck" :class="theme ? 'excelW' : 'excelB'" :label="item.id"
                v-for="item in data" :key="item.name"
                :style="!theme && showCC ? 'background: rgba(0,70,199,0.35)' : ''">
                <span @click.stop="funExcelChange(item)">
                    <img :src="CSV_C" alt="" v-if="isshowC(item)">
                    <img :src="CSV" alt="" v-else>
                    <span class="excelName">{{ item.name }}</span>
                </span>
            </el-checkbox>
        </el-checkbox-group>
        <div v-else>
            <div class="excelDataNoCheck" :class="theme ? 'excelW' : 'excelB'" v-for="item in data" :key="item.name"
                @click="funExcelChange(item)"
                :style="!theme && currentId === item.id ? 'background: rgba(0,70,199,0.35)' : ''">
                <!-- <el-icon>
                    <Document />
                </el-icon> -->
                <img :src="CSV_C" alt="" v-if="currentId === item.id">
                <img :src="CSV" alt="" v-else>
                <span class="excelName" :style="excelSpanSty(item)">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import CSV from '@/assets/menuImg/CSV.png'
    import CSV_C from '@/assets/menuImg/CSV_C.png'
    import nodata from '@/assets/images/noData.png'
    export default {
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            height: {
                type: String,
                default: () => {
                    return '';
                },
            },
            showCheckbox: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
            checkIds: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            theme: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
        },
        data() {
            return {
                CSV: CSV,
                CSV_C: CSV_C,
                nodata: nodata,
                showCC: null,
                excelCheckIds: [],
                currentId: ''
            }
        },
        watch: {
            checkIds(newVal, oldVal) {
                this.excelCheckIds = newVal
            },
            data(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.currentId = newVal[0].id
                } else {
                    this.currentId = ''
                }
            }
        },
        methods: {
            isshowC(item) {
                this.showCC = false
                this.excelCheckIds.forEach(it => {
                    if (it === item.id) {
                        this.showCC = true
                    }
                })
                return this.showCC
            },
            excelSpanSty(item) {
                if (this.theme) {
                    if (this.currentId === item.id) {
                        return 'color: #5473E8'
                    } else {
                        return 'color:#000'
                    }
                } else {
                    if (this.currentId === item.id) {
                        return 'color: #fff'
                    } else {
                        return 'color:#C3C3C4'
                    }
                }
            },
            funExcelChange(obj) {
                this.currentId = obj.id
                this.$emit('excelChange', obj)
            },
            funCheckChange(checkArr, b) {
                this.$emit('checkChange', {
                    checkArr,
                    data: this.data
                }) //抛出当前选择checkIds,  和当前的childs数据项
            }
        }
    }
</script>
<style lang="less">
    .excelData {
        .excelDatahaveCheck {
            line-height: 25px;
            height: 25px;
            width: calc(100% - 10px);
            font-size: 14px;
            color: #b7b7b7;

            margin-bottom: 5px;
            border: 1px solid rgba(203, 204, 209, 0.5);
            cursor: pointer;

            img {
                width: 20px;
                height: 20px;
                position: relative;
                top: 3px;
            }

            .excelName {
                position: relative;
                top: -2px;
                margin-left: 3px;
            }

            .el-checkbox__input {
                right: -90%;
            }

            .is-checked {}

            .el-checkbox__label {
                position: relative;
                left: -15px;
                top: -2px;
            }
        }

        .excelDataNoCheck {
            line-height: 25px;
            height: 25px;
            width: calc(100% - 10px);
            font-size: 14px;
            color: #b7b7b7;

            margin-bottom: 5px;
            border: 1px solid rgba(203, 204, 209, 0.5);
            cursor: pointer;

            .el-icon {
                margin-right: 5px;
                color: #504bb5;
            }

            img {
                width: 20px;
                height: 20px;
                position: relative;
                top: 3px;
            }

            .excelName {
                position: relative;
                top: -2px;
                margin-left: 3px;
            }
        }

        .excelW {
            background: #fff;
        }

        .excelB {
            background: #181A1E;
        }
    }
</style>