screen.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div style="margin-left: 20px; width: 1160px;background-color: rgb(247, 247, 247);" >
  3. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen1'>
  4. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen1.value)}}</span>
  5. <span>
  6. <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"
  7. @click="changeLable1(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  8. </span>
  9. </div>
  10. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen2'>
  11. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen2.value)}}</span>
  12. <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click2==i.value?'lable1':'lable2'" v-for="(i,e) in screen2.item"
  13. @click="changeLable2(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  14. </div>
  15. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen3'>
  16. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen3.value)}}</span>
  17. <span>
  18. <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click3==i.value?'lable1':'lable2'" v-for="(i,e) in screen3.item"
  19. @click="changeLable3(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  20. </span>
  21. </div>
  22. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen4'>
  23. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen4.value)}}</span>
  24. <span>
  25. <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click4==i.value?'lable1':'lable2'" v-for="(i,e) in screen4.item"
  26. @click="changeLable4(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  27. </span>
  28. </div>
  29. <!-- children类型 -->
  30. <!-- <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;word-break:break-all;" v-if='screen7'>
  31. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen4.value)}}</span>
  32. <span>
  33. <span style="margin-left: 15px;font-size: 14px;font-weight: 400;" :class="click7==i.value?'lable1':'lable2'" v-for="(i,e) in screen7.item"
  34. @click="changeLable7(i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  35. </span>
  36. </div> -->
  37. <!-- 多选 -->
  38. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;" v-if='screen5' class="screen5">
  39. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen5.value)}}</span>
  40. <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"
  41. @click="changeLable5(i,e)" :key="e">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  42. </div>
  43. <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #f4f4f4;" v-if='screen6' class="screen">
  44. <span style="font-size: 14px;font-weight: 700;color: #000;margin-left: 20px;">{{$t(screen6.value)}}</span>
  45. <span>
  46. <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"
  47. @click="changeLable6(1,i.value)" class="cursor">{{i.label=='common.All'? $t('common.All'):i.label}}</span>
  48. </span>
  49. <span class="lable2" style="font-size:14px;color: #666;">
  50. <!-- {{$t('common.custom')}} -->
  51. <input type="text" autocomplete="off" class="el-input__inner" v-model="click6.input" maxlength="10" show-word-limit>
  52. {{$t('common.year')}}
  53. </span>
  54. <span style="font-size:14px;color: #0079ef;" class="cursor" v-show="click6.input" @click="changeLable6(2,click6.input)"> {{$t('common.query')}}</span>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. export default {
  60. name: 'Screen',
  61. props:["screen1",'screen2','screen3','screen4','screen5','screen6','screen1Item','screen2Item','screen1def'],
  62. data () {
  63. return {
  64. click1:null,
  65. click2:null,
  66. click3:null,
  67. click4:null,
  68. click5:[],
  69. click6:{
  70. click:null,
  71. input:''
  72. },
  73. click7:null
  74. }
  75. },
  76. watch:{
  77. 'click6.input'(){
  78. if(this.click6.input){
  79. this.click6.click='';
  80. }else {
  81. this.click6.click=null;
  82. this.emit()
  83. }
  84. },
  85. 'screen2Item'(){
  86. // debugger
  87. this.click2 = this.screen2Item;
  88. this.emit()
  89. },
  90. 'screen1def'(){
  91. this.click1 = this.screen1def;
  92. }
  93. },
  94. created(){
  95. // if(this.screen5){
  96. // this.screen5.item.forEach(element => {
  97. // element.ifValue=false;
  98. // });
  99. // this.screen5.item[0].ifValue=true;
  100. // }
  101. // this.emit()
  102. },
  103. mounted(){
  104. if(this.screen1){
  105. this.screen1.item.forEach(element => {
  106. if(element.ifClick){
  107. this.click1=element.value
  108. }
  109. });
  110. }
  111. if(this.screen2){
  112. this.screen2.item.forEach(element => {
  113. if(element.ifClick){
  114. this.click2=element.value
  115. }
  116. });
  117. }
  118. this.$forceUpdate();
  119. // this.emit()
  120. },
  121. computed:{
  122. unique(array){
  123. return Array.from(new Set(array))
  124. }
  125. },
  126. methods:{
  127. changeLable1(value){
  128. this.click1=value
  129. this.emit()
  130. },
  131. changeLable2(value){
  132. this.click2=value
  133. this.emit()
  134. },
  135. changeLable3(value){
  136. this.click3=value
  137. this.emit()
  138. },
  139. changeLable4(value){
  140. this.click4=value
  141. this.emit()
  142. },
  143. changeLable6(num,value){
  144. if(num==1){
  145. this.click6.click=value
  146. this.emit()
  147. }else {
  148. this.click6.click='';
  149. this.emit();
  150. }
  151. },
  152. changeLable5(i,e){
  153. this.screen5.item[0].ifValue=false;
  154. i.ifValue=!i.ifValue;
  155. console.log(i)
  156. if(i.ifValue){
  157. this.click5.push(i.value);
  158. // debugger;
  159. }else {
  160. var index = this.click5.indexOf(i.index)
  161. this.click5.splice(index,1);
  162. }
  163. if(i.label=='common.All'){
  164. this.screen5.item.forEach(res=>{
  165. res.ifValue=false;
  166. })
  167. this.screen5.item[0].ifValue=true;
  168. this.click5=[];
  169. }
  170. if(this.click5.length==0){
  171. this.screen5.item[0].ifValue=true;
  172. }
  173. // this.click5= Array.from(new Set(this.click5))
  174. // console.log(item,this.click5)
  175. this.emit()
  176. },
  177. emit(){
  178. let screenBack={
  179. click1:this.screen1?this.click1:'',
  180. click2:this.screen2?this.click2:'',
  181. click3:this.screen3?this.click3:'',
  182. click4:this.screen4?this.click4:'',
  183. click5:this.screen5?this.click5:[],
  184. click6:this.screen6?this.screen6.click!==null||this.screen6.click!==''?this.click6:[]:[],
  185. }
  186. console.log(screenBack,'screenBackscreenBackscreenBack')
  187. for(let otto in screenBack) {
  188. if(screenBack[otto]==''||screenBack[otto]==[]){
  189. delete screenBack[otto]
  190. }
  191. }
  192. this.$emit('screenBack',screenBack)
  193. }
  194. }
  195. }
  196. </script>
  197. <style>
  198. .lable1,.lable2 {
  199. padding: 5px;
  200. color: #666;
  201. white-space: nowrap;
  202. }
  203. .lable1 {
  204. border-radius: 30px;
  205. background: #feead5;
  206. color: #fe8150;
  207. }
  208. .screen5 span:nth-child(2){
  209. margin-left: 15px !important;
  210. }
  211. .lable22 {
  212. padding: 5px;
  213. color: #666;
  214. }
  215. .screen .el-input__inner {
  216. height: 25px;
  217. width:80px;
  218. }
  219. </style>