输入限制

components/applyPurchase/BatchPublish.vue

@@ -28,11 +28,11 @@
           </td>-->
           <td>
             <div class="prod-items">
-              <div class="prod-item prod-item-large">
+              <div class="prod-item prod-item-large" :title="item.kind">
                 <span class="pi-title">类目：</span>
                 <div class="pi-content over-ell">{{item.kind || '-'}}</div>
               </div>
-              <div class="prod-item prod-item-large">
+              <div class="prod-item prod-item-large" :title="item.brand">
                 <span class="pi-title"><i class="red-text">*</i>品牌：</span>
                 <div class="pi-content over-ell" v-if="item.brand && (!item.brandWord || item.brandWord.length == 0)" :title="item.brand">{{item.brand}}</div>
                 <div class="pi-content red-text" v-if="!item.brand">请完善信息</div>
@@ -46,7 +46,7 @@
                 <div class="pi-content over-ell" v-if="item.unitPrice">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</div>
                 <div class="pi-content over-ell" v-else="!item.unitPrice">-</div>
               </div>
-              <div class="prod-item prod-item-large">
+              <div class="prod-item prod-item-large" :title="item.code">
                 <span class="pi-title"><i class="red-text">*</i>型号：</span>
                 <div class="pi-content over-ell" v-if="item.code && (!item.codeWord || item.codeWord.length == 0)" :title="item.code">{{item.code}}</div>
                 <div class="pi-content red-text" v-if="!item.code">请完善信息</div>
@@ -55,11 +55,11 @@
                   <li v-for="code in item.codeWord" @click="modifyItemByWord(index, code.code, 'code')" :title="code.code">{{code.code}}</li>
                 </ul>
               </div>
-              <div class="prod-item prod-item-large">
+              <div class="prod-item prod-item-large" :title="item.spec">
                 <span class="pi-title">规格：</span>
                 <div class="pi-content over-ell">{{item.spec || '-'}}</div>
               </div>
-              <div class="prod-item prod-item-small">
+              <div class="prod-item prod-item-small" :title="item.encapsulation">
                 <span class="pi-title">封装：</span>
                 <div class="pi-content over-ell">
                   {{item.encapsulation || '-'}}
@@ -78,7 +78,7 @@
           <td>
             <span v-if="item.deadline">{{item.deadline | date}}</span>
             <span class="red-text" v-if="!item.deadline">请完善信息</span>
-            <div class="red-text" v-if="!isValidTime(item.deadline)">默认≤90天</div>
+            <div class="red-text remind" v-if="!isValidTime(item.deadline)">默认≤90天</div>
           </td>
           <td class="operate">
             <a @click="modifyItem(index)" class="size-s">编辑</a>
@@ -142,7 +142,7 @@
             <div class="prod-items">
               <div class="prod-item prod-item-large">
                 <span class="pi-title">类目：</span>
-                <input type="text" class="form-control" v-model="modifyObj.kind">
+                <input type="text" class="form-control" v-model="modifyObj.kind" @input="onProdTitleInput">
               </div>
               <div class="prod-item prod-item-large">
                 <span class="pi-title"><i class="red-text">*</i>品牌：</span>
@@ -168,7 +168,7 @@
               </div>
               <div class="prod-item prod-item-large">
                 <span class="pi-title">规格：</span>
-                <input type="text" class="form-control" v-model="modifyObj.spec">
+                <input type="text" class="form-control" v-model="modifyObj.spec" :class="{'error': !validObj.spec}" @input="onSpecInput" @blur="checkSpec">
               </div>
               <div class="prod-item prod-item-small">
                 <span class="pi-title">封装：</span>
@@ -211,7 +211,7 @@
   </div>
 </template>
 <script>
