mall-web-ssr/pages/mobile/center/vendor/customer/index.vue

<template>
  <div class="modal-wrapper-bg">
    <div class="mobile-customer-btob"  style="background: #f1f3f6" id="mobile-customer-btob">
      <div class="switch-head" style="border:0">
        <div class="com-switch-head clearfix" style="line-height: 0.78rem">
          <div style="width: 50%" class="pull-left">
            <span style="margin: 0" class="com-switch-item inline-block active" >客户资料</span>
          </div>
          <div style="width:50%" class="pull-left">
            <router-link to="/mobile/center/vendor/customer/vendorPerformanceAssess" tag="span" style="margin: 0" class="com-switch-item inline-block">绩效考核</router-link>
          </div>
        </div>
      </div>
      <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, index) in resourceList.content">
            <div class="customer-btob-wrapper-content">
              <div class="list-item"><span>客户名称：</span><a>{{item.myEnterprise.enName}}</a></div>
              <div class="address clearfix"><span class="fl">地址：</span><div class="fl" style="width:5.6rem">{{item.myEnterprise.enAddress}}</div></div>
              <div class="list-item"><span>客户联系人：</span>{{item.myUser.userName}}</div>
              <div class="list-item"><span>客户电话：</span>{{item.myUser.userTel}}</div>
              <div class="list-item"><span>业务对接人：</span>
                <span class="wrap-text">{{item.purchaseContacts && item.purchaseContacts.length > 0 ? item.purchaseContacts.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>
                <template v-if="modalObj.type === 'add'">
                  <!-- 客户分配数据  -->
                  <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}"></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>
                </template>

                <template v-else>
                  <!-- 客户转移 && 当前用户是管理员时 -->
                  <div class="customer-modal-content-list" v-for="item in modalObj.showModalList" v-if="thisUser.sys">
                  <span class="item inline-block" style="width: 28%;" @click="checkItem(item)">
                    <label class="mobile-cart-check" :class="{'active': item.transfer}"></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 class="customer-modal-content-list" v-for="item in modalObj.showModalList" v-if="!thisUser.sys && thisUser.transfer">
                  <span class="item inline-block" style="width: 28%;" @click="checkItem(item)">
                    <label class="mobile-cart-check" :class="{'active': item.transfer}"></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 class="customer-modal-content-list" v-for="item in modalObj.showModalList" v-if="(!thisUser.sys && !thisUser.transfer) && !item.distribute ">
                  <span class="item inline-block" style="width: 28%;" @click="checkItem(item)">
                    <label class="mobile-cart-check" :class="{'active': item.transfer}"></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>
                </template>
              </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') {
          if (this.modalObj.customer.myEnterprise.uu) {
            // 当前用户是管理员时
            if (this.thisUser.sys) {
                this.$http.post(`/btob/account/user/transferUserToVendor/${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.onMind('您未勾选任何记录！')
              //   this.closeModal()
              // }
            } else {
              // 非管理员转移自己的权限时
              this.modalObj.originList.forEach(item => {
                if (item.transfer && item.userUU !== this.thisUser.userUU) {
                  this.target = item
                }
              })
              if (!this.target) {
                this.onMind('您未选择权限转移对象！')
                this.closeModal()
              } else {
                this.$http.post(`/btob/account/user/transferMyDistribute?custUU=${this.modalObj.customer.myEnterprise.uu}&userUU=${this.target.userUU}`, {})
                  .then(data => {
                  this.onMind('转移成功！')
                  this.closeModal()
                  this.setSelect(true)
                }, err => {
                  this.onMind(err.response.data)
                  this.closeModal()
                })
              }
            }
          } else {
            this.closeModal()
          }
        } else {
          this.$http.post(`/btob/account/user/bindUserToVendor/${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
      },
      init () {
        this.$nextTick(() => {
          this._initscroll()
        })
      },
      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
      },
      // 分配
      async addUserInfo(customer) {
        this.modalObj.keyword = ''
        this.modalObj.type = 'add'
        this.modalObj.customer = customer
        this.$http.get(`/btob/account/user/getEnTransfer/${customer.myEnterprise.uu}`).then(res => {
          customer.enTransfer = res.data.result
          if (this.enabled || customer.enTransfer) {
            this.$http.get(`/btob/account/user/customer/${customer.id}`, {params: this.modalParams}).then(data => {
                customer.userinfos = data.data.content
                this.modalObj.showModal = true
                this.modalObj.showModalList = customer.userinfos
                this.modalObj.originList = customer.userinfos
                this.init()
            })
          } else {
            this.onMind('您没有当前客户分配用户的权限！')
          }
        })
      },
      // 转移
      transferUserInfo(customer) {
        this.modalObj.keyword = ''
        this.modalObj.type = 'chance'
        this.modalObj.customer = customer
        this.$http.get(`/btob/account/user/getDistribute/${customer.id}`).then(res => {
          customer.enTransfer = res.data.result
          if (this.enabled || customer.enTransfer) {
            this.$http.get('/authentication').then(res => {
              this.thisUser = res.data
            })
            this.$http.get(`/btob/account/user/customer/${customer.id}`, {params: this.modalParams}).then(data => {
              customer.userinfos = data.data.content
              customer.userinfos.forEach(user => {
                if (this.$store.state.option.user.data.userUU === user.userUU && user.transfer) {
                  this.transfer = true
                }
              })
              this.modalObj.showModal = true
              this.modalObj.showModalList = customer.userinfos
              this.modalObj.originList = customer.userinfos
              this.init()
            })
          } else {
            this.onMind('您没有当前客户转移用户的权限！')
          }
        })
      },
      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/customer/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
      }
    },
    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>