aiot-app/components/hr/ApplyCard.vue

<template>
  <view class="apply-card">
    <view class="apply-body">
      <view class="apply-head">
        <view class="apply-icon" :style="{ color: row.color, background: iconBg }">
          {{ iconText }}
        </view>
        <view class="apply-main">
          <view class="apply-title-row">
            <text class="apply-title">{{ row.title || "申请" }}</text>
            <text class="status-tag" :class="'status-' + statusClass">{{ row.statusLabel || "—" }}</text>
          </view>
          <text class="apply-no">{{ subText }}</text>
        </view>
      </view>

      <!-- 管理端（申请记录）：显示申请人 -->
      <view v-if="admin" class="apply-person">
        <text class="person-name">{{ row.applicantName || "—" }}</text>
        <text v-if="row.applicantJobNumber" class="person-meta">工号 {{ row.applicantJobNumber }}</text>
        <text v-if="row.organizationName" class="person-meta">{{ row.organizationName }}</text>
      </view>

      <!--
        移动端没有详情页的业务（如「劳动合同申请」）：直接在卡片上说清楚去哪看。
        文案口径与 openEssApplication 的 toast 一致（都走 pcOnlyHintOf）。
      -->
      <view v-if="pcHint" class="pc-hint">
        <text class="pc-hint-mark">!</text>
        <text class="pc-hint-text">{{ pcHint }}</text>
      </view>

      <view v-if="row.maskedSummary" class="apply-summary">{{ row.maskedSummary }}</view>

      <view v-if="row.createdAt || row.currentNode" class="apply-foot">
        <text class="foot-time">{{ row.createdAt || "" }}</text>
        <text v-if="row.currentNode" class="foot-node">当前节点 · {{ row.currentNode }}</text>
      </view>
    </view>

    <!--
      动作栏：
        申请详情 = 主操作（实心渐变绿）→ 按业务类型跳对应详情页；
        审批流程 = 次操作（描边绿）→ 公共流程详情页。
      两个按钮的样式**固定不变**：同一个动作在任何卡片上都得长得一样，
      不能因为「这张卡没有申请详情」就把审批流程改成实心（那样看起来是另一个操作）。
      「移动端看不了」的业务（如劳动合同）没有详情页，直接不渲染「申请详情」按钮。
    -->
    <view class="apply-actions">
      <view v-if="canOpenDetail" class="apply-btn apply-btn--primary press" @click="$emit('detail')">
        申请详情
      </view>
      <view class="apply-btn apply-btn--ghost press" @click="$emit('flow')">审批流程</view>
    </view>
  </view>
</template>

<script>
/**
 * 申请卡片（「我的申请」pages/hr/apply/list 与「申请记录」pages/hr/apply/record 共用）
 *
 * 为什么抽成组件：两个页面只差一个 admin（是否显示申请人），卡片模板与样式完全一致，
 * 放两份必然漂移。样式只在本组件里写一次。
 *
 * 事件：
 *   detail —— 申请详情（页面调用 openEssApplication，按 businessType 跳对应详情）
 *   flow   —— 审批流程（跳公共页 /pages/home/wt/components/detail?processInstanceId=）
 */
import { businessMetaOf, pcOnlyHintOf } from "@/api/hr/essApplication";