-  import { enidfilter, getRealLen, cutOutString, formatDate } from '~utils/baseUtils'
+  import { enidfilter, getRealLen, cutOutString, formatDate, checkNullStr } from '~utils/baseUtils'
   import Page from '~components/common/page/pageComponent.vue'
   export default {
     data () {
@@ -247,7 +247,8 @@
 //          encapsulation: true,
 //          produceDate: true,
           amount: true,
-          deadline: true
+          deadline: true,
+          spec: true
         },
 //        successResult: 0,
         showSimilarCodeList: false,
@@ -318,6 +319,7 @@
     methods: {
       getDate1: function () {
         this.modifyObj.deadline = formatDate(this.modifyObj.deadline, 'yyyy-MM-dd hh:mm:ss')
+        this.validObj.deadline = true
       },
       initModifyObj: function () {
         for (let attr in this.modifyObj) {
@@ -330,7 +332,8 @@
           brand: true,
           unitPrice: true,
           amount: true,
-          deadline: true
+          deadline: true,
+          spec: true
         }
       },
       listenPage: function (page) {
@@ -459,11 +462,7 @@
             })
         } else {
           if (!checkValid) {
-            if (!this.validObj.code) {
-              this.$message.error('型号不能为空')
-            } else if (!this.validObj.brand) {
-              this.$message.error('品牌不能为空')
-            } else if (!this.validObj.deadline) {
+            if (!this.validObj.deadline) {
               if (!this.isValidDate(this.modifyObj.deadline)) {
                 this.$message.error('截止日期需在90天以内')
               } else {
@@ -557,11 +556,27 @@
         return item.code && item.brand && item.deadline && this.isValidDate(item.deadline)
       },
       checkCode: function () {
-        this.validObj.code = this.modifyObj.code && this.modifyObj.code !== ''
+        let nullStrFlag = checkNullStr(this.modifyObj.code)
+        this.validObj.code = this.modifyObj.code && this.modifyObj.code !== '' && nullStrFlag
+        if (!this.validObj.code) {
+          if (!nullStrFlag) {
+            this.$message.error('型号输入不合法')
+          } else {
+            this.$message.error('型号不能为空')
+          }
+        }
         return this.validObj.code
       },
       checkBrand: function () {
-        this.validObj.brand = this.modifyObj.brand && this.modifyObj.brand !== ''
+        let nullStrFlag = checkNullStr(this.modifyObj.brand)
+        this.validObj.brand = this.modifyObj.brand && this.modifyObj.brand !== '' && nullStrFlag
+        if (!this.validObj.brand) {
+          if (!nullStrFlag) {
+            this.$message.error('品牌输入不合法')
+          } else {
+            this.$message.error('品牌不能为空')
+          }
+        }
         return this.validObj.brand
       },
       checkUnitPrice: function () {
@@ -572,8 +587,16 @@
         this.validObj.amount = (!this.modifyObj.amount || this.modifyObj.amount === '') ? true : this.modifyObj.amount > 0 && this.modifyObj.amount < 1000000000
         return this.validObj.amount
       },
+      checkSpec: function () {
+        let nullStrFlag = checkNullStr(this.modifyObj.spec)
+        this.validObj.spec = nullStrFlag
+        if (!nullStrFlag) {
+          this.$message.error('规格输入不合法')
+        }
+        return this.validObj.spec
+      },
       checkAll: function () {
-        return this.checkCode() && this.checkBrand() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
+        return this.checkCode() && this.checkBrand() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount() && this.checkSpec()
       },
       checkDeadline: function () {
         this.validObj.deadline = this.modifyObj.deadline && this.modifyObj.deadline !== '' && this.isValidDate(this.modifyObj.deadline)
@@ -637,6 +660,16 @@
         }
         this.getSimilarBrand()
       },
+      onProdTitleInput: function () {
+        if (this.modifyObj.kind && getRealLen(this.modifyObj.kind) > 40) {
+          this.modifyObj.kind = cutOutString(this.modifyObj.kind, 40)
+        }
+      },
+      onSpecInput: function () {
+        if (this.modifyObj.spec && getRealLen(this.modifyObj.spec) > 100) {
+          this.modifyObj.spec = cutOutString(this.modifyObj.spec, 100)
+        }
+      },
       onAmountInput: function () {
         if (!(/^[0-9]*$/).test(this.modifyObj.amount)) {
           let chineseIndex = -1
@@ -1166,6 +1199,9 @@
                   }
                 }
               }
+              .remind {
+                font-size: 12px;
+              }
             }
             &.spot-goods {
               background: #fff;

components/applyPurchase/PublishApply.vue

@@ -63,13 +63,13 @@
            <span>
               类目：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.prodTitle"/>
+            <input type="text" class="form-control" v-model="applyObj.prodTitle" @input="onProdTitleInput"/>
           </div>
           <div class="form-item">
            <span>
               规格：
             </span>
-            <input type="text" class="form-control" v-model="applyObj.spec"/>
+            <input type="text" class="form-control" :class="{'error': !validObj.spec}" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput"/>
           </div>
           <div class="form-item">
            <span>
@@ -155,7 +155,7 @@
   </div>
 </template>
 <script>
-  import { getRealLen, cutOutString, formatDate } from '~utils/baseUtils'
+  import { getRealLen, cutOutString, formatDate, checkNullStr } from '~utils/baseUtils'
   export default {
     data () {
       return {
@@ -178,7 +178,8 @@
 //          encapsulation: true,
 //          produceDate: true,
           amount: true,
-          deadline: true
+          deadline: true,
+          spec: true
         },
         pickerOptions: {
           disabledDate (time) {
@@ -278,11 +279,7 @@
                 this.$message.error('发布失败')
               })
           } else {
-            if (!this.validObj.code) {
-              this.$message.error('型号不能为空')
-            } else if (!this.validObj.brand) {
-              this.$message.error('品牌不能为空')
-            } else if (!this.validObj.deadline) {
+            if (!this.validObj.deadline) {
               this.$message.error('截止日期不能为空')
             } else if (!this.validObj.amount) {
               this.$message.error('请输入正确的数值')
@@ -293,30 +290,48 @@
         }
       },
       getSimilarCode: function () {
-        this.$http.get('/search/similarComponents', {params: {keyword: this.applyObj.code}})
-          .then(response => {
-            this.similarCode = response.data
-            this.showSimilarCodeList = response.data.length > 0
-          })
+        if (this.applyObj.code) {
+          this.$http.get('/search/similarComponents', {params: {keyword: this.applyObj.code}})
+            .then(response => {
+              this.similarCode = response.data
+              this.showSimilarCodeList = response.data.length > 0
+            })
+        } else {
+          this.showSimilarCodeList = false
+        }
       },
       getSimilarBrand: function () {
-        this.$http.get('/search/similarBrands', {params: {keyword: this.applyObj.brand}})
-          .then(response => {
-            this.similarBrand = response.data
-            this.showSimilarBrandList = response.data.length > 0
-          })
+        if (this.applyObj.brand) {
+          this.$http.get('/search/similarBrands', {params: {keyword: this.applyObj.brand}})
+            .then(response => {
+              this.similarBrand = response.data
+              this.showSimilarBrandList = response.data.length > 0
+            })
+        } else {
+          this.showSimilarBrandList = false
+        }
       },
       checkCode: function () {
-        this.validObj.code = this.applyObj.code && this.applyObj.code !== ''
+        let nullStrFlag = checkNullStr(this.applyObj.code)
+        this.validObj.code = this.applyObj.code && this.applyObj.code !== '' && nullStrFlag
         if (!this.validObj.code) {
-          this.$message.error('型号不能为空')
+          if (!nullStrFlag) {
+            this.$message.error('型号输入不合法')
+          } else {
+            this.$message.error('型号不能为空')
+          }
         }
         return this.validObj.code
       },
       checkBrand: function () {
-        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== ''
+        let nullStrFlag = checkNullStr(this.applyObj.brand)
+        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== '' && nullStrFlag
         if (!this.validObj.brand) {
-          this.$message.error('品牌不能为空')
+          if (!nullStrFlag) {
+            this.$message.error('品牌输入不合法')
+          } else {
+            this.$message.error('品牌不能为空')
+          }
         }
         return this.validObj.brand
       },
@@ -327,12 +342,20 @@
         }
         return this.validObj.unitPrice
       },
+      checkSpec: function () {
+        let nullStrFlag = checkNullStr(this.applyObj.spec)
+        this.validObj.spec = nullStrFlag
+        if (!nullStrFlag) {
+          this.$message.error('规格输入不合法')
+        }
+        return this.validObj.spec
+      },
       checkAmount: function () {
         this.validObj.amount = this.applyObj.amount === '' ? true : this.applyObj.amount > 0 && this.applyObj.amount < 1000000000
         return this.validObj.amount
       },
       checkAll: function () {
-        return this.checkCode() && this.checkBrand() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount()
+        return this.checkCode() && this.checkBrand() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount() && this.checkSpec()
       },
       checkDeadline: function () {
         this.validObj.deadline = Boolean(this.applyObj.deadline)
@@ -365,6 +388,16 @@
           this.applyObj.encapsulation = cutOutString(this.applyObj.encapsulation, 20)
         }
       },
+      onProdTitleInput: function () {
+        if (this.applyObj.prodTitle && getRealLen(this.applyObj.prodTitle) > 40) {
+          this.applyObj.prodTitle = cutOutString(this.applyObj.prodTitle, 40)
+        }
+      },
+      onSpecInput: function () {
+        if (this.applyObj.spec && getRealLen(this.applyObj.spec) > 100) {
+          this.applyObj.spec = cutOutString(this.applyObj.spec, 100)
+        }
+      },
       onCodeChange: function () {
         this.applyObj.code = this.applyObj.code.trim()
         if ((/[^\x00-\xff]/g).test(this.applyObj.code)) {

utils/baseUtils.js

@@ -1,4 +1,7 @@
-let getRealLength = function (str) {
+
+const NULL_ARR = ['空', '没', '无', '-', '—', 'null', '#N/A']
+
+const getRealLength = function (str) {
   let len = 0
   for (let i = 0; i < str.length; i++) {
     if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
@@ -120,3 +123,11 @@ export const formatDate = (date, fmt) => {
   }
   return fmt
 }
+
+export const checkNullStr = (str) => {
+  let flag = true
+  NULL_ARR.map(s => {
+    flag = str === s ? false : flag
+  })
+  return flag
+}