diff --git a/src/api/base/jsQjApi.ts b/src/api/base/jsQjApi.ts
index 6925e76..812a113 100644
--- a/src/api/base/jsQjApi.ts
+++ b/src/api/base/jsQjApi.ts
@@ -64,7 +64,7 @@ export const findDkByIdApi = async (params: any) => {
  * 查询代课信息
  */
 export const findDkPageApi = async (params: any) => {
-  return await get("/api/jsQjDk/findById", params);
+  return await get("/api/jsQjDk/findPage", params);
 };
 
 /**
diff --git a/src/pages/base/xs/qj/sp.vue b/src/pages/base/xs/qj/sp.vue
index da94295..22d75c2 100644
--- a/src/pages/base/xs/qj/sp.vue
+++ b/src/pages/base/xs/qj/sp.vue
@@ -5,7 +5,7 @@
       <view class="info-card">
         <view class="card-header">
           <text class="applicant-name" v-if="dbFlag">{{ dbData.dbZy }}</text>
-          <text class="applicant-name" v-if="dbFlag">学生{{ qjData.xsxm }}的请假申请</text>
+          <text class="applicant-name" v-else>学生{{ qjData.xsxm }}的请假申请</text>
         </view>
         <view class="divider"></view>
         <view class="card-body">
diff --git a/src/pages/components/JsPicker/index.vue b/src/pages/components/JsPicker/index.vue
index dffbf83..033c829 100644
--- a/src/pages/components/JsPicker/index.vue
+++ b/src/pages/components/JsPicker/index.vue
@@ -37,11 +37,11 @@ const { getAllJs } = useCommonStore();
 
 // 接收外部传入属性
 const props = withDefaults(defineProps<{
-  defualtValue: any,
-  parentData: any,
-  multiple: boolean,
+  defualtValue?: any,
+  parentData?: any,
+  multiple?: boolean,
   // 排除id列表
-  excludeIds: any
+  excludeIds?: any
 }>(), {
   defualtValue: null,
   parentData: null,
diff --git a/src/pages/view/hr/jsQj/components/jsQjDetail.vue b/src/pages/view/hr/jsQj/components/jsQjDetail.vue
new file mode 100644
index 0000000..8974e83
--- /dev/null
+++ b/src/pages/view/hr/jsQj/components/jsQjDetail.vue
@@ -0,0 +1,226 @@
+<template>
+  <view class="qj-detail back-f8f8f8">
+    <view class="pt-15">
+      <view class="dk-title pl-15 pr-15">
+        <BasicTitle line title="请假信息" :isBorder="false" />
+      </view>
+      <!-- 请假信息卡片 -->
+      <view class="info-card">
+        <view class="card-header">
+          <text class="applicant-name" v-if="dbFlag">{{ qjData.dbZy }}</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">{{ dkfsList[qjData.dkfs] ? dkfsList[qjData.dkfs].text : "" }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="" v-if="qjData.dkfs != 2">
+      <view class="dk-title pl-15 pr-15">
+        <BasicTitle line title="代课明细" :isBorder="false" />
+      </view>
+      
+      <view >
+        <view class="dk-card">
+          <view class="card-body">
+          </view>
+        </view>
+      </view>
+      <!-- 请假信息卡片 -->
+      <view class="info-card" v-for="(item, index) in dkList" :key="index">
+        <view class="card-header">
+          <text class="applicant-name">{{ item.dktime }}（{{ wdNameList[item.xq - 1] }}）的{{ item.jcmc }}</text>
+        </view>
+        <view class="divider"></view>
+        <view class="card-body">
+          <view class="info-row">
+            <text class="label">排课名称:</text>
+            <text class="value">{{ item.pkName }}</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 class="">
+      <view class="dk-title pl-15 pr-15">
+        <BasicTitle line title="请假流程" :isBorder="false" />
+      </view>
+      <ProgressList :procInstId="qjData.procInstId" />
+    </view>
+
+  </view>
+</template>
+
+<script setup lang="ts">
+import ProgressList from "./progressList.vue"
+import { findQjById, findDkPageApi } from "@/api/base/jsQjApi";
+import { showToast } from "@/utils/uniapp";
+import { useDicStore } from "@/store/modules/dic";
+import { update } from "lodash";
+const { findByPid } = useDicStore();
+
+// 接收外部传入属性
+const props = withDefaults(defineProps<{
+  qjId?: string,
+  dbFlag?: boolean
+}>(), {
+  qjId: "",
+  dbFlag: false
+});
+
+const qjData = ref<any>({});
+
+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>([]);
+
+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.result;
+  }
+  // 无需代课，跳过
+  if (qjData.value.dkfs == 2) {
+    return;
+  }
+  {
+    const res:any = await findDkPageApi({ qjId: props.qjId, page: 1, rows: 1000 });
+    dkList.value = res.rows.map((item: any) => {
+      item.dktime = item.dktime.split(" ")[0];
+      item.jcmc = jsTypeMc[item.jcType] + "第" + item.jc + "节";
+      return item;
+    });
+  }
+};
+
+// 初始化
+onMounted(async () => { 
+  await init();
+});
+</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/jsQjEdit.vue b/src/pages/view/hr/jsQj/components/jsQjEdit.vue
index 3037565..82c8166 100644
--- a/src/pages/view/hr/jsQj/components/jsQjEdit.vue
+++ b/src/pages/view/hr/jsQj/components/jsQjEdit.vue
@@ -215,7 +215,7 @@ const submit = async () => {
         newItem.jsId = item.dkJsId;
         newItem.jsName = item.dkJsName;
         newItem.pkkbId = item.id;
-        newItem.dktime = item.dktime + " " + item.startTime + ":00";
+        newItem.dktime = item.dktime + " 00:00:00";
         newItem.id = "";
         newItem.qjId = "";
         return newItem;
@@ -229,6 +229,7 @@ const submit = async () => {
   } else {
     params.id = null;
     params.jsId = getJs.id;
+    params.jsName = getJs.jsxm;
   }
   uni.showLoading({ title: "提交中..." });
   await jsQjSqApi(params).then(() => {
diff --git a/src/pages/view/hr/jsQj/components/jsQjList.vue b/src/pages/view/hr/jsQj/components/jsQjList.vue
index 5419c99..005d45f 100644
--- a/src/pages/view/hr/jsQj/components/jsQjList.vue
+++ b/src/pages/view/hr/jsQj/components/jsQjList.vue
@@ -4,7 +4,7 @@
       <template v-slot="{ data, index }">
         <view class="leave-card" @click="goToDetail(data)">
           <view class="card-header">
-            <text class="applicant-name">{{ data.jsxm }}的请假申请</text>
+            <text class="applicant-name">{{ data.jsName }}的请假申请</text>
           </view>
           <view class="card-body">
             <view class="info-row">
diff --git a/src/pages/view/hr/jsQj/components/progressList.vue b/src/pages/view/hr/jsQj/components/progressList.vue
index e6f32d9..44f1682 100644
--- a/src/pages/view/hr/jsQj/components/progressList.vue
+++ b/src/pages/view/hr/jsQj/components/progressList.vue
@@ -2,7 +2,7 @@
   <view class="approval-progress">
     <view class="progress-title">
       <!-- <image src="/static/icons/approval.png" class="title-icon"></image> -->
-      <text class="applicant-name">审批进度</text>
+      <text class="applicant-name">请假流程进度</text>
     </view>
     <view class="divider"></view>
     <view class="progress-list">
@@ -10,7 +10,7 @@
         <view class="progress-item-row">
           <view class="item-avatar">
             <image
-              :src="task.avatar || '/static/base/home/11222.png'"
+              :src="task.avatar || '/static/base/home/user-5-line.png'"
               class="w-full h-full"
             ></image>
           </view>
diff --git a/src/pages/view/hr/jsQj/detail.vue b/src/pages/view/hr/jsQj/detail.vue
index 4d6c751..cc6b0ed 100644
--- a/src/pages/view/hr/jsQj/detail.vue
+++ b/src/pages/view/hr/jsQj/detail.vue
@@ -1,183 +1,16 @@
 <template>
   <BasicLayout>
-    <view class="qj-detail">
-      <!-- 请假信息卡片 -->
-      <view class="info-card">
-        <view class="card-header">
-          <text class="applicant-name" v-if="dbFlag">{{ dbData.dbZy }}</text>
-          <text class="applicant-name" v-if="dbFlag">学生{{ 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">
-            <text class="label">请假事由:</text>
-            <text class="value">{{ qjData.qjsy }}</text>
-          </view>
-        </view>
-      </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="navigateBack"
-          />
-          <u-button
-            text="提交"
-            class="mr-15 mr-7"
-            type="primary"
-            @click="submit"
-          />
-        </view>
-      </view>
-    </template>
+    <JsQjDetail :qjId="qjId" :dbFlag="false" />
   </BasicLayout>
 </template>
 
 <script setup lang="ts">
-import { onLoad } from "@dcloudio/uni-app";
-import { navigateBack } from "@/utils/uniapp";
-import { findQjById,  } from "@/api/base/jsQjApi";
+import JsQjDetail from "./components/jsQjDetail.vue";
 import { useDataStore } from "@/store/modules/data";
-const { getData, getDb, setData } = useDataStore();
+const { getData } = useDataStore();
 
 const dbFlag = ref(false);
 
-// 请假基础数据
-const qjData = computed(() => getData || {});
-const dbData = computed(() => getDb || {});
-
-const submit = async () => { 
-  navigateBack();
-};
-
-onLoad(async (data: any) => {
-  // 从待办过来的，需要从后端获取数据
-  if (data && data.from && data.from == "db") {
-    dbFlag.value = true;
-    const res = await findQjById({ id: data.id });
-    nextTick(() => {
-      setData(res.result);
-    });
-  } else {
-    dbFlag.value = false;
-  }
-});
+const qjId = computed(() => getData.id);
 
 </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>