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