tenant-Platform/src/views/operationManagement/operationDetail.vue

<template>
  <div class="detail">
    <div class="state" v-if="dataDetail?.status == 5">
      <el-icon :size="20" style="color: red; margin: 3px 10px 0 0;">
        <CircleClose />
      </el-icon>
      <div>
        <h3>审核不通过</h3>
        <p>{{ dataDetail?.approvalOpinion }}如有问题，请联系审核人员或者拨打客服电话400-400-400。</p>
        <el-button link type="primary" @click="editDetail">修改并重提交</el-button>
      </div>
    </div>
    <div class="info">
      <el-descriptions>
        <template #title>
          <el-row :gutter="20" flex justify="space-between">
            <el-col :span="12" style="display: flex; align-items: center;">
              <span class="firstName">{{ initName(dataDetail?.name) }}</span>
              <span class="allName">{{ dataDetail?.name }}</span>
            </el-col>
            <el-col :span="12" style="display: flex; justify-content: flex-end">
              <el-button plain @click="checkPass">审核通过</el-button>
              <el-button plain @click="checkNotPass">审核不通过</el-button>
              <el-button plain @click="editDetail">编辑</el-button>&nbsp;
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button plain>更多</el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="启用">启用</el-dropdown-item>
                    <el-dropdown-item command="禁用">禁用</el-dropdown-item>
                    <el-dropdown-item command="删除">删除</el-dropdown-item>
                    <el-dropdown-item command="分配管理人">分配管理人</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
        <el-descriptions-item label="工号：">{{ dataDetail?.userId }}</el-descriptions-item>
        <el-descriptions-item label="所属机构：">{{ dataDetail?.deptName }}</el-descriptions-item>
        <el-descriptions-item label="状态：">{{  dataDetail?.status == '0'?'待认证': dataDetail?.status == '1'?'已认证': dataDetail?.status == '2'?'待提交资料': dataDetail?.status == '3'?'已入职':'' }}</el-descriptions-item>
        <el-descriptions-item label="类型：">{{  dataDetail?.typeAttr == '0'?'个代': dataDetail?.typeAttr == '1'?'渠道': dataDetail?.typeAttr == '2'?'团队': dataDetail?.typeAttr == '3'?'电销组': '' }}</el-descriptions-item>
        <el-descriptions-item label="所属团队：">{{ dataDetail?.organizationName }}</el-descriptions-item>
        <el-descriptions-item label="创建人：">{{ dataDetail?.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间：">{{ dataDetail?.updateTime }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="(tab) => { activeName = tab }">
        <el-tab-pane label="基本信息" name="msg">
          <div class="other">
            <el-descriptions title="个人信息">
              <el-descriptions-item label="姓名：">{{ dataDetail?.name }}</el-descriptions-item>
              <el-descriptions-item label="手机号：">{{ dataDetail?.mobile }}</el-descriptions-item>
              <el-descriptions-item label="证件号：">{{ dataDetail?.identity }}</el-descriptions-item>
              <el-descriptions-item label="证件有效期始：">{{ dataDetail?.identityTimeStart }}</el-descriptions-item>
              <el-descriptions-item label="证件有效期止：">{{ dataDetail?.identityTimeEnd }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息">
              <el-descriptions-item label="管理人：">{{ dataDetail?.leaderName }}</el-descriptions-item>
              <el-descriptions-item label="管理人工号：">{{ dataDetail?.leaderId }}</el-descriptions-item>
              <el-descriptions-item label="推荐人：">{{ dataDetail?.referrerName }}</el-descriptions-item>
              <el-descriptions-item label="推荐人工号：">{{ dataDetail?.referrerId }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="银行卡信息">
              <el-descriptions-item>
                <template #default>
                  <el-table
                    :data="dataDetail?.bankCardList"
                  >
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="bankName" label="开户行">
                      <template #default="scope">
                        {{ bankCardChange(bankOption, scope.row.bankName) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="bankCardNumber" label="卡号"></el-table-column>
                    <el-table-column prop="bankAddress" label="开户支行"></el-table-column>
                    <el-table-column prop="auditStatus" label="审核状态">
                      <template #default="scope">
                        {{ scope.row.auditStatus == '0'?'未审核':scope.row.auditStatus == '1'?'审核通过':scope.row.auditStatus == '2'?'审核驳回':''}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="" label="身份证件照">
                      <template #default="scope">
                        <img class="cardImage" :src="dataDetail?.fileList?.[0].fileUrl">
                      </template>
                    </el-table-column>
                    <el-table-column prop="cardFile" label="银行卡照">
                      <template #default="scope">
                        <img class="cardImage" :src="scope.row.cardFile">
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <a style="color: #409EFF; cursor: pointer" @click="editBankCard(scope.row)">详情</a>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-button icon="plus" style="margin-left: 20px" @click="addBankCard">添加银行卡</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资料附件" name="file">
          <div class="other">
            <el-descriptions title="资料附件">
              <el-descriptions-item>
                <template #default>
                  <div class="fileItem">
                    <span class="label">身份证（人像面）</span>
                    <div class="fileName">
                      <span class="file-name">文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名文件名</span>
                      <el-icon class="file-icon"><View /></el-icon>
                    </div>
                  </div>
                  <div class="fileItem">
                    <span class="label">身份证（国徽面）</span>
                    <div class="fileName">
                      <span class="file-name">文件名</span>
                      <el-icon class="file-icon"><View /></el-icon>
                    </div>
                  </div>
                  <div class="fileItem">
                    <span class="label">展业资格证</span>
                    <div class="fileName">
                      <span class="file-name">文件名</span>
                      <el-icon class="file-icon"><View /></el-icon>
                    </div>
                  </div>
                </template>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      v-model="bankCardDialogShow"
      :title="bankTitle"
      width="500"
    >
      <addCard @closeDialog="closeAddBankCard" :userInfo="bankCardInfo"></addCard>
    </el-dialog>
    <el-dialog
      v-model="dialogShow"
      title="编辑"
      width="1000"
    >
      <addOperation ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
    </el-dialog>
    <el-dialog
      v-model="allocationShow"
      title="分配管理人"
      width="800"
    >
      <allocation ref="AllocationRef" @closeDialog="closeAllocation"></allocation>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import addOperation from './modules/addOperation.vue'
import addCard from './modules/addCard.vue'
import allocation from './modules/allocation.vue'
import pinyin from "js-pinyin";
import { ElMessage, ElMessageBox } from 'element-plus'
import Allocation from "@/views/operationManagement/modules/allocation.vue";
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import {OperationIsEnable} from "@/api/modules/operation.ts";
import router from "@/router";

let AddOperationRef = ref(null)
const AllocationRef = ref(null)

let myRouter = useRouter()
const myRoute = useRoute()

// 更多
const handleCommand = (e) => {
  switch (e) {
    case '删除':
      ElMessageBox({
        title: '删除业务员',
        message: '确定要删除该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {
        if(action === 'confirm') {
          let ids = [myRoute.query.id]
          operationDel(ids)
        }
      }).catch(( action ) => {

      })
      break;
    case '禁用':
      ElMessageBox({
        title: '禁用业务员',
        message: '确定要禁用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {
        if(action === 'confirm') {
          let data = {
            ids: [myRoute.query.id],
            isEnable: 1,
            getAll: 0
          }
          operationIsEnable(data)
        }
      }).catch(( action ) => {

      })
      break;
    case '启用':
      ElMessageBox({
        title: '启用业务员',
        message: '确定要启用该业务员吗？',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(( action ) => {
        if(action === 'confirm'){
          let data = {
            ids: [myRoute.query.id],
            isEnable: 0,
            getAll: 0
          }
          operationIsEnable(data)
        }
      }).catch(( action ) => {

      })
      break;
    case '分配管理人':
      allocationShow.value = true
      nextTick(() => {
        AllocationRef.value.initCheckedKeys(dataDetail.value.deptId, 'cur', [dataDetail.value.id])
      })
      break;
  }
}
// 分配管理人
let allocationShow = ref(false)
const closeAllocation = (type: boolean) => {
  allocationShow.value = type
}

// 银行卡列表数据
// let tableData = ref([])

// Tabs切换
let activeName = ref('msg')

// 银行卡信息
let bankCardInfo = ref(null)
let bankTitle = ref('添加银行卡')
// 添加银行卡弹框
let bankCardDialogShow = ref(false)
// 添加银行卡
const addBankCard = () => {
  bankTitle.value = '添加银行卡'
  bankCardDialogShow.value = true
  bankCardInfo.value = {
    userJzgInfoId: dataDetail.value.id,
    name: dataDetail.value.name,
  }
}
// 编辑银行卡
const editBankCard = (row) => {
  bankTitle.value = '查看银行卡'
  bankCardDialogShow.value = true
  bankCardInfo.value = {
    userJzgInfoId: dataDetail.value.id,
    name: dataDetail.value.name,
    bankName: row.bankName,
    bankCardNumber: row.bankCardNumber,
    bankAddress: row.bankAddress,
    attachment: row.cardFile,
    imageUrl: row.cardFile,
    isRead: true
  }
}
// 关闭添加银行卡弹框
const closeAddBankCard = (type: string) => {
  if(type == '确定') {
    initDetail()
  }
  bankCardDialogShow.value = false
}

// 删除
const operationDel = (id: string[]) => {
  api.operationApi.operationDelete({
    ids: id,
    getAll: 0
  }).then(res => {
    if(res?.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      myRouter.push({
        path: 'operationManagement/operation',
      })
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 启用/禁用
const operationIsEnable = (data: OperationIsEnable) => {
  api.operationApi.operationIsEnable(data).then(res => {
    if(res?.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      initDetail()
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 审核通过
const checkPass = () => {
  api.operationApi.salesmanAuthSuccess({ userInfoId: dataDetail.value.id }).then(res => {
    if(res.code == 200) {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning',
      })
    }
  })
}
// 审核不通过
const checkNotPass = () => {
  ElMessageBox({
    title: '审核不通过',
    showInput: true,
    inputPlaceholder: '请输入原因',
    inputValue: '',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value, action } ) => {
    if(action == 'confirm') {
      api.operationApi.salesmanAuthFailed({
        userInfoId: dataDetail.value.id,
        approvalOpinion: value
      }).then(res => {
        if(res.code == 200) {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
  }).catch(( action ) => {

  })
}

// 编辑/修改
let dialogShow = ref(false)
const editDetail = () => {
  dialogShow.value = true
  nextTick(() => {
    AddOperationRef.value.initEditData(dataDetail.value.id)
  })
}
const closeAddOperation = (text: string) => {
  if(text == '确定') {
    initDetail()
  }
  dialogShow.value = false
}

// 详情
let dataDetail = ref(null)
const initDetail = () => {
  let id = myRoute.query?.id
  api.operationApi.operationDetail(id).then(res => {
    if(res?.code == 200) {
      dataDetail.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

// 初始化银行数据
let bankOption = ref([])
const initBankCard = () => {
  api.commonApi.personInfo('bank_info').then(res => {
    if(res.code == 200) {
      bankOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 转换
const bankCardChange = (list, code) => {
  if(code&&list.length>0) {
    let obj = list.find(item => item.id == code)
    return obj.label
  }
}

// 名字转换首字母
const initName = (name) => {
  return name?pinyin.getFullChars(name).substring(0, 1):''
}

onMounted(() => {
  initDetail()
  initBankCard()
})

</script>

<style scoped lang="scss">
.detail{
  margin: 0 10px;
  .state{
    border: 1px solid rgba(255,0,0,.3);
    border-radius: 10px;
    padding: 10px 20px;
    background: #FFEFEE;
    display: flex;
    margin: 5px 0;
    h3{
      font-weight: 500;
      margin: 0 0 10px;
      color: rgba(0,0,0,.64);
    }
    p{
      margin: 10px 0;
      color: #888;
    }
  }
  .info{
    background: white;
    padding: 5px 10px;
    margin: 5px 0;
    border-radius: 10px;
    :deep(.el-descriptions__title) {
      width: 100%;
    }
    :deep(.el-descriptions__body) {
      padding-left: 60px;
    }
    :deep(.el-tabs__nav-wrap) {
      padding: 0 25px;
    }
    :deep(.el-tabs__item) {
      font-size: 18px;
    }
    .firstName{
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      background: #409EFF;
      color: white;
      font-size: 18px;
      margin-right: 10px;
      margin-left: 20px;
    }
    .allName{
      font-size: 14px;
    }
    .other{
      .fileItem{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 10px 0;
        .label{
          width: 200px;
        }
        .fileName{
          width: calc(100% - 500px);
          line-height: 30px;
          display: flex;
          align-items: center;
          padding: 0 20px;
          &:hover{
            background: #ccc;
          }
          .file-name{
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 20px;
          }
          .file-icon{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 30px;
            cursor: pointer;
            &:hover{
              color: #00a0f4;
            }
          }
        }
      }
      .cardImage{
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 5px;
      }
      :deep(.el-descriptions__title) {
        padding-left: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>