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 class="bg-white" style="border-radius: 2px" plain type="primary" @click="checkPass" v-if="dataDetail?.status == 0 ||dataDetail?.status == 1 ||dataDetail?.status == 2 ||dataDetail?.status == 3 ">审核通过</el-button>
              <el-button class="bg-white" style="border-radius: 2px" plain type="primary" @click="checkNotPass" v-if="dataDetail?.status != 5&&dataDetail?.status != 6&&dataDetail?.status != 7&&dataDetail?.status != 8">审核不通过</el-button>
              <el-button class="bg-white" style="border-radius: 2px" plain type="primary" @click="editDetail">编辑</el-button>&nbsp;
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button class="bg-white" style="border-radius: 2px" plain type="primary">更多</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="工号：" width="33%">{{ dataDetail?.userId }}</el-descriptions-item>
        <el-descriptions-item label="所属机构：" width="33%">{{ dataDetail?.deptName }}</el-descriptions-item>
        <el-descriptions-item label="状态：" width="33%">{{  statusMap(dataDetail?.status)}}</el-descriptions-item>
        <el-descriptions-item label="类型：" width="33%">{{ typeAttrMap(dataDetail?.typeAttr) }}</el-descriptions-item>
        <el-descriptions-item label="所属团队：" width="33%">{{ dataDetail?.organizationName }}</el-descriptions-item>
        <el-descriptions-item label="创建人：" width="33%">{{ dataDetail?.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间：" width="33%">{{ dataDetail?.createTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="message">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="(tab) => { activeName = tab }">
        <el-tab-pane label="基本信息" name="msg" style="padding: 0 24px">
          <div class="other">
            <el-descriptions title="个人信息">
              <el-descriptions-item label="姓名：" width="33%">{{ dataDetail?.name }}</el-descriptions-item>
              <el-descriptions-item label="手机号：" width="33%">{{ dataDetail?.mobile }}</el-descriptions-item>
              <el-descriptions-item label="证件号：" width="33%">{{ dataDetail?.identity }}</el-descriptions-item>
              <el-descriptions-item label="证件有效期始：" width="33%">{{ dataDetail?.identityTimeStart }}</el-descriptions-item>
              <el-descriptions-item label="证件有效期止：" width="33%">{{ dataDetail?.identityTimeEnd }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息">
              <el-descriptions-item>
                <template #default>
                  <el-row :gutter="20">
                    <el-col :span="12" class="mb-5">
                      管理人：{{ dataDetail?.leaderName }}
                    </el-col>
                    <el-col :span="12" class="mb-5">
                      管理人工号：{{ dataDetail?.leaderId }}
                    </el-col>
                    <el-col :span="12" class="mb-5">
                      推荐人：{{ dataDetail?.referrerName }}
                    </el-col>
                    <el-col :span="12" class="mb-5">
                      推荐人工号：{{ dataDetail?.referrerId }}
                    </el-col>
                  </el-row>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="银行卡信息">
              <el-descriptions-item>
                <template #default>
                  <el-table
                    :data="dataDetail?.bankCardList"
                    height="200"
                  >
                    <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.length>0?dataDetail?.fileList?.[0].fileUrl:''">-->
                          {{ dataDetail?.fileList.length>0?`${dataDetail?.fileList?.length}张`: '' }}
                      </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 class="bg-white" plain type="primary" icon="plus" style="width: 100%; border-radius: 2px" @click="addBankCard">添加银行卡</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资料附件" name="file" style="padding: 0 24px">
          <div class="other">
            <el-descriptions title="资料附件">
              <el-descriptions-item>
                <template #default>
                  <div class="fileItem" v-if="imageChangeName('sfz1')">
                    <span class="label">身份证（人像面）</span>
                    <div class="fileName">
                      <span class="file-name">{{ imageChangeName('sfz1') }}</span>
                      <el-icon class="file-icon" @click="imageView('sfz1')"><View /></el-icon>
                    </div>
                  </div>
                  <div class="fileItem" v-if="imageChangeName('sfz2')">
                    <span class="label">身份证（国徽面）</span>
                    <div class="fileName">
                      <span class="file-name">{{ imageChangeName('sfz2') }}</span>
                      <el-icon class="file-icon" @click="imageView('sfz2')"><View /></el-icon>
                    </div>
                  </div>
                  <div class="fileItem" v-if="imageChangeName('qualification')">
                    <span class="label">展业资格证</span>
                    <div class="fileName">
                      <span class="file-name">{{ imageChangeName('qualification') }}</span>
                      <el-icon class="file-icon" @click="imageView('qualification')"><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>
    <el-dialog
      v-model="imageShow"
      title="预览"
      width="500"
    >
      <div class="image-box">
        <img class="image-view" :src="imageUrl" />
      </div>
    </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.ids],
            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.ids],
            isEnable: 0,
            getAll: 0
          }
          operationIsEnable(data)
        }
      }).catch(( action ) => {

      })
      break;
    case '分配管理人':
      allocationShow.value = true
      nextTick(() => {
        AllocationRef.value.initCheckedKeys(dataDetail.value.deptId, 'cur', [dataDetail.value.id], dataDetail.value.leaderId)
      })
      break;
  }
}
// 分配管理人
let allocationShow = ref(false)
const closeAllocation = (type: boolean) => {
  allocationShow.value = type
}
//状态匹配
const statusMap = (value: any) => {
  const map = {
    "0": '未认证',
    "1": '认证中',
    "2": '认证失败',
    "3": '待入职',
    "4": '入司审核中',
    "5": '入司审核失败',
    "6": '已入职',
    "7": '离职待审核',
    "8": '离职',
  }
  return map[value]
}
//人员类型匹配
const typeAttrMap=(value)=>{
  const map = {
    "1": '前线人员',
    "2": '后线人员',
    "3": '合伙人',
    "4": '工作是管理员',
    "5": '团队',
    "6": '个代',
    "7": '电销',
    "8": '渠道',
  }
  return map[value]
}


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

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

