From 5d77454c4d796b5ddb5ed8edefdbfa064b340c2b Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Fri, 5 Sep 2025 17:46:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=B7=E5=81=87=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/hr/jsQj/components/jsQjDetail.vue    | 288 ------------------
 .../view/hr/jsQj/components/jsQjDetailDk.vue  | 211 +++++++++++++
 .../hr/jsQj/components/jsQjDetailInfo.vue     | 167 ++++++++++
 src/pages/view/hr/jsQj/detail.vue             |  96 +++++-
 src/pages/view/hr/jsQj/dkQr.vue               |  72 +++--
 src/pages/view/hr/jsQj/jwcQr.vue              | 228 ++++++++++----
 src/pages/view/hr/jsQj/sp.vue                 |  97 ++++--
 7 files changed, 760 insertions(+), 399 deletions(-)
 delete mode 100644 src/pages/view/hr/jsQj/components/jsQjDetail.vue
 create mode 100644 src/pages/view/hr/jsQj/components/jsQjDetailDk.vue
 create mode 100644 src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue

diff --git a/src/pages/view/hr/jsQj/components/jsQjDetail.vue b/src/pages/view/hr/jsQj/components/jsQjDetail.vue
deleted file mode 100644
index fd3b9d4..0000000
--- a/src/pages/view/hr/jsQj/components/jsQjDetail.vue
+++ /dev/null
@@ -1,288 +0,0 @@
-<template>
-  <view class="qj-detail back-f8f8f8">
-    <view class="pt-15">
-      <BasicTabs 
-        class="detail-tabs"
-        :list="tabList" 
-        bar-width="60px" 
-        scroll-count="4"
-        :current="curTabIndex" 
-        @change="switchTab"
-      />
-    </view>
-
-    <!-- 请假信息 -->
-    <view v-show="curTabIndex === 0">
-      <view class="info-card">
-        <view class="card-header">
-          <text class="applicant-name" v-if="dbFlag">{{ qjData.xxzy }}</text>
-          <text class="applicant-name" v-else>教师{{ qjData.jsName }}的请假申请</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-column"><text class="label">请假事由:</text><text class="value">{{ qjData.qjsy }}</text></view>
-          <view class="info-row" style="margin-bottom: 0; margin-top: 10px">
-            <text class="label">代课方式:</text>
-            <text class="value">{{ dkfsText }}</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 代课信息 -->
-    <view v-show="showDkTab && curTabIndex === 1">
-      <view v-if="qjData && qjData.dkfs == 2" class="p-15">
-        无需代课
-      </view>
-      <view v-else>
-        <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">{{ item.jsName }}</view>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 审批流程 -->
-    <view v-show="curTabIndex === 2">
-      <ProgressList :qjId="qjData.id" />
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { findDkPageApi, findQjById } from "@/api/base/jsQjApi";
-import { useDataStore } from "@/store/modules/data";
-import ProgressList from "./progressList.vue";
-import { ref, computed, watch, onMounted } from "vue";
-const { getXxts } = useDataStore();
-
-// 接收外部传入属性
-const props = withDefaults(
-  defineProps<{
-    qjId?: string;
-    dbFlag?: boolean;
-  }>(),
-  {
-    qjId: "",
-    dbFlag: false,
-  }
-);
-
-// 定义emit返回上级
-const emit = defineEmits(["loadQjData", "loadDkList"]);
-
-// 在数据加载完成后通知父组件
-const notifyParentLoaded = () => {
-  emit("loadQjData", qjData.value);
-  emit("loadDkList", dkList.value);
-};
-
-const qjData = ref<any>({});
-const tabList = ref([{ name: "请假信息", id: "tab-qj" }, { name: "审批流程", id: "tab-sp" }]);
-const showDkTab = ref(false);
-const curTabIndex = ref(0);
-const switchTab = (index: number) => {
-  curTabIndex.value = index;
-};
-
-const wdNameList = ref<string[]>([
-  "周一",
-  "周二",
-  "周三",
-  "周四",
-  "周五",
-  "周六",
-  "周日",
-]);
-
-const dkfsList = ref<any>([
-  { value: 0, text: "自行协调" },
-  { value: 1, text: "教科处协调" },
-  { value: 2, text: "无须代课" },
-]);
-
-const jsTypeMc: any = {
-  ZAM: "早自习",
-  AM: "上午",
-  PM: "下午",
-};
-
-const dkList = ref<any>([]);
-
-const dkfsText = computed(() => {
-  if (!qjData.value) { return ''; }
-  let dkfs = typeof qjData.value.dkfs === "string" ? parseInt(qjData.value.dkfs) : qjData.value.dkfs || 0;
-  return dkfsList.value[dkfs].text;
-});
-
-watch(
-  () => props.qjId,
-  (newVal, oldVal) => {
-    // 添加回调函数处理逻辑
-    console.log("qjId changed:", newVal, oldVal);
-    if (newVal != oldVal && newVal) {
-      init();
-    }
-  }
-);
-
-const init = async () => {
-  {
-    const res = await findQjById({ id: props.qjId });
-    qjData.value = (res && res.result) ? res.result : {};
-  }
-  // 根据是否需要代课，动态设置Tab
-  showDkTab.value = !!(qjData.value && qjData.value.dkfs != 2);
-  if (showDkTab.value) {
-    // 如果需要代课，确保代课Tab存在并排在中间
-    const hasDk = tabList.value.findIndex((t:any) => t.id === 'tab-dk') > -1;
-    if (!hasDk) {
-      tabList.value = [{ name: "请假信息", id: "tab-qj" }, { name: "代课信息", id: "tab-dk" }, { name: "审批流程", id: "tab-sp" }];
-    }
-  } else {
-    // 无需代课，去掉代课Tab
-    tabList.value = [{ name: "请假信息", id: "tab-qj" }, { name: "审批流程", id: "tab-sp" }];
-  }
-  // 查询代课列表（仅在需要代课时）
-  if (!showDkTab.value) {
-    // 无需代课则直接通知父级
-    if (props.dbFlag) {
-      qjData.value.xxzy = getXxts.xxzy;
-    }
-    notifyParentLoaded();
-    return;
-  }
-  {
-    const res: any = await findDkPageApi({
-      qjId: props.qjId,
-      page: 1,
-      rows: 1000,
-    });
-    console.log(res);
-    const rows = (res && (res.rows || res.result || res.data)) || [];
-    dkList.value = rows.map((item: any) => {
-      item.dktime = item.dktime.split(" ")[0];
-      item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
-      const xq: number = item.xq - 1;
-      item.xqLabel = wdNameList.value[xq];
-      return item;
-    });
-  }
-  if (props.dbFlag) {
-    qjData.value.xxzy = getXxts.xxzy;
-  }
-  notifyParentLoaded();
-};
-
-// 初始化
-onMounted(async () => {
-  await init();
-});
-
-const getQjData = () => {
-  return qjData.value;
-};
-
-const getDkList = () => {
-  return dkList.value;
-};
-
-// 暴露接口给外部调用
-defineExpose({
-  getQjData,
-  getDkList,
-});
-</script>
-
-<style lang="scss" scoped>
-.qj-detail {
-  background-color: #f5f7fa;
-}
-
-.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>
diff --git a/src/pages/view/hr/jsQj/components/jsQjDetailDk.vue b/src/pages/view/hr/jsQj/components/jsQjDetailDk.vue
new file mode 100644
index 0000000..2c978c6
--- /dev/null
+++ b/src/pages/view/hr/jsQj/components/jsQjDetailDk.vue
@@ -0,0 +1,211 @@
+<template>
+  <view class="dk-info">
+    <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>
+        <text v-if="item.jsId === jsId" class="assigned-tag">我的代课</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">{{ item.jsName }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findDkPageApi } from "@/api/base/jsQjApi";
+import { useUserStore } from "@/store/modules/user";
+import { ref, computed, watch, onMounted } from "vue";
+
+const { getJs } = useUserStore();
+
+// 接收外部传入属性
+const props = withDefaults(
+  defineProps<{
+    qjId?: string;
+  }>(),
+  {
+    qjId: ""
+  }
+);
+
+// 定义emit返回上级
+const emit = defineEmits(["loadDkList"]);
+
+// 在数据加载完成后通知父组件
+const notifyParentLoaded = () => {
+  emit("loadDkList", dkList.value);
+};
+
+const jsId = computed(() => getJs.id);
+
+const wdNameList = ref<string[]>([
+  "周一",
+  "周二",
+  "周三",
+  "周四",
+  "周五",
+  "周六",
+  "周日",
+]);
+
+const jsTypeMc: any = {
+  ZAM: "早自习",
+  AM: "上午",
+  PM: "下午",
+};
+
+const dkList = ref<any>([]);
+
+watch(
+  () => props.qjId,
+  (newVal, oldVal) => {
+    // 添加回调函数处理逻辑
+    console.log("qjId changed:", newVal, oldVal);
+    if (newVal != oldVal && newVal) {
+      init();
+    }
+  }
+);
+
+const init = async () => {
+  const res: any = await findDkPageApi({
+    qjId: props.qjId,
+    page: 1,
+    rows: 1000,
+  });
+  const rows = (res && (res.rows || res.result || res.data)) || [];
+  dkList.value = rows.map((item: any) => {
+    item.dktime = item.dktime.split(" ")[0];
+    item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
+    const xq: number = item.xq - 1;
+    item.xqLabel = wdNameList.value[xq];
+    return item;
+  });
+  // 排序，将当前教师作为代课教师的代课数据，排在前面，并且添加一个标记
+  dkList.value = dkList.value.sort((a: any, b: any) => {
+    if (a.jsId === jsId.value) {
+      return -1;
+    } else if (b.jsId === jsId.value) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  notifyParentLoaded();
+};
+
+// 初始化
+onMounted(async () => {
+  await init();
+});
+
+const getDkList = () => {
+  return dkList.value;
+};
+
+// 暴露接口给外部调用
+defineExpose({
+  getDkList,
+});
+</script>
+
+<style lang="scss" scoped>
+.dk-info {
+  background-color: #f5f7fa;
+}
+
+.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;
+    position: relative;
+
+    .applicant-name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+    
+    /* 添加指派标记样式 */
+    .assigned-tag {
+      background-color: var(--primary-color, #1890ff);;
+      color: white;
+      font-size: 12px;
+      padding: 5px 10px;
+      border-bottom-left-radius: 8px;
+      border-top-right-radius: 8px;
+      font-weight: normal;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  .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>
diff --git a/src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue b/src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue
new file mode 100644
index 0000000..e4a1eeb
--- /dev/null
+++ b/src/pages/view/hr/jsQj/components/jsQjDetailInfo.vue
@@ -0,0 +1,167 @@
+<template>
+  <view class="info-card">
+    <view class="card-header">
+      <text class="applicant-name" v-if="dbFlag">{{ qjData.xxzy }}</text>
+      <text class="applicant-name" v-else>教师{{ qjData.jsName }}的请假申请</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-column"><text class="label">请假事由:</text><text class="value">{{ qjData.qjsy }}</text></view>
+      <view class="info-row" style="margin-bottom: 0; margin-top: 10px">
+        <text class="label">代课方式:</text>
+        <text class="value">{{ dkfsText }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from "@/api/base/jsQjApi";
+import { useDataStore } from "@/store/modules/data";
+import { ref, computed, watch, onMounted } from "vue";
+
+const { getXxts } = useDataStore();
+
+// 接收外部传入属性
+const props = withDefaults(
+  defineProps<{
+    qjId?: string;
+    dbFlag?: boolean
+  }>(),
+  {
+    qjId: "",
+    dbFlag: false
+  }
+);
+
+// 定义emit返回上级
+const emit = defineEmits(["loadQjData"]);
+
+// 在数据加载完成后通知父组件
+const notifyParentLoaded = () => {
+  emit("loadQjData", qjData.value);
+};
+
+const qjData = ref<any>({});
+
+const dkfsList = ref<any>([
+  { value: 0, text: "自行协调" },
+  { value: 1, text: "教科处协调" },
+  { value: 2, text: "无须代课" },
+]);
+
+const dkfsText = computed(() => {
+  if (!qjData.value) { return ''; }
+  let dkfs = typeof qjData.value.dkfs === "string" ? parseInt(qjData.value.dkfs) : qjData.value.dkfs || 0;
+  return dkfsList.value[dkfs].text;
+});
+
+watch(
+  () => props.qjId,
+  (newVal, oldVal) => {
+    // 添加回调函数处理逻辑
+    console.log("qjId changed:", newVal, oldVal);
+    if (newVal != oldVal && newVal) {
+      init();
+    }
+  }
+);
+
+const init = async () => {
+  const res = await findQjById({ id: props.qjId });
+  qjData.value = (res && res.result) ? res.result : {};
+  if (props.dbFlag) {
+    qjData.value.xxzy = getXxts.xxzy;
+  }
+  // 无需代课则直接通知父级
+  notifyParentLoaded();
+};
+
+// 初始化
+onMounted(async () => {
+  await init();
+});
+
+const getQjData = () => {
+  return qjData.value;
+};
+
+// 暴露接口给外部调用
+defineExpose({
+  getQjData,
+});
+</script>
+
+<style lang="scss" scoped>
+.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>
\ No newline at end of file
diff --git a/src/pages/view/hr/jsQj/detail.vue b/src/pages/view/hr/jsQj/detail.vue
index db4f365..d12316d 100644
--- a/src/pages/view/hr/jsQj/detail.vue
+++ b/src/pages/view/hr/jsQj/detail.vue
@@ -1,16 +1,104 @@
 <template>
   <BasicLayout>
-    <JsQjDetail :qjId="qjId" :dbFlag="dbFlag" />
+    <template #top>
+      <view>
+        <BasicTabs 
+          class="detail-tabs"
+          :list="tabList" 
+          bar-width="60px" 
+          scroll-count="4"
+          :current="curTabIndex" 
+          @change="switchTab"
+        />
+      </view>
+    </template>
+    <view class="qj-detail">
+      <!-- 请假信息 -->
+      <view v-show="curTabIndex === 0">
+        <JsQjDetailInfo
+          :qjId="qjId"
+          :dbFlag="dbFlag"
+          @loadQjData="handleQjDataLoaded"
+        />
+      </view>
+
+      <!-- 代课信息 -->
+      <view v-show="showDkTab && curTabIndex === 1">
+        <JsQjDetailDk
+          :qjId="qjId"
+          @loadDkList="handleDkListLoaded"
+        />
+      </view>
+
+      <!-- 审批流程 -->
+      <view v-show="curTabIndex === 2">
+        <ProgressList :qjId="qjId" />
+      </view>
+    </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 JsQjDetail from "./components/jsQjDetail.vue";
 import { useDataStore } from "@/store/modules/data";
-const { getData } = useDataStore();
+import { ref, computed } from "vue";
+import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
+import JsQjDetailDk from "./components/jsQjDetailDk.vue";
+import ProgressList from "./components/progressList.vue";
+
+const { getData, setData } = useDataStore();
+
+const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
+const curTabIndex = ref(0);
 
 const dbFlag = ref(false);
-
 const qjId = computed(() => getData.id);
+const showDkTab = ref(false);
+
+// 构建Tab列表
+const rebuildTabList = (showDk: boolean) => {
+  // 构建Tab列表
+  tabList.value = [
+    { name: "请假信息", id: "tab-qj" },
+  ];
+  if (showDk) {
+    tabList.value.push({ name: "代课信息", id: "tab-dk" });
+  }
+  tabList.value.push({ name: "审批流程", id: "tab-sp" });
+};
+
+// 切换Tab
+const switchTab = (index: number) => {
+  curTabIndex.value = index;
+};
+
+const handleQjDataLoaded = (data: any) => {
+  setData(data);
+  showDkTab.value = !!(data && data.dkfs != 2);
+  rebuildTabList(showDkTab.value);
+};
+
+const handleDkListLoaded = (list: any[]) => {
+  // 代课明细数据已由JsQjDetail组件处理
+};
+
+const goHome = () => {
+  uni.reLaunch({
+    url: '/pages/base/service/index',
+  });
+};
 
 </script>
+
+<style lang="scss" scoped>
+.qj-detail {
+  background-color: #f5f7fa;
+}
+
+</style>
diff --git a/src/pages/view/hr/jsQj/dkQr.vue b/src/pages/view/hr/jsQj/dkQr.vue
index 335f32e..b97dfc2 100644
--- a/src/pages/view/hr/jsQj/dkQr.vue
+++ b/src/pages/view/hr/jsQj/dkQr.vue
@@ -76,13 +76,17 @@
 <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 } = useUserStore();
+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>({});
@@ -91,7 +95,7 @@ const dkData = ref<any>({});
 // 加载请假信息
 const loadQjData = async () => {
   try {
-    const result = await findQjById({ id: qjId.value });
+    const result: any = await findQjById({ id: qjId.value });
     if (result.code === 1) {
       qjData.value = result.data;
     }
@@ -103,7 +107,7 @@ const loadQjData = async () => {
 // 加载代课信息
 const loadDkData = async () => {
   try {
-    const result = await findDkByIdApi({ id: dkId.value });
+    const result: any = await findDkByIdApi({ id: dkId.value });
     if (result.code === 1) {
       dkData.value = result.data;
     }
@@ -160,20 +164,54 @@ const handleReject = async () => {
   });
 };
 
-onLoad((options) => {
-  if (options.qjId) {
-    qjId.value = options.qjId;
-  }
-  if (options.dkId) {
-    dkId.value = options.dkId;
-  }
-  
-  // 加载数据
-  if (qjId.value) {
-    loadQjData();
-  }
-  if (dkId.value) {
-    loadDkData();
+
+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>
diff --git a/src/pages/view/hr/jsQj/jwcQr.vue b/src/pages/view/hr/jsQj/jwcQr.vue
index 217bbb3..c146a13 100644
--- a/src/pages/view/hr/jsQj/jwcQr.vue
+++ b/src/pages/view/hr/jsQj/jwcQr.vue
@@ -1,6 +1,48 @@
 <template>
   <BasicLayout>
-    <JsQjDetail :qjId="qjId" :dbFlag="dbFlag" v-if="qjId && qjId.length" />
+    <template #top>
+      <view>
+        <BasicTabs 
+          class="detail-tabs"
+          :list="tabList" 
+          bar-width="60px" 
+          scroll-count="4"
+          :current="curTabIndex" 
+          @change="switchTab"
+        />
+      </view>
+    </template>
+    <view class="qj-detail">
+      <!-- 请假信息 -->
+      <view v-show="curTabIndex === 0">
+        <JsQjDetailInfo
+          :qjId="qjId"
+          :dbFlag="dbFlag"
+          @loadQjData="handleQjDataLoaded"
+        />
+      </view>
+
+      <!-- 代课信息 -->
+      <view v-show="showDkTab && curTabIndex === 1">
+        <JsQjDetailDk
+          :qjId="qjId"
+          @loadDkList="handleDkListLoaded"
+        />
+      </view>
+
+      <!-- 审批流程 -->
+      <view v-show="curTabIndex === 2">
+        <ProgressList :qjId="qjId" />
+      </view>
+    </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="showDlg" />
+          <u-button text="同意" class="mr-15 mr-7" type="primary" @click="submit" />
+        </view>
+      </view>
+    </template>
     <!-- 驳回弹窗 -->
     <u-popup
       :show="dlgFlag"
@@ -23,43 +65,70 @@
         </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 { onLoad } from "@dcloudio/uni-app";
+import { navigateBack } from "@/utils/uniapp";
 import { jsQjJwcQrApi } 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";
-import JsQjDetail from "./components/jsQjDetail.vue";
+import { useDataStore } from "@/store/modules/data";
+import { ref, computed } from "vue";
+import { xxtsFindByIdApi } from "@/api/base/server";
+import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
+import JsQjDetailDk from "./components/jsQjDetailDk.vue";
+import ProgressList from "./components/progressList.vue";
 
-const { getJs } = useUserStore();
+const { getJs, loginByOpenId } = useUserStore();
+const { getData, setXxts, setData, getXxts } = useDataStore();
+
+const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
+const curTabIndex = ref(0);
 
 const dbFlag = ref(false);
-const qjId = ref<string>();
+const qjId = ref('');
+const showDkTab = ref(false);
+
 const dlgFlag = ref(false);
 const rejectReason = ref("");
 
+
+// 构建Tab列表
+const rebuildTabList = (showDk: boolean) => {
+  // 构建Tab列表
+  tabList.value = [
+    { name: "请假信息", id: "tab-qj" },
+  ];
+  if (showDk) {
+    tabList.value.push({ name: "代课信息", id: "tab-dk" });
+  }
+  tabList.value.push({ name: "审批流程", id: "tab-sp" });
+};
+
+// 切换Tab
+const switchTab = (index: number) => {
+  curTabIndex.value = index;
+};
+
+const handleQjDataLoaded = (data: any) => {
+  setData(data);
+  showDkTab.value = !!(data && data.dkfs != 2);
+  rebuildTabList(showDkTab.value);
+};
+
+const handleDkListLoaded = (list: any[]) => {
+  // 代课明细数据已由JsQjDetail组件处理
+};
+
+const showDlg = () => {
+  dlgFlag.value = true;
+};
+
+const closeDlg = () => {
+  dlgFlag.value = false;
+};
+
 const submit = async () => {
   const params = {
     qjId: qjId.value,
@@ -73,14 +142,6 @@ const submit = async () => {
   navigateBack();
 };
 
-const showDlg = () => {
-  dlgFlag.value = true;
-};
-
-const closeDlg = () => {
-  dlgFlag.value = false;
-};
-
 // 驳回处理
 const handleReject = async () => {
   if (!rejectReason.value.trim()) {
@@ -100,38 +161,87 @@ const handleReject = async () => {
   navigateBack();
 };
 
-onLoad((options) => {
-  if (options.qjId) {
-    qjId.value = options.qjId;
-  }
-  if (options.dbFlag) {
-    dbFlag.value = options.dbFlag === "true";
+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;
+      }
+    } 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>
-.popup-content {
-  background-color: white;
+.qj-detail {
+  background-color: #f5f7fa;
+}
+
+.info-card {
+  margin: 15px;
+  background-color: #fff;
   border-radius: 8px;
-  padding: 20px;
-  width: 300px;
-}
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  text-align: center;
-}
+  .card-header {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
 
-.popup-actions {
-  margin-top: 20px;
-}
+    .applicant-name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
 
-.divider {
-  height: 1px;
-  background-color: #eee;
-  margin: 0 15px;
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+
+  .card-body {
+    padding: 15px;
+  }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/pages/view/hr/jsQj/sp.vue b/src/pages/view/hr/jsQj/sp.vue
index 0fa5789..968a104 100644
--- a/src/pages/view/hr/jsQj/sp.vue
+++ b/src/pages/view/hr/jsQj/sp.vue
@@ -1,14 +1,39 @@
 <template>
   <BasicLayout>
+    <template #top>
+      <view>
+        <BasicTabs 
+          class="detail-tabs"
+          :list="tabList" 
+          bar-width="60px" 
+          scroll-count="4"
+          :current="curTabIndex" 
+          @change="switchTab"
+        />
+      </view>
+    </template>
     <view class="qj-detail">
-      <!-- 使用公共组件展示请假详情 -->
-      <JsQjDetail 
-        :qjId="qjId" 
-        :dbFlag="dbFlag" 
-        @loadQjData="handleQjDataLoaded"
-        @loadDkList="handleDkListLoaded"
-      />
+      <!-- 请假信息 -->
+      <view v-show="curTabIndex === 0">
+        <JsQjDetailInfo
+          :qjId="qjId"
+          :dbFlag="dbFlag"
+          @loadQjData="handleQjDataLoaded"
+        />
+      </view>
 
+      <!-- 代课信息 -->
+      <view v-show="showDkTab && curTabIndex === 1">
+        <JsQjDetailDk
+          :qjId="qjId"
+          @loadDkList="handleDkListLoaded"
+        />
+      </view>
+
+      <!-- 审批流程 -->
+      <view v-show="curTabIndex === 2">
+        <ProgressList :qjId="qjId" />
+      </view>
     </view>
     <template #bottom>
       <view class="white-bg-color py-5">
@@ -16,18 +41,8 @@
           <BasicForm @register="register" />
         </view>
         <view class="flex-row items-center pb-10 pt-5">
-          <u-button
-            text="取消"
-            class="ml-15 mr-7"
-            :plain="true"
-            @click="navigateBack"
-          />
-          <u-button
-            text="提交"
-            class="mr-15 mr-7"
-            type="primary"
-            @click="submit"
-          />
+          <u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack" />
+          <u-button text="提交" class="mr-15 mr-7" type="primary" @click="submit" />
         </view>
       </view>
     </template>
@@ -43,16 +58,19 @@ import { useUserStore } from "@/store/modules/user";
 import { useDataStore } from "@/store/modules/data";
 import { ref, computed } from "vue";
 import { xxtsFindByIdApi } from "@/api/base/server";
-import JsQjDetail from "./components/jsQjDetail.vue";
+import JsQjDetailInfo from "./components/jsQjDetailInfo.vue";
+import JsQjDetailDk from "./components/jsQjDetailDk.vue";
+import ProgressList from "./components/progressList.vue";
 
 const { getJs, loginByOpenId } = useUserStore();
 const { getData, setXxts, setData, getXxts } = useDataStore();
 
+const tabList = ref<any>([{ name: "请假信息", id: "tab-qj" }]);
+const curTabIndex = ref(0);
+
 const dbFlag = ref(false);
 const qjId = ref('');
-
-// 请假基础数据
-const qjData = computed(() => getData || {});
+const showDkTab = ref(false);
 
 const [register, { getValue }] = useForm({
   schema: [
@@ -87,10 +105,27 @@ const [register, { getValue }] = useForm({
   ],
 });
 
- 
+// 构建Tab列表
+const rebuildTabList = (showDk: boolean) => {
+  // 构建Tab列表
+  tabList.value = [
+    { name: "请假信息", id: "tab-qj" },
+  ];
+  if (showDk) {
+    tabList.value.push({ name: "代课信息", id: "tab-dk" });
+  }
+  tabList.value.push({ name: "审批流程", id: "tab-sp" });
+};
+
+// 切换Tab
+const switchTab = (index: number) => {
+  curTabIndex.value = index;
+};
 
 const handleQjDataLoaded = (data: any) => {
   setData(data);
+  showDkTab.value = !!(data && data.dkfs != 2);
+  rebuildTabList(showDkTab.value);
 };
 
 const handleDkListLoaded = (list: any[]) => {
@@ -114,23 +149,23 @@ const submit = async () => {
       spStatus: formData.spStatus,
       spYj: formData.spYj,
     };
-    
+
     uni.showLoading({
       title: "提交中...",
     });
-    
+
     const res = await jsQjSpApi(params);
-    
+
     uni.hideLoading();
     uni.showToast({
       title: '审批提交成功',
       icon: 'success'
     });
-    
+
     setTimeout(() => {
       navigateBack();
     }, 1500);
-    
+
   } catch (error) {
     uni.hideLoading();
     uni.showToast({
@@ -146,14 +181,14 @@ 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 });