kd-aiot-frontend-hr-H5/src/pages/manage/regular-list.vue

<template>
  <view class="page-no-tab">
    <view class="tabs">
      <view
        v-for="item in REGULARIZATION_STATUS_FILTERS"
        :key="item.value"
        class="tab press"
        :class="{ active: active === item.value }"
        @click="active = item.value"
      >{{ item.label }}</view>
    </view>

    <view class="summary">
      <text>共 {{ records.length }} 名试用期 / 转正人员</text>
      <text class="muted">{{ summaryTip }}</text>
    </view>

    <view v-if="loading" class="empty">加载中…</view>

    <view v-else-if="list.length" class="list">
      <view
        v-for="item in list"
        :key="item.userId"
        class="regular-card card press"
        @click="openItem(item)"
      >
        <view class="card-head">
          <view class="card-icon" :style="{ color: meta.color, background: meta.color + '18' }">正</view>
          <view class="card-title">
            <text>{{ item.name || '—' }}<text class="muted small"> {{ item.employeeNo || '' }}</text></text>
            <text>{{ item.department || '—' }} · {{ item.position || '—' }}</text>
          </view>
          <text class="status-tag" :class="item.statusClass">{{ item.statusLabel }}</text>
        </view>

        <view class="card-meta">
          <view><text>计划转正日期</text><text>{{ item.plannedRegularDate || '—' }}</text></view>
          <view><text>生效日期</text><text>{{ item.effectiveDate || '—' }}</text></view>
        </view>

        <view class="card-foot">
          <text class="type-tag">{{ item.regularizationTypeLabel }}</text>
          <text class="approval muted">{{ item.approvalComment || item.approvalStatusLabel || '未提交' }}</text>
        </view>

        <view class="card-actions">
          <text class="link" @click.stop="openItem(item)">查看</text>
          <text v-if="canApplyRegularization(item)" class="link" @click.stop="openCreate(item)">申请转正</text>
          <text v-if="canWithdrawRegularization(item)" class="link" @click.stop="onWithdraw(item)">撤回</text>
          <text v-if="canCancelRegularization(item)" class="link danger" @click.stop="onCancel(item)">取消</text>
        </view>
      </view>
    </view>

    <view v-else class="empty">
      <view>□</view>
      <text>{{ active === 'all' ? '暂无试用期员工或转正单据' : '该状态下暂无记录' }}</text>
    </view>

    <view class="bottom-action">
      <view class="primary-btn press" @click="onCreate()">发起转正申请</view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useAuthGuard } from '@/hooks/useAuthGuard'
import { applicationTypes } from '@/data/mock'
import { go } from '@/utils/router'
import { getServerConfig } from '@/utils/auth'
import {
  REGULARIZATION_STATUS_FILTERS,
  actCancelRegularization,
  actWithdrawRegularization,
  canApplyRegularization,
  canCancelRegularization,
  canWithdrawRegularization,
  loadRegularizationList,
  matchDisplayStatus,
} from '@/api/regularization'

useAuthGuard()
const meta = applicationTypes.regular || { title: '转正申请', color: '#269a99' }
const active = ref('all')
const records = ref([])
const loading = ref(false)

const list = computed(() =>
  records.value.filter((row) => matchDisplayStatus(row, active.value)),
)

const summaryTip = computed(() =>
  getServerConfig().mode === 'server'
    ? '数据来自 /main/regularizations'
    : '演示数据保存在本机',
)

