替代料报价及显示

assets/scss/mobileCommon.scss

@@ -511,3 +511,36 @@ table.com-price-list {
     }
   }
 }
+
+/* 报价方式切换 */
+.switch-say {
+  text-align: center;
+  font-size: 0;
+  background: #fff;
+  margin-bottom: .35rem;
+  -webkit-box-shadow: 0 2px 4px #ccc;
+  -moz-box-shadow: 0 2px 4px #ccc;
+  box-shadow: 0 2px 4px #ccc;
+  li {
+    width: 50%;
+    height: .72rem;
+    line-height: .72rem;
+    color: #666;
+    font-size: .28rem;
+    text-align: center;
+    position: relative;
+    &.active {
+      color: #3f84f6;
+      &::after {
+        content: '';
+        position: absolute;
+        width: 1.2rem;
+        height: .07rem;
+        background: #3f84f6;
+        left: 50%;
+        margin-left: -.6rem;
+        top: .65rem;
+      }
+    }
+  }
+}

components/applyPurchase/SayPrice.vue

@@ -29,12 +29,34 @@
               <span>规格：</span><span class="text"  :title="purchaseManList.content[currentSayPriceIndex].spec">{{purchaseManList.content[currentSayPriceIndex].spec || '-'}}</span>
             </div>
           </div>
+          <ul class="switch-say">
+            <li :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+            <li :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+          </ul>
+          <template v-if="sayType == 'replace'">
+            <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()">
+              </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()">
+              </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()">
+              </div>
+            </div>
+          </template>
           <div class="content-line">
             <div class="form-item form-left">
               <span><i>*</i>交期：</span>
               <input type="number" class="form-control" placeholder="天数" @input="onLeadtimeInput" @blur="onLeadtimeBlur" v-model="sayPriceObj.leadtime">
-              <!-- -
-              <input type="text" class="form-control" placeholder="天数">-->
             </div>
             <!--<div class="form-item form-upload">
               <label>
@@ -94,14 +116,21 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         },
         validSayPrice: {
           leadtime: false,
           repliesPrice: false,
-          repliesLapQty: false
+          repliesLapQty: false,
+          replaceBrand: false,
+          replaceCmpCode: false,
+          replaceSpec: false
         },
-        showLoading: false
+        showLoading: false,
+        sayType: 'current'
       }
     },
     components: {
@@ -113,6 +142,7 @@
       },
       currentSayPriceIndex () {
         this.resetSayPrice()
+        this.sayType = 'current'
         return this.current
       },
       user () {
@@ -155,6 +185,12 @@
           if (!purchaseMan.currency) {
             purchaseMan.currency = this.sayPriceObj.currency
           }
+          if (this.sayType === 'replace') {
+            purchaseMan.replaceBrand = this.sayPriceObj.replaceBrand
+            purchaseMan.replaceCmpCode = this.sayPriceObj.replaceCmpCode
+            purchaseMan.replaceSpec = this.sayPriceObj.replaceSpec
+            purchaseMan.isReplace = 1
+          }
           this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
             this.showLoading = false
             if (response.data.success === false) {
@@ -185,7 +221,10 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         }
       },
       onLeadtimeInput: function () {
@@ -201,6 +240,30 @@
           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) {
@@ -265,12 +328,13 @@
         return {index: -1}
       },
       checkValid: function () {
+        let validReplace = this.sayType === 'replace' ? this.validSayPrice.replaceBrand && this.validSayPrice.replaceCmpCode && this.validSayPrice.replaceSpec : true
         for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
           if (!this.sayPriceObj.replies[i].lapQty || !this.sayPriceObj.replies[i].price) {
             return false
           }
         }
-        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice
+        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice && validReplace
       },
       setReplies: function (type, index) {
         if (type === 'add' && this.sayPriceObj.replies.length < 5) {
@@ -285,6 +349,10 @@
         } else if (type === 'sub' && this.sayPriceObj.replies.length > 1) {
           this.sayPriceObj.replies.splice(index, 1)
         }
+      },
+      setSayType: function (type) {
+        this.sayType = type
+        this.resetSayPrice()
       }
     }
   }
