mediate-manage-web/src/pages/mediation-page/components/contactPerson.vue

<template>
  <div>
    <div class="mb-16 flex-row justify-content-between">
      <span class="f-weight500 f18">联系人信息</span>
      <span class="cursor-pointer color-274ea4" v-if="personnelTypeActive !== '申请人'" @click="handleContactAdd">
        <i class="el-icon-plus"></i> 添加联系人
      </span>
    </div>

    <div class="mb-16 f14 flex-row">
      <span class="contact-person-type"
            v-for="(item, index) in personnelType" :key="index"
            :class="{'contact-person-active' : item === personnelTypeActive}"
            @click="handleTab(item)">{{item}}</span>
    </div>
    <el-card class="mb-16" v-for="(item, index) in tableData" :key="index">
      <div class="personnel-list">
        <div class="flex-row justify-content-between">
          <div class="personnel-surname">{{item.surname}}</div>
          <div class="personnel-info pt-6">
            <div class="f16"><span class="f20 f-weight600">{{item.name}}</span> {{item.phone}}</div>
            <div class="case-lable">
              <a class="case-status0">{{item.type}}</a>
              <!-- <a class="case-status1">空号</a> -->
              <a v-if="item.phoneStatus != null && item.phoneStatus != ''" :class="'case-status'+ $util.getTelephoneTypeData(item.phoneStatus).key">{{$util.getTelephoneTypeData(item.phoneStatus).label}}</a>
            </div>
          </div>
          <div class="flex-row personnel-btn" v-if="personnelTypeActive !== '申请人'">
            <a class="cursor-pointer" @click="handleEdit(item)">编辑</a>
            <a class="cursor-pointer ml-8" v-if="personnelTypeActive == '申请人代理人'" @click="handleDelete(item)">删除</a>
            <a class="cursor-pointer ml-8" v-if="item.role == 'DEBTOR' &&  item.type !='本人'" @click="handleDelete(item)">删除</a>
          </div>
        </div>
        <div class="color-86909C mt-8 ml-8 f16">
          <a class="mr-24 cursor-pointer" v-if="item.phone !=''"  @click="makeCall(item)"><i class="el-icon-phone"></i> 电话</a>

          <el-popover v-if="item.role == 'DEBTOR' &&  item.type =='本人'"
              placement="top"
              width="500"
              v-model="item.singlesmsvisible"
              title="发送短信"
              trigger="click">
              <singlesmsPopover :caseId="caseId" :sendPhone="[item.phone]" :singlesmsvisible.sync="item.singlesmsvisible"/>
              <span slot="reference" class="ml-8 cursor-pointer">
                <i class="el-icon-message"></i> 短信
              </span>
          </el-popover>
          
        </div>
      </div>
    </el-card>

    <contactPersonDialog v-if="contactAddObj" :eventDialog.sync="contactAddObj" @updateCaseInfoById="updateCaseInfoById"/>
  </div>
</template>

<script>
import contactPerson from "@/services/contactPerson";
export default {
  components: {
    singlesmsPopover: () => import('./singlesmsPopover.vue'),//
    contactPersonDialog: () => import('./contactPersonDialog.vue'),//联系人弹窗
  },
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      personnelType: ['被申请人', '申请人', '申请人代理人'],
      personnelTypeActive: '被申请人',
      // 联系人
      contactAddObj: null,
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.handleTab('被申请人')
  },
  methods: {
    updateCaseInfoById(){
      this.$emit('updateCaseInfoById');
    },
    handleTab(item) {
      this.personnelTypeActive = item;
      this.getList();
    },
    // 列表数据
    getList() {
      let dataJson = {
        size: 9999,
        current: 1,
        caseId: this.caseId
      }
      let apiUrl = '';
      if (this.personnelTypeActive === '申请人'){
        apiUrl = contactPerson.creditorPage;
      }else if (this.personnelTypeActive === '被申请人'){
        apiUrl = contactPerson.debtorPage;
      }else {
        apiUrl = contactPerson.agentPage;
      }
      apiUrl(dataJson).then(res => {
        if (!res.code) {
          this.tableData = res.records.map((item) => {
            let surname = item.name.split('')[0];
            return {
              ...item,
              surname: surname,
              singlesmsvisible:false
            }
          });
          this.total = res.total;
        }
      })
    },
    handleContactAdd() {
      if (this.personnelTypeActive === '申请人'){
        this.$message.warning('无法添加申请人！')
      }else {
        this.contactAddObj = {
          caseId: this.caseId,
          personId: null,
          rowData: null,
          personnelType: this.personnelTypeActive
        }
      }
    },
    handleEdit(item) {
      this.contactAddObj = {
        caseId: this.caseId,
        personId: item.id,
        rowData: item,
        personnelType: this.personnelTypeActive
      }
    },
    handleDelete(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        contactPerson.contactPersonDelete(item.id).then((res) => {
          this.$message.success("成功");
          this.getList()
        });
      }).catch(() => {});
    },
    makeCall(item) {
      this.$emit('startOutboundCall', {phone: item.phone, contactId: item.id})
    },
    sendMessages(item) {}
  }
}
</script>

<style scoped lang="scss">
.contact-person-active{
  background-color: #F2F3F5;
  color: rgb(188, 111, 96);
}
.contact-person-type{
  padding:8px 15px;
  border-radius: 25px;
  margin-right: 10px;
  cursor: pointer;
}
.personnel-list{
  .ml-0{
    margin-left: 0;
  }
  .el-icon-phone{
    color: #2F6AF5;
  }
  .el-icon-message{
    color: rgb(240, 180, 113);
  }
  .personnel-surname{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    color: #FFFFFF;
    background-color: rgb(188, 111, 96);
    font-size: 32px;
    text-align: center;
    line-height: 66px;
  }
  .personnel-info{
    // width: 55%;
    max-width: 75%;
    .case-lable{
      margin-top: 12px;
      .case-status0{
        margin-left: 0;
      }
    }
  }
  .personnel-btn{
    //line-height: 70px;
    font-size: 15px;
    width: 70px;
    height: 70px;
    padding-top: 10px;
  }
}
</style>