async function loadList() {
  loading.value = true
  try {
    const page = await loadRegularizationList({ scope: 'all' })
    records.value = page.list || []
  } catch (error) {
    records.value = []
    uni.showToast({ title: error.message || '转正列表加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function openCreate(item) {
  const userId = item?.userId ? `?userId=${item.userId}` : ''
  go(`/pages/manage/regular-create${userId}`)
}

function openItem(item) {
  if (item?.regularizationId) {
    go(`/pages/manage/regular-detail?id=${item.regularizationId}`)
    return
  }
  if (item?.userId) {
    openCreate(item)
    return
  }
  uni.showToast({ title: '未找到该员工的转正单', icon: 'none' })
}

function promptReason(title, required) {
  return new Promise((resolve) => {
    uni.showModal({
      title,
      editable: true,
      placeholderText: required ? '请输入原因（必填）' : '请输入原因（选填）',
      success: (r) => {
        if (!r.confirm) return resolve(null)
        const reason = String(r.content || '').trim()
        if (required && !reason) {
          uni.showToast({ title: '请填写原因', icon: 'none' })
          return resolve(null)
        }
        resolve(reason)
      },
      fail: () => resolve(null),
    })
  })
}

async function exec(title, task) {
  uni.showLoading({ title: '处理中...' })
  try {
    await task()
    uni.hideLoading()
    uni.showToast({ title: `${title}成功`, icon: 'success' })
    await loadList()
  } catch (error) {
    uni.hideLoading()
    uni.showToast({ title: error.message || `${title}失败`, icon: 'none' })
  }
}

async function onWithdraw(item) {
  const reason = await promptReason('撤回转正审批', false)
  if (reason === null) return
  await exec('撤回', () => actWithdrawRegularization(item, reason))
}

async function onCancel(item) {
  const reason = await promptReason('取消转正单', true)
  if (reason === null) return
  await exec('取消', () => actCancelRegularization(item, reason))
}

onShow(loadList)
</script>

<style scoped>
.page-no-tab {
  padding-bottom: 150rpx;
}
.tabs {
  display: flex;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1rpx solid #edf0f2;
}
.tab {
  position: relative;
  flex: 1;
  min-width: 120rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7782;
  font-size: 26rpx;
  white-space: nowrap;
}
.tab.active {
  color: #1677ff;
  font-weight: 500;
}
.tab.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 40rpx;
  height: 5rpx;
  border-radius: 3rpx;
  background: #1677ff;
}
.summary {
  padding: 22rpx 28rpx 6rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
}
.list {
  padding: 18rpx 24rpx;
}
.regular-card {
  margin-bottom: 20rpx;
  padding: 26rpx;
}
.card-head {
  display: flex;
  align-items: center;
}
.card-icon {
  width: 68rpx;
  height: 68rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
  flex-shrink: 0;
}
.card-title {
  flex: 1;
  min-width: 0;
  margin-left: 18rpx;
}
.card-title text {
  display: block;
  font-size: 29rpx;
  font-weight: 600;
}
.card-title text + text {
  margin-top: 8rpx;
  color: #a0a7b0;
  font-size: 21rpx;
  font-weight: 400;
}
.small {
  font-size: 21rpx;
  font-weight: 400;
}
.card-meta {
  display: flex;
  gap: 16rpx;
  margin-top: 18rpx;
}
.card-meta view {
  flex: 1;
  padding: 16rpx 18rpx;
  border-radius: 12rpx;
  background: #fafbfc;
}
.card-meta text {
  display: block;
  font-size: 22rpx;
}
.card-meta text + text {
  margin-top: 8rpx;
  color: #1f2329;
  font-size: 26rpx;
  font-weight: 500;
}
.card-foot {
  margin-top: 16rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.type-tag {
  padding: 6rpx 14rpx;
  border-radius: 999rpx;
  background: #eef6f5;
  color: #269a99;
  font-size: 22rpx;
}
.approval {
  flex: 1;
  min-width: 0;
  font-size: 22rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-actions {
  margin-top: 18rpx;
  padding-top: 18rpx;
  border-top: 1rpx solid #f2f3f5;
  display: flex;
  justify-content: flex-end;
  gap: 30rpx;
}
.link {
  color: #1677ff;
  font-size: 25rpx;
}
.link.danger {
  color: #ee4d4d;
}
.empty {
  padding-top: 180rpx;
  text-align: center;
  color: #a0a7b0;
}
.empty view {
  font-size: 80rpx;
  color: #cfd4da;
}
.empty text {
  display: block;
  margin-top: 20rpx;
}
.bottom-action {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  padding: 16rpx 24rpx;
  background: #fff;
  border-top: 1rpx solid #e8e9eb;
}
.bottom-action .primary-btn {
  height: 84rpx;
  font-size: 30rpx;
}
@media (min-width: 800px) {
  .bottom-action {
    max-width: 520px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>