hospital-admin/src/components/familyModal.vue

<template>
 <!-- Modal -->
 <a-modal v-model:visible="modalVisible" fullscreen title="就诊人详情" title-align="start" :footer="false"
       @cancel="handleClose">
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">基本信息</div>
      </div>
      <a-form :model="modalForm"    ref="modalFormRef" :auto-label-width="true">
        <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="avatar" label="真实姓名：">
              <span>{{modalForm.card_name}} （{{modalForm.sex==1?'男，':'女，'}}{{modalForm.age
}}岁）</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="idCard" label="身份证号：" >
              <div class="box" v-show="!showEye ">
                <div class="cardNum">{{modalForm.id_number_mask}}</div>
                <icon-eye-invisible class="eye" @click="handelDecryptCard(modalForm.user.user_id,modalForm.family_id)" />
              </div>
              <div class="box" v-show="showEye">
                <div class="cardNum">{{id_card_num}}</div>
                <icon-eye class="eye" @click="()=>{showEye=false}" />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-if="modalForm.mobile_mask || modalForm.created_at">
          <a-col :span="12" v-if="modalForm.mobile_mask">
            <a-form-item field="idCard" label="手机号码：" >
              <div class="box" v-show="!family_Eye">
                <div class="cardNum">{{modalForm.mobile_mask}}</div>
                <icon-eye-invisible class="eye" @click="handleDecryptMobile(modalForm.user.user_id,modalForm.family_id)" />
              </div>
              <div class="box" v-show="family_Eye">
                <div class="cardNum">{{family_mobile}}</div>
                <icon-eye class="eye" @click="()=>{family_Eye=false}" />
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="idCard" label="绑定时间：" >
              <div class="box" >
                <div class="cardNum">{{modalForm.created_at}}</div>
              </div>
             
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <div class="titlebox">
        <div class="bar"></div>
        <div class="name">所属账号</div>
      </div>
        <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="avatar" label="账号用户名：">
              <span>{{modalForm.user.user_name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
      
            <a-form-item field="idCard" label="账号电话：" >
              <div class="box" v-show="!count_Eye">
                <div class="cardNum">{{modalForm.user.mobile}}</div>
                <icon-eye-invisible class="eye" @click="handleDecryptMobile(modalForm.user.user_id)" />
              </div>
              <div class="box" v-show="count_Eye">
                <div class="cardNum">{{count_mobile}}</div>
                <icon-eye class="eye" @click="()=>{count_Eye=false}" />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="idCard" label="与就诊人关系：" >
              <span v-if="modalForm.relation">{{formatRelation(modalForm.relation)}}</span>
              <span v-else>-</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <!-- <div class="titlebox">
          <div class="bar"></div>
          <div class="name">病例信息</div>
        </div>
        <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            
          </a-col>
        </a-row>
        <a-divider /> -->

      </a-form>
      <!-- <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">操作</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;" >
        <a-col :span="24">
          <a-form-item field="" label="" no-style>
            <a-space >
              <a-button type="primary" status="danger" @click="">禁用</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row> -->
    </a-modal>
</template>
<script setup>
import {ref,toRefs} from 'vue';
import {decryptCard} from '@/api/doctor/list';
import {decryptMobile} from '@/api/patient/family';
import {formatRelation} from "@/utils/format"
const props = defineProps({
  // 是否显示
  modalVisible: {
    type: Boolean,
    default: false,
  },
  modalForm: {
    type: Object,
  },
});
const emits = defineEmits(['familyVisibleChange']);
const {modalVisible,modalForm} = toRefs(props);
//切换小眼睛
const showEye = ref(false);
  const id_card_num = ref('');
  //解密身份证号码
  const handelDecryptCard = async (user_id,family_id) => {
    showEye.value = true;
    const { data, code, message } = await decryptCard({
      user_id,
      family_id
    });
    if (code == 200) {
      id_card_num.value = data;
    }
  };
  //切换手机号
  const count_Eye= ref(false);
  const family_Eye= ref(false);
  const count_mobile=ref('');
  const family_mobile=ref('')
  const handleDecryptMobile=async(user_id,family_id='')=>{
    let dataObj=null;
    if(family_id){
      dataObj={ user_id,family_id}
      family_Eye.value=true
    }else{
      dataObj={ user_id,family_id};
      count_Eye.value=true
    }
    const { data, code, message } = await decryptMobile(dataObj);
    if(code==200){
      if(family_id){
        family_mobile.value=data
      }else{
        count_mobile.value=data;
      }
    }
  }
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
  emits('familyVisibleChange', false);
};
</script>
<style scoped>
  .cardNum {
    width: 150px;
  }
 .arco-form-item-layout-horizontal:first-child,
  .arco-form-item-layout-horizontal:nth-child(2) {
    align-items: center;
  }
  .cellbox{
    margin-top: 35px;
  }
  .cellbox .cell{
    width:50%;
    border-bottom:1px dashed #efefef;
    margin-bottom: 20px;
  }
  .cellbox .cell:first-child{
    border: none;
  }
 
  .box {
    display: flex;
    align-items: center;
  }

  .cert .arco-form-item-label-col {
    flex: 0 0 8px !important;
  }

</style>