mall-web-ssr/pages/mobile/center/user/supplier/index.vue

<template>
  <div class="modal-wrapper-bg">
    <div class="mobile-customer-btob"  style="background: #f1f3f6" id="mobile-customer-btob">
      <div class="search-content mi-search-content">
        <input type="text" v-model="filterParams.keyword" @keyup.13="onFilter" placeholder="企业名称/营业执照号/申请人/审核人">
        <span @click="onFilter"><i class="iconfont icon-sousuo"></i></span>
      </div>
      <div class="customer-btob-wrapper">
        <div v-if="resourceList.content && resourceList.content.length > 0">
          <div class="customer-btob-wrapper-list" v-for="item in resourceList.content">
            <div class="customer-btob-wrapper-content">
              <div class="list-item"><span>供应商名称：</span><a>{{item.vendorEnterprise.enName}}</a></div>
              <div class="address clearfix"><span class="fl">地址：</span><div class="fl" style="width:5.6rem">{{item.vendorEnterprise.enAddress}}</div></div>
              <div class="list-item"><span>联系人：</span>{{item.vendorUser.userName}}</div>
              <div class="list-item"><span>供应商电话：</span>{{item.vendorUser.userTel}}</div>
              <div class="list-item"><span>采购对接人：</span>
                <span class="wrap-text">{{item.saleContacts && item.saleContacts.length > 0 ? item.saleContacts.toString() : '待分配'}}</span>
              </div>
            </div>
            <div class="customer-btob-wrapper-bottom clearfix">
              <div @click="addUserInfo(item)"><i class="iconfont icon-allocation"></i>分配</div>
              <div @click="transferUserInfo(item)"><i class="iconfont icon-zhuanyi"></i>转移</div>
            </div>
          </div>
        </div>
        <empty-status
          v-else
          :text="'暂无对应的供应商信息！'"
          :showLink="false"
        ></empty-status>
      </div>
    </div>
    <div class="mobile-modal" v-if="modalObj.showModal" @click="closeModal()">
      <div class="mobile-modal-box mobile-modal-wrapper" @click="stopPropagation($event)">
        <div class="mobile-modal-header">{{modalObj.type === 'add' ? '客户分配' : '权限转移'}}<i @click="closeModal()" class="icon-guanbi iconfont"></i></div>
        <div ref="mobileModalBox" class="mobile-scroll-wrap">
          <div>
            <div class="customer-modal-wrapper">
              <div class="search-content mi-search-content">
                <input type="text" v-model="modalObj.keyword" @input="modalObjonFilter" placeholder="手机号/用户名">
                <span @click="modalObjonFilter"><i class="iconfont icon-sousuo"></i></span>
              </div>
              <div class="customer-modal-content">
                <div class="customer-modal-content-title">
                  <span class="item inline-block"  style="width: 28%;" @click="chooseAll()"  v-if="modalObj.type === 'add'">
                    <label class="mobile-cart-check" :class="{'active': !Allcheck}"></label>
                    全选
                  </span>
                  <span class="item inline-block"  style="width: 28%;height:2px" v-else>

                  </span>
                  <span class="item inline-block" style="width: 32%;">手机</span>
                  <span class="item inline-block" style="width: 40%;text-align: center">用户名称</span>
                </div>
                <div class="customer-modal-content-list" v-for="item in modalObj.showModalList">
                  <span class="item inline-block" style="width: 28%;" @click="checkItem(item)">
                    <label class="mobile-cart-check" :class="{'active': item.distribute}" v-if="modalObj.type === 'add'"></label>
                    <label class="mobile-cart-check" :class="{'active': item.transfer}" v-else></label>
                    <!--<label class="mobile-cart-check" :class="{'active': item.distribute}"></label>-->
                  </span>
                  <span class="item inline-block" style="width: 32%;">{{item.userTel}}</span>
                  <span class="item inline-block" style="width: 40%;text-align: center;">{{item.userName}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="customer-modal-bottom clearfix">
            <div class="fl" @click="answerModal()">确定</div>
            <div class="fr" @click="closeModal()">取消</div>
          </div>
        </div>
      </div>
    </div>

    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :fixId="'mobile-customer-btob'" :allPage="allPage" :page="filterParams.page" @pullUpAction="onPullUpAction"></pull-up>
  </div>
</template>

<script>
  import { ModalWrapper } from '~components/mobile/base'
  import { PullUp, EmptyStatus, RemindBox } from '~components/mobile/common'
  export default {
    name: 'customer-index',
    layout: 'mobile',
    middleware: 'authenticated',
    data() {
      return {
        filterParams: {
          keyword: '',
          count: 10,
          page: 1
        },
        modalParams: {
          count: 100000000,
          page: 1
        },
        collectResult: '',
        timeoutCount: 0,
        resourceList: {
          content: []
        },
        enabled: '',
        modalObj: {
          customer: {},
          showModal: false,
          showModalList: [], // 筛选完的数据
          type: 'add', // chance
          originList: [] // 原数据
        },
        transfer: false,
        thisUser: {}
      }
    },
    created() {
      this.$http.get('/btob/account/role/currentRole').then(res => {
        this.thisUser = this.$store.state.option.user.data
        this.enabled = res.data.count > 0 || this.thisUser.sys
      })
      this.setSelect()
    },

    methods: {
      async answerModal() {
        if (this.modalObj.type !== 'add') {
          this.$http.post(`/vendorDistribute/bindUserToVendor/${this.modalObj.customer.id}`, this.modalObj.originList).then(data => {
            this.onMind('转移成功！')
            this.closeModal()
            this.setSelect(true)
          }, err => {
            this.onMind(err.response.data)
            this.closeModal()
          })
        } else {
          this.$http.post(`/vendorDistribute/bindVendor/${this.modalObj.customer.id}`, this.modalObj.originList).then(res => {
            this.onMind('分配成功！')
            this.closeModal()
            this.setSelect(true)
          }).catch(err => {
            this.onMind('保存失败！')
            this.closeModal()
          })
        }
      },
      chooseAll() {
        let _str = 'distribute'
        if (this.modalObj.type !== 'add') {
          _str = 'transfer'
        }
        if (!this.Allcheck) {
          this.modalObj.showModalList.forEach(item => {
            item[_str] = false
          })
          return
        }
        this.modalObj.showModalList.forEach(item => {
          item[_str] = true
        })
      },
      checkItem(item) {
        if (this.modalObj.type !== 'add') {
          if (this.$store.state.option.user.data.sys) { // 管理员操作
            item.transfer = !item.transfer
            this.modalObj.originList.forEach(userInfo => {
              if (this.$store.state.option.user.data.userUU === item.userUU && item.transfer) {
                this.transfer = true
              }
              if (item.userUU !== userInfo.userUU) {
                userInfo.transfer = false
              }
            })
          } else if (this.transfer) { // 被管理员转移权限的非管理员操作
            item.transfer = !item.transfer
            this.modalObj.originList.forEach(userInfo => {
              if (item.userUU !== userInfo.userUU) {
                userInfo.transfer = false
              } else {
                userInfo.transfer = true
              }
            })
          } else { // 被分配客户的用户
            item.transfer = !item.transfer
            this.modalObj.originList.forEach(userInfo => {
              if (item.userUU !== userInfo.userUU) {
                userInfo.transfer = false
              } else {
                userInfo.transfer = true
              }
            })
          }
        } else {
          item.distribute = !item.distribute
        }
      },
      closeModal() {
        this.modalObj.showModal = false
        this.initScroll.destroy()
        this.initScroll = null
      },
      modalObjonFilter() {
        let _arr = []
        let keys = this.modalObj.keyword
        this.modalObj.originList.forEach(item => {
          if ((String(item.userTel).indexOf(keys) > -1) || (String(item.userName).indexOf(keys) > -1)) {
            _arr.push(item)
          }
        })
        this.modalObj.showModalList = _arr
      },
      init () {
        this.$nextTick(() => {
          this._initscroll()
        })
      },
      onFilter() {
        this.setSelect(true)
      },
      onMind(str) {
        this.collectResult = str
        this.timeoutCount++
      },
      onPullUpAction() {
        this.filterParams.page++
        this.setSelect()
      },
      async setSelect(reset) {
        let { data } = await this.$http.get('/vendor/info/search', {
          params: {
            count: this.filterParams.count,
            page: this.filterParams.page,
            keyword: this.filterParams.keyword
          }})
        if (!this.resourceList.content) {
          this.resourceList.content = []
        }
        if (reset) {
          this.resourceList.content = []
          this.resourceList = data
        } else {
          this.resourceList.content.push(...data.content)
          data.content = this.resourceList.content
        }
        this.resourceList = data
        data = null
      },
      // 分配
      async addUserInfo(customer) {
        this.modalObj.keyword = ''
        this.modalObj.type = 'add'
        this.modalObj.customer = customer
        this.$http.get(`/vendorDistribute/${customer.id}`, {params: this.modalParams}).then(res => {
          if (this.enabled || res.data) {
            this.modalObj.showModal = true
            this.modalObj.showModalList = res.data.content
            this.modalObj.originList = res.data.content
            this.init()
          } else {
            this.onMind('您没有当前客户分配用户的权限！')
          }
        }, err => {
          this.onMind(err.response.data)
        })
      },
      // 转移
      transferUserInfo(customer) {
        this.modalObj.keyword = ''
        this.modalObj.type = 'chance'
        this.modalObj.customer = customer
        this.$http.get(`/vendorDistribute/${customer.id}`, {params: this.modalParams}).then(res => {
          if (this.enabled || res.data) {
            this.$http.get('/authentication').then(res => {
              this.thisUser = res.data
            })
            this.modalObj.showModal = true
            this.modalObj.showModalList = res.data.content
            this.modalObj.originList = res.data.content
            this.init()
          } else {
            this.onMind('您没有当前客户转移用户的权限！')
          }
        }, err => {
          this.onMind(err.response.data)
        })
      }
    },
    computed: {
      allPage() {
        return this.resourceList.totalPage
      },
      Allcheck() {
        let _str = 'distribute'
        if (this.modalObj.type !== 'add') {
          _str = 'transfer'
        }
        return this.modalObj.showModalList.some(item => {
          return item[_str] === false
        })
      }
    },
    components: {
      ModalWrapper,
      PullUp,
      EmptyStatus,
      RemindBox
    }
  }
</script>

<style lang="scss" scoped>
  @import '~assets/scss/mobileInvoice';
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .com-switch-head .com-switch-item.active {
    border-bottom: 0.04rem solid #3f84f6;
  }
  .com-switch-head {
    height: .82rem;
    line-height: .82rem;
    text-align: center;
    background: #fff;
  }
  .com-switch-head .com-switch-item {
    font-size: .28rem;
    text-align: center;
    background: #fff;
  }
  .mobile-customer-btob{
    background: #f1f3f6;
    margin: 1.26rem 0 0.98rem 0;
    height: calc(100vh - 1.26rem - 0.98rem);
    overflow-y: auto;
    .search-content {
      padding: .24rem 0;
      text-align: center;
      background: #f1f3f6;
      input {
        width: 6.48rem;
        height: .58rem;
        line-height: .58rem;
        border-radius: .14rem;
        margin: 0 0 0 .11rem;
        font-size: .26rem;
        padding: 0 .71rem 0 .21rem;
        border: 1px solid #3f84f6;
      }
    }
  }

  .modal-wrapper-bg {
    .mobile-modal .mobile-modal-wrapper {
      top: 1.6rem;
      bottom: 1.6rem;
      left: 5%;
      right: 5%;
    }
    .mobile-scroll-wrap {
      overflow: hidden;
      height: 80%;
      background: #fff;
      border-bottom-left-radius: .07rem;
      border-bottom-right-radius: .07rem;
    }
  }
  .customer-btob-wrapper {
    .customer-btob-wrapper-list {
      width: 7.1rem;
      margin: 0 auto 0.2rem;
      background: #FFFFFF;
      border-radius: 0.05rem;
      padding: 0.16rem 0.24rem 0;
      .customer-btob-wrapper-content {
        div {
          font-size: 0.28rem;
          color: #151515;
          line-height: 0.5rem;
          &.list-item {
            @include overFlowHidden();
          }
          span {
            color: #666666;
            &.wrap-text{
              width: 4.5rem;
              white-space: normal;
              display: inline-block;
              word-wrap: break-word;
              word-break: break-all;
              vertical-align: top;
            }
          }
        }
      }
      .customer-btob-wrapper-bottom{
        border-top: 1px solid #D9D9D9;
        height: 0.8rem;
        line-height: 0.8rem;
        margin: 0.16rem -0.24rem 0;
        padding:0 0.24rem 0.16rem;
        div {
          text-align: center;
          width: 50%;
          float: left;
          font-size: 0.26rem;
          color: #333333;
          &:first-child {
            border-right: 1px solid #D9D9D9;
          }
          i {
            font-size: 0.36rem;
            vertical-align: middle;
            margin-right: 0.05rem
          }
        }
      }
    }
  }
  .customer-modal-wrapper {
    padding-bottom: 0.5rem;
    input {
      border: 1px solid #3f84f6;
    }

  }
  .customer-modal-content {
    border-radius: 0.06rem 0.06rem 0 0;
    font-size: 0.28rem;
    margin: 0.24rem auto 0;
    width: 90%;
    overflow: hidden;
    .customer-modal-content-title {
      height: 0.76rem;
      line-height: 0.76rem;
      background: #89AEFA;
      border: 1px solid #89AEFA;
      color: #FFFFFF;
      padding: 0 0.2rem;
    }
    .customer-modal-content-list {
      padding: 0 0.2rem;
      height: 0.76rem;
      line-height: 0.76rem;
      border: 1px solid #7E7E7E;
      background: #FFFFFF;
      color: #666666;
      border-bottom: 0;
      &:nth-last-child(1){
        border-bottom: 1px solid #7E7E7E
      }
      span:nth-last-child(1) {
        @include overFlowHidden()
      }
    }
  }
  .customer-modal-bottom {
    position: absolute;
    bottom :0rem;
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
    div {
      background: #3F84F6;
      border-radius: 8px;
      width: 48%;
      height: 0.74rem;
      line-height: 0.74rem;
      font-size: 0.28rem;
      color: #FFFFFF;
      text-align: center;
      &:last-child {
        background: #fff;
        color: #3F84F6;
      }
    }
  }

</style>