export default {
  name: "ApplyCard",
  props: {
    /** adaptEssApplication 的产物 */
    row: { type: Object, default: () => ({}) },
    /** 管理端（申请记录）：卡片上额外显示申请人 */
    admin: { type: Boolean, default: false },
  },
  emits: ["detail", "flow"],
  computed: {
    iconText() {
      return this.row.icon || (businessMetaOf(this.row.businessType) || {}).icon || "申";
    },
    /** 图标底色：取业务主题色 + 8 位 hex 的 10% 透明度 */
    iconBg() {
      const color = String(this.row.color || "#157a2c");
      return /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}1a` : "rgba(21, 122, 44, 0.1)";
    },
    statusClass() {
      return this.row.statusClass || "pending";
    },
    /** 副信息：优先单号，没有单号时退回时间 */
    subText() {
      return this.row.applicationNo || this.row.createdAt || "—";
    },
    /** 只有「移动端看不了」的业务类型才提示（supported 由 essApplication 判定） */
    pcHint() {
      return this.row.supported ? "" : pcOnlyHintOf(this.row);
    },
    /** 有详情页才给「申请详情」按钮：没有详情页时点了也只能弹提示 */
    canOpenDetail() {
      return Boolean(this.row.supported);
    },
  },
};
</script>

<style scoped lang="scss">
/* .status-tag / .press 来自 HR 公共样式；组件内部要用就得自己引一次
   （scoped 样式不会作用到子组件内部的元素，父页面引了这里也用不到） */
@import "@/pages/hr/common-style.scss";

.apply-card {
  margin-bottom: 24rpx;
  background: #fff;
  border: 1rpx solid #eef0f3;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(31, 35, 41, 0.05);
  /* 让动作栏的浅底不溢出圆角 */
  overflow: hidden;
}

.apply-body {
  padding: 28rpx 28rpx 22rpx;
}

.apply-head {
  display: flex;
  align-items: flex-start;
}
.apply-icon {
  flex: none;
  width: 76rpx;
  height: 76rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
}
.apply-main {
  flex: 1;
  min-width: 0;
  margin-left: 22rpx;
  padding-top: 2rpx;
}
.apply-title-row {
  display: flex;
  align-items: center;
}
.apply-title {
  flex: 1;
  min-width: 0;
  color: #1f2329;
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 0.5rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.apply-title-row .status-tag {
  flex: none;
  margin-left: 16rpx;
}
.apply-no {
  display: block;
  margin-top: 10rpx;
  color: #a3a9b3;
  font-size: 22rpx;
  letter-spacing: 0.5rpx;
}

/* 管理端申请人 */
.apply-person {
  margin-top: 22rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 23rpx;
  color: #4b5563;
}
.person-name {
  font-weight: 500;
}
.person-meta {
  margin-left: 18rpx;
  color: #8b939f;
}

/* 移动端看不了的业务：卡片内直接说明去处 */
.pc-hint {
  margin-top: 22rpx;
  padding: 16rpx 20rpx;
  border-radius: 14rpx;
  background: #fff8e8;
  display: flex;
  align-items: center;
}
.pc-hint-mark {
  flex: none;
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
  border-radius: 50%;
  background: #f0a020;
  color: #fff;
  font-size: 22rpx;
  font-weight: 700;
  text-align: center;
  line-height: 32rpx;
}
.pc-hint-text {
  flex: 1;
  min-width: 0;
  color: #a3690d;
  font-size: 23rpx;
  line-height: 1.5;
}

.apply-summary {
  margin-top: 22rpx;
  padding: 20rpx;
  border-radius: 14rpx;
  background: #f7f8fa;
  color: #555d68;
  font-size: 25rpx;
  line-height: 1.5;
}

.apply-foot {
  margin-top: 22rpx;
  padding-top: 20rpx;
  border-top: 1rpx dashed #eef0f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9aa1ab;
  font-size: 22rpx;
}
.foot-time {
  letter-spacing: 0.5rpx;
}
.foot-node {
  color: #157a2c;
}

/* 动作栏：浅底 + 上分隔线，按钮右对齐，主次分明 */
.apply-actions {
  padding: 18rpx 28rpx 22rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fbfcfd;
  border-top: 1rpx solid #f2f4f7;
}
.apply-btn {
  min-width: 152rpx;
  height: 62rpx;
  padding: 0 30rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  font-weight: 500;
  box-sizing: border-box;
}
.apply-btn + .apply-btn {
  margin-left: 18rpx;
}
/* 主操作：实心渐变绿（与 HR 模块标题竖条同一组绿色） */
.apply-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #1aa53c, #157a2c);
  box-shadow: 0 4rpx 12rpx rgba(21, 122, 44, 0.2);
}
/* 次操作：白底绿描边 */
.apply-btn--ghost {
  color: #157a2c;
  background: #fff;
  border: 1rpx solid #cfe6d5;
}
</style>