sj-admin-web/src/views/system/audit/jobDetail.vue

<template>
  <div class="app-container p-6 bg-white rounded" v-loading="loading">
    <!-- 岗位信息 -->
    <div class="mb-10">
      <div class="section-title">岗位信息</div>
      
      <div class="form-content">
        <div class="form-row">
          <div class="label"><span class="required">*</span>岗位名称</div>
          <div class="value">
            <div class="gray-box">{{ detail.postName || '-' }}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="label">公司名称</div>
          <div class="value">
            <div class="gray-box">{{ detail.companyName || '-' }}</div>
            <div class="mt-4 text-[#4e5969] leading-relaxed max-w-3xl whitespace-pre-wrap">{{ detail.postDescription || '暂无公司简介' }}</div>
          </div>
        </div>

        <div class="form-row mt-6">
          <div class="label"><span class="required">*</span>办公地址</div>
          <div class="value">
            <div class="flex gap-6 mb-3 font-medium">
              <span>{{ detail.workProvince || '' }}</span>
              <span>{{ detail.workCity || '' }}</span>
              <span>{{ detail.workDistrict || '' }}</span>
            </div>
            <div class="gray-box">{{ detail.workAddress || '-' }}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="label"><span class="required">*</span>岗位类型</div>
          <div class="value font-medium">{{ detail.postTypeName || detail.postType || '-' }}</div>
        </div>

        <div class="form-row">
          <div class="label">薪资</div>
          <div class="value flex items-center gap-4">
            <span v-if="detail.salaryType" class="text-gray-600">{{ detail.salaryType }}</span>
            <div class="gray-box !w-auto min-w-[160px]">{{ detail.salaryRange || '-' }}</div>
          </div>
        </div>

        <div class="form-row">
          <div class="label"><span class="required">*</span>招聘人数</div>
          <div class="value flex items-center gap-6">
            <div class="gray-box !w-32">{{ detail.recruitNum || '' }}</div>
            <el-radio :model-value="!detail.recruitNum ? 1 : 0" :label="1" disabled class="custom-radio">不限</el-radio>
          </div>
        </div>

        <div class="form-row">
          <div class="label"><span class="required">*</span>报名时间</div>
          <div class="value flex items-center gap-6">
            <el-radio :model-value="!(detail.registrationStartDate || detail.registrationEndDate) ? 1 : 0" :label="1" disabled class="custom-radio">不限</el-radio>
            <span v-if="detail.registrationStartDate || detail.registrationEndDate" class="text-[#1d2129]">
              {{ detail.registrationStartDate }} 至 {{ detail.registrationEndDate }}
            </span>
          </div>
        </div>

        <div class="form-row">
          <div class="label">急招</div>
          <div class="value flex items-center gap-4">
            <el-radio-group :model-value="detail.isUrgent" disabled class="custom-radio-group">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="form-row">
          <div class="label">学校要求</div>
          <div class="value font-medium">{{ detail.schoolRequirementName || detail.schoolRequirement || '不限' }}</div>
        </div>

        <div class="form-row">
          <div class="label">性别</div>
          <div class="value font-medium">{{ detail.genderRequirementName || detail.genderRequirement || '不限' }}</div>
        </div>

        <div class="form-row">
          <div class="label">年级</div>
          <div class="value font-medium">{{ detail.gradeRequirementName || detail.gradeRequirement || '不限' }}</div>
        </div>

        <div class="form-row">
          <div class="label">到岗时间</div>
          <div class="value font-medium">{{ detail.arrivalTimeName || detail.arrivalTime || '不限' }}</div>
        </div>

        <div class="form-row">
          <div class="label">实习时长</div>
          <div class="value font-medium">{{ detail.internshipDurationName || detail.internshipDuration || '不限' }}</div>
        </div>

        <div class="form-row">
          <div class="label">是否出差</div>
          <div class="value flex items-center gap-4">
            <el-radio-group :model-value="detail.willingToTravel" disabled class="custom-radio-group">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="form-row">
          <div class="label">岗位标签</div>
          <div class="value flex flex-wrap gap-2">
            <template v-if="detail.welfareTags">
              <span v-for="tag in detail.welfareTags.split(',')" :key="tag" class="tag-item">
                {{ tag }}
              </span>
            </template>
            <span v-else class="text-gray-400">无</span>
          </div>
        </div>

        <div class="form-row items-start">
          <div class="label pt-1">岗位描述</div>
          <div class="value leading-loose text-[#1d2129] max-w-4xl whitespace-pre-wrap">
            {{ detail.jobRequirement || '-' }}
          </div>
        </div>
      </div>
    </div>

    <!-- 评测信息 -->
    <div class="mb-10">
      <div class="section-title">评测信息</div>
      
      <div class="form-content">
        <div class="form-row">
          <div class="label"><span class="required">*</span>岗位级别</div>
          <div class="value font-medium">{{ detail.postLevelName || detail.postLevel || '-' }}</div>
        </div>

        <div class="form-row">
          <div class="label"><span class="required">*</span>测评时长</div>
          <div class="value flex items-center gap-4">
            <div class="gray-box !w-32 text-center font-medium">{{ detail.assessmentTime || '0' }}</div>
            <span class="text-[#4e5969]">分钟</span>
          </div>
        </div>

        <div class="form-row items-start">
          <div class="label pt-1"><span class="required">*</span>及格线</div>
          <div class="value flex flex-col gap-5">
            <div class="flex items-center" v-if="detail.gradeA !== undefined && detail.gradeA !== null">
              <span class="w-40 text-[#4e5969]">能力A（总分100）</span>
              <span class="font-bold text-base w-16 text-center">{{ detail.gradeA }}</span>
              <span class="text-[#4e5969]">分</span>
            </div>
            <div class="flex items-center" v-if="detail.gradeB !== undefined && detail.gradeB !== null">
              <span class="w-40 text-[#4e5969]">能力B（总分100）</span>
              <span class="font-bold text-base w-16 text-center">{{ detail.gradeB }}</span>
              <span class="text-[#4e5969]">分</span>
            </div>
            <div class="flex items-center" v-if="detail.gradeC !== undefined && detail.gradeC !== null">
              <span class="w-40 text-[#4e5969]">能力C（总分100）</span>
              <span class="font-bold text-base w-16 text-center">{{ detail.gradeC }}</span>
              <span class="text-[#4e5969]">分</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 审核信息 -->
    <div class="mb-10">
      <div class="section-title">审核信息</div>
      
      <div class="form-content">
        <!-- 已审核状态 -->
        <div v-if="detail.auditResult !== 0" class="flex flex-col gap-6 text-[14px]">
          <div class="flex items-center">
            <div class="w-[120px] pr-4 text-right text-[#4e5969] shrink-0">审核结果:</div>
            <div class="text-[#1d2129]">{{ detail.auditResult === 1 ? '通过' : '驳回' }}</div>
          </div>
          
          <div class="flex items-center">
            <div class="w-[120px] pr-4 text-right text-[#4e5969] shrink-0">总价:</div>
            <div class="text-[#1d2129] flex items-center gap-6">
              <span class="font-medium text-[16px]">{{ Number(detail.deposit || 0) + Number(detail.finalPayment || 0) }}</span>
              <span class="text-[#4e5969]">定金: {{ detail.deposit || '0' }}</span>
              <span class="text-[#4e5969]">尾款: {{ detail.finalPayment || '0' }}</span>
            </div>
          </div>

          <div class="flex items-start">
            <div class="w-[120px] pr-4 text-right text-[#4e5969] shrink-0">备注:</div>
            <div class="text-[#1d2129] max-w-3xl leading-relaxed">{{ detail.auditRemark || '-' }}</div>
          </div>

          <div class="flex items-center">
            <div class="w-[120px] pr-4 text-right text-[#4e5969] shrink-0">审核时间:</div>
            <div class="text-[#1d2129]">{{ detail.auditTime || '-' }}</div>
          </div>

          <div class="flex items-center">
            <div class="w-[120px] pr-4 text-right text-[#4e5969] shrink-0">审核人:</div>
            <div class="text-[#1d2129]">{{ detail.auditByName || '-' }}</div>
          </div>
        </div>

        <!-- 待审核状态 -->
        <div v-else class="max-w-2xl pt-4 pl-[40px]">
          <el-form :model="auditForm" label-width="80px">
            <el-form-item label="定金">
              <el-input-number v-model="auditForm.deposit" :precision="2" :step="100" :min="0" class="!w-64" />
            </el-form-item>
            <el-form-item label="尾款">
              <el-input-number v-model="auditForm.finalPayment" :precision="2" :step="100" :min="0" class="!w-64" />
            </el-form-item>
            <el-form-item label="审核备注">
              <el-input
                v-model="auditForm.remark"
                type="textarea"
                :rows="4"
                placeholder="说明说明说明说明说明说明..."
              />
            </el-form-item>
          </el-form>

          <div class="flex gap-4 mt-8 pl-20">
            <el-button type="primary" @click="handleAuditPass" :loading="submitLoading">审核通过</el-button>
            <el-button type="danger" @click="handleAuditReject" :loading="submitLoading">审核驳回</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="mt-12 pl-[120px] pb-10">
      <el-button @click="handleBack" class="px-8 !bg-[#f2f3f5] !border-none !text-[#4e5969] hover:!bg-[#e5e6eb]">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getAudit, auditPass, auditReject } from '@/api/system/audit';
