小牛集卡web 客户端
chenwei
8 days ago 2621fec0d7ce1db0a2302c6c1ac0f08b36ae8a63
src/components/agopage/comment/AddBox.vue
@@ -2,11 +2,17 @@
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="常规箱子" name="first">
        <div class="show-box" v-for="(item, index) in allData.ContainerList" :key="index">
          <div class="box">
        <div
          class="show-box"
          v-for="(item, index) in commonBox"
          :key="index"
          @click="generalBox(item)"
        >
          <div class="box"  :class="{generalactive:item.CntrId==generalActive}">
            <i class="iconfont icon-jizhuangxiang_container"></i>
            <span>{{item.CntrName}}</span>
            <span>{{item.CntrSubtitle}}</span>
            <span>{{ item.CntrName }}</span>
            <span>{{ item.CntrSubtitle }}</span>
          </div>
          <!-- <div class="switch">
            <el-switch v-model="value1" active-text="拼车"> </el-switch>
@@ -14,11 +20,16 @@
        </div>
      </el-tab-pane>
      <el-tab-pane label="特种箱" name="second">
        <div class="show-box" v-for="(sitem, sindex) in allData.SpecialContainerList" :key="sindex">
          <div class="box">
        <div
          class="show-box"
          v-for="(sitem, sindex) in allData.SpecialContainerList"
          :key="sindex"
          @click="specialBox(sitem)"
        >
          <div class="box" :class="{generalactive:sitem.CntrId==generalActive}">
            <i class="iconfont icon-jizhuangxiang_container"></i>
            <span>{{sitem.CntrName}}</span>
            <span>{{sitem.CntrSubtitle}}</span>
            <span>{{ sitem.CntrName }}</span>
            <span>{{ sitem.CntrSubtitle }}</span>
          </div>
          <!-- <div class="switch">
            <el-switch v-model="value1" active-text="拼车"> </el-switch>
@@ -26,7 +37,7 @@
        </div>
      </el-tab-pane>
      <div class="btn">
        <button>添 加</button>
        <button @click="addBox">添 加</button>
      </div>
    </el-tabs>
  </div>
@@ -35,24 +46,79 @@
export default {
  data() {
    return {
      activeName: "second",
      activeName: "first",
      value1: true,
      allData:{}
      allData: {},
      commonBox: [],
      generalActive:""
    };
  },
  created(){
  created() {
    this.getBoxList();
  },
  methods: {
    generalBox(item){
      if(this.generalActive==""){
           this.generalActive = item.CntrId;
      }else if(this.generalActive==item.CntrId){
        this.generalActive="";
      }else{
        this.generalActive = item.CntrId;
      }
        console.log(this.generalActive);
    },
     specialBox(item){
      if(this.generalActive==""){
           this.generalActive = item.CntrId;
      }else if(this.generalActive==item.CntrId){
        this.generalActive="";
      }else{
        this.generalActive = item.CntrId;
      }
       console.log(this.generalActive);
    },
    addBox(){
      if(this.generalActive==""){
        this.$message({message:"请选择箱子",type:"warning"})
      }else{
        this.addNewBox({cnterId:this.generalActive});
      }
    },
    async addNewBox(model){
           await this.$axios.post("/api/Order/AddSingeContainner",this.$qs.stringify(model)).then(res=>{
             console.log(res);
             //弹窗里面是属于二级
             this.$parent.$parent.getTempOrder();
             this.$emit("newbox",false);
           }).catch(err=>{
             this.$message.error("添加箱子出错啦!");
             console.log(err)
           })
    },
    //请求箱型列表
    async getBoxList(){
      await this.$axios.get("/api/HomePage/GetOrderForm").then(res=>{
            this.allData = res.data;
      }).catch(err=>{
    async getBoxList() {
      await this.$axios
        .get("/api/HomePage/GetOrderForm")
        .then((res) => {
          var general = res.data.ContainerList;
          for (var j = 0; j < general.length; j++) {
            if (general[j].CnterNub != 0) {
              this.commonBox.push(general[j]);
            }
          }
          this.allData = res.data;
        })
        .catch((err) => {
          console.log(err);
      })
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
@@ -84,17 +150,21 @@
.btn {
  text-align: center;
}
.btn button{
.btn button {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 6px 15px;
  background-color: #F59A23;
  background-color: #f59a23;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
}
.btn button:hover{
    background-color: #f3a641;
.btn button:hover {
  background-color: #f3a641;
}
.generalactive{
  background-color: #f59a23;
  color: #fff;
}
</style>