src/views/personnelManagement/employeeRecord/components/Show.vue
@@ -2,20 +2,131 @@
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="详情"
        width="70%"
        title="员工详情"
        width="80%"
        top="5vh"
        @close="closeDia"
    >
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="600"
      ></PIMTable>
      <div v-loading="loading" class="detail-body">
        <!-- 基本信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              基本信息
            </span>
          </template>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="员工编号">{{ detail.staffNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ detail.staffName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="别名">{{ detail.alias || '-' }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ detail.sex || '-' }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ detail.phone || '-' }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ detail.birthDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ detail.age ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="籍贯">{{ detail.nativePlace || '-' }}</el-descriptions-item>
            <el-descriptions-item label="民族">{{ detail.nation || '-' }}</el-descriptions-item>
            <el-descriptions-item label="婚姻状况">{{ detail.maritalStatus || '-' }}</el-descriptions-item>
            <el-descriptions-item label="政治面貌">{{ detail.politicalStatus || '-' }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ detail.idCardNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="户口类型">{{ detail.hukouType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ detail.email || '-' }}</el-descriptions-item>
            <el-descriptions-item label="现住址" :span="2">{{ detail.currentAddress || '-' }}</el-descriptions-item>
            <el-descriptions-item label="通讯地址" :span="2">{{ detail.contactAddress || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <!-- 在职信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              在职信息
            </span>
          </template>
          <el-descriptions :column="4" border>
            <el-descriptions-item label="入职日期">{{ detail.contractStartTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合同结束日期">{{ detail.contractEndTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="试用期(月)">{{ detail.proTerm ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="转正日期">{{ detail.positiveDate || '-' }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ detail.deptName || detail.sysDeptId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ detail.postName || detail.sysPostId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="基本工资">{{ detail.basicSalary ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="员工状态">{{ formatStaffState(detail.staffState) }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <!-- 银行卡信息 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              银行卡信息
            </span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="开户行">{{ detail.bankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行卡号">{{ detail.bankCardNo || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <!-- 教育经历 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              教育经历
            </span>
          </template>
          <el-table :data="detail.staffEducationList || []" border>
            <el-table-column label="学历" align="center">
              <template #default="{ row }">{{ formatEducation(row.education) }}</template>
            </el-table-column>
            <el-table-column label="毕业院校" prop="schoolName" align="center" />
            <el-table-column label="入学时间" prop="enrollTime" align="center" />
            <el-table-column label="毕业时间" prop="graduateTime" align="center" />
            <el-table-column label="专业" prop="major" align="center" />
            <el-table-column label="学位" prop="degree" align="center" />
          </el-table>
        </el-card>
        <!-- 工作经历 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              工作经历
            </span>
          </template>
          <el-table :data="detail.staffWorkExperienceList || []" border>
            <el-table-column label="前公司" prop="formerCompany" align="center" />
            <el-table-column label="前公司部门" prop="formerDept" align="center" />
            <el-table-column label="前公司职位" prop="formerPosition" align="center" />
            <el-table-column label="开始日期" prop="startDate" align="center" />
            <el-table-column label="结束日期" prop="endDate" align="center" />
            <el-table-column label="工作描述" prop="workDesc" align="center" />
          </el-table>
        </el-card>
        <!-- 紧急联系人 -->
        <el-card shadow="never" class="detail-card">
          <template #header>
            <span class="card-title">
              <span class="card-title-line">|</span>
              紧急联系人
            </span>
          </template>
          <el-table :data="detail.staffEmergencyContactList || []" border>
            <el-table-column label="姓名" prop="contactName" align="center" />
            <el-table-column label="关系" prop="contactRelation" align="center" />
            <el-table-column label="手机" prop="contactPhone" align="center" />
            <el-table-column label="住址" prop="contactAddress" align="center" />
          </el-table>
        </el-card>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
          <el-button @click="closeDia">关闭</el-button>
        </div>
      </template>
    </el-dialog>
@@ -23,51 +134,75 @@
</template>
<script setup>
import {ref} from "vue";
import {staffOnJobInfo} from "@/api/personnelManagement/staffOnJob.js";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
import { ref } from "vue";
import { staffOnJobInfo } from "@/api/personnelManagement/staffOnJob.js";
const emit = defineEmits(["close"]);
const dialogFormVisible = ref(false);
const operationType = ref('')
const tableColumn = ref([
  // {
  //   label: "合同年限",
  //   prop: "contractTerm",
  // },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const loading = ref(false);
const detail = ref({});
const educationMap = {
  secondary: "中专及以下",
  junior_college: "大专",
  bachelor: "本科",
  master: "硕士",
  doctor: "博士及以上",
};
const formatEducation = (v) => educationMap[v] || v || "-";
const formatStaffState = (v) => {
  if (v == 0) return "离职";
  if (v == 1) return "在职";
  return "-";
};
// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  detail.value = {};
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    staffOnJobInfo({staffNo: row.staffNo}).then(res => {
      tableData.value = res.data
    })
  if (row?.id) {
    loading.value = true;
    staffOnJobInfo(row.id, {})
      .then((res) => {
        detail.value = res.data || {};
      })
      .finally(() => {
        loading.value = false;
      });
  }
}
};
// 关闭弹框
const closeDia = () => {
  dialogFormVisible.value = false;
  emit('close')
  emit("close");
};
defineExpose({
  openDialog,
});
</script>
<style scoped>
.detail-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px;
}
</style>
.detail-card {
  margin-bottom: 16px;
}
.card-title {
  font-weight: 600;
}
.card-title-line {
  color: #f56c6c;
  margin-right: 4px;
}
</style>