playlet/project/src/components/customManage/transferReco...

<template>
  <div v-loading="loading">
    <div class="backBox" @click="goBack">
      <div class="back">
        <i class="el-icon-back"></i>
        <span class="back_main_title">{{type=='off'?'离职迁移':type=='on'?'在职迁移':'返回'}}/</span><span>分配记录</span>
      </div>
    </div>
    <div class="self-hint" style="margin-bottom:10px">
      <i class="el-icon-message-solid"></i>
      <div>由于企业微信限制，列表仅展示在{{$store.state.simpleName}}操作的分配记录，{{$store.state.simpleName}}分配记录将不会展示</div>
    </div>
    <div class="screenBox">
      <!-- 搜索客户 -->
      <self-input :reset='resetFlag' @inputChange='(val)=>{input_keyword = val;init(1)}'></self-input>
      <!-- 所属客服 -->
      <service-single title='接替员工' :reset='resetFlag' @customerDefine="serviceSingleEvent"></service-single>
      <!-- 添加时间 -->
      <date-picker title="分配时间" :reset='resetFlag' @changeTime="changeTime"></date-picker>
      <!-- 转接状态 -->
      <self-channel title="转接状态" :reset='resetFlag' type='assignment_status' @channelDefine="(val)=>{assignment_status = val;init(1)}"></self-channel>
      <div class="reset" @click="resetEvent">重置</div>
    </div>
    <div class="tableInfo">
      <div>
        <div class="flex">
          <i class="el-icon-user-solid"></i>
          <div class="totalCustom">共有<span>{{total}}</span>个已分配客户</div>
        </div>
      </div>
    </div>
    <!-- table -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="customer_name" label="客户名称" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="takeover_userid" label="接替员工" show-overflow-tooltip align="center"></el-table-column>

      <el-table-column label="转接状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">已转接</span>
          <span v-if="scope.row.status==2">客户转接中</span>
          <span v-if="scope.row.status==3">客户已拒绝</span>
          <span v-if="scope.row.status==4">接替成员客户达到上限</span>
          <span v-if="scope.row.status==5">无接替记录</span>
        </template>
      </el-table-column>
      <el-table-column prop="takeover_time" label="分配时间" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="flex" style="justify-content:center">
            <div class="c-00B38A pointer" style="margin:0 6px" v-if="scope.row.takeover_userid" @click="showDetial(scope.row)">详情</div>
          </div>
        </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>
    <!--详情-->
    <el-drawer :size="drawerSize" :visible.sync="detialDrawer" :with-header="false">
      <detial @changeDrawerSize="changeDrawerSize" @closeDrawer="closeDrawer" :rowProp="{
        customer_id:rowPro.customer_id,
        user_id:rowPro.takeover_userid
      }" ref="detial"></detial>
    </el-drawer>
  </div>
</template>
<script>
import selfInput from '@/components/assembly/screen/input.vue'
import datePicker from '@/components/assembly/screen/datePicker.vue'
import serviceSingle from '@/components/assembly/screen/serviceSingle.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import detial from '@/components/detials/index.vue'

export default {
  components: { selfInput, datePicker, serviceSingle, selfChannel, detial },
  data () {
    return {
      type: '',
      loading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      input_keyword: '',
      resetFlag: false,
      tableData: [],
      transfer_time: [],
      user_id: '',
      assignment_status: '',
      drawerSize: '60%',
      detialDrawer: false,
      rowPro: {},//去详情的此条对象
    }
  },
  created () {
    this.type = this.$route.params.type;
    this.init(1)
  },
  methods: {
    changeDrawerSize () {
      this.drawerSize = this.drawerSize == '100%' ? '60%' : '100%'
    },
    closeDrawer () {
      this.detialDrawer = false
    },
    showDetial (row) {
      this.rowPro = row
      this.drawerSize = '60%'
      this.detialDrawer = true
      this.$nextTick(() => {
        this.$refs.detial.acIdx = 0
        this.$refs.detial.init()
      })
    },
    serviceSingleEvent (val) {
      if (val && val.user_id) {
        this.user_id = val.user_id
      } else {
        this.user_id = ''
      }
      this.init(1)
    },
    goBack () {
      localStorage.setItem('transter', this.type)
      this.$router.go(-1)
    },
    changeTime (time) {//筛选时间变化
      if (!time || time && time.length == 0) {
        this.transfer_time = [];
      } else {
        this.transfer_time = time;
      }
      this.init(1)
    },
    resetEvent () {//重置
      this.resetFlag = !this.resetFlag
      this.input_keyword = '';
      this.user_id = '';
      this.assignment_status = '';
      this.transfer_time = [];
      this.init(1)
    },
    init (page) {
      this.page = page ? page : this.page;
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.customerAssignmentList, {
        params: {
          assignment_date_start: this.transfer_time && this.transfer_time.length > 1 ? this.transfer_time[0] : '',
          assignment_date_end: this.transfer_time && this.transfer_time.length > 1 ? this.transfer_time[1] : '',
          customer_name: this.input_keyword,
          page: this.page,
          page_size: this.page_size,
          type: this.type == 'off' ? 2 : 1,
          user_id: this.user_id,
          assignment_status: this.assignment_status
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.tableData = res.rst.data;
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    handleCurrentChange (val) {
      this.init(val)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/style/list.scss";
.screenBox .common-screen-item {
  width: inherit;
}
.tableInfo {
  height: 50px;
}
.backBox {
  background: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  .back {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    i {
      font-size: 16px;
    }
    .back_main_title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>