123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <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>
|