import { AuditVO } from '@/api/system/audit/types';

const router = useRouter();
const route = useRoute();
const loading = ref(true);
const submitLoading = ref(false);
const detail = ref<AuditVO>({} as AuditVO);
const auditForm = ref({
  deposit: 0,
  finalPayment: 0,
  remark: ''
});

const getDetail = async () => {
  loading.value = true;
  try {
    const id = route.query.id as string;
    const res = await getAudit(id);
    detail.value = res.data;
    if (detail.value.deposit) auditForm.value.deposit = Number(detail.value.deposit);
    if (detail.value.finalPayment) auditForm.value.finalPayment = Number(detail.value.finalPayment);
  } catch (error) {
    ElMessage.error('获取详情失败');
  } finally {
    loading.value = false;
  }
};

const handleAuditPass = async () => {
  try {
    await ElMessageBox.confirm('确定要审核通过吗？', '提示', { type: 'warning' });
    submitLoading.value = true;
    await auditPass(route.query.id as string, auditForm.value.remark);
    ElMessage.success('审核通过成功');
    await getDetail();
  } catch (error: any) {
    if (error !== 'cancel') ElMessage.error('审核处理失败');
  } finally {
    submitLoading.value = false;
  }
};

const handleAuditReject = async () => {
  if (!auditForm.value.remark?.trim()) {
    ElMessage.warning('请输入驳回原因');
    return;
  }
  try {
    await ElMessageBox.confirm('确定要驳回此申请吗？', '提示', { type: 'warning' });
    submitLoading.value = true;
    await auditReject(route.query.id as string, auditForm.value.remark);
    ElMessage.success('审核驳回成功');
    await getDetail();
  } catch (error: any) {
    if (error !== 'cancel') ElMessage.error('处理失败');
  } finally {
    submitLoading.value = false;
  }
};

