zhxy-jsd/src/pages/base/xs/qj/detail.vue

<template>
  <BasicLayout>
    <view class="qj-detail">
      <!-- 请假信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="applicant-name">{{ qjData.xsxm }}提交的学生请假</text>
        </view>
        <view class="divider"></view>
        <view class="card-body">
          <view class="info-row">
            <text class="label">学生姓名:</text>
            <text class="value">{{ qjData.xsxm }}</text>
          </view>
          <view class="info-row">
            <text class="label">家长姓名:</text>
            <text class="value">{{ qjData.jzxm }}</text>
          </view>
          <view class="info-row">
            <text class="label">请假类型:</text>
            <text class="value">{{ qjData.qjlx }}</text>
          </view>
          <view class="info-row">
            <text class="label">开始时间:</text>
            <text class="value">{{ qjData.qjkstime }}</text>
          </view>
          <view class="info-row">
            <text class="label">结束时间:</text>
            <text class="value">{{ qjData.qjjstime }}</text>
          </view>
          <view class="info-row">
            <text class="label">请假时长:</text>
            <text class="value">{{ qjData.qjsc }}</text>
          </view>
          <view class="info-row">
            <text class="label">是否离校:</text>
            <text class="value">{{ qjData.sflx === 1 ? '是' : '否' }}</text>
          </view>
          <view class="info-column">
            <text class="label">请假事由:</text>
            <text class="value">{{ qjData.qjsy }}</text>
          </view>
          <view class="info-row">
            <text class="label">申请时间:</text>
            <text class="value">{{ qjData.createdTime }}</text>
          </view>
        </view>
      </view>

      <!-- 审批流程 -->
      <ProgressList :qjId="qjId" />
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="返回首页"
            class="ml-15 mr-7"
            :plain="true"
            @click="goHome"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useDataStore } from "@/store/modules/data";
import { getXsQjDetailApi } from "@/api/base/server";
import ProgressList from "./components/progressList.vue";

const { getData } = useDataStore();

// 从URL参数获取请假ID
const qjId = getData.id || '';

// 请假基础数据
const qjData = ref<any>({});

// 获取请假详情
const loadQjDetail = async () => {
  if (!qjId) {
    console.error('请假ID不能为空');
    return;
  }
  
  try {
    const res = await getXsQjDetailApi(qjId);
    if (res.resultCode === 1 && res.result) {
      qjData.value = res.result;
    }
  } catch (error) {
    console.error('获取请假详情失败:', error);
  }
};

const goHome = () => {
  uni.reLaunch({ url: '/pages/index/index' });
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 页面加载时获取数据
onMounted(() => {
  loadQjDetail();
});
</script>

<style lang="scss" scoped>
.qj-detail {
  background-color: #f5f7fa;
}

.info-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;

    .applicant-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .divider {
    height: 1px;
    background-color: #eee;
    margin-bottom: 15px;
  }

  .card-body {
    padding: 15px;

    .info-row {
      display: flex;
      margin-bottom: 10px;

      .label {
        font-size: 14px;
        color: #bbb;
        width: 70px;
        flex-shrink: 0;
        margin-right: 8px;
      }

      .value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
    .info-column {
      display: flex;
      flex-direction: column;

      .label {
        font-size: 14px;
        color: #bbb;
        flex-shrink: 0;
        margin-right: 8px;
        width: 100%;
        margin-bottom: 5px;
      }
             
      .value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
  }
}
</style>