aiot-app/pages/hr/approval/index.vue

<template>
  <view class="page-no-tab">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="审批中心"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="tabs">
      <view
        v-for="t in tabs"
        :key="t"
        class="tab"
        :class="{ active: tab === t }"
        @click="switchTab(t)"
      >{{ t }}<text v-if="t === tabTodo && pendingCount">{{ pendingCount }}</text></view>
    </view>
    <view v-if="current.length" class="approval-list">
      <view
        v-for="item in current"
        :key="item.id"
        class="approval card press"
        @click="openDetail(item)"
      >
        <view class="approval-top">
          <view class="avatar list-avatar">{{ item.avatar }}</view>
          <view class="who">
            <text><b>{{ item.applicant }}</b> 的{{ item.type }}</text>
            <text>{{ item.time ? item.dept + " · " + item.time : item.dept }}</text>
          </view>
          <text class="status-tag" :class="item.statusClass">{{ item.statusLabel }}</text>
        </view>
        <view class="summary">
          <text>{{ item.summary }}</text>
          <text v-if="item.days" class="summary-extra">{{ item.days }}</text>
        </view>
        <view v-if="!item.result" class="approval-actions">
          <button class="reject" @click.stop="action(item, false)">驳回</button>
          <button class="approve" @click.stop="action(item, true)">同意</button>
        </view>
        <view v-else class="handled">
          {{ item.readonly ? "抄送时间：" : "处理时间：" }}{{ item.result.handledAt || "—" }}
        </view>
      </view>
    </view>
    <view v-else class="empty">
      <view>{{ error ? "!" : "✓" }}</view>
      <text>{{
        error
          ? error
          : loading || !loaded
            ? "加载中…"
            : tab === tabTodo
              ? "所有审批均已处理"
              : "暂无相关审批记录"
      }}</text>
    </view>
  </view>
</template>

<script>
import {
  APPROVAL_TAB_TODO,
  APPROVAL_TABS,
  actApproveApproval,
  actRejectApproval,
  fetchPendingApprovalCount,
  loadApprovalList,
} from "@/api/hr/approval";

export default {
  data() {
    return {
      tabs: APPROVAL_TABS,
      tabTodo: APPROVAL_TAB_TODO,
      tab: APPROVAL_TAB_TODO,
      items: [],
      pendingCount: 0,
      loading: false,
      loaded: false,
      error: "",
    };
  },
  computed: {
    current() {
      return this.items;
    },
  },
  onShow() {
    this.load();
  },
  methods: {
    async load() {
      this.loading = true;
      this.error = "";
      try {
        const res = await loadApprovalList(this.tab);
        this.items = (res && res.list) || [];
      } catch (error) {
        this.items = [];
        this.error = (error && error.message) || "审批列表加载失败";
      } finally {
        this.loading = false;
        this.loaded = true;
      }
      this.refreshBadge();
    },
    async refreshBadge() {
      try {
        this.pendingCount = await fetchPendingApprovalCount();
      } catch (error) {
        this.pendingCount = 0;
      }
    },
    switchTab(next) {
      if (this.tab === next) return;
      this.tab = next;
      this.items = [];
      this.loaded = false;
      this.load();
    },
    openDetail(item) {
      uni.navigateTo({ url: "/pages/hr/approval/detail?id=" + item.id });
    },
    action(item, ok) {
      uni.showModal({
        title: ok ? "确认同意" : "确认驳回",
        content: `确认${ok ? "同意" : "驳回"}${item.applicant}的${item.type}？`,
        success: async (r) => {
          if (!r.confirm) return;
          uni.showLoading({ title: "提交中", mask: true });
          try {
            if (ok) await actApproveApproval(item);
            else await actRejectApproval(item, "信息不完整，请补充");
            uni.hideLoading();
            uni.showToast({ title: ok ? "已同意" : "已驳回", icon: "success" });
            this.load();
          } catch (error) {
            uni.hideLoading();
            uni.showToast({ title: (error && error.message) || "操作失败", icon: "none" });
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/pages/hr/common-style.scss";

.tabs {
  height: 92rpx;
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #edf0f2;
}
.tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7782;
  font-size: 27rpx;
}
.tab.active {
  color: #157a2c;
  font-weight: 500;
}
.tab.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 44rpx;
  height: 5rpx;
  background: #157a2c;
  border-radius: 3rpx;
}
.tab text {
  margin-left: 7rpx;
  min-width: 28rpx;
  height: 28rpx;
  padding: 0 6rpx;
  border-radius: 15rpx;
  background: #ee4d4d;
  color: #fff;
  font-size: 18rpx;
  line-height: 28rpx;
  text-align: center;
}
.approval-list {
  padding: 24rpx;
}
.approval {
  margin-bottom: 20rpx;
  padding: 26rpx;
}
.approval-top {
  display: flex;
  align-items: center;
}
.list-avatar {
  width: 72rpx;
  height: 72rpx;
  font-size: 27rpx;
}
.who {
  flex: 1;
  margin-left: 18rpx;
}
.who text {
  display: block;
  font-size: 27rpx;
}
.who > text + text {
  margin-top: 8rpx;
  color: #a0a7b0;
  font-size: 21rpx;
}
.summary {
  margin: 24rpx 0;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #f7f8fa;
  color: #4b5563;
  font-size: 25rpx;
}
.summary text {
  display: block;
}
.summary .summary-extra {
  margin-top: 10rpx;
  color: #8b939f;
  font-size: 22rpx;
}
.approval-actions {
  display: flex;
  justify-content: flex-end;
}
.approval-actions button {
  width: 140rpx;
  height: 60rpx;
  margin-left: 18rpx;
  border-radius: 9rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
}
.reject {
  border: 1rpx solid #d8dce2;
  color: #555d68;
}
.approve {
  background: #157a2c;
  color: #fff;
}
.handled {
  text-align: right;
  color: #a0a7b0;
  font-size: 21rpx;
}
.empty {
  padding-top: 250rpx;
  text-align: center;
  color: #a0a7b0;
}
.empty view {
  width: 96rpx;
  height: 96rpx;
  margin: auto;
  border-radius: 50%;
  background: #eaf8ef;
  color: #07a44d;
  line-height: 96rpx;
  font-size: 45rpx;
}
.empty text {
  display: block;
  margin-top: 25rpx;
}
</style>