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

<template>
  <BasicLayout>
    <!-- 选项卡 -->
    <BasicTabs
      class="leave-tabs"
      ref="tabsRef"
      :list="tabList"
      bar-width="60px"
      scroll-count="4"
      :current="curTabIndex"
      @change="switchTab"
    />
    <view v-if="curTabIndex === 0">
      <!-- 请假信息卡片 -->
      <view class="info-card" v-for="(item, index) in dkList" :key="index">
        <view class="card-header">
          <text class="applicant-name"
            >{{ item.dktime }}（{{ item.xqLabel }}）的{{ item.jcmc }}</text
          >
        </view>
        <view class="divider"></view>
        <view class="card-body">
          <view class="info-row">
            <text class="label">排课名称:</text>
                            <text class="value">{{ item.pkMc }}</text>
          </view>
          <view class="info-row">
            <text class="label">上课时间:</text>
            <text class="value">{{ item.startTime }}-{{ item.endTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">请假老师:</text>
            <view class="value">{{ qjData.jsName }}</view>
          </view>
        </view>
      </view>
    </view>
    <JsQjDetail
      v-show="curTabIndex === 1"
      :qjId="qjId"
      :dbFlag="dbFlag"
      v-if="qjId && qjId.length"
      @loadQjData="loadQjData"
      @loadDkList="loadDkList"
    />
    <!-- 驳回弹窗 -->
    <u-popup
      :show="dlgFlag"
      mode="center"
      :closeOnClickOverlay="false"
      @close="closeDlg"
    >
      <view class="popup-content">
        <view class="popup-title">驳回原因</view>
        <u-input
          v-model="rejectReason"
          type="textarea"
          placeholder="请填写驳回原因"
          :autoHeight="true"
          maxlength="200"
        />
        <view class="popup-actions flex-row justify-end mt-4">
          <u-button class="mr-2" @click="closeDlg">取消</u-button>
          <u-button type="primary" @click="handleReject">确定</u-button>
        </view>
      </view>
    </u-popup>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="divider"></view>
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="驳回"
            class="ml-15 mr-7"
            :plain="true"
            @click="showDlg"
          />
          <u-button
            text="同意"
            class="mr-15 mr-7"
            type="primary"
            @click="submit"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { jsQjDkQrApi } from "@/api/base/jsQjApi";
import { xxtsFindByIdApi } from "@/api/base/server";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { navigateBack } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import JsQjDetail from "./components/jsQjDetail.vue";
const { getJs, loginByOpenId } = useUserStore();
const { setData, getData, setXxts, getXxts } = useDataStore();

const dkList = ref<any>([]);
const qjData = ref<any>({});

const dbFlag = ref(false);

const qjId = ref<string>();
const dkId = ref<string>();

const dlgFlag = ref(false);
const rejectReason = ref("");

const tabList = ref([
  { name: "当前代课", id: "dk-info" },
  { name: "请假信息", id: "qj-info" },
]);

const curTabIndex = ref(1);

const switchTab = (index: number) => {
  curTabIndex.value = index;
};

const loadQjData = (data: any) => {
  qjData.value = data;
};
const loadDkList = (data: any) => {
  // dbGlId是逗号分隔的字符串，需拆分为数组后判断
  if (!getXxts.xxglId) {
    getXxts.xxglId = "";
  }
  const idArr = getXxts.xxglId.split(",");
  dkList.value = [];
  data.map((dk: any) => {
    if (idArr.includes(String(dk.id))) {
      dkList.value.push(dk);
    }
  });
  switchTab(0);
};

const submit = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    qrStatus: 2,
    qrYj: "同意",
  };
  uni.showLoading({ title: "确认代课中..." });
  await jsQjDkQrApi(params);
  uni.hideLoading();
  navigateBack();
};

const showDlg = () => {
  dlgFlag.value = true;
};

const closeDlg = () => {
  dlgFlag.value = false;
};

// 驳回处理
const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: "请填写驳回意见", icon: "none" });
    return;
  }
  const params: any = {
    qjId: qjId.value,
    jsId: getJs.id,
    qrStatus: 1, // 1为拒绝
    qrYj: rejectReason.value,
  };
  uni.showLoading({ title: "正在驳回..." });
  try {
    await jsQjDkQrApi(params);
    uni.hideLoading();
    uni.showToast({ title: "已驳回", icon: "success" });
    closeDlg();
    setTimeout(() => {
      navigateBack();
    }, 500);
  } catch (e) {
    uni.hideLoading();
  }
};

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;
        
        // 检查待办状态
        if (xxts.dbZt === "B") {
          setData({ id: xxts.xxzbId });
          let url = "/pages/view/hr/jsQj/detail";
          uni.navigateTo({ url });
          return;
        }
        setXxts(xxts);
        
        // 使用消息推送中的主表ID和关联表ID
        qjId.value = xxts.xxzbId;
        dkId.value = xxts.xxglId;
      }
    } catch (error) {
      console.error("获取待办信息失败", error);
      // 如果获取Xxts失败，回退到原来的逻辑
      qjId.value = data.id;
      dkId.value = data.dkId;
      const xxtsData = getXxts();
      if (xxtsData && xxtsData.dbZt === "B") {
        setData({ id: data.id });
        let url = "/pages/view/hr/jsQj/detail";
        uni.navigateTo({ url });
        return;
      }
    }
  } else {
    qjId.value = getData.id;
    dbFlag.value = false;
  }
});
</script>

<style scoped>
.popup-content {
  width: 80vw;
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px 16px 16px;
}
.popup-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.popup-actions {
  margin-top: 16px;
}

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

  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 15px;

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

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

  .card-body {
    padding: 15px;

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

      .label {
        font-size: 14px;
        color: #999;
        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: #999;
        flex-shrink: 0;
        margin-right: 8px;
        width: 100%;
        margin-bottom: 5px;
      }

      .value {
        font-size: 14px;
        color: #333;
        flex: 1;
      }
    }
  }
}
</style>