zhxy-jsd/src/pages/view/routine/jc/components/dmXs.vue

<template>
  <view class="section">
    <view class="section-title">
      学生状态列表
      <text class="refresh-btn" @click="loadXsList">刷新</text>
    </view>
    
    <!-- 统计信息 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-number">{{ rsData.zrs }}</text>
        <text class="stat-label">总人数</text>
      </view>
      <view class="stat-item">
        <text class="stat-number unregistered">{{ rsData.bmRs }}</text>
        <text class="stat-label">报名就餐</text>
      </view>
      <view class="stat-item">
        <text class="stat-number unregistered">{{ rsData.unBmRs }}</text>
        <text class="stat-label">未报名就餐</text>
      </view>
      <view class="stat-item">
        <text class="stat-number normal">{{ hqZtSl('A') }}</text>
        <text class="stat-label">正常</text>
      </view>
      <view class="stat-item">
        <text class="stat-number leave">{{ hqZtSl('B') }}</text>
        <text class="stat-label">请假</text>
      </view>
      <view class="stat-item">
        <text class="stat-number absent">{{ hqZtSl('C') }}</text>
        <text class="stat-label">缺勤</text>
      </view>
    </view>

    <!-- 学生列表 - 改为card形式 -->
    <view class="xs-list">
      <!-- 已缴费学生列表 -->
      <view v-if="bmXsList.length > 0" class="xs-section">
        <view class="section-subtitle">已报名学生 ({{ bmXsList.length }}人)</view>
        <view class="xs-grid">
          <view
            v-for="xs in bmXsList"
            :key="xs.id"
            class="xs-item bg-white r-md p-12"
          >
            <view class="flex-row items-center">
              <view class="avatar-container mr-8">
                <image
                  class="xs-avatar"
                  :src="imagUrl(xs.xstx) || '/static/images/default-avatar.png'"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="flex-1 overflow-hidden">
                <view class="xs-name mb-8">
                  <text class="font-14 cor-333">{{ xs.xm }}</text>
                </view>
                <view class="flex-row">
                  <!-- 已缴费学生可以切换状态 -->
                  <view
                    class="status-tag clickable"
                    :class="getStatusClass(xs.jcZt)"
                    @click="dkZtXz(xs)"
                  >
                    {{ hqZtWz(xs.jcZt) }}
                    <text class="status-arrow">▼</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 未缴费/未报名学生列表 -->
      <view v-if="unBmXsList.length > 0" class="xs-section">
        <view class="section-subtitle">未报名学生 ({{ unBmXsList.length }}人)</view>
        <view class="xs-grid">
          <view
            v-for="xs in unBmXsList"
            :key="xs.id"
            class="xs-item bg-white r-md p-12"
          >
            <view class="flex-row items-center">
              <view class="avatar-container mr-8">
                <image
                  class="xs-avatar"
                  :src="imagUrl(xs.xstx) || '/static/images/default-avatar.png'"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="flex-1 overflow-hidden">
                <view class="xs-name mb-8">
                  <text class="font-12 cor-333">{{ xs.xm }}</text>
                </view>
                <view class="flex-row">
                  <!-- 未缴费/未报名学生只显示状态，不能切换 -->
                  <view
                    class="status-tag readonly"
                    :class="getStatusClass(xs.jcZt)"
                  >
                    {{ hqZtWz(xs.jcZt) }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="bmXsList.length === 0 && unBmXsList.length === 0" class="empty-tip">
        暂无学生数据
      </view>
    </view>

    <!-- 状态选择弹窗 -->
    <u-picker
      :defaultIndex="mqXz" 
      :show="ztVisible"
      :columns="[ztList]"
      @confirm="onChangeZt"
      @cancel="ztVisible = false"
    ></u-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { findPageByNoJc } from "@/api/base/xsApi";
import { jcQdFindPageApi } from '@/api/base/jcApi'
import { imagUrl } from "@/utils";
import { sortChinese } from "@/utils/pinyinUtil"

// 接收外部传入属性
const props = withDefaults(defineProps<{
  bzId?: string
  njId?: string
  bjId?: string
}>(), {
  bzId: '',
  njId: '',
  bjId: '',
});

// 人数
const rsData = ref({
  zrs: 0,
  bmRs: 0,
  unBmRs: 0
});

const bmXsList = ref<any>([]);
const unBmXsList = ref<any>([]);

const jzZt = ref(false) // 加载状态

// 状态选择相关
const ztVisible = ref(false) // 状态选择可见
const ztList = ref<Array<{ text: string, value: string }>>([
  { text: '正常', value: 'A' },
  { text: '请假', value: 'B' },
  { text: '缺勤', value: 'C' }
])
const dqXs = ref<any>(null) // 当前学生
const mqXz = ref<any>([0]) // 默认选择

// 加载学生列表
const loadXsList = async () => {
  if (!props.bzId || !props.bjId) return
  
  jzZt.value = true
  try {
    const params = {
      bzId: props.bzId,
      bjId: props.bjId,
      njId: props.njId,
      pageNo: 1,
      rows: 1000
    }
    const resQd = await jcQdFindPageApi(params);
    bmXsList.value = (resQd.rows || []).map((item: any) => {
      return {
        ...item,
        jcZt: 'A',
        xm: (item.xsxm || item.xm || '').trim()
      }
    });
    bmXsList.value = sortChinese(bmXsList.value, 'xm');
    const resUn = await findPageByNoJc(params);
    unBmXsList.value = (resUn.rows || []).map((item: any) => {
      return {
        ...item,
        jcZt: 'E',
        xm: (item.xsxm || item.xm || '').trim()
      }
    });
    unBmXsList.value = sortChinese(unBmXsList.value, 'xm');
    rsData.value = {
      zrs: (resQd.records || 0) + (resUn.records || 0),
      bmRs: (resQd.records || 0),
      unBmRs: (resUn.records || 0),
    };
  } catch (error) {
    console.error('加载学生列表失败:', error)
    uni.showToast({
      title: '加载学生列表失败',
      icon: 'none'
    })
  } finally {
    jzZt.value = false
  }
}

// 监听班级ID变化
watch(() => props.bjId, () => {
  if (props.bzId && props.bjId) {
    loadXsList()
  }
}, { immediate: true })

const hqZtWz = (status: string) => {
  switch (status) {
    case 'A':
      return '正常'
    case 'B':
      return '请假'
    case 'C':
      return '缺勤'
    case 'D':
      return '未缴费'
    case 'E':
      return '未报名'
    default:
      return '正常'
  }
}

const hqZtSl = (status: string) => {
  return bmXsList.value.filter((s:any) => s.jcZt === status).length
}

// 获取状态对应的样式类
const getStatusClass = (status: string) => {
  switch (status) {
    case 'A':
      return 'status-normal'
    case 'B':
      return 'status-leave'
    case 'C':
      return 'status-absent'
    case 'D':
      return 'status-unpaid'
    case 'E':
      return 'status-unregistered'
    default:
      return 'status-normal'
  }
}

// 打开状态选择器
const dkZtXz = (xs: any) => {
  dqXs.value = xs;
  // 找到当前状态在选项中的索引
  const currentIndex = ztList.value.findIndex(option => option.value === xs.jcZt)
  mqXz.value = [currentIndex >= 0 ? currentIndex : 0]
  ztVisible.value = true
}

// 确认选择状态
const onChangeZt = (e: any) => {
  if (dqXs.value && e.value && e.value[0]) {
    const selectedStatus = ztList.value.find(
      (option: any) => option.value === e.value[0].value
    )
    if (selectedStatus) {
      // 更新当前学生状态
      dqXs.value.jcZt = selectedStatus.value
    }
  }
  ztVisible.value = false
}

const getDmXsList = () => {
  let retList: any = [];
  for(let qd of bmXsList.value) {
    retList.push({
      xsId: qd.xsId,
      xsXm: qd.xm, // 传入学生姓名
      jcZt: qd.jcZt,
      jcQdId: qd.id,
      jcBzId: qd.bzId,
      jzId: qd.jzId,
      tx: qd.xstx // 传入学生头像
    });
  }
  for(let xs of unBmXsList.value) {
    retList.push({
      xsId: xs.id,
      xsXm: xs.xm, // 传入学生姓名
      jcZt: xs.jcZt,
      jcQdId: '',
      jcBzId: props.bzId,
      jzId: '',
      tx: xs.xstx // 传入学生头像
    });
  }
  return retList;
}

defineExpose({
  loadXsList,
  getDmXsList
})
</script>

<style lang="scss" scoped>
.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .section-subtitle {
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
    margin: 20rpx 0 15rpx 0;
    padding: 10rpx 0;
    border-bottom: 1px solid #f0f0f0;
  }
}

