zhxy-jsd/src/pages/view/hr/jsQj/dkQr.vue

<template>
  <BasicLayout>
    <view class="p-15">
      <!-- 请假信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="applicant-name">教师{{ qjData.jsName }}的请假申请</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">请假老师:</text>
            <text class="value">{{ qjData.jsName }}</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 }} 至 {{ 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.qjsy }}</text>
          </view>
        </view>
      </view>

      <!-- 代课信息 -->
      <view class="dk-info-card">
        <view class="card-header">
          <text class="card-title">代课信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">代课时间:</text>
            <text class="value">{{ dkData.dktime }}</text>
          </view>
          <view class="info-row">
            <text class="label">课程名称:</text>
            <text class="value">{{ dkData.kcmc }}</text>
          </view>
          <view class="info-row">
            <text class="label">班级:</text>
            <text class="value">{{ dkData.bjmc }}</text>
          </view>
        </view>
      </view>

      <!-- 确认操作 -->
      <view class="action-section">
        <view class="action-title">确认代课</view>
        <view class="action-buttons">
          <u-button 
            text="拒绝代课" 
            type="error" 
            @click="handleReject"
            class="action-btn"
          />
          <u-button 
            text="确认代课" 
            type="primary" 
            @click="handleConfirm"
            class="action-btn"
          />
        </view>
      </view>
    </view>
  </BasicLayout>
</template>

<script setup lang="ts">
import { jsQjDkQrApi } from "@/api/base/jsQjApi";
import { findQjById, findDkByIdApi } from "@/api/base/jsQjApi";
import { xxtsFindByIdApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
import { navigateBack } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { getJs, loginByOpenId } = useUserStore();
const { getData, setXxts, setData, getXxts } = useDataStore();

const dbFlag = ref(false);
const qjId = ref<string>();
const dkId = ref<string>();
const qjData = ref<any>({});
const dkData = ref<any>({});

// 加载请假信息
const loadQjData = async () => {
  try {
    const result: any = await findQjById({ id: qjId.value });
    if (result.code === 1) {
      qjData.value = result.data;
    }
  } catch (error) {
    console.error('获取请假信息失败:', error);
  }
};

// 加载代课信息
const loadDkData = async () => {
  try {
    const result: any = await findDkByIdApi({ id: dkId.value });
    if (result.code === 1) {
      dkData.value = result.data;
    }
  } catch (error) {
    console.error('获取代课信息失败:', error);
  }
};

// 确认代课
const handleConfirm = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    qrStatus: "1", // 1表示确认
    remark: "确认代课"
  };
  
  uni.showLoading({ title: "确认中..." });
  try {
    await jsQjDkQrApi(params);
    uni.showToast({ title: "确认成功", icon: "success" });
    navigateBack();
  } catch (error) {
    uni.showToast({ title: "确认失败", icon: "error" });
  }
  uni.hideLoading();
};

// 拒绝代课
const handleReject = async () => {
  uni.showModal({
    title: "确认拒绝",
    content: "确定要拒绝代课吗？",
    success: async (res) => {
      if (res.confirm) {
        const params = {
          qjId: qjId.value,
          jsId: getJs.id,
          qrStatus: "2", // 2表示拒绝
          remark: "拒绝代课"
        };
        
        uni.showLoading({ title: "处理中..." });
        try {
          await jsQjDkQrApi(params);
          uni.showToast({ title: "已拒绝", icon: "success" });
          navigateBack();
        } catch (error) {
          uni.showToast({ title: "操作失败", icon: "error" });
        }
        uni.hideLoading();
      }
    }
  });
};


onLoad(async (data?: any) => {
  // 从待办过来的，需要从后端获取数据
  console.log(data);
  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;
        // 检查待办状态
        if (xxts.dbZt === "B") {
          setData({ id: xxts.xxzbId });
          let url = "/pages/view/hr/jsQj/detail";
          uni.navigateTo({ url });
          return;
        }
        setXxts(xxts);
        qjId.value = xxts.xxzbId;
        dkId.value = xxts.xxglId
        loadQjData();
        loadDkData();
      }
    } catch (error) {
      console.error("获取待办信息失败", error);
      // 如果获取Xxts失败，回退到原来的逻辑
      const xxtsData = getXxts;
      if (xxtsData && xxtsData.dbZt === "B") {
        setData({ id: data.id });
        let url = "/pages/view/hr/jsQj/detail";
        uni.navigateTo({ url });
        return;
      }
      qjId.value = data.id;
    }
  } else {
    dbFlag.value = false;
    // 直接加载请假详情
    qjId.value = getData.id || '';
  }
});
</script>

<style lang="scss" scoped>
.info-card,
.dk-info-card {
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  
  .applicant-name,
  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

.card-content {
  padding: 15px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .label {
    width: 80px;
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
  }
  
  .value {
    flex: 1;
    font-size: 14px;
    color: #333;
  }
}

.action-section {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .action-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .action-buttons {
    display: flex;
    gap: 15px;
    
    .action-btn {
      flex: 1;
    }
  }
}
</style>