playlet/project/src/components/manage/memberManage...

<template>
  <div>
    <div class="flex-align-center" style="background: #fff;padding: 0 16px;margin-bottom: 10px;">
      <!-- S 激活状态 -->
      <div class="flex" style="margin-right: 20px;">
        <span style="font-size: 14px; color: #666; margin-right: 8px;">激活状态</span>
        <el-select class="select-cls" v-model="is_active" size="small" placeholder="请选择激活状态" clearable filterable :style="{width: '210px'}" @change="onChangeActiveStatus">
          <el-option v-for="item in activeStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- E 激活状态 -->
      <selfCustomerservice labelWidth="auto" style="margin-right: 20px;" title="成员" @customerDefine="onChangeUserIds" />
      <selfinput :hasLabel="false" @inputChange="inputChange"></selfinput>
    </div>
    <div class="tableInfo">
      <div class="flex">
        <!-- 客户数据统计 -->
        <div v-if="isShowCustomerData" class="totalCustom">
          共<span>{{ customerData.customer_count }}</span>个客户；
          昨日新增<span>{{ customerData.user_add_yesterday }}</span>；
          昨日流失<span>{{ customerData.user_loss_yesterday }}</span>；
        </div>
        <!-- 客服成员数 -->
        <template v-else>
          <div class="totalCustom">
            <i class="el-icon-user-solid" /> 共<span>{{total}}</span>个成员
          </div>
          <div class="totalCustom ml-20">
            待分配许可<span>{{ waitForAssignNum }}</span>
            <el-tooltip class="disinblock" popper-class="member-tooltip">
              <div slot="content">
                <p>购买许可—需要联系开发人员进行许可购买</p>
                <p>分配许可—只能将许可分配给未激活的成员，激活时间为分配时间，过期时间为1年。</p>
                <p>转移许可—转移许可为离职成员或不在服务商应用可见范围内的成员时，不显转移时间间隔，转移许可的成员为在职成员在服务商应用可见范围内时，转移后30天才可进行下一次转移；转移许可接收成员不能与转移成员的许可重叠</p>
              </div>
              <i class="el-icon-question c-999" />
            </el-tooltip>
          </div>
        </template>
      </div>

      <batchAssign ref="batchAssign" @change="onChangeBatchAssign" />
    </div>

    <div style="display: flex;">
      <div style="width: 300px;flex-shrink: 0;margin-right: 10px;background-color: #fff;padding: 15px">
        <div class="fWeight600">
          部门信息
        </div>
        <div>
          <div v-for="c in depart_List" :key="c.department_id" class="tMar20 flex-align-center pointer f15" @click="checkDepartId(c.department_id)">
            <i class="el-icon-success c-00B38A f16 rMar7" v-if="checkVals.indexOf(c.department_id)>-1"></i>
            <i class="el-icon-circle rMar7" v-else></i>
            {{c.department_name}}
          </div>
        </div>
      </div>
      <div style="flex: 1; overflow: hidden;" v-loading="loading">
        <el-table ref="multipleTable" :height='height' :data="tableData" tooltip-effect="dark">
          <el-table-column min-width="180" label="成员列表" show-overflow-tooltip fixed="left">
            <template slot-scope="scope">
              <div class="flex-align-center">
                <div>
                  <img :src="scope.row.avatar" alt="" style="width: 40px;margin-right: 10px;border-radius:3px">
                </div>
                <div>
                  <div>{{scope.row.name}}</div>
                  <div>共有{{scope.row.customer_number}}个客户</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="200" label="所属部门" align="center">
            <template slot-scope="scope">
              <div>
                <span class="rMar7">{{scope.row.department_list&&scope.row.department_list.join('，')}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="授权状态" align="center" min-width="100">
            <template slot-scope="scope">
              <div class="flex-align-jus-center">
                <i class="el-icon-circle-check f16 c-00B38A rMar7" v-if="scope.row.status == 1"></i>
                <i class="el-icon-warning-outline f16 c-FF604D rMar7" v-if="scope.row.status == 4"></i>
                {{scope.row.status == 1 ? '已授权' : '未授权'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属类型" align="center" min-width="80">
            <template slot-scope="{row}">
              <span>{{ getOrderTypeDesc(row.order_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="ADQ投放账号ID" align="center" min-width="130">
            <template slot-scope="{row}">
              <span>{{ row.account_id || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="昨日流失客户数" prop="loss_contact_cnt" min-width="120" align="center" />
          <el-table-column label="昨日新增客户数" prop="new_contact_cnt" min-width="120" align="center" />

          <el-table-column label="激活时间" min-width="170" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.active_time || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" min-width="170" align="center">
            <!-- <template slot="header">
              <span>过期时间</span>
              <el-tooltip class="disinblock" placement="top">
                <div slot="content">系统根据过期时间判断许可到期时间，到期前14天通知续费</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template> -->
            <template slot-scope="{ row }">
              <div v-if="row.expire_time">
                <div>{{ row.expire_time }}</div>
                <!-- 无可用状态码 目前通过后端返回的文案判断 -->
                <div v-if="row.active_desc === '已到期'" class="expired-tips">已到期</div>
                <div v-if="row.active_desc === '即将到期'" class="expired-tips danger">即将到期</div>
              </div>
              <span v-else> - </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="170" fixed="right">
            <template slot-scope="scope">
              <span class="c-00B38A pointer" @click="detailEvent(scope.row)">详情</span>
              <span class="c-00B38A pointer ml-3" @click="onClickInfoBind(scope.row)">信息绑定</span>
              <template>
                <span v-if="scope.row.is_active == 1" class="c-00B38A pointer ml-3" @click="onClickTransfer(scope.row)">转移许可</span>
                <span v-else class="c-00B38A pointer ml-3" @click="onClickAssign(scope.row)">分配许可</span>
              </template>
            </template>
          </el-table-column>

          <!--
   <el-table-column label="备用客服">
            <template slot-scope="scope">
              <div class="flex-align-center">
                <div>
                  <img :src="scope.row.avatar" alt="" style="width: 40px;margin-right: 10px;border-radius:3px">
                </div>
                <div>
                  <div>{{scope.row.name}}</div>
                  <div>共有{{scope.row.customer_number}}个客户</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-popover
                :ref="scope.row.user_id"
                width="260" v-model="scope.row.visible">
                <div class="box">
                  <div class="txt">备用客服</div>
                  <div class="lMar20">
                    <el-select size="mini" v-model="standbyVal" placeholder="请选择备用客服">
                      <el-option
                        v-for="item in standbyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div style="text-align: right; margin: 10px 0 0">
                  <el-button size="mini" type="text" @click="$refs[scope.row.user_id].doClose()">取消</el-button>
                  <el-button size="mini" type="text" @click="$refs[scope.row.user_id].doClose()">确定</el-button>
                </div>
                <div class="c-00B38A pointer" slot="reference"> 编辑 </div>
              </el-popover>
            </template>
          </el-table-column>
          -->

        </el-table>
        <div class="pagination" v-show="total>0">
          <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!--详情-->
    <el-drawer :size="drawerSize" :visible.sync="userDetailFlag" :with-header="false">
      <user-detail v-if="userDetailFlag" @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :user_id="user_detail_id"></user-detail>
    </el-drawer>

    <!-- S 信息绑定 - 弹框 -->
    <memberInfoBind
      :dialogVisible="infoBindDialogVisible"
      :userInfo="currentBindInfo"
      @cancel="handleInfoBindCancel"
      @confirm="handleInfoBindConfirm"
    />
    <!-- E 信息绑定 - 弹框 -->

    <!-- S 分配许可 - 弹框 -->
    <assignDialog
      :dialogVisible="assignDialogVisible"
      :userInfo="currentAssignInfo"
      :waitForAssignNum="waitForAssignNum"
      @cancel="handleAssignCancel"
      @confirm="handleAssignConfirm"
    />
    <!-- E 分配许可 - 弹框 -->

    <!-- S 转移许可 - 弹框 -->
    <transferDialog
      :dialogVisible="transferDialogVisible"
      :userInfo="currentTransferInfo"
      @cancel="handleTransferCancel"
      @confirm="handleTransferConfirm"
    />
    <!-- E 转移许可 - 弹框 -->
  </div>
</template>

<script>
import selfinput from '../assembly/screen/input.vue'
import userDetail from './userDetail/index.vue'
import memberInfoBind from './memberComp/memberInfoBind.vue'
import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import batchAssign from './memberComp/batchAssign.vue'
import assignDialog from './memberComp/assignDialog.vue'
import transferDialog from './memberComp/transferDialog.vue'
import { orderTypeOptions } from '@/assets/js/staticTypes'

const orderTypeDesc = new Map([
  [String(orderTypeOptions.MP), 'MP'],
  [String(orderTypeOptions.ADQ), 'ADQ'],
])

// 激活状态选项
const activeStatusOptions = [
  { label: '未激活', value: 0 },
  { label: '已激活', value: 1 },
]

export default {
  name: 'memberManage',
  components: {
    selfinput,
    userDetail,
    memberInfoBind,
    selfCustomerservice,
    batchAssign,
    assignDialog,
    transferDialog,
  },
  data () {
    return {
      userDetailFlag: false,
      drawerSize: '60%',
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      tableData: [],
      checkVals: [],
      depart_List: [],
      keyword: '',
      height: '',
      user_detail_id: '',
      // standbyList:[],
      // standbyVal:'',
      // visible:false,

      infoBindDialogVisible: false, // 控制“信息绑定”弹框显示
      currentBindInfo: {}, // 当前需要绑定的成员信息

      user_ids: [],//客服user_id列表
      customerData: { // 客户信息
        customer_count: 0,
        user_add_yesterday: 0,
        user_loss_yesterday: 0,
      },

      is_active: '', // 激活状态
      activeStatusOptions: Object.freeze(activeStatusOptions), // 激活状态选项

      waitForAssignNum: 0, // 待分配许可数
      assignDialogVisible: false, // 控制“分配许可”弹框显示
      currentAssignInfo: {}, // 当前需要分配许可的成员信息
      transferDialogVisible: false, // 控制“转移许可”弹框显示
      currentTransferInfo: {}, // 当前需要转移许可的成员信息

    }
  },
  computed: {
    // 是否显示“客户数据统计”（当选择“客服”筛选时显示）
    isShowCustomerData() {
      return this.user_ids && this.user_ids.length
    },
  },
  created () {
    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
    this.init_depart()
    this.init(1)
    this.handleGetWaitForAssignNum()
  },
  methods: {
    detailEvent (data) {
      this.userDetailFlag = true
      this.user_detail_id = data.user_id;
    },
    closeDrawer () {
      this.userDetailFlag = false
    },
    changeDrawerSize () {
      this.drawerSize = this.drawerSize == '80%' ? '60%' : '80%'
    },
    inputChange (keyword) {
      this.keyword = keyword
      this.init(1, keyword)
      this.handleGetWaitForAssignNum()
    },
    init_depart () {
      this.$axios.get(this.URL.BASEURL + this.URL.departmentList, {}).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.depart_List = res.rst
          this.checkVals = res.rst.map((v) => {
            return v.department_id
          })
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      })
    },
    init (page, keyword) {
      this.handleInitCustomerData()
      this.page = page ? page : this.page;
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.memberList, {
        params: {
          user_name: keyword,
          department_list: this.checkVals,
          user_ids: this.user_ids ? this.user_ids.join(',') : '',
          is_active: this.is_active,
          page: this.page,
          page_size: this.page_size
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {

          if (res.rst.data[0]) { // mock
            res.rst.data[0].is_active = 1
          }

          this.tableData = res.rst.data;
          // this.tableData.forEach(item=>{
          //   item.visible = false
          // })
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
          // 客户数据回显
          this.customerData.customer_count = res.rst.extra.customer_count
          this.customerData.user_add_yesterday = res.rst.extra.user_add_yesterday
          this.customerData.user_loss_yesterday = res.rst.extra.user_loss_yesterday
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
          this.tableData = []
          this.pages = 0
          this.handleInitCustomerData()
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    // 重置客户统计数据
    handleInitCustomerData() {
      this.total = 0
      this.customerData.customer_count = 0
      this.customerData.user_add_yesterday = 0
      this.customerData.user_loss_yesterday = 0
    },
    handleCurrentChange (val) {
      this.init(val, this.keyword)
      this.handleGetWaitForAssignNum()
    },
    checkDepartId (id) {
      if (this.checkVals.indexOf(id) == -1) {
        this.checkVals.push(id)
      } else {
        this.checkVals.splice(this.checkVals.indexOf(id), 1)
      }
      this.init(1, this.keyword)
      this.handleGetWaitForAssignNum()
    },

    async onClickInfoBind({ name = '', user_id = '', account_id = '' }) {
      try {
        if (account_id) {
          const h = this.$createElement
          await this.$confirm('', {
            message:h('div',null, [
              h('span', { style:'color: #32B38A;' }, `${name}`),
              h('span', null, '已经关联投放账号，是否确认修改？')
            ]),
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
        }
        this.currentBindInfo = { user_id, account_id }
        this.infoBindDialogVisible = true
      } catch (error) {
        console.log(error)
      }
    },
    // 执行信息绑定 => 取消
    handleInfoBindCancel() {
      this.currentBindInfo = {}
      this.infoBindDialogVisible = false
    },
    // 执行信息绑定 => 发送
    handleInfoBindConfirm() {
      this.infoBindDialogVisible = false
      this.init(undefined, this.keyword)
      this.handleGetWaitForAssignNum()
    },
    getOrderTypeDesc(type) {
      return orderTypeDesc.get(String(type)) || '-'
    },
    // 监听多选客服变化
    onChangeUserIds(val) {
      this.user_ids = val ? val : []
      this.init(1, this.keyword)
      this.handleGetWaitForAssignNum()
    },
    // 监听激活状态变化
    onChangeActiveStatus(val) {
      this.is_active = val
      this.init(1, this.keyword)
      this.handleGetWaitForAssignNum()
    },

    // 获取“待分配许可数”
    handleGetWaitForAssignNum() {
      return new Promise(async (resolve, reject) => {
        try {
          this.loading = true
          const url = `${this.URL.BASEURL}${this.URL.member_licenseCount}`
          const params = {
            corpid: this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '',
          }
          const { data: res = {} } = await this.$axios.get(url, { params })
          if (res && res.errno == 0) {
            this.waitForAssignNum = res.rst.count
            this.waitForAssignNum = parseInt(Math.random() * 100) // mock
            resolve(this.waitForAssignNum)
          } else if (res.errno != 4002) {
            this.$message.warning(res.err)
            this.waitForAssignNum = 0
            reject(this.waitForAssignNum)
          }
        } catch (error) {
          console.log('error => ', error)
          this.waitForAssignNum = 0
          reject(this.waitForAssignNum)
        } finally {
          this.loading = false
        }
      })
    },
    // 监听点击“分配许可”
    async onClickAssign(current) {
      console.log('onClickAssign => ', JSON.parse(JSON.stringify(current)))
      this.currentAssignInfo = {...current}
      const num = await this.handleGetWaitForAssignNum()
      if (!num) return this.$message.warning('暂无待分配许可')
      this.assignDialogVisible = true
    },
    // 执行分配许可 => 取消
    handleAssignCancel() {
      this.currentAssignInfo = {}
      this.assignDialogVisible = false
    },
    // 执行分配许可 => 确定
    handleAssignConfirm() {
      this.assignDialogVisible = false
      this.init(undefined, this.keyword)
      this.handleGetWaitForAssignNum()
    },

    // 监听点击“转移许可”
    onClickTransfer(current) {
      console.log('onClickTransfer => ', JSON.parse(JSON.stringify(current)))
      this.currentTransferInfo = {...current}
      this.transferDialogVisible = true
    },
    // 执行转移许可 => 取消
    handleTransferCancel() {
      this.currentTransferInfo = {}
      this.transferDialogVisible = false
    },
    // 执行转移许可 => 确定
    handleTransferConfirm() {
      this.transferDialogVisible = false
      this.init(undefined, this.keyword)
    },

    // 监听“批量分配许可”变化
    onChangeBatchAssign(val) {
      console.log('onChangeBatchAssign => ', val)
      this.init(undefined, this.keyword)
      this.handleGetWaitForAssignNum()
    },

  }
}
</script>

<style lang="scss">
.member-tooltip {
  max-width: 300px;
  p {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>

<style lang="scss" scoped>
@import "@/style/list.scss";
.select-cls {
  /deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/ .el-input__suffix {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #DCDFE6;
    right: 0;
    width: 30px;
    background-color: #F1F1F1;
    .el-input__icon {
      line-height: 26px;
      color: #909399;
    }
  }
}
.ml-3 {
  margin-left: 3px;
}
.ml-20 {
  margin-left: 20px;
}
.tableInfo {
  height: 50px;
}
.el-icon-circle {
  width: 14px;
  height: 14px;
  margin: 0 1px;
  border-radius: 50%;
  border: 1px solid #999;
  margin-right: 8px;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  .txt {
    font-size: 14px;
    flex-shrink: 0;
  }
}

.expired-tips {
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  background-color: #F2F2F2;
  color: #AAAAAA;
  &.danger {
    background-color: #FDE3E3;
    color: #EC808D;
  }
}
</style>