dev/dcp-web-gate/src_old/components/screen.vue

<template>
    <div style="margin-left: 20px; width: 1160px;background-color: rgb(247, 247, 247);" >
        <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen1'>
           <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen1.value)}}</span>
           <span>
               <span style="margin-left: 15px;font-size: 14px;font-weight: 400;word-break:break-all;"  :class="click1==i.value?'lable1':'lable2'" v-for="(i,e) in screen1.item"
               @click="changeLable1(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
           </span>
        </div>
        <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen2'>
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen2.value)}}</span>

                <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click2==i.value?'lable1':'lable2'" v-for="(i,e) in screen2.item"
                @click="changeLable2(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>

         </div>
         <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen3'>
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen3.value)}}</span>
            <span>
                <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click3==i.value?'lable1':'lable2'" v-for="(i,e) in screen3.item"
                @click="changeLable3(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
            </span>
         </div>
         <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen4'>
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen4.value)}}</span>
            <span>
                <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click4==i.value?'lable1':'lable2'" v-for="(i,e) in screen4.item"
                @click="changeLable4(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
            </span>
         </div>
         <!-- children类型 -->
         <!-- <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen7'>
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen4.value)}}</span>
            <span>
                <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click7==i.value?'lable1':'lable2'" v-for="(i,e) in screen7.item"
                @click="changeLable7(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
            </span>
         </div> -->
         <!-- 多选 -->
         <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;" v-if='screen5' class="screen5">
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen5.value)}}</span>
                <span style="margin-left: 10px;font-size: 14px;font-weight: 400;" :class="i.ifValue?'lable1 cursor':'lable2 cursor'" v-for="(i,e) in screen5.item"
                @click="changeLable5(i,e)" :key="e">{{i.label=='common.All'? $t('common.All'):i.label}}</span>

         </div>
         <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;" v-if='screen6' class="screen">
            <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen6.value)}}</span>
            <span>
                <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click6.click==i.value?'lable1':'lable2'" v-for="(i,e) in screen6.item"
                @click="changeLable6(1,i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
            </span>
            <span class="lable2" style="font-size:14px;color: #666;">
                <!-- {{$t('common.custom')}}  -->
                <input type="text" autocomplete="off" class="el-input__inner" v-model="click6.input" maxlength="10" show-word-limit>
                {{$t('common.year')}}
            </span>
            <span style="font-size:14px;color: #0079ef;" class="cursor" v-show="click6.input" @click="changeLable6(2,click6.input)"> {{$t('common.query')}}</span>
         </div>
    </div>
</template>
<script>
    export default {
        name: 'Screen',
        props:["screen1",'screen2','screen3','screen4','screen5','screen6','screen1Item','screen2Item','screen1def'],
        data () {
            return {
                click1:null,
                click2:null,
                click3:null,
                click4:null,
                click5:[],
                click6:{
                    click:null,
                    input:''
                },
                click7:null
            }
        },
        watch:{
            'click6.input'(){
                if(this.click6.input){
                    this.click6.click='';
                }else {
                    this.click6.click=null;
                    this.emit()
                }
            },
            'screen2Item'(){
                // debugger
                    this.click2 = this.screen2Item;
                this.emit()
            },
            'screen1def'(){
                    this.click1 = this.screen1def;
            }
        },
        created(){
            // if(this.screen5){
            //     this.screen5.item.forEach(element => {
            //         element.ifValue=false;
            //     });
            //     this.screen5.item[0].ifValue=true;
            // }
            // this.emit()
        },
        mounted(){

            if(this.screen1){
                this.screen1.item.forEach(element => {
                    if(element.ifClick){
                        this.click1=element.value
                    }
                });
            }
            if(this.screen2){
                this.screen2.item.forEach(element => {
                    if(element.ifClick){
                        this.click2=element.value
                    }
                });
            }
            this.$forceUpdate();

            // this.emit()

        },
        computed:{
            unique(array){
                return Array.from(new Set(array))
            }

        },
        methods:{

            changeLable1(value){
                this.click1=value
                this.emit()
            },
            changeLable2(value){
                this.click2=value
                this.emit()
            },
            changeLable3(value){
                this.click3=value
                this.emit()
            },
            changeLable4(value){
                this.click4=value
                this.emit()
            },
            changeLable6(num,value){
                if(num==1){
                    this.click6.click=value
                    this.emit()
                }else {
                    this.click6.click='';
                    this.emit();
                }
            },
            changeLable5(i,e){
                    this.screen5.item[0].ifValue=false;
                    i.ifValue=!i.ifValue;
                    console.log(i)
                    if(i.ifValue){
                        this.click5.push(i.value);
                        // debugger;
                    }else {
                        var index = this.click5.indexOf(i.index)
                        this.click5.splice(index,1);
                    }
                    if(i.label=='common.All'){
                        this.screen5.item.forEach(res=>{
                            res.ifValue=false;
                        })
                        this.screen5.item[0].ifValue=true;
                        this.click5=[];
                    }
                    if(this.click5.length==0){
                        this.screen5.item[0].ifValue=true;
                    }
                    // this.click5= Array.from(new Set(this.click5))
                    // console.log(item,this.click5)


                this.emit()

            },
            emit(){
                let screenBack={
                    click1:this.screen1?this.click1:'',
                    click2:this.screen2?this.click2:'',
                    click3:this.screen3?this.click3:'',
                    click4:this.screen4?this.click4:'',
                    click5:this.screen5?this.click5:[],
                    click6:this.screen6?this.screen6.click!==null||this.screen6.click!==''?this.click6:[]:[],
                }
                console.log(screenBack,'screenBackscreenBackscreenBack')
                for(let otto in screenBack) {
                    if(screenBack[otto]==''||screenBack[otto]==[]){
                        delete screenBack[otto]
                    }
                }

                    this.$emit('screenBack',screenBack)


            }
        }
    }
</script>
<style>
    .lable1,.lable2 {
        padding: 5px;
        color: #666;
        white-space: nowrap;
    }
    .lable1 {
        border-radius: 30px;
        background: #feead5;
        color: #fe8150;
    }
    .screen5 span:nth-child(2){
        margin-left: 15px !important;
    }
    .lable22 {
        padding: 5px;
        color: #666;

    }
    .screen .el-input__inner {
        height: 25px;
        width:80px;
    }
</style>