替代料报价联想及校验

components/applyPurchase/SayPrice.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="modal-wrap" v-if="currentSayPriceIndex > -1">
+    <div class="modal-wrap" v-if="currentSayPriceIndex > -1" @click="clearSimilar">
       <div class="say-price-box" >
         <div class="title">
           <!--<div>型号：<span :title="purchaseManList.content[currentSayPriceIndex].cmpCode">{{purchaseManList.content[currentSayPriceIndex].cmpCode}}</span></div>-->
@@ -37,19 +37,25 @@
             <div class="content-line">
               <div class="form-item form-left form-long">
                 <span><i>*</i>品牌：</span>
-                <input type="text" class="form-control" v-model="sayPriceObj.replaceBrand" @blur="onReplaceBrandBlur()">
+                <input type="text" class="form-control" @blur="checkBrand" @input="onBrandChange" v-model="sayPriceObj.replaceBrand" placeholder="请勿填中文符号">
+                <ul class="similar-list" v-show="showSimilarBrandList && sayPriceObj.replaceBrand">
+                  <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+                </ul>
               </div>
             </div>
             <div class="content-line">
               <div class="form-item form-left form-long">
                 <span><i>*</i>型号：</span>
-                <input type="text" class="form-control" v-model="sayPriceObj.replaceCmpCode" @blur="onReplaceCmpCodeBlur()">
+                <input type="text" class="form-control" v-model="sayPriceObj.replaceCmpCode" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">
+                <ul v-show="showSimilarCodeList && sayPriceObj.replaceCmpCode">
+                  <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+                </ul>
               </div>
             </div>
             <div class="content-line">
               <div class="form-item form-left form-long">
-                <span><i>*</i>规格：</span>
-                <input type="text" class="form-control" v-model="sayPriceObj.replaceSpec" @blur="onReplaceSpecBlur()">
+                <span>规格：</span>
+                <input type="text" class="form-control" v-model="sayPriceObj.replaceSpec">
               </div>
             </div>
           </template>
@@ -101,6 +107,7 @@
 </template>
 <script>
   import Loading from '~components/common/loading/PageLoading.vue'
