小牛集卡web 客户端
chenwei
8 days ago 2621fec0d7ce1db0a2302c6c1ac0f08b36ae8a63
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
<template>
  <div class="form-input">
    <div
      class="product"
      v-for="(item, indexp) in productData"
      :key="indexp"
    
      @click="selProeuct(item,indexp)"
    >
      <div>{{ item.GoodsTypeName }}</div>
      <div class="child-classify" v-if="item.isShow">
          <div v-for="(citem,cindex) in item.GoodsBaseList" :key="cindex" @click="selecProdcut(citem)" class="single-pro">
              {{citem}}
          </div>
      </div>
    </div>
   
    <div class="pro-input">
      <el-input
        placeholder="输入物品"
        v-model="productVal"
        @blur="proInput"
        clearable
      ></el-input>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
       productVal:"",
      productData: [
        {
          GoodsTypeName: "常用分类1",
          isShow:false,
          GoodsBaseList: ["汽车类", "测试类"],
        },
        {
            isShow:false,
          GoodsTypeName: "常用分类2",
          GoodsBaseList: ["钢材类"],
        },
      ],
    };
  },
  props:["goodslist"],
  methods:{
    proInput(){
      this.$emit("acceptgoods",this.productVal);
    },
      selProeuct(item,index){
          //只能显示一个让其选择
           item.isShow = !item.isShow;
        
        //   if(!(item.isShow)){
         
        // for(var i =0;i<this.productData.length;i++){
          
        //     if(i!=index){
              
        //         this.productData[i].isShow=false;
        //     }else{
             
        //         item.isShow = !item.isShow;
        //     }
        //   }
        //   }
        
 
            
      },
      selecProdcut(item){
          this.productVal = item;
          this.$emit("acceptgoods",item);
          // console.log(item)
      },
  }
};
</script>
<style lang="less" scoped>
 
.child-classify,.product{
    width: 110px;
   text-align: center;
   border-radius: 3px;
   border: 1px solid #e4e4e4;
}
.child-classify{
    position:absolute;
    background-color: #fff;
}
.single-pro:hover{
    background-color: #e6a23c;
  color: #fff;
}
.product {  
  margin-right: 30px;
  margin-bottom: 10px;
  cursor: pointer;
}
.form-input {
  display: flex;
  flex-wrap: wrap;
}
.pro-input {
  /deep/.el-input {
    width: 110px;
  }
}
</style>