|
|
@@ -0,0 +1,510 @@
|
|
|
+<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, index) in resourceList.content">
|
|
|
+ <div class="customer-btob-wrapper-content">
|
|
|
+ <div class="list-item"><span>UU：</span>{{item.myEnterprise.uu}}</div>
|
|
|
+ <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>{{item.vendorUser.userName}}</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%;">用户UU</span>
|
|
|
+ <span class="item inline-block" style="width: 40%;text-align: right">用户名称</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.userUU}}</span>
|
|
|
+ <span class="item inline-block" style="width: 40%;">{{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
|
|
|
+ },
|
|
|
+ collectResult: '',
|
|
|
+ timeoutCount: 0,
|
|
|
+ resourceList: {
|
|
|
+ content: []
|
|
|
+ },
|
|
|
+ enabled: '',
|
|
|
+ modalObj: {
|
|
|
+ customer: {},
|
|
|
+ showModal: false,
|
|
|
+ showModalList: [], // 筛选完的数据
|
|
|
+ type: 'add', // chance
|
|
|
+ originList: [] // 原数据
|
|
|
+ },
|
|
|
+ transfer: false,
|
|
|
+ thisUser: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$http.get('/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(`/account/user/transferUserToVendor/${this.modalObj.customer.myEnterprise.uu}`, this.modalObj.originList).then(data => {
|
|
|
+ this.onMind('转移成功！')
|
|
|
+ this.closeModal()
|
|
|
+ }, err => {
|
|
|
+ this.onMind(err.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(`/account/user/transferMyDistribute`, {
|
|
|
+ custUU: this.modalObj.customer.myEnterprise.uu,
|
|
|
+ userUU: this.target.userUU
|
|
|
+ }).then(data => {
|
|
|
+ this.onMind('转移成功！')
|
|
|
+ this.closeModal()
|
|
|
+ }, err => {
|
|
|
+ this.onMind(err.data)
|
|
|
+ this.closeModal()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.closeModal()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$http.post(`/account/user/bindUserToVendor/${this.modalObj.customer.myEnterprise.uu}`, this.modalObj.originList).then(res => {
|
|
|
+ this.onMind('分配成功！')
|
|
|
+ this.closeModal()
|
|
|
+ }).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 = []
|
|
|
+ this.modalObj.originList.forEach(item => {
|
|
|
+ if (item.userUU.toString().indexOf(this.modalObj.keyword) > -1) {
|
|
|
+ _arr.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.modalObj.showModalList = _arr
|
|
|
+ },
|
|
|
+ // 分配
|
|
|
+ async addUserInfo(customer) {
|
|
|
+ if (!this.enabled) {
|
|
|
+ this.onMind('您没有为当前客户分配用户的权限！')
|
|
|
+ }
|
|
|
+ this.modalObj.type = 'add'
|
|
|
+ this.modalObj.customer = customer
|
|
|
+ this.$http.get(`/account/user/getEnTransfer/${customer.myEnterprise.uu}`).then(res => {
|
|
|
+ customer.enTransfer = res.result
|
|
|
+ if (this.enabled || customer.enTransfer) {
|
|
|
+ this.$http.post(`/account/user/customer/${customer.myEnterprise.uu}`).then(data => {
|
|
|
+ customer.userinfos = data.data
|
|
|
+ this.modalObj.showModal = true
|
|
|
+ this.modalObj.showModalList = customer.userinfos
|
|
|
+ this.modalObj.originList = customer.userinfos
|
|
|
+ this.init()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.onMind('您没有为当前客户分配用户的权限！')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 转移
|
|
|
+ transferUserInfo(customer) {
|
|
|
+ if (!this.enabled) {
|
|
|
+ this.onMind('您没有转移当前客户权限的权限！')
|
|
|
+ }
|
|
|
+ this.modalObj.type = 'chance'
|
|
|
+ this.modalObj.customer = customer
|
|
|
+ this.$http.get(`/account/user/getDistribute/${customer.myEnterprise.uu}`).then(res => {
|
|
|
+ customer.enTransfer = res.result
|
|
|
+ if (this.enabled || customer.enTransfer) {
|
|
|
+ this.$http.get('/authentication').then(res => {
|
|
|
+ this.thisUser = res.data
|
|
|
+ })
|
|
|
+ this.$http.post(`/account/user/customer/${customer.myEnterprise.uu}`).then(data => {
|
|
|
+ customer.userinfos = data.data
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
wangcz