const handleBack = () => {
  router.back();
};

onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.app-container {
  min-height: calc(100vh - 84px);
  color: #1d2129;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  background-color: #f7f8fa;
  padding: 14px 16px;
  border-left: 3px solid #165dff;
  margin-bottom: 24px;
}

.form-content {
  padding-left: 24px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  
  .label {
    width: 120px;
    text-align: right;
    padding-right: 24px;
    color: #4e5969;
    flex-shrink: 0;
    line-height: 36px;
  }
  
  .value {
    flex: 1;
    line-height: 36px;
  }
}

.required {
  color: #f53f3f;
  margin-right: 4px;
}

.gray-box {
  background-color: #f7f8fa;
  padding: 0 16px;
  border-radius: 2px;
  height: 36px;
  line-height: 36px;
  width: 320px;
  color: #1d2129;
}

.tag-item {
  background-color: #f2f3f5;
  color: #4e5969;
  padding: 2px 12px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 24px;
}

/* 覆盖单选框禁用样式，使其看起来像UI中的展示状态 */
:deep(.custom-radio.is-disabled .el-radio__inner),
:deep(.custom-radio-group .el-radio.is-disabled .el-radio__inner) {
  border-color: #165dff;
  background-color: #fff;
}
:deep(.custom-radio.is-disabled.is-checked .el-radio__inner::after),
:deep(.custom-radio-group .el-radio.is-disabled.is-checked .el-radio__inner::after) {
  background-color: #165dff;
}
:deep(.custom-radio.is-disabled + span.el-radio__label),
:deep(.custom-radio-group .el-radio.is-disabled + span.el-radio__label) {
  color: #1d2129;
}
</style>