td_official/src/views/project/constructionUser/component/ConstructionUserDetail.vue

<template>
  <div>
    <div class="block_box">
      <span>用户信息</span>
      <el-form label-width="130px">
        <el-row :gutter="20" justify="space-around">
          <el-col :span="12">
            <el-form-item label="人脸照">
              <el-image :src="userDetail?.pacePhoto" style="width: 150px; height: 150px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              {{ userDetail?.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              {{ userDetail?.phone }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <dict-tag :options="user_sex_type" :value="userDetail?.sex" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              {{ dayjs().diff(dayjs(userDetail?.sfzBirth), 'year') }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族">
              {{ userDetail?.sfzNation }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯">
              {{ userDetail?.nativePlace }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码">
              {{ userDetail?.sfzNumber }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="身份证号码">
              {{ userDetail?.sfzNumber }}
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="身份证有效开始期">
              {{ dayjs(userDetail?.sfzStart).format('YYYY 年 MM 月 DD 日') }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证有效结束期">
              {{ dayjs(userDetail?.sfzEnd).format('YYYY 年 MM 月 DD 日') }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证地址">
              {{ userDetail?.sfzSite }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="block_box">
      <span>银行卡</span>
      <el-form label-width="130px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="银行卡号">
              {{ userDetail?.yhkNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行开户行">
              {{ userDetail?.yhkOpeningBank }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持卡人">
              {{ userDetail?.yhkCardholder }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="block_box">
      <span>单位信息</span>
      <el-form label-width="130px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="施工单位">
              {{ userDetail?.lwName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工种">
              <dict-tag :options="type_of_work" :value="userDetail?.typeOfWork" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="block_box">
      <span>其他信息</span>
      <el-form label-width="130px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班组">
              {{ userDetail?.bzName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="打卡状态">
              <dict-tag :options="user_clock_type" :value="userDetail?.clock" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入场时间">
              {{ userDetail?.entryDate ? dayjs(userDetail?.entryDate).format('YYYY 年 MM 月 DD 日 HH:mm:ss') : '' }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离场时间">
              {{ userDetail?.leaveDate ? dayjs(userDetail?.leaveDate).format('YYYY 年 MM 月 DD 日 HH:mm:ss') : '' }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getConstructionUser } from '@/api/project/constructionUser';
import { ConstructionUserVO } from '@/api/project/constructionUser/types';
import { dayjs } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { type_of_work, user_sex_type, user_clock_type } = toRefs<any>(proxy?.useDict('type_of_work', 'user_sex_type', 'user_clock_type'));

interface Props {
  userId?: string | number;
}

const props = defineProps<Props>();
const loading = ref<boolean>(false);
const userDetail = ref<ConstructionUserVO>();
const getUserDetail = async () => {
  loading.value = true;
  const res = await getConstructionUser(props.userId);
  if (res.data && res.code === 0) {
    userDetail.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
  getUserDetail();
});

watch(
  () => props.userId,
  (newId, oldId) => {
    if (newId !== oldId) {
      getUserDetail();
    }
  }
);
</script>
<style lang="scss" scoped>
.block_box {
  border: 1px solid #9eccfa;
  border-radius: 6px;
  padding: 10px 20px 20px 10px;
  margin: 15px;
  > span {
    color: #409eff;
    font-weight: 700;
    font-size: 14px;
  }
}
</style>