@@ -293,9 +361,10 @@
   .say-price-box {
     position: fixed;
     width: 476px;
-    top: 30%;
-    left: 33%;
-    bottom: 3%;
+    top: 50%;
+    left: 50%;
+    margin-top: -183px;
+    margin-left: -238px;
     overflow-y: auto;
     /*-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
     /*-moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
@@ -444,6 +513,32 @@
               margin-left: 4px;
             }
           }
+          &.form-long {
+            width: 100%;
+            input {
+              width: 292px;
+            }
+          }
+        }
+      }
+      .switch-say {
+        text-align: center;
+        margin: 0 0 14px 0;
+        font-size: 0;
+        li {
+          width: 200px;
+          height: 34px;
+          line-height: 34px;
+          color: #4290f7;
+          border: 1px solid #4290f7;
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 14px;
+          cursor: pointer;
+          &.active {
+            color: #fff;
+            background: #4290f7;
+          }
         }
       }
     }

components/mobile/applyPurchase/SayPrice.vue

@@ -31,12 +31,16 @@
             </div>
           </div>
           <div class="form-list">
+            <ul class="switch-say">
+              <li class="inline-block" :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+              <li class="inline-block" :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+            </ul>
             <div class="form-title">
               <span class="fl">价格梯度<span>(PCS)</span></span>
               <span class="fr">
             <!--<span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>-->
             <span v-text="sayPriceObj.currency" @click="setShowCurrencyList($event)"></span>
-            <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
+                <!--<span v-if="purchaseDetail.custCurrency" v-text="purchaseDetail.custCurrency"></span>-->
             <img v-if="!showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt="">
             <img v-if="showCurrencyList" src="/images/mobile/@2x/applyPurchase/currency-arrow-up.png" alt="">
             <ul v-if="showCurrencyList">
@@ -45,6 +49,20 @@
             </ul>
           </span>
             </div>
+            <template v-if="sayType == 'replace'">
+              <div class="replace">
+                <span>品牌</span>
+                <input type="text" v-model="sayPriceObj.replaceBrand" class="fr" @blur="onReplaceBrandBlur()">
+              </div>
+              <div class="replace">
+                <span>型号</span>
+                <input type="text" v-model="sayPriceObj.replaceCmpCode" class="fr" @blur="onReplaceCmpCodeBlur()">
+              </div>
+              <div class="replace">
+                <span>规格</span>
+                <input type="text" v-model="sayPriceObj.replaceSpec" class="fr" @blur="onReplaceSpecBlur()">
+              </div>
+            </template>
             <div class="form-item" v-for="(reply, index) in sayPriceObj.replies">
               <input type="text" placeholder="分段数量" class="fl" @blur="onReplyLapQtyBlur(index)" @input="onReplyLapQtyInput(index)" v-model="reply.lapQty">
               <input type="text" placeholder="分段单价" class="fr" @input="onReplyPriceInput(index)" @blur="onReplyPriceBlur(index)" v-model="reply.price">
@@ -77,13 +95,20 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         },
         validSayPrice: {
           leadtime: false,
           repliesPrice: false,
-          repliesLapQty: false
+          repliesLapQty: false,
+          replaceBrand: false,
+          replaceCmpCode: false,
+          replaceSpec: false
         },
+        sayType: 'current',
         remindText: '',
         timeoutCount: 0
       }
@@ -100,6 +125,7 @@
              this.initScroll.scrollTo(0, 0, 0)
            })
          }
+        this.sayType = 'current'
         this.resetSayPrice()
       }
     },
@@ -155,7 +181,10 @@
               lapQty: '',
               price: ''
             }
-          ]
+          ],
+          replaceBrand: '',
+          replaceCmpCode: '',
+          replaceSpec: ''
         }
       },
       setReplies: function (type, index) {
@@ -179,6 +208,12 @@
           purchaseMan.vendUserUU = this.user.data.userUU
           purchaseMan.qutoApp = 'MALL'
           purchaseMan.currency = this.sayPriceObj.currency
+          if (this.sayType === 'replace') {
+            purchaseMan.replaceBrand = this.sayPriceObj.replaceBrand
+            purchaseMan.replaceCmpCode = this.sayPriceObj.replaceCmpCode
+            purchaseMan.replaceSpec = this.sayPriceObj.replaceSpec
+            purchaseMan.isReplace = 1
+          }
           this.$http.post('/inquiry/sale/item/save', purchaseMan).then(response => {
             this.showLoading = false
             if (response.data.success === false) {
@@ -211,6 +246,30 @@
           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
@@ -280,6 +339,7 @@
         this.validSayPrice.repliesLapQty = true
         this.validSayPrice.repliesPrice = true
         this.validSayPrice.leadtime = true
+        let validReplace = this.sayType === 'replace' ? this.validSayPrice.replaceBrand && this.validSayPrice.replaceCmpCode && this.validSayPrice.replaceSpec : true
         for (let i = 0; i < this.sayPriceObj.replies.length; i++) {
           if (!this.sayPriceObj.replies[i].lapQty || !/^[0-9]+([.]{1}[0-9]+)?$/.test(this.sayPriceObj.replies[i].lapQty) || this.sayPriceObj.replies[i].lapQty === '') {
             this.validSayPrice.repliesLapQty = false
@@ -292,11 +352,15 @@
         if (!this.sayPriceObj.leadtime || !/^\d+$/.test(this.sayPriceObj.leadtime) || this.sayPriceObj.leadtime === '') {
           this.validSayPrice.leadtime = false
         }
-        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice
+        return this.validSayPrice.leadtime && this.validSayPrice.repliesLapQty && this.validSayPrice.repliesPrice && validReplace
       },
       onRemind: function (str) {
         this.remindText = str
         this.timeoutCount ++
+      },
+      setSayType: function (type) {
+        this.sayType = type
+        this.resetSayPrice()
       }
     }
   }
@@ -317,10 +381,13 @@
         width: 100%;
         overflow: hidden;
         height: 90%;
+        .base-info {
+          margin-bottom: .12rem;
+        }
         .form-list {
           /*height: 7.53rem;*/
-          background: #fff;
-          padding-top: .2rem;
+          /*background: #fff;*/
+          /*padding-top: .2rem;*/
           padding-bottom: 0.4rem;
           > div {
             height: .7rem;
@@ -340,6 +407,7 @@
               border: 1px solid #666;
               border-radius: .05rem;
               padding: 0 .07rem 0 .17rem;
+              background: #fff;
               .fl {
                 span {
                   color: #666;
@@ -399,6 +467,16 @@
                 width: 4.6rem;
               }
             }
+            &.replace {
+              span {
+                display: inline-block;
+                width: .66rem;
+                text-align: left;
+              }
+              input {
+                width: 5.1rem;
+              }
+            }
           }
           .say-price-btn {
             width: 6.44rem;

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -2,7 +2,7 @@
   <div class="mobile-modal" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box">
       <div class="mobile-modal-header">
-        查看报价
+        {{purchaseDetail.isReplace == 1 ? '替代型号报价' : '当前型号报价'}}
         <!--{{purchaseDetail.agreed == 1 || agreed == 1 ? '已采纳' : '已报价'}}-->
         <i class="icon-guanbi iconfont" @click="cancel"></i>
       </div>
@@ -47,7 +47,11 @@
                 联系电话：<span>{{purchaseDetail.userTel || '-'}}</span>
               </div>
             </div>-->
-            <div class="base-info say-info say" :class="{'long': item.showRefuseList}" v-for="(item, index) in qutationsTemp">
+            <ul class="switch-say">
+              <li class="inline-block" :class="{'active': sayType == 'current'}" @click="setSayType('current')">当前型号报价</li>
+              <li class="inline-block" :class="{'active': sayType == 'replace'}" @click="setSayType('replace')">替代型号报价</li>
+            </ul>
+            <div class="base-info say-info say" :class="{'long': item.showRefuseList}" v-for="(item, index) in qutationsTemp" v-if="(sayType == 'current' && item.isReplace != 1) || (sayType == 'replace' && item.isReplace == 1)">
           <!--    <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex == index" src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
               <img v-if="agreed != 1 && (!item.agreed || item.agreed !== 1) && activeIndex != index" src="/images/mobile/@2x/applyPurchase/say-price-default.png" alt="">
               <img v-if="item.agreed == 1" src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">-->
@@ -57,17 +61,41 @@
                 <img src="/images/mobile/center/accept.png" alt="" v-if="item.agreed == 1">
                 <img src="/images/mobile/center/refuse.png" alt="" v-if="item.agreed == 0">
               </div>
-              <div class="content-line">
-                报价人：<span v-if="item.user">{{item.user.userName}}</span>
-                <span v-else>-</span>
-              </div>
-              <div class="content-line">
-                电话：<span v-if="item.user">{{item.user.userTel}}</span>
-                <span v-else>-</span>
-              </div>
-              <div class="content-line date">
-                交期(天)：<span>{{item.leadtime}}</span>
-              </div>
+              <template v-if="item.isReplace == 1">
+                <div class="content-line">
+                  品牌：<span>{{item.replaceBrand || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  型号：<span>{{item.replaceCmpCode || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  规格：<span>{{item.replaceSpec || '-'}}</span>
+                </div>
+                <div class="content-line">
+                  报价人：<span v-if="item.user">{{item.user.userName}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line date">
+                  交期(天)：<span>{{item.leadtime}}</span>
+                </div>
+                <div class="content-line">
+                  电话：<span v-if="item.user">{{item.user.userTel}}</span>
+                  <span v-else>-</span>
+                </div>
+              </template>
+              <template v-else>
+                <div class="content-line">
+                  报价人：<span v-if="item.user">{{item.user.userName}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line">
+                  电话：<span v-if="item.user">{{item.user.userTel}}</span>
+                  <span v-else>-</span>
+                </div>
+                <div class="content-line date">
+                  交期(天)：<span>{{item.leadtime}}</span>
+                </div>
+              </template>
               <div class="content-line date">
                 报价时间：<span>{{item.offerTime | date}}</span>
               </div>
@@ -163,15 +191,37 @@
               </div>
             </div>-->
             <div class="base-info say-info">
-              <div class="content-line inline-block">
-                报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
-              </div>
-              <div class="content-line inline-block">
-                电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
-              </div>
-              <div class="content-line inline-block date">
-                交期(天)：<span>{{purchaseDetail.leadtime}}</span>
-              </div>
+              <template v-if="purchaseDetail.isReplace == 1">
+                <div class="content-line inline-block">
+                  品牌：<span>{{purchaseDetail.replaceBrand || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  型号：<span>{{purchaseDetail.replaceCmpCode || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  规格：<span>{{purchaseDetail.replaceSpec || '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
+                </div>
+                <div class="content-line inline-block date">
+                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
+                </div>
+              </template>
+              <template v-else>
+                <div class="content-line inline-block">
+                  报价人：<span>{{purchaseDetail.user ? purchaseDetail.user.userName : '-'}}</span>
+                </div>
+                <div class="content-line inline-block">
+                  电话：<span>{{purchaseDetail.user ? purchaseDetail.user.userTel : '-'}}</span>
+                </div>
+                <div class="content-line inline-block date">
+                  交期(天)：<span>{{purchaseDetail.leadtime}}</span>
+                </div>
+              </template>
               <div class="content-line inline-block date">
                 报价时间：<span>{{purchaseDetail.offerTime | date}}</span>
               </div>
@@ -220,7 +270,10 @@
         remindText: '',
         timeoutCount: 0,
         qutationsTemp: [],
-        refusereason: ''
+        refusereason: '',
+        sayType: 'current',
+        currentCount: 0,
+        replaceCount: 0
       }
     },
     components: {
@@ -248,13 +301,19 @@
       purchaseDetail () {
         let obj = {}
         if (this.isBuyer) {
+          this.replaceCount = 0
+          this.currentCount = 0
           obj = this.baseUtils.deepCopy(this.$store.state.applyPurchase.purchaseManList.buyerInquiryDetail.data)
           if (obj.qutations) {
             this.qutationsTemp = obj.qutations
             for (let i = 0; i < this.qutationsTemp.length; i++) {
               this.$set(this.qutationsTemp[i], 'showRefuseList', false)
+              this.qutationsTemp[i].isReplace === 1 ? this.replaceCount++ : this.currentCount++
             }
           }
+          if (this.currentCount === 0) {
+            this.sayType = 'replace'
+          }
         } else {
           obj = this.$store.state.applyPurchase.purchaseManList.vendorInquiryDetail.data
         }
@@ -312,6 +371,13 @@
       setShowRefuseList: function (item, flag) {
 //        console.log(flag)
         item.showRefuseList = flag
+      },
+      setSayType: function (sayType) {
+        if ((sayType === 'current' && this.currentCount > 0) || (sayType === 'replace' && this.replaceCount > 0)) {
+          this.sayType = sayType
+        } else {
+          this.onRemind(`暂无${sayType === 'current' ? '当前型号报价' : '替代型号报价'}`)
+        }
       }
     },
     mounted() {
@@ -573,7 +639,7 @@
               margin-top: .1rem;
             }
             .price {
-              margin-top: .1rem;
+              margin-top: .2rem;
             }
           }
         }