型号品牌联想词

components/applyPurchase/BatchPublish.vue

@@ -29,20 +29,32 @@
           </label>
         </td>
         <td>
-          <span v-if="item.code">{{item.code}}</span>
+          <div v-if="item.code">{{item.code}}</div>
           <span class="red-text" v-if="!item.code">请完善信息</span>
         </td>
         <td>
-          <span v-if="item.brand">{{item.brand}}</span>
+          <div v-if="item.brand">{{item.brand}}</div>
           <span class="red-text" v-if="!item.brand">请完善信息</span>
         </td>
-        <td>{{item.amount || '-'}}</td>
+        <td>
+          <div>{{item.amount || '-'}}</div>
+        </td>
         <td class="blue-text">
-          <span v-if="item.unitPrice">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</span>
-          <span v-if="!item.unitPrice">-</span>
+          <div>
+            <span v-if="item.unitPrice">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</span>
+            <span v-if="!item.unitPrice">-</span>
+          </div>
+        </td>
+        <td>
+          <div>
+            {{item.encapsulation || '-'}}
+          </div>
+        </td>
+        <td>
+          <div>
+            {{item.produceDate}}
+          </div>
         </td>
-        <td>{{item.encapsulation || '-'}}</td>
-        <td>{{item.produceDate}}</td>
         <td>
           <span v-if="item.deadline">{{item.deadline | date}}</span>
           <span class="red-text" v-if="!item.deadline">请完善信息</span>
@@ -62,15 +74,15 @@
         </td>
         <td>
           <input type="text" class="form-control" v-model="modifyObj.code" :class="{'error': !validObj.code}" maxlength="30" @blur="checkCode" @input="onCodeChange" >
-         <!-- <ul>
-            <li v-for="sCode in similarCode">{{sCode.code}}</li>
-          </ul>-->
+          <ul v-show="showSimilarCodeList">
+            <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+          </ul>
         </td>
         <td>
           <input type="text" class="form-control" v-model="modifyObj.brand" :class="{'error': !validObj.brand}" maxlength="20" @blur="checkBrand" @input="onBrandChange">
-          <!--<ul>
-            <li v-for="sBrand in similarBrand">{{sBrand.nameEn}}</li>
-          </ul>-->
+          <ul class="brand-similar-list" v-show="showSimilarBrandList">
+            <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+          </ul>
         </td>
         <td>
           <input type="text" class="form-control" v-model="modifyObj.amount" :class="{'error': !validObj.amount}" @blur="checkAmount">
@@ -176,7 +188,9 @@
           amount: true,
           deadline: true
         },
-        onSaleNum: 0
+        onSaleNum: 0,
+        showSimilarCodeList: false,
+        showSimilarBrandList: false
       }
     },
     components: {
@@ -201,6 +215,13 @@
         return this.$store.state.applyPurchase.bomMaterial.bomNumber.data
       }
     },
+    mounted () {
+      let _this = this
+      document.body.onclick = function () {
+        _this.showSimilarCodeList = false
+        _this.showSimilarBrandList = false
+      }
+    },
     filters: {
       date: function (input) {
         if (input) {
@@ -386,12 +407,18 @@
         this.$http.get('/search/similarComponents', {params: {keyword: this.modifyObj.code}})
           .then(response => {
             this.similarCode = response.data
+            if (response.data.length) {
+              this.showSimilarCodeList = true
+            }
           })
       },
       getSimilarBrand: function () {
         this.$http.get('/search/similarBrands', {params: {keyword: this.modifyObj.brand}})
           .then(response => {
             this.similarBrand = response.data
+            if (response.data.length) {
+              this.showSimilarBrandList = true
+            }
           })
       },
       getSingleValidInfo: function (item) {
@@ -454,12 +481,24 @@
       onCodeChange: function () {
         if (this.modifyObj.code && getRealLen(this.modifyObj.code) > 30) {
           this.modifyObj.code = this.modifyObj.code.substring(0, this.modifyObj.code.length - 1)
+        } else {
+          this.getSimilarCode()
         }
       },
       onBrandChange: function () {
         if (this.modifyObj.brand && getRealLen(this.modifyObj.brand) > 20) {
           this.modifyObj.brand = this.modifyObj.brand.substring(0, this.modifyObj.brand.length - 1)
+        } else {
+          this.getSimilarBrand()
         }
+      },
+      setCode: function (code) {
+        this.modifyObj.code = code
+        this.showSimilarCodeList = false
+      },
+      setBrand: function (brand) {
+        this.modifyObj.brand = brand
+        this.showSimilarBrandList = false
       }
     }
   }
@@ -513,11 +552,44 @@
             background: #f3f3f3;
           }
           td {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
             position: relative;
             font-size: 12px;
+            > div {
+              overflow: hidden;
+              overflow-y: unset;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            > ul {
+              line-height: normal;
+              position: absolute;
+              top: 52px;
+              left: 24px;
+              background: #fff;
+              border: 1px solid #b5b5b5;
+              z-index: 1;
+              max-height: 120px;
+              overflow-y: auto;
+              overflow-x: hidden;
+              border-radius: 3px;
+              width: 114px;
+              li {
+                height: 24px;
+                line-height: 24px;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding: 0 5px;
+                &:hover {
+                  background: #ddd;
+                }
+              }
+              &.brand-similar-list {
+                left: 20px;
+                width: 94px;
+              }
+            }
             div.red-text {
               line-height: normal;
               position: absolute;
@@ -586,7 +658,7 @@
                   padding: 0 0 0 2px;
                   background: url(/images/applyPurchase/select.png) no-repeat right;
                   background-size: 12px 19px;
-                  background-position: 13px 0px;
+                  background-position: 13px 0;
                   position: absolute;
                   top: 33px;
                   border-bottom: none;
@@ -607,6 +679,7 @@
               &:nth-child(8) {
                 div {
                   width: 101px;
+                  overflow: unset;
                   input {
                     width: 101px;
                   }