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 { useUserStore } from "@/store/modules/user";
import { navigateBack } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { getJs } = useUserStore();

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

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

// 加载代课信息
const loadDkData = async () => {
  try {
    const result = 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((options) => {
  if (options.qjId) {
    qjId.value = options.qjId;
  }
  if (options.dkId) {
    dkId.value = options.dkId;
  }
  
  // 加载数据
  if (qjId.value) {
    loadQjData();
  }
  if (dkId.value) {
    loadDkData();
  }
});
</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>