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

<template>
  <div class="batch-publish">
    <p>成功上传<b class="red-text">{{bomNumber.successImport || 0}}</b>个<br/>另有<span class="red-text">{{bomNumber.nullField || 0}}</span>个必填项缺失，请在当前页完善信息</p>
    <table v-if="bomList.content.length">
      <thead>
        <tr>
          <th width="60">
            <label class="com-check-box">
              <input type="checkbox" id="all" @change="onCheck()" v-model="isCheckAll">
              <label for="all"></label>
            </label>全选
          </th>
          <th width="160"><i class="red-text">*</i>型号</th>
          <th width="132"><i class="red-text">*</i>品牌</th>
          <th width="100">采购数量</th>
          <th width="128">单价预算</th>
          <th width="76">封装</th>
          <th width="102">生产日期</th>
          <th width="144"><i class="red-text">*</i>截止时间</th>
          <th width="92">操作</th>
        </tr>
      </thead>
      <tbody v-for="(item, index) in bomList.content">
      <tr v-if="!item.active">
        <td>
          <label class="com-check-box">
            <input type="checkbox" @change="onCheck(index)" v-model="item.checked" :id="index">
            <label :for="index"></label>
          </label>
        </td>
        <td>{{item.code}}</td>
        <td>{{item.brand}}</td>
        <td>{{item.amount || '-'}}</td>
        <td class="blue-text">{{(item.currency === 'RMB' ? '¥' : '$') + item.unitPrice}}</td>
        <td>{{item.encapsulation || '-'}}</td>
        <td>{{item.produceDate}}</td>
        <td>{{item.deadline | date}}</td>
        <td class="operate">
          <a class="delete-btn" @click="modifyItem(index)">编辑</a>
          <a class="delete-btn" @click="deleteItem(index)">删除</a>
        </td>
      </tr>
      <tr class="modify-row" v-if="item.active">
        <td>
          <label class="com-check-box">
            <input type="checkbox" @change="onCheck(index)" v-model="item.checked" :id="index">
            <label :for="index"></label>
          </label>
        </td>
        <td>
          <input type="text" class="form-control" v-model="modifyObj.code">
        </td>
        <td>
          <input type="text" class="form-control" v-model="modifyObj.brand">
        </td>
        <td>
          <input type="text" class="form-control" v-model="modifyObj.amount">
        </td>
        <td>
          <select class="form-control" v-model="modifyObj.currency">
            <option value="RMB">¥</option>
            <option value="USD">$</option>
          </select>
          <input class="form-control" type="text" v-model="modifyObj.unitPrice">
        </td>
        <td>
          <input type="text" class="form-control" v-model="modifyObj.encapsulation">
        </td>
        <td>
          <input type="text" class="form-control" v-model="modifyObj.produceDate">
        </td>
        <td>
          <el-date-picker
            v-model="modifyObj.deadline"
            type="date"
            :picker-options="pickerOptions"
            :editable="false"
            :clearable="true"
            size="mini">
          </el-date-picker>
          <!--<input type="text" class="form-control" v-model="modifyObj.deadline">-->
        </td>
        <td class="operate">
          <a class="submit-btn" @click="submitModify(index)">确认</a>
          <a class="cancel-btn" @click="cancelModify(index)">取消</a>
        </td>
      </tr>
      </tbody>
    </table>
    <page :total="bomList.totalElements" :page-size="pageSize"
          :current="nowPage" @childEvent="listenPage"></page>
    <div class="submit-area" v-if="bomList.content.length">
      <a class="delete-btn" @click="deleteItem()">删除</a>
      <a class="modify-btn delete-btn" @click="submitBOM">确认发布</a>
    </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>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    data () {
      return {
        pageSize: 10,
        nowPage: 1,
        isCheckAll: false,
        showRemindBox: false,
        modifyObj: {},
        pickerOptions: {
          disabledDate (time) {
            // 大于等于今天 小于三个月后
            return time.getTime() < Date.now() - 1000 * 60 * 60 * 24 || time.getTime() > Date.now() + 1000 * 60 * 60 * 24 * 30 * 3
          }
        }
      }
    },
    components: {
      Page
    },
    computed: {
      bomList () {
        let list = this.$store.state.applyPurchase.bomMaterial.bomList.data
        for (let i = 0; i < list.content.length; i++) {
          list.content[i].checked = false
          list.content[i].active = false
        }
        return list
      },
      bomNumber () {
        return this.$store.state.applyPurchase.bomMaterial.bomNumber.data
      }
    },
    filters: {
      date: function (input) {
        const d = new Date(input)
        const year = d.getFullYear()
        const monthTemp = d.getMonth() + 1
        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
        return year + '-' + month + '-' + day
      }
    },
    methods: {
      listenPage: function (page) {
        this.nowPage = page
        this.$store.dispatch('applyPurchase/loadBOMMaterialList', {bomId: this.$route.params.id, page: this.nowPage, count: this.pageSize})
      },
      submitBOM: function () {
        let str = ''
        for (let i = 0; i < this.bomList.content.length; i++) {
          if (this.bomList.content[i].checked) {
            str += this.bomList.content[i].id + ','
          }
        }
        let param = {'bomId': Number(this.$route.params.id)}
        if (str.length) {
          str = str.substring(0, str.length - 1)
          param.spIds = str
        }
        this.$http.post('/seek/confirmBom', param)
          .then(response => {
            if (response.data.success) {
              this.showRemindBox = true
              this.listenPage(1)
              this.$store.dispatch('applyPurchase/loadBOMNumber', {bomId: this.$route.params.id})
            } else {
              this.$message.error('发布失败')
            }
          }, err => {
            console.log(err)
            this.$message.error('系统错误')
          })
      },
      onCheck: function (index) {
        if (typeof index === 'undefined') {
          let isCheckedAll = true
          for (let i = 0; i < this.bomList.content.length; i++) {
            if (!this.bomList.content[i].checked) {
              isCheckedAll = false
              break
            }
          }
          this.setAllCheck(!isCheckedAll)
          this.isCheckAll = !isCheckedAll
        }
      },
      setAllCheck: function (flag) {
        for (let i = 0; i < this.bomList.content.length; i++) {
          this.bomList.content[i].checked = flag
        }
      },
      modifyItem: function (index) {
        for (let i = 0; i < this.bomList.content.length; i++) {
          this.bomList.content[i].active = false
        }
        this.bomList.content[index].active = true
        this.modifyObj = this.bomList.content[index]
        this.modifyObj.deadline = this.getDate(this.bomList.content[index].deadline)
      },
      cancelModify: function (index) {
        this.bomList.content[index].active = false
      },
      getDate: function (input) {
        const d = new Date(input)
        const year = d.getFullYear()
        const monthTemp = d.getMonth() + 1
        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
        return year + '-' + month + '-' + day
      },
      submitModify: function (index) {
        this.$http.put('/seek/updateSeekPurchaseByBatch', this.modifyObj)
          .then(response => {
            if (response.data.success) {
              this.listenPage(1)
              this.$message.success('修改成功')
              this.bomList.content[index].active = false
            } else {
              this.$message.error('修改失败')
            }
          }, err => {
            console.log(err)
            this.$message.error('系统错误')
          })
      },
      deleteItem: function (index) {
        if (!index) {
          let str = ''
          for (let i = 0; i < this.bomList.content.length; i++) {
            if (this.bomList.content[i].checked) {
              str += this.bomList.content[i].id + ','
            }
          }
          let param = {}
          if (str.length) {
            str = str.substring(0, str.length - 1)
            param.spIds = str
            this.doDelete(param)
          } else {
            this.$message.error('请勾选')
            return
          }
        } else {
          this.doDelete({spIds: this.bomList.content[index].id})
        }
      },
      doDelete: function (param) {
        this.$http.put('/seek/deleteSeekPurchaseByBatch', param)
          .then(response => {
            if (response.data.success) {
              this.listenPage(1)
              this.$message.success('删除成功')
            } else {
              this.$message.error('删除失败')
            }
          }, err => {
            console.log(err)
            this.$message.error('系统错误')
          })
      }
    }
  }