.refresh-btn {
  font-size: 24rpx;
  color: #007aff;
  font-weight: normal;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  flex-wrap: wrap;
  gap: 60rpx;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120rpx;
    
    .stat-number {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
      
      &.normal {
        color: #52c41a;
      }
      
      &.leave {
        color: #faad14;
      }
      
      &.absent {
        color: #ff4d4f;
      }
      
      &.unpaid {
        color: #722ed1;
      }
      
      &.unregistered {
        color: #eb2f96;
      }
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.xs-section {
  margin-bottom: 30rpx;
}

.xs-list {
  margin-bottom: 30rpx;
}

.xs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  
  .xs-item {
    position: relative;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    
    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    }
    
    .avatar-container {
      width: 92rpx;
      height: 92rpx;
      border-radius: 50%;
      padding: 6rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
      
      .xs-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #f5f5f5;
      }
    }
  }
}

.status-tag {
  font-size: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  gap: 4rpx;
  
  &.clickable {
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }
  
  &.readonly {
    opacity: 0.8;
    cursor: not-allowed;
  }
  
  .status-arrow {
    font-size: 16rpx;
    opacity: 0.8;
  }
}

.status-normal {
  background-color: #e6f7ff;
  color: #52c41a;
}

.status-leave {
  background-color: #fff7e6;
  color: #faad14;
}

.status-absent {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.status-unpaid {
  background-color: #f9f0ff;
  color: #722ed1;
}

.status-unregistered {
  background-color: #fff0f6;
  color: #eb2f96;
}

.xs-type {
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120rpx;
}

.cor-success {
  color: #52c41a;
}

.cor-warning {
  color: #faad14;
}

.cor-666 {
  color: #666;
}

.cor-333 {
  color: #333;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.overflow-hidden {
  overflow: hidden;
}

.mr-8 {
  margin-right: 16rpx;
}

.mb-8 {
  margin-bottom: 16rpx;
}

.font-14 {
  font-size: 28rpx;
}

.font-12 {
  font-size: 24rpx;
}

.font-bold {
  font-weight: bold;
}

.bg-white {
  background-color: #fff;
}

.r-md {
  border-radius: 16rpx;
}

.p-12 {
  padding: 24rpx;
}

.empty-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  padding: 60rpx 0;
}
</style>