mall-web-ssr/components/applyPurchase/articleOne.vue

<template>
  <div class="article_one">
    <div class="title">
      <span><i class="purchase_icon"></i>发布求购</span>
    </div>
    <div class="publish-area">
      <div class="area_title">
        <span>单个求购</span>
      </div>
      <div class="publish-form-area">
        <div class="form-item">
            <span>
              <i>*</i>型号：
            </span>
          <input type="text" class="form-control" :class="{'error': !validObj.code}" v-model="applyObj.code" @blur="checkCode" @input="onCodeChange" placeholder="请勿填中文符号"/>
          <ul v-show="showSimilarCodeList && applyObj.code">
            <li v-for="sCode in similarCode" @click="setCode(sCode.code)">{{sCode.code}}</li>
          </ul>
        </div>
        <div class="form-item">
            <span>
              <i>*</i>品牌：
            </span>
          <input type="text" class="form-control" :class="{'error': !validObj.brand}" v-model="applyObj.brand" @blur="checkBrand" @input="onBrandChange" placeholder="请勿填中文符号" />
          <ul class="brand-similar-list" v-show="showSimilarBrandList && applyObj.brand">
            <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
          </ul>
        </div>
        <div class="form-item">
           <span>
              <i>*</i>物料名称：
            </span>
          <input type="text" class="form-control" :class="{'error': !validObj.prodTitle}" v-model="applyObj.prodTitle" @blur="checkProdTitle" @input="onProdTitleInput"/>
        </div>
        <div class="form-item">
           <span>
              规格：
            </span>
          <input type="text" class="form-control" :class="{'error': !validObj.spec}" v-model="applyObj.spec" @blur="checkSpec" @input="onSpecInput"/>
        </div>
        <div class="form-item">
            <span>
              <i>*</i>截止日期：
            </span>
          <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
          <el-date-picker
            v-model="applyObj.deadline"
            type="date"
            :picker-options="pickerOptions"
            :class="{'error': !validObj.deadline}"
            @change="setDeadLineValid"
            :editable="false"
            :clearable="true"
            size="mini">
          </el-date-picker>
        </div>
        <!--<div class="form-item">
          <span>
            单价预算：
          </span>
          <select v-model="applyObj.currency" class="form-control">
            <option value="RMB">¥</option>
            <option value="USD">$</option>
          </select>
          <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
        </div>-->
        <!--<div class="form-item">
         <span>
            封装：
          </span>
          <input type="text" class="form-control" v-model="applyObj.encapsulation" @input="onEncapsulationChange" />
        </div>-->
        <div class="form-item">
            <span>
              采购数量(PCS)：
            </span>
          <input type="text" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput" />
        </div>
        <!--<div class="form-item">
          <span>
            生产日期：
          </span>
          <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
        </div>-->
        <div class="form-item">
          <a @click="goPublish">发布求购</a>
        </div>
      </div>
      <div class="area_title">
        <span>批量求购</span>
      </div>
      <div class="publish-upload">
        <h2>3秒一键配单采购</h2>
        <label>
          <img src="/images/applyPurchase/upload.png" />
          <el-upload
            drag
            action="/seek/importBom"
            accept="*.xls, *.xlsx"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-error="onError">
          </el-upload>
        </label>
        <h3>把Excel格式的BOM<br/>拖放到框中</h3>
        <a @click="downloadTemplate()" class="download-line"><i class="down_icon"></i>Excel模板下载</a>
      </div>
    </div>
    <!--提示框-->
    <div class="apply-del-box" v-if="showRemindBox">
      <div class="title">
        <a @click="showRemindBox = false"><i class="fa fa-close fa-lg"></i></a>
      </div>
      <div class="content">
        <!--<p style="line-height: 20px;margin-top: 10px;padding:0 10px">非常抱歉，目前暂无此品牌！<br>若直接前往“品牌申请”，我们将为您先开通寄售功能，待申请通过后再提交开店申请。</p>-->
        <!--<p style="line-height: 20px;">前往<a @click="goBrandApply()"  target="_blank" style="color: #5078CB">品牌申请&nbsp;<i class="fa fa-arrow-right"></i></a></p>-->
        <p><img src="/images/applyPurchase/check.png" alt="">发布成功</p>
        <p>其中 <span>100</span>个求购型号有现货在售，您可前往“<span>买家中心-我的求购</span>”查询并直接购买</p>
        <div>
          <a @click="showRemindBox = false">我知道了</a>
          <a href="/user#/seekPurchase">前往我的求购</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        applyObj: {
          code: '',
          brand: '',
          unitPrice: '',
          currency: 'RMB',
          prodTitle: '',
          spec: '',
          encapsulation: '',
          produceDate: '',
          amount: '',
          deadline: ''
        },
        validObj: {
          code: true,
          brand: true,
          unitPrice: true,
//          encapsulation: true,
//          produceDate: true,
          amount: true,
          deadline: true,
          spec: true,
          prodTitle: true
        },
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        },
        showRemindBox: false,
        showSimilarCodeList: false,
        showSimilarBrandList: false,
        similarCode: [],
        similarBrand: []
      }
    },
    computed: {
      goodPurchaseMan () {
        return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
      },
      user () {
        return this.$store.state.option.user
      }
    },
    filters: {
      enterpriseFilter (str) {
        return str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str
      },
      userNameFilter (str) {
        return str.substring(0, 1) + '**'
      }
    },
    mounted () {
      let _this = this
      this.$nextTick(() => {
        document.getElementsByClassName('el-upload-dragger')[0].onclick = function (event) {
          event.stopPropagation()
        }
        document.body.onclick = function () {
          _this.showSimilarCodeList = false
          _this.showSimilarBrandList = false
        }
      })
    },
    methods: {
      emptyForm: function () {
        for (let attr in this.applyObj) {
          this.applyObj[attr] = attr === 'currency' ? 'RMB' : ''
        }
      },
      getRankBg: function (index) {
        return index === 0 ? 1 : index < 3 ? 2 : 3
      },
      getMaterialKind: function (code, brand) {
        return this.$http.get('/productuser/match/getKind', {params: {cmpCode: code, brand: brand}})
      },
      startPublish: function (prodTitle) {
        let inquiry = {}
        let inquiryItem = {}
        if (this.user.data.enterprise) {
          inquiry.enUU = this.user.data.enterprise.uu
        }
        let date = new Date()
        let currency = this.applyObj.unitPrice ? this.applyObj.currency : null
        inquiry.recorderUU = this.user.data.userUU
        inquiry.code = 'MALL' + date.getTime()
        inquiry.date = date
        inquiry.recorder = this.user.data.userName
        inquiry.endDate = this.applyObj.deadline
        inquiry.sourceapp = 'MALL'
        inquiry.amount = 1
        inquiryItem.userUU = this.user.data.userUU
        inquiryItem.source = 'MALL'
        inquiryItem.userName = this.user.data.userName
        inquiryItem.userTel = this.user.data.userTel
        inquiryItem.needquantity = this.applyObj.amount
        inquiryItem.inbrand = this.applyObj.brand
        inquiryItem.spec = this.applyObj.spec
        inquiryItem.currency = currency
        inquiryItem.cmpCode = this.applyObj.code.trim().toUpperCase()
        inquiryItem.unitPrice = this.applyObj.unitPrice
        inquiryItem.produceDate = this.applyObj.produceDate
        inquiryItem.date = date
        inquiryItem.endDate = this.applyObj.deadline
        inquiryItem.encapsulation = this.applyObj.encapsulation
        inquiryItem.spec = this.applyObj.spec
        inquiryItem.prodTitle = prodTitle || this.applyObj.prodTitle || '其他'
        let inquiryItems = []
        inquiryItems.push(inquiryItem)
        inquiry.inquiryItems = inquiryItems
        inquiry.currency = this.applyObj.unitPrice ? this.applyObj.currency : null
        this.$http.post('/inquiry/buyer/save', inquiry)
          .then(response => {
            this.$message.success('发布成功')
//                this.showRemindBox = true
            this.emptyForm()
//                this.validObj.deadline = true
            this.$store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.user.data.enterprise ? this.user.data.enterprise.uu : null})
          }, error => {
            console.log(error)
            this.$message.error('发布失败')
          })
      },
      goPublish: function () {
        if (this.user.logged) {
          this.authorityInterceptor(this.baseUrls.userPublishSeek, () => {
            if (this.checkAll()) {
//            if (!this.applyObj.prodTitle || this.applyObj.prodTitle.length === 0) {
//              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
//                this.startPublish(response.data && response.data.length ? response.data : '其他')
//              })
//            } else {
//              this.startPublish()
//            }
              this.getMaterialKind(this.applyObj.code, this.applyObj.brand).then(response => {
                this.startPublish(response.data && response.data.length ? response.data : this.applyObj.prodTitle)
              })
            } else {
              if (!this.validObj.prodTitle) {
                this.$message.error('物料名称不能为空')
              } else if (!this.validObj.deadline) {
                this.$message.error('截止日期不能为空')
              } else if (!this.validObj.amount) {
                this.$message.error('请输入正确的数值')
              }
            }
          })
        } else {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      },
      getSimilarCode: function () {
        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 () {
        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 () {
        let code = this.applyObj.code.trim()
        let nullStrFlag = this.baseUtils.checkNullStr(code)
        this.validObj.code = code && code !== '' && nullStrFlag
        if (!this.validObj.code) {
          if (!nullStrFlag) {
            this.$message.error('型号输入不合法')
          } else {
            this.$message.error('型号不能为空')
          }
        }
        return this.validObj.code
      },
      checkProdTitle: function () {
        let prodTitle = this.applyObj.prodTitle.trim()
        this.validObj.prodTitle = prodTitle && prodTitle !== ''
        if (!this.validObj.prodTitle) {
          this.$message.error('物料名称不能为空')
        }
        return this.validObj.prodTitle
      },
      checkBrand: function () {
        let nullStrFlag = this.baseUtils.checkNullStr(this.applyObj.brand)
        this.validObj.brand = this.applyObj.brand && this.applyObj.brand !== '' && nullStrFlag
        if (!this.validObj.brand) {
          if (!nullStrFlag) {
            this.$message.error('品牌输入不合法')
          } else {
            this.$message.error('品牌不能为空')
          }
        }
        return this.validObj.brand
      },
      checkUnitPrice: function () {
        this.validObj.unitPrice = this.applyObj.unitPrice === '' ? true : this.applyObj.unitPrice > 0 && this.applyObj.unitPrice < 100000000
        if (!this.validObj.unitPrice && this.applyObj.unitPrice <= 0) {
          this.$message.error('单价必须是大于0的数字')
        }
        return this.validObj.unitPrice
      },
      checkSpec: function () {
        let nullStrFlag = this.baseUtils.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.checkProdTitle() && this.checkDeadline() && this.checkUnitPrice() && this.checkAmount() && this.checkSpec()
      },
      checkDeadline: function () {
        this.validObj.deadline = Boolean(this.applyObj.deadline)
        return this.validObj.deadline
      },
      setDeadLineValid: function () {
        if(this.applyObj.deadline === '') {return ''}
        this.applyObj.deadline = this.baseUtils.formatDate(this.baseUtils.getFullDay(new Date(this.applyObj.deadline)), 'yyyy-MM-dd hh:mm:ss')
        this.validObj.deadline = true
      },
      onUnitPriceInput: function () {
        let price = this.applyObj.unitPrice
        if (price >= 10000) {
          this.applyObj.unitPrice = price.substring(0, 4)
        } else if (price.indexOf('.') > -1) {
          let arr = price.split('.')
          if (arr[0].length > 4) {
            this.applyObj.unitPrice = Number(arr[0].substring(0, 4) + '.' + arr[1])
          } else if (arr[1].length > 6) {
            this.applyObj.unitPrice = Number(arr[0] + '.' + arr[1].substring(0, 6))
          }
        }
      },
      onProduceDateChange: function () {
        if (this.applyObj.produceDate && this.baseUtils.getRealLen(this.applyObj.produceDate) > 12) {
          this.applyObj.produceDate = this.baseUtils.cutOutString(this.applyObj.produceDate, 12)
        }
      },
      onEncapsulationChange: function () {
        if (this.applyObj.encapsulation && this.baseUtils.getRealLen(this.applyObj.encapsulation) > 20) {
          this.applyObj.encapsulation = this.baseUtils.cutOutString(this.applyObj.encapsulation, 20)
        }
      },
      onProdTitleInput: function () {
        if (this.applyObj.prodTitle && this.baseUtils.getRealLen(this.applyObj.prodTitle) > 40) {
          this.applyObj.prodTitle = this.baseUtils.cutOutString(this.applyObj.prodTitle, 40)
        }
      },
      onSpecInput: function () {
        if (this.applyObj.spec && this.baseUtils.getRealLen(this.applyObj.spec) > 100) {
          this.applyObj.spec = this.baseUtils.cutOutString(this.applyObj.spec, 100)
        }
      },
      onCodeChange: function () {
        if ((/[^\x00-\xff]/g).test(this.applyObj.code)) {
          let chineseIndex = -1
          for (let i = 0; i < this.applyObj.code.length; i++) {
            if ((/[^\x00-\xff]/g).test(this.applyObj.code.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, chineseIndex)
        } else if (this.applyObj.code && this.baseUtils.getRealLen(this.applyObj.code) > 100) {
          this.applyObj.code = this.baseUtils.cutOutString(this.applyObj.code, 100)
        } else {
          this.getSimilarCode()
        }
      },
      onBrandChange: function () {
        this.applyObj.brand = this.applyObj.brand.trim()
        if ((/[^\x00-\xff]/g).test(this.applyObj.brand)) {
          let chineseIndex = -1
          for (let i = 0; i < this.applyObj.brand.length; i++) {
            if ((/[^\x00-\xff]/g).test(this.applyObj.brand.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.applyObj.brand.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          if (chineseIndex > -1) {
            this.applyObj.brand = this.applyObj.brand.substring(0, chineseIndex)
          }
        } else if (this.applyObj.brand && this.baseUtils.getRealLen(this.applyObj.brand) > 50) {
          this.applyObj.brand = this.baseUtils.cutOutString(this.applyObj.brand, 50)
        } else {
          this.getSimilarBrand()
        }
      },
      onAmountInput: function () {
        if (!(/^[0-9]*$/).test(this.applyObj.amount)) {
          let chineseIndex = -1
          for (let i = 0; i < this.applyObj.amount.length; i++) {
            if (!(/^[0-9]*$/).test(this.applyObj.amount.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, chineseIndex)
        } else if (this.applyObj.amount.length > 9) {
          this.applyObj.amount = this.baseUtils.cutOutString(this.applyObj.amount, 9)
        }
      },
      onSuccess: function (data) {
        if (!this.user.logged) {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        } else {
          // 能拦截跳转但无法阻止上传
          this.authorityInterceptor(this.baseUrls.userImportBom, () => {
            if (data.success) {
              window.location.href = '/applyPurchase/' + data.data
            } else {
              this.$message.error(data.message)
            }
          })
        }
      },
      onError: function () {
        if (!this.user.logged) {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        } else {
          this.$message.error('上传失败, 系统错误')
        }
      },
      downloadTemplate: function () {
        window.location.href = '/seek/release/template'
      },
      setCode: function (code) {
        this.$http.get('/search/201819', {params: {page: 1, count: 1, type: 'component', keyword: code}})
          .then(res => {
            if (res.data && res.data.futures && res.data.futures.content) {
              let obj = res.data.futures.content[0]
              if (obj) {
                this.applyObj.brand = obj.pbrand || obj.pbranden || ''
                this.applyObj.prodTitle = obj.kind || obj.kinden || ''
                this.applyObj.spec = obj.spec || ''
              }
            }
            this.applyObj.code = code
            this.showSimilarCodeList = false
          }, err => {
            this.applyObj.code = code
            this.showSimilarCodeList = false
            console.log(err.response.data || err)
          })
      },
      setBrand: function (brand) {
        this.applyObj.brand = brand
        this.showSimilarBrandList = false
      }
//      upload: function (e) {
//        let file = e.target.files[0]
//        let param = new FormData()
//        param.append('file', file, file.name)
//        let config = {
//          headers: {'Content-Type': file.type}
//        }
//        this.$http.post('/seek/importBom', param, config).then(response => {
//          if (response.data.success) {
//            window.open('/applyPurchase/' + response.data.data)
//          } else {
//            this.$message.error('上传失败')
//          }
//        }, err => {
//          console.log(err)
//          this.$message.error('系统错误')
//        })
//      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  .article_one{
    border-radius:5px;
    background: #fff;
    margin-bottom:30px;
    .title{
      height:34px;
      line-height: 34px;
      background: #2496f1;
      padding:0 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      span{
        font-size: 14px;
        color:#fff;
        line-height: 30px;
        font-weight: bold;
      }
    }
    .publish-area{
      padding:5px 10px 10px;
      .area_title{
        border-bottom:1px solid #e5e5e5;
        margin-bottom:10px;
        span{
          position:relative;
          top:1px;
          display:inline-block;
          height:25px;
          line-height: 25px;
          border-bottom:1px solid #2496f1;
          font-size: 14px;
          color:#666;
        }
      }
      .publish-form-area{
        background: #d3eafc;
        border-radius:10px;
        padding:5px 10px;
        margin-bottom:5px;
        .form-item {
          margin-bottom: 5px;
          position: relative;
          >a{
            width: 120px;
            height: 30px;
            line-height: 30px;
            background: #2496f1;
            color: #eee;
            font-size: 14px;
            display: block;
            border-radius: 3px;
            cursor: pointer;
            text-align: center;
            margin:15px auto;
          }
          >span {
            text-align: right;
            display: inline-block;
            line-height: 23px;
            color: #333;
            i {
              position: relative;
              top: 2px;
              right: 3px;
              color: #e41515;
            }
          }
          > ul {
            line-height: normal;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #b5b5b5;
            z-index: 1;
            max-height: 120px;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 3px;
            width: 178px;
            font-size: 12px;
            li {
              height: 24px;
              line-height: 24px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 3px;
              &:hover {
                background: #ddd;
              }
            }
          }
          select {
            width: 32px;
            position: absolute;
            height: 20px;
            background: url('/images/applyPurchase/select.png')no-repeat right;
            background-position-x: 15px;
            padding: 0 0 0 3px;
            border-radius: 0;
            & + input {
              padding-left: 34px;
            }
          }
          .el-input {
            width: 100%;
          }
          input {
            font-size: 12px;
            height: 26px;
            line-height: 26px;
            border-radius: 5px;
            padding: 0 3px;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            &.error {
              border-color: #f4645f!important;
            }
          }
        }
      }
      .publish-upload{
        height:208px;
        background: #d3eafc;
        border-radius:5px;
        text-align: center;
        color:#666;
        padding-top:16px;
        h2 {
          font-size: 12px;
          margin:0;
          margin-bottom:18px;
        }
        h3 {
          font-size: 12px;
          line-height: 20px;
          margin: 15px 0;
        }
        label {
          position: relative;
          > div {
            position: absolute;
          }
        }
        .download-line {
          cursor: pointer;
          width: 130px;
          height: 30px;
          line-height: 30px;
          background: #2496f1;
          color: #eee;
          font-size: 12px;
          display: block;
          border-radius: 3px;
          text-align: center;
          margin:15px auto;
        }
      }
    }
  }
  .el-upload {
    input {
      display: none;
    }
    .el-upload-dragger {
      width: 198px;
      height: 150px;
      position: absolute;
      top: -80px;
      left: -75px;
      opacity: 0;
    }
  }
  .el-date-editor--date{
    width: 100%;
    &.error {
      input {
        border: 1px solid #f4645f !important;
      }
    }
  }
  .el-icon-date {
    display: none;
  }
  .el-input__inner {
    height: 20px;
    border-radius: 0;
    border: 1px solid #c9c9c9;
  }
</style>