+  import { sayPriceReplace } from '~utils/mixin'
   export default {
     props: {
       purchase: Object,
@@ -127,7 +134,7 @@
           repliesLapQty: false,
           replaceBrand: false,
           replaceCmpCode: false,
-          replaceSpec: false
+          replaceSpec: true
         },
         showLoading: false,
         sayType: 'current'
@@ -136,6 +143,7 @@
     components: {
       Loading
     },
+    mixins: [sayPriceReplace],
     computed: {
       purchaseManList () {
         return this.purchase || []
@@ -240,30 +248,6 @@
           this.validSayPrice.leadtime = true
         }
       },
-      onReplaceBrandBlur: function () {
-        if (!this.sayPriceObj.replaceBrand || !this.sayPriceObj.replaceBrand.length) {
-          this.validSayPrice.replaceBrand = false
-          this.$message.error('请填写替代物料品牌')
-        } else {
-          this.validSayPrice.replaceBrand = true
-        }
-      },
-      onReplaceCmpCodeBlur: function () {
-        if (!this.sayPriceObj.replaceCmpCode || !this.sayPriceObj.replaceCmpCode.length) {
-          this.validSayPrice.replaceCmpCode = false
-          this.$message.error('请填写替代物料型号')
-        } else {
-          this.validSayPrice.replaceCmpCode = true
-        }
-      },
-      onReplaceSpecBlur: function () {
-        if (!this.sayPriceObj.replaceSpec || !this.sayPriceObj.replaceSpec.length) {
-          this.validSayPrice.replaceSpec = false
-          this.$message.error('请填写替代物料规格')
-        } else {
-          this.validSayPrice.replaceSpec = true
-        }
-      },
       onReplyPriceInput: function (index) {
         let price = this.sayPriceObj.replies[index].price
         if (price >= 10000) {
@@ -515,6 +499,34 @@
           }
           &.form-long {
             width: 100%;
+            position: relative;
+            ul {
+              line-height: normal;
+              position: absolute;
+              top: 27px;
+              left: 115px;
+              background: #fff;
+              border: 1px solid #b5b5b5;
+              z-index: 1;
+              max-height: 120px;
+              overflow-y: auto;
+              overflow-x: hidden;
+              border-radius: 3px;
+              width: 292px;
+              font-size: 12px;
+              li {
+                height: 24px;
+                line-height: 24px;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding: 0 5px;
+                &:hover {
+                  background: #ddd;
+                }
+              }
+            }
             input {
               width: 292px;
             }

components/mobile/applyPurchase/SayPrice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-modal" v-show="showSayPriceBox" @touchmove="preventTouchMove($event)">
+  <div class="mobile-modal" v-show="showSayPriceBox" @touchmove="preventTouchMove($event)" @click="clearSimilar">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">编辑报价<i class="icon-guanbi iconfont" @click="cancel"></i></div>
       <div class="say-price" ref="mobileModalBox">
@@ -52,15 +52,21 @@
             <template v-if="sayType == 'replace'">
               <div class="replace">
                 <span>品牌</span>
-                <input type="text" v-model="sayPriceObj.replaceBrand" class="fr" @blur="onReplaceBrandBlur()">
+                <input type="text" v-model="sayPriceObj.replaceBrand" class="fr" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号">
+                <ul class="similar" v-show="showSimilarBrandList && sayPriceObj.replaceBrand">
+                  <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
+                </ul>
               </div>
               <div class="replace">
                 <span>型号</span>
-                <input type="text" v-model="sayPriceObj.replaceCmpCode" class="fr" @blur="onReplaceCmpCodeBlur()">
+                <input type="text" v-model="sayPriceObj.replaceCmpCode" class="fr" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号">
+                <ul class="similar" v-show="showSimilarCodeList && sayPriceObj.replaceCmpCode">
+                  <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
+                </ul>
               </div>
               <div class="replace">
                 <span>规格</span>
-                <input type="text" v-model="sayPriceObj.replaceSpec" class="fr" @blur="onReplaceSpecBlur()">
+                <input type="text" v-model="sayPriceObj.replaceSpec" class="fr" placeholder="(选填)">
               </div>
             </template>
             <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
@@ -82,6 +88,7 @@
   </div>
 </template>
 <script>
+  import { sayPriceReplace } from '~utils/mixin'
   import {RemindBox} from '~components/mobile/common'
   export default {
     data () {
@@ -106,13 +113,14 @@
           repliesLapQty: false,
           replaceBrand: false,
           replaceCmpCode: false,
-          replaceSpec: false
+          replaceSpec: true
         },
         sayType: 'current',
         remindText: '',
         timeoutCount: 0
       }
     },
+    mixins: [sayPriceReplace],
     props: ['showSayPriceBox'],
     components: {
       RemindBox
@@ -246,30 +254,6 @@
           this.validSayPrice.leadtime = true
         }
       },
-      onReplaceBrandBlur: function () {
-        if (!this.sayPriceObj.replaceBrand || !this.sayPriceObj.replaceBrand.length) {
-          this.validSayPrice.replaceBrand = false
-          this.onRemind('请填写替代物料品牌')
-        } else {
-          this.validSayPrice.replaceBrand = true
-        }
-      },
-      onReplaceCmpCodeBlur: function () {
-        if (!this.sayPriceObj.replaceCmpCode || !this.sayPriceObj.replaceCmpCode.length) {
-          this.validSayPrice.replaceCmpCode = false
-          this.onRemind('请填写替代物料型号')
-        } else {
-          this.validSayPrice.replaceCmpCode = true
-        }
-      },
-      onReplaceSpecBlur: function () {
-        if (!this.sayPriceObj.replaceSpec || !this.sayPriceObj.replaceSpec.length) {
-          this.validSayPrice.replaceSpec = false
-          this.onRemind('请填写替代物料规格')
-        } else {
-          this.validSayPrice.replaceSpec = true
-        }
-      },
       onReplyPriceInput: function (index) {
         this.sayPriceObj.replies[index].price = this.sayPriceObj.replies[index].price.replace(/[^\-?\d.]/g, '')
         let price = this.sayPriceObj.replies[index].price
@@ -468,6 +452,7 @@
               }
             }
             &.replace {
+              position: relative;
               span {
                 display: inline-block;
                 width: .66rem;
@@ -475,6 +460,30 @@
               }
               input {
                 width: 5.1rem;
+                text-align: left;
+              }
+              .similar {
+                position: absolute;
+                width: 5.1rem;
+                max-height: 2.5rem;
+                overflow-y: auto;
+                z-index: 12;
+                border: 1px solid #7e7e7e;
+                border-radius: .05rem;
+                left: .72rem;
+                top: .68rem;
+                background: #fff;
+                li {
+                  height: .5rem;
+                  line-height: .5rem;
+                  font-size: .26rem;
+                  color: #999;
+                  padding-left: .19rem;
+                  &:focus, &:active, &:hover {
+                    background: #999;
+                    color: #fff;
+                  }
+                }
               }
             }
           }

components/mobile/base/SearchHeader.vue

@@ -61,7 +61,7 @@
         type: String,
         default: 'all'
       },
-      useMatchRule: {
+      useMatchRule: { // 使用既定的匹配规则
         type: Boolean,
         default: true
       }

utils/mixin.js

@@ -8,3 +8,110 @@ export const carousel = {
     }
   }
 }
