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

<template>
  <BasicLayout>
    <view class="qj-detail">
      <!-- 请假信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="applicant-name" v-if="dbFlag">{{ xxtsData.xxzy }}</text>
          <text class="applicant-name" v-else>学生{{ qjData.xsxm }}的请假申请</text>
        </view>
        <view class="divider"></view>
        <view class="card-body">
          <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 pb-5">
            <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>
      <!-- 审批流程 -->
      <LcglSp :yw-id="qjId" yw-type="XS_QJ" />
    </view>
    <template #bottom>
			<YwConfirm :spApi="xsQjSpApi" :stopApi="xsQjStopApi"
			 :transferApi="xsQjTransferApi" :params="spParams" />
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { xsQjFindByIdApi, xsQjSpApi, xsQjStopApi, xsQjTransferApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
import { ref, nextTick } from "vue";
import { xxtsFindByIdApi } from "@/api/base/xxtsApi";
import LcglSp from "@/components/LcglSp/index.vue";
import YwConfirm from "@/pages/components/YwConfirm/index.vue";
import { XkTfPageUtils } from "@/utils/xkTfPageUtils";

const { getJs, loginByOpenId } = useUserStore();
const { getQjData, setXxts, setQjData, getXxts } = useDataStore();

const dbFlag = ref(false);

// 从URL参数获取请假ID
const qjId = computed(() => {
  return getQjData.id || '';
})

const spParams = computed(() => {
  return {
    xxtsId: getXxts.id,
    ywId: qjId.value
  };
});

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

onLoad(async (data: any) => {
  // 从待办过来的，需要从后端获取数据
  if (data && data.from && data.from == "db") {
    dbFlag.value = true;
    
    // 检查登录状态
    const isLoggedIn = await loginByOpenId(data.openId);
    if (!isLoggedIn) {
      console.log("用户未登录，跳过处理");
      return;
    }
    
    try {
      // 优先从后端根据url中的id去查询Xxts
      const xxtsRes = await xxtsFindByIdApi({ id: data.id });
      if (xxtsRes && xxtsRes.result) {
        const xxts = xxtsRes.result;
        xxtsData.value = xxts;
        // 检查待办状态
        if (xxts.dbZt === "B") {
          setQjData({ id: xxts.xxzbId });
          let url = "/pages/base/xs/qj/detail";
          uni.navigateTo({ url });
          return;
        }
        setXxts(xxts);
        
        // 根据主表ID去查询学生请假信息
        const res = await xsQjFindByIdApi({ id: xxts.xxzbId });
        const xsQj = res.result || {};
        if (xsQj.spResult != "A" && getXxts && getXxts.dbZt === "A") {
          uni.reLaunch({ url: '/pages/base/xs/qj/detail' });
          const flag = await XkTfPageUtils.updateXxts();
        } else {
          nextTick(() => {
            setQjData(xsQj);
          });
        }
      }
    } catch (error) {
      console.error("获取待办信息失败", error);
      // 如果获取Xxts失败，回退到原来的逻辑
      const xxtsData = getXxts;
      if (xxtsData && xxtsData.dbZt === "B") {
        setQjData({ id: data.id });
        let url = "/pages/base/xs/qj/detail";
        uni.navigateTo({ url });
        return;
      }
      const res = await xsQjFindByIdApi({ id: data.id });
      nextTick(() => {
        setQjData(res.result);
      });
    }
  } else {
    dbFlag.value = false;
  }
});

</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;
      }
    }
  }
}

.bottom-action {
  padding: 15px;
  margin-top: 20px;

  .back-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #fff;
    color: #333;
    border-radius: 22px;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
}
</style>