</script>
<style lang="scss">
  .batch-publish {
    margin: 0 auto;
    width: 998px;
    .red-text {
      color: #ff0000;
    }
    .blue-text {
      color: #3c7cf5;
    }
    > p {
      margin: 59px 0 42px;
      font-size: 16px;
    }
    table {
      width: 100%;
      table-layout: fixed;
      thead {
        tr {
          th {
            background: #b8b8b8;
            color: #fff;
            font-weight: normal;
            height: 50px;
            line-height: 50px;
            text-align: center;
            .com-check-box {
              margin-right: 2px;
            }
            i {
              margin-right: 3px;
            }
          }
        }
      }
      tbody {
        tr {
          height: 85px;
          line-height: 85px;
          text-align: center;
          border : {
            bottom: 1px solid #d9d9d9;
            left: 1px solid #d9d9d9;
            right: 1px solid #d9d9d9;
          }
          &:hover {
            background: #f3f3f3;
          }
          td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.operate {
              a {
                display: block;
                width: 64px;
                height: 24px;
                line-height: 22px;
                text-align: center;
                border-radius: 3px;
                margin: 0 auto 4px;
                &.submit-btn {
                  border: 1px solid #f64900;
                  color: #fff;
                  background: #f64900;
                }
                &.cancel-btn {
                  border: 1px solid #bbb;
                  color: #fff;
                  background: #bbb;
                }
              }
            }
          }
          &.modify-row {
            td {
              position: relative;
              input, select {
                height: 20px;
                border-radius: 3px;
                background: #f4f4f4;
                border: 1px solid #b5b5b5;
                text-align: center;
                padding: 0 5px;
              }
              &:nth-child(2) {
                input {
                  width: 113px;
                }
              }
              &:nth-child(3) {
                input {
                  width: 93px;
                }
              }
              &:nth-child(4) {
                input {
                  width: 71px;
                }
               }
              &:nth-child(5) {
                input {
                  width: 65px;
                  padding: 0 5px 0 30px;
                }
                select {
                  width: 25px;
                  padding: 0 0 0 2px;
                  background: url(/images/applyPurchase/select.png) no-repeat right;
                  background-size: 12px 19px;
                  background-position: 13px 0px;
                  position: absolute;
                  top: 33px;
                  border-bottom: none;
                  border-top: none;
                  border-left: 0;
                }
              }
              &:nth-child(6) {
                input {
                  width: 54px;
                }
              }
              &:nth-child(7) {
                input {
                  width: 72px;
                }
              }
              &:nth-child(8) {
                div {
                  width: 101px;
                  input {
                    width: 101px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .modify-btn {
      border: 1px solid #3c7cf5;
      color: #3c7cf5;
    }
    .delete-btn {
      border: 1px solid #3c7cf5;
      color: #fff;
      background: #3c7cf5;
    }
    .submit-area {
      margin: 51px auto 60px;
      text-align: center;
      clear: both;
      a {
        display: inline-block;
        width: 64px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        border-radius: 3px;
        &.modify-btn {
          width: 90px;
          margin-left: 14px;
        }
      }
    }
    .apply-del-box{
      position: fixed;
      z-index: 1000;
      height: auto;
      opacity: 1;
      background-color: white;
      width: 310px;
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      -moz-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      -o-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
      margin: -155px 0 0 -75px;
      top: 55%;
      left: 43%;
      .title{
        height: 24px;
        background-color: #007aff;
        text-align: right;
        padding-right: 15px;
        line-height: 24px;
        a{
          color: white;
          font-size: 12px;
        }
      }
      .content{
        width: 100%;
        text-align: center;
        margin: 0 auto;
        p{
          padding: 12px 31px;
          margin: 0;
          &:nth-child(2) {
            font-size: 12px;
            padding-top: 0;
          }
          i{
            color: #5078cb;
            font-size: 16px;
            margin-right: 10px;
          }
          span {
            color: #007aff;
          }
          &:last-child {
            font-size: 12px;
          }
        }
        div{
          width: 100%;
          text-align: center;
          margin: 0 auto 20px;
          a{
            padding: 0 19px;
            height: 26px;
            line-height: 26px;
            display: inline-block;
            text-align: center;
            font-size: 14px;
            color: #fff;
            &:first-child{
              background: #c8c6c6;
              margin-right: 10px;
            }
            &:last-child{
              background: #007aff;
            }
          }
        }
      }
    }
  }
</style>