// 银行卡信息
let bankCardInfo = ref({})
let bankTitle = ref('添加银行卡')
// 添加银行卡弹框
let bankCardDialogShow = ref(false)
// 添加银行卡
const addBankCard = () => {
  bankTitle.value = '添加银行卡'
  bankCardDialogShow.value = true
  bankCardInfo.value = {
    userJzgInfoId: dataDetail.value.id,
    name: dataDetail.value.name,
    isRead: false
  }
}
// 编辑银行卡
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',
      })
      initDetail()
    } 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',
          })
          initDetail()
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
  }).catch(( action ) => {

  })
}

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

// 附件转换
const imageChangeName = (type) => {
  if(dataDetail.value&&dataDetail.value.fileList.length>0) {
    let obj = dataDetail.value.fileList.find(item => item.fileType === type)
    return obj?.fileName
  }
}
const imageChangeUrl = (type) => {
  if(dataDetail.value.fileList.length>0) {
    let obj = dataDetail.value.fileList.find(item => item.fileType == type)
    return obj?.fileUrl
  }
}

// 预览
let imageUrl = ref('')
let imageShow = ref(false)
const imageView = (type) => {
  imageUrl.value = imageChangeUrl(type)
  imageShow.value = true
}

// 详情
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;
  height: calc(100vh - 120px);
  background-color: white;
  overflow-y: auto;
  .state{
    border: 1px solid #FF4545;
    border-radius: 10px;
    padding: 10px 20px;
    background: #FFF4F4;
    display: flex;
    margin: 5px 0;
    font-weight: 400;
    color: #333333;
    h3{
      font-size: 16px;
      margin: 0 0 10px;
      color: rgba(0,0,0,.64);
    }
    p{
      font-size: 14px;
      margin: 10px 0;
    }
  }
  .info{
    background: white;
    padding: 24px;
    margin: 10px 0;
    border-radius: 10px;
    :deep(.el-descriptions__title) {
      width: 100%;
    }
    :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;
    }
    .allName{
      font-size: 14px;
    }
  }
  .message{
    background: white;
    :deep(.el-tabs__nav-scroll) {
      padding: 24px 0 0 24px;
    }
    .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;
      }
    }
  }
  .image-box{
    display: flex;
    align-content: center;
    justify-content: center;
    .image-view{
      width: 300px;
      height: 200px;
    }
  }
  :deep(.el-table th.el-table__cell) {
    background-color: #F7F7F9;
  }
}
</style>