kd-aiot-frontend-wt/src/views/bpm/handleTask/components/offerApproval/offerApprovalDetail.vue

<template>
  <main class="offer-approval-page" v-loading="loading">
    <header class="detail-page-header">
      <div class="drawer-title">
        <span><i class="el-icon-view"></i></span>
        <div>
          <h2>录用审批详情</h2>
          <p>{{ form.approvalNo || '—' }}</p>
        </div>
        <em v-if="form.status" :class="statusTone(form.statusCode)"
          ><i></i>{{ form.status }}</em
        >
      </div>
    </header>

    <section class="detail-overview">
      <span class="candidate-avatar"
        ><i class="el-icon-user-solid"></i
      ></span>
      <div>
        <h3>
          {{ form.candidateName || '—'
          }}<small v-if="form.gender">（{{ form.gender }}）</small>
        </h3>
        <p>
          {{ form.positionName || '未指定岗位' }} ·
          {{ form.departmentName || '未指定部门' }} · 拟入职
          {{ form.hireDate || '—' }}
        </p>
      </div>
    </section>

    <section class="detail-section">
      <div class="detail-heading">
        <span><i class="el-icon-user"></i></span>
        <div>
          <h3>候选人基本信息</h3>
          <p>姓名、联系方式与应聘岗位</p>
        </div>
      </div>
      <div class="detail-grid">
        <div>
          <span>姓名</span><strong>{{ form.candidateName || '-' }}</strong>
        </div>
        <div>
          <span>称谓</span><strong>{{ form.gender || '-' }}</strong>
        </div>
        <div>
          <span>应聘岗位</span><strong>{{ form.positionName || '-' }}</strong>
        </div>
        <div>
          <span>联系电话</span><strong>{{ form.phone || '-' }}</strong>
        </div>
        <div>
          <span>工作经验</span
          ><strong>{{ experienceText(form.experience) }}</strong>
        </div>
        <div>
          <span>入职部门</span
          ><strong>{{ form.departmentName || '-' }}</strong>
        </div>
        <div>
          <span>学历</span><strong>{{ form.education || '-' }}</strong>
        </div>
        <div>
          <span>当前节点</span><strong>{{ form.currentNode || '-' }}</strong>
        </div>
      </div>
    </section>

    <section class="detail-section">
      <div class="detail-heading">
        <span><i class="el-icon-s-finance"></i></span>
        <div>
          <h3>录用信息</h3>
          <p>薪资、试用期与岗位性质</p>
        </div>
      </div>
      <div class="detail-grid">
        <div>
          <span>拟定薪资</span
          ><strong>{{ form.proposedSalary || '-' }}</strong>
        </div>
        <div>
          <span>试用期</span><strong>{{ form.probation || '-' }}</strong>
        </div>
        <div>
          <span>拟入职日期</span><strong>{{ form.hireDate || '-' }}</strong>
        </div>
        <div>
          <span>薪资结构</span
          ><strong>{{ form.salaryStructure || '-' }}</strong>
        </div>
        <div>
          <span>岗位性质</span><strong>{{ form.staffingType || '-' }}</strong>
        </div>
      </div>
    </section>

    <section class="detail-section">
      <div class="detail-heading">
        <span><i class="el-icon-paperclip"></i></span>
        <div>
          <h3>附件与说明</h3>
          <p>简历、面试评价表、Offer 扫描件</p>
        </div>
      </div>
      <div class="detail-block">
        <span>附件</span>
        <fileMain
          v-if="attachmentFileIds.length"
          v-model="attachmentFileIds"
          type="view"
          size="small"
        />
        <p v-else class="detail-muted">暂无附件</p>
      </div>
      <div class="detail-block" v-if="form.remark">
        <span>备注说明</span>
        <p class="review-opinion">{{ form.remark }}</p>
      </div>
    </section>
  </main>
</template>

<script>
import { getHiringApprovalById } from '@/api/bpm/components/offerApproval';

const emptyForm = () => ({
  id: null,
  approvalNo: '',
  candidateName: '',
  gender: '',
  education: '',
  phone: '',
  experience: '',
  positionName: '',
  departmentName: '',
  proposedSalary: '',
  probation: '',
  hireDate: '',
  salaryStructure: '',
  staffingType: '',
  remark: '',
  status: '',
  statusCode: '',
  currentNode: '',
  attachmentNames: []
});

export default {
  name: 'OfferApprovalDetail',
  props: {
    businessId: {
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      form: emptyForm(),
      attachmentFileIds: []
    };
  },
  watch: {
    businessId: {
      immediate: true,
      handler(id) {
        if (id) this.getInfo(id);
      }
    }
  },
  methods: {
    async getInfo(id) {
      if (!id) return;
      this.loading = true;
      try {
        this.form = {
          ...emptyForm(),
          ...(await getHiringApprovalById(id))
        };
        this.attachmentFileIds = this.form.attachmentFileIds || [];
      } catch (error) {
        this.form = emptyForm();
        this.$message.error(error.message || '录用审批详情加载失败');
      } finally {
        this.loading = false;
      }
    },
    experienceText(value) {
      if (value === null || value === undefined || value === '') return '-';
      if (typeof value === 'number' && Number.isFinite(value)) {
        return `${value}年`;
      }
      return String(value);
    },
    statusTone(code) {
      if (code === 'APPROVED') return 'is-success';
      if (code === 'REJECTED') return 'is-danger';
      if (code === 'PENDING_MY_APPROVAL') return 'is-primary';
      return 'is-warning';
    }
  }
};
</script>

<style lang="scss" scoped src="@/styles/views/offerApproval/index.scss"></style>