小牛集卡web 客户端
chenwei
2021-06-08 e41faf1640e2e71febf4ba347a301e0c043b6ce9
commit | author | age
423585 1 <template>
C 2   <div>
3     <div class="form-input">
4       <div class="tibox-adres">
e41faf 5         <el-input @focus="tiFocus" readonly v-model="playBox" @blur="boxBlur"></el-input>
423585 6         <div class="select-tibox" v-if="isTShow">
e41faf 7           <div class="empty" v-if="boxaddress.length==0">
C 8               暂 无 数 据
9           </div>
10           <el-tabs v-else v-model="subform.CityId" @tab-click="handleClick">
423585 11             <el-tab-pane
C 12               v-for="(item, cindex) in boxaddress"
7a1e09 13               :key="cindex+6"
423585 14               :label="item.CityName"
7a1e09 15               :name="cindex.CityId"
C 16             
423585 17             >
C 18               <el-radio-group v-model="radio" @change="selectPort">
19                 <el-radio
7a1e09 20                  
423585 21                   v-for="(ritem, rindex) in item.PortList"
7a1e09 22                   :key="rindex+13"
423585 23                   :label="ritem"
C 24                   >{{ ritem.PortName }}</el-radio
25                 >
26               </el-radio-group>
27             </el-tab-pane>
28           </el-tabs>
29         </div>
30       </div>
31
32       <div class="suffix-txt">
7a1e09 33         <div v-for="(item, kindex) in boxaddress" :key="kindex+20"> 
423585 34           <div
C 35             class="shortcut"
36             v-for="(shortcut, sindex) in item.PortList"
7a1e09 37             :key="sindex+15"
C 38             @click="shortCut(shortcut)"
423585 39           >
7a1e09 40             <span v-if="sindex < 3">{{ shortcut.PortName }}</span>
423585 41           </div>
C 42         </div>
43       </div>
44     </div>
45   </div>
46 </template>
47 <script>
48 export default {
49     data(){
50         return{
51             isTShow:false,
52            subform:{
53                CityId:""
54            },
55            playBox:"",
56            radio:"",
7a1e09 57            returnBoxAdress:[],
423585 58         }
C 59     },
60     props:["boxaddress"],
61     watch:{
7a1e09 62         boxaddress:{
C 63           handler(val){
64               this.returnBoxAdress = val;
65           },
66           deep:true,
67           immediate:true
423585 68         },
7a1e09 69     
423585 70     },
C 71     methods:{
72         tiFocus(){
73             this.isTShow=true;
74         },
e41faf 75         boxBlur(){
C 76           console.log(this.returnBoxAdress)
77           if(this.returnBoxAdress.length==0){
78             this.isTShow = false;
79           }
80         },
423585 81         handleClick(val){
7a1e09 82             console.log(val);
423585 83         },
7a1e09 84         test(val){
C 85           console.log(val)
86         },
87         shortCut(item){
88             this.playBox = item.PortName
89              this.$emit("acceptreturn",item.PortId);
90         },
91         selectPort(val){
92           this.playBox = val.PortName;
93           this.$emit("acceptreturn",val.PortId);
94             this.isTShow=false;
423585 95         },
C 96     }
97 };
98 </script>
99 <style lang="less" scoped>
100 .form-input {
101   display: flex;
102   flex-wrap: wrap;
103 }
104 .select-tibox {
105   border: 1px solid #c3c3c3;
106   position: absolute;
107   z-index: 10;
108   background-color: #fff;
109   padding: 10px;
110   border-radius: 6px;
111   width: 300px;
112 }
113 .select-tibox {
114   /deep/.el-radio__input {
115     display: none;
116   }
117 }
7a1e09 118 .suffix-txt {
C 119   display: flex;
120   margin-left: 50px;
121   color: #aaaaaa;
122 }
123 .suffix-txt div {
124   margin-right: 20px;
125   display: flex;
126   cursor: pointer;
127 }
128 .suffix-txt .shortcut:hover {
129   color: #409eff;
130 }
e41faf 131 .empty{
C 132   text-align: center;
133   padding: 6px 0px;
134   color: #c3c3c3;
135 }
423585 136 </style>