+
+export const sayPriceReplace = {
+  data () {
+    return {
+      showSimilarCodeList: false,
+      showSimilarBrandList: false,
+      similarCode: [],
+      similarBrand: []
+    }
+  },
+  methods: {
+    clearSimilar: function () {
+      this.showSimilarCodeList = false
+      this.showSimilarBrandList = false
+    },
+    checkBrand: function () {
+      let nullStrFlag = this.baseUtils.checkNullStr(this.sayPriceObj.replaceBrand)
+      this.validSayPrice.replaceBrand = this.sayPriceObj.replaceBrand && this.sayPriceObj.replaceBrand !== '' && nullStrFlag
+      if (!this.validSayPrice.replaceBrand) {
+        if (!nullStrFlag) {
+          this.$message.error('品牌输入不合法')
+        } else {
+          this.$message.error('品牌不能为空')
+        }
+      }
+      return this.validSayPrice.brand
+    },
+    checkCode: function () {
+      let code = this.sayPriceObj.replaceCmpCode.trim()
+      let nullStrFlag = this.baseUtils.checkNullStr(code)
+      this.validSayPrice.replaceCmpCode = code && code !== '' && nullStrFlag
+      if (!this.validSayPrice.replaceCmpCode) {
+        if (!nullStrFlag) {
+          this.$message.error('型号输入不合法')
+        } else {
+          this.$message.error('型号不能为空')
+        }
+      }
+      return this.validSayPrice.replaceCmpCode
+    },
+    onBrandChange: function () {
+      this.sayPriceObj.replaceBrand = this.sayPriceObj.replaceBrand.trim()
+      if ((/[^\x00-\xff]/g).test(this.sayPriceObj.replaceBrand)) {
+        let chineseIndex = -1
+        for (let i = 0; i < this.sayPriceObj.replaceBrand.length; i++) {
+          if ((/[^\x00-\xff]/g).test(this.sayPriceObj.replaceBrand.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.sayPriceObj.replaceBrand.charAt(i))) {
+            chineseIndex = i
+            break
+          }
+        }
+        if (chineseIndex > -1) {
+          this.sayPriceObj.replaceBrand = this.sayPriceObj.replaceBrand.substring(0, chineseIndex)
+        }
+      } else if (this.sayPriceObj.replaceBrand && this.baseUtils.getRealLen(this.sayPriceObj.replaceBrand) > 50) {
+        this.sayPriceObj.replaceBrand = this.baseUtils.cutOutString(this.sayPriceObj.replaceBrand, 50)
+      } else {
+        this.getSimilarBrand()
+      }
+    },
+    onCodeChange: function () {
+      if ((/[^\x00-\xff]/g).test(this.sayPriceObj.replaceCmpCode)) {
+        let chineseIndex = -1
+        for (let i = 0; i < this.sayPriceObj.replaceCmpCode.length; i++) {
+          if ((/[^\x00-\xff]/g).test(this.sayPriceObj.replaceCmpCode.charAt(i))) {
+            chineseIndex = i
+            break
+          }
+        }
+        this.sayPriceObj.replaceCmpCode = this.baseUtils.cutOutString(this.sayPriceObj.replaceCmpCode, chineseIndex)
+      } else if (this.sayPriceObj.replaceCmpCode && this.baseUtils.getRealLen(this.sayPriceObj.replaceCmpCode) > 100) {
+        this.sayPriceObj.replaceCmpCode = this.baseUtils.cutOutString(this.sayPriceObj.replaceCmpCode, 100)
+      } else {
+        this.getSimilarCode()
+      }
+    },
+    getSimilarBrand: function () {
+      if (this.sayPriceObj.replaceBrand) {
+        this.$http.get('/search/similarBrands', {params: {keyword: this.sayPriceObj.replaceBrand}})
+          .then(response => {
+            this.similarBrand = response.data
+            this.showSimilarBrandList = response.data.length > 0
+          })
+      } else {
+        this.showSimilarBrandList = false
+      }
+    },
+    getSimilarCode: function () {
+      if (this.sayPriceObj.replaceCmpCode) {
+        this.$http.get('/search/similarComponents', {params: {keyword: this.sayPriceObj.replaceCmpCode}})
+          .then(response => {
+            this.similarCode = response.data
+            this.showSimilarCodeList = response.data.length > 0
+          })
+      } else {
+        this.showSimilarCodeList = false
+      }
+    },
+    setBrand: function (brand) {
+      this.sayPriceObj.replaceBrand = brand
+      this.showSimilarBrandList = false
+    },
+    setCode: function (code) {
+      this.sayPriceObj.replaceCmpCode = code
+      this.showSimilarCodeList = false
+    }
+  }
+}