小牛集卡web 客户端
chenwei
8 days ago 2621fec0d7ce1db0a2302c6c1ac0f08b36ae8a63
commit | author | age
423585 1 <template>
C 2   <div>
3     <el-tabs v-model="activeName" @tab-click="handleClick">
4       <el-tab-pane label="常规箱子" name="first">
2621fe 5         <div
C 6           class="show-box"
7           v-for="(item, index) in commonBox"
8           :key="index"
9           @click="generalBox(item)"
10          
11         >
12           <div class="box"  :class="{generalactive:item.CntrId==generalActive}">
423585 13             <i class="iconfont icon-jizhuangxiang_container"></i>
2621fe 14             <span>{{ item.CntrName }}</span>
C 15             <span>{{ item.CntrSubtitle }}</span>
423585 16           </div>
e41faf 17           <!-- <div class="switch">
423585 18             <el-switch v-model="value1" active-text="拼车"> </el-switch>
e41faf 19           </div> -->
423585 20         </div>
C 21       </el-tab-pane>
22       <el-tab-pane label="特种箱" name="second">
2621fe 23         <div
C 24           class="show-box"
25           v-for="(sitem, sindex) in allData.SpecialContainerList"
26           :key="sindex"
27           @click="specialBox(sitem)"
28         >
29           <div class="box" :class="{generalactive:sitem.CntrId==generalActive}">
423585 30             <i class="iconfont icon-jizhuangxiang_container"></i>
2621fe 31             <span>{{ sitem.CntrName }}</span>
C 32             <span>{{ sitem.CntrSubtitle }}</span>
423585 33           </div>
e41faf 34           <!-- <div class="switch">
423585 35             <el-switch v-model="value1" active-text="拼车"> </el-switch>
e41faf 36           </div> -->
423585 37         </div>
C 38       </el-tab-pane>
39       <div class="btn">
2621fe 40         <button @click="addBox">添 加</button>
423585 41       </div>
C 42     </el-tabs>
43   </div>
44 </template>
45 <script>
46 export default {
47   data() {
48     return {
2621fe 49       activeName: "first",
423585 50       value1: true,
2621fe 51       allData: {},
C 52       commonBox: [],
53       generalActive:""
423585 54     };
C 55   },
2621fe 56   created() {
e41faf 57     this.getBoxList();
C 58   },
423585 59   methods: {
2621fe 60     generalBox(item){
C 61        
62       if(this.generalActive==""){
63            this.generalActive = item.CntrId;
64       }else if(this.generalActive==item.CntrId){
65         this.generalActive="";
66       }else{
67         this.generalActive = item.CntrId;
68       }
69         console.log(this.generalActive);
70     },
71      specialBox(item){
72       
73       if(this.generalActive==""){
74            this.generalActive = item.CntrId;
75       }else if(this.generalActive==item.CntrId){
76         this.generalActive="";
77       }else{
78         this.generalActive = item.CntrId;
79       }
80        console.log(this.generalActive);
81     },
82     addBox(){
83       if(this.generalActive==""){
84         this.$message({message:"请选择箱子",type:"warning"})
85       }else{
86         this.addNewBox({cnterId:this.generalActive});
87            
88       }     
89     },
90     async addNewBox(model){
91         
92            await this.$axios.post("/api/Order/AddSingeContainner",this.$qs.stringify(model)).then(res=>{
93              console.log(res);
94              //弹窗里面是属于二级
95              this.$parent.$parent.getTempOrder();
96              this.$emit("newbox",false);
97           
98            }).catch(err=>{
99              this.$message.error("添加箱子出错啦!");
100              console.log(err)
101            })
102     },
e41faf 103     //请求箱型列表
2621fe 104     async getBoxList() {
C 105       await this.$axios
106         .get("/api/HomePage/GetOrderForm")
107         .then((res) => {
108           var general = res.data.ContainerList;
109           for (var j = 0; j < general.length; j++) {
110             if (general[j].CnterNub != 0) {
111               this.commonBox.push(general[j]);
112             }
113           }
114           this.allData = res.data;
115         })
116         .catch((err) => {
e41faf 117           console.log(err);
2621fe 118         });
e41faf 119     },
423585 120     handleClick(tab, event) {
2621fe 121      
423585 122       console.log(tab, event);
C 123     },
124   },
125 };
126 </script>
127 <style lang="less" scoped>
128 .show-box {
129   display: flex;
130   align-items: center;
131   margin-bottom: 10px;
132 }
133 .box {
134   font-size: 18px;
135   border: 1px solid #dfdcdc;
136   padding: 5px 10px;
137   border-radius: 3px;
138   margin-right: 15px;
139 }
140 .box i {
141   font-size: 20px;
142 }
143 .box span:nth-child(2) {
144   font-weight: bold;
145   margin: 0 5px;
146 }
147 .box span:nth-child(3) {
148   font-size: 14px;
149 }
150 .btn {
151   text-align: center;
152 }
2621fe 153 .btn button {
423585 154   cursor: pointer;
C 155   border: none;
156   outline: none;
157   padding: 6px 15px;
2621fe 158   background-color: #f59a23;
423585 159   color: #fff;
C 160   font-weight: bold;
161   border-radius: 6px;
162 }
2621fe 163 .btn button:hover {
C 164   background-color: #f3a641;
165 }
166 .generalactive{
167   background-color: #f59a23;
168   color: #fff;
423585 169 }
C 170 </style>