diff --git a/src/api/base/qjApi.ts b/src/api/base/qjApi.ts
new file mode 100644
index 0000000..814a67f
--- /dev/null
+++ b/src/api/base/qjApi.ts
@@ -0,0 +1,39 @@
+// 参数接口
+
+// 响应接口
+import { get, post } from "@/utils/request";
+
+/**
+ * 发起请假
+ */
+export const addQjApi = async (params: any) => {
+  return await post("/api/jsQj/save", params);
+};
+
+/**
+ * 查询请假信息
+ */
+export const findQjById = async (params: any) => {
+  return await get("/api/jsQj/findById", params);
+};
+
+/**
+ * 查询代课信息
+ */
+export const findDkById = async (params: any) => {
+  return await get("/api/qjDk/findById", params);
+};
+
+/**
+ * 查询请假列表
+ */
+export const findQjListApi = async (params: any) => {
+  return await get("/api/jsQj/findPage", params);
+};
+
+/**
+ * 查询请假流程处理历史
+ */
+export const getQjActivitiHistoryApi = async (params: any) => {
+  return await get("/activiti/history/historicFlow", params);
+};
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 92f06fd..bbc55e7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -252,7 +252,7 @@
       }
     },
     {
-      "path": "pages/view/hr/leaveApplication/index",
+      "path": "pages/view/hr/qj/index",
       "style": {
         "navigationBarTitleText": "请假申请",
         "enablePullDownRefresh": false
@@ -273,12 +273,47 @@
       }
     },
     {
-      "path": "pages/view/hr/leaveApplication/detail",
+      "path": "pages/view/hr/qj/detail",
       "style": {
         "navigationBarTitleText": "请假详情",
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/view/hr/qj/sp",
+      "style": {
+        "navigationBarTitleText": "请假审批",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/view/hr/qj/cxTj",
+      "style": {
+        "navigationBarTitleText": "请假重新提交",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/view/hr/qj/jwcQr",
+      "style": {
+        "navigationBarTitleText": "请假代课教务处确认",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/view/hr/qj/jwcXt",
+      "style": {
+        "navigationBarTitleText": "请假代课教务处协调",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/view/hr/qj/dkQr",
+      "style": {
+        "navigationBarTitleText": "请假代课教师确认",
+        "enablePullDownRefresh": false
+      }
+    },
     {
       "path": "pages/view/hr/teacherProfile/education",
       "style": {
diff --git a/src/pages/view/hr/leaveApplication/index.vue b/src/pages/view/hr/leaveApplication/index.vue
deleted file mode 100644
index 42eca6e..0000000
--- a/src/pages/view/hr/leaveApplication/index.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <view class="leave-application-page">
-    <BasicListLayout @register="register">
-      <template v-slot="{ data, index }">
-        <view class="leave-card" @click="viewDetails(data)">
-          <view class="card-header">
-            <text class="applicant-name"
-              >{{ data.applicantName }}的请假申请</text
-            >
-          </view>
-          <view class="card-body">
-            <view class="info-row">
-              <text class="label">请假事由:</text>
-              <text class="value">{{ data.reason }}</text>
-            </view>
-            <view class="info-row">
-              <text class="label">开始时间:</text>
-              <text class="value">{{ data.startTime }}</text>
-            </view>
-            <view class="info-row">
-              <text class="label">结束时间:</text>
-              <text class="value">{{ data.endTime }}</text>
-            </view>
-          </view>
-          <view class="card-footer">
-            <text>查看详情</text>
-            <text class="arrow">
-              <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
-            </text>
-          </view>
-        </view>
-      </template>
-      <template #bottom>
-        <view class="button" @click="viewDetails(null)"> <!-- Pass null for new application -->
-          <text>新增请假</text>
-        </view>
-      </template>
-    </BasicListLayout>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
-
-// 模拟请假申请数据
-const mockLeaveData = [
-  {
-    id: "leave001",
-    applicantName: "施瑞辰",
-    reason: "家里有事要处理",
-    startTime: "2025-02-17 08:00",
-    endTime: "2025-02-17 18:00",
-  },
-  {
-    id: "leave002",
-    applicantName: "李晓明",
-    reason: "身体不适，需要就医",
-    startTime: "2025-02-18 09:00",
-    endTime: "2025-02-18 17:00",
-  },
-  // 可以添加更多模拟数据
-];
-
-// 模拟 API，实际应替换为真实 API 调用
-const testList = async (param?: any): Promise<{ message: string, resultCode: number, rows: any[] }> => {
-  console.log("Simulating API call for leave list with params:", param);
-  // 这里简单返回所有数据，真实场景需要分页
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({ message: "测试", resultCode: 1, rows: mockLeaveData });
-    }, 500);
-  });
-};
-
-const [register, { reload }] = useLayout({
-  api: testList,
-  componentProps: {},
-});
-
-// 查看详情或新增处理函数
-const viewDetails = (item: any | null) => {
-  let url = '/pages/view/hr/leaveApplication/detail'; // 使用新路径
-  if (item && item.id) {
-    console.log('View details for:', item);
-    url += `?id=${item.id}`; // 查看详情时传递 ID
-  } else {
-    console.log('Navigating to create new leave application.');
-    // 新增时不传递 ID
-  }
-  uni.navigateTo({ url });
-};
-</script>
-
-<style lang="scss" scoped>
-.leave-application-page {
-}
-
-.leave-card {
-  background-color: #ffffff;
-  border-radius: 8px;
-  margin-bottom: 15px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-}
-
-.card-header {
-  padding: 12px 15px;
-  border-bottom: 1px solid #f0f0f0;
-  .applicant-name {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-}
-
-.card-body {
-  padding: 15px;
-  .info-row {
-    display: flex;
-    margin-bottom: 10px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    .label {
-      font-size: 14px;
-      color: #666;
-      width: 70px;
-      flex-shrink: 0;
-      margin-right: 8px;
-    }
-    .value {
-      font-size: 14px;
-      color: #333;
-      flex: 1;
-    }
-  }
-}
-
-.card-footer {
-  padding: 12px 15px;
-  border-top: 1px solid #f0f0f0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-  color: #888;
-  cursor: pointer;
-
-  .arrow {
-    font-size: 16px;
-    color: #ccc;
-  }
-}
-
-// 新增按钮样式示例 (可根据 BasicListLayout 的 bottom 插槽调整)
-.button {
-    padding: 10px 15px;
-    background-color: #447ade;
-    color: white;
-    text-align: center;
-    border-radius: 5px;
-    margin: 10px 15px; // 示例外边距
-    font-size: 16px;
-}
-</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/components/jsQjEdit.vue b/src/pages/view/hr/qj/components/jsQjEdit.vue
new file mode 100644
index 0000000..a4b7ab8
--- /dev/null
+++ b/src/pages/view/hr/qj/components/jsQjEdit.vue
@@ -0,0 +1,266 @@
+<template>
+  <BasicLayout :fixed="false">
+    <view class="p-15">
+      <BasicForm @register="register">
+        <template #dkmx>
+          <view class="back-f8f8f8">
+            <view class="flex-row items-center justify-between py-15 global-bg-color">
+              <view>
+                <BasicTitle line title="代课明细" :isBorder="false" />
+              </view>
+              <view @click="addDk">
+                <BasicIcon type="icon-tianjia" size="25" />
+              </view>
+            </view>
+            <view v-if="dkList.xl.length > 0">
+              <template v-for="(item, index) in dkList.xl" :key="index">
+                <view class="po-re mb-15">
+                  <BasicForm v-model="item.value" :schema="schema" :formsProps="{ labelWidth: 100 }" />
+                  <view @click="delDk(index, item.value)" class="delete-icon">
+                    <BasicIcon type="clear" size="30" />
+                  </view>
+                </view>
+              </template>
+            </view>
+            <view v-else class="p-15 flex-row-center color-9 font-13 white-bg-color">暂无数据</view>
+          </view>
+        </template>
+      </BasicForm>
+    </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>
+  </BasicLayout>
+</template>
+
+<script setup lang="ts">
+import { navigateBack } from "@/utils/uniapp";
+import { useForm } from "@/components/BasicForm/hooks/useForm";
+import { addQjApi } from "@/api/base/qjApi";
+import { showToast } from "@/utils/uniapp";
+import dayjs from "dayjs";
+import { cloneDeep } from "lodash";
+import { useUserStore } from "@/store/modules/user";
+import { useDicStore } from "@/store/modules/dic";
+const { getJs, getUser } = useUserStore();
+const { findByPid } = useDicStore();
+
+// 接收外部传入属性
+const props = withDefaults(defineProps<{
+  data: any
+}>(), {
+  data: () => ({
+    id: "",
+    qjlx: "事假",
+    qjkssj: "2025-07-07 09:00:00",
+    qjjssj: "2025-07-08 10:00:00",
+    qjsc: "25小时",
+    qjsy: "我有事情",
+    dkfs: "1",
+  })
+});
+
+let formData = ref<any>({});
+
+const [register, { setValue, getValue }] = useForm({
+  schema: [
+    {
+      field: "qjlx",
+      label: "请假类型",
+      required: true,
+      component: "BasicPicker",
+      componentProps: {
+        api: findByPid,
+        param: { pid: 1007011432 },
+        rangeKey: "dictionaryValue",
+        savaKey: "dictionaryCode",
+      },
+    },
+    { interval: true },
+    {
+      field: "qjkstime",
+      label: "开始时间",
+      component: "BasicDateTimes",
+      required: true,
+      componentProps: {
+        type: 'datetime',
+        change: (e: string) => changeKsTime(e)
+      },
+    },
+    {
+      field: "qjjstime",
+      label: "结束时间",
+      component: "BasicDateTimes",
+      required: true,
+      componentProps: {
+        type: 'datetime',
+        change: (e: string) => changeJsTime(e)
+      },
+    },
+    {
+      field: "qjsc",
+      label: "请假时长",
+      component: "BasicInput",
+      componentProps: { 
+        disabled: true,
+        placeholder: "请输入选择开始时间和结束时间"
+      },
+    },
+    { interval: true },
+    {
+      field: "qjsy",
+      label: "请假事由",
+      component: "BasicInput",
+      required: true,
+      itemProps: {
+        labelPosition: "top",
+      },
+      componentProps: {
+        type: "textarea",
+      },
+    },
+    // {
+    //   field: "qjtp",
+    //   label: "请假图片",
+    //   component: "BasicUpload",
+    //   required: true,
+    //   itemProps: {
+    //     labelPosition: "top",
+    //   },
+    //   componentProps: {},
+    // },
+    { interval: true },
+    {
+      field: "dkfs",
+      label: "代课方式",
+      component: "BasicCheckbox",
+      required: true,
+      itemProps: {
+        labelPosition: "top",
+      },
+      componentProps: {
+        data: [
+          { value: 0, text: "自行协调" },
+          { value: 1, text: "教科处协调" },
+          { value: 2, text: "无须代课" },
+        ],
+      },
+    },
+    { colSlot: "dkmx" },
+  ],
+});
+
+const schema = reactive<FormsSchema[]>([
+  {
+    field: "dktime",
+    label: "日期",
+    component: "BasicDateTimes",
+    required: true,
+    componentProps: {},
+  },
+  {
+    field: "nl",
+    label: "年级班级",
+    component: "BasicInput",
+    required: true,
+    componentProps: {},
+  },
+  {
+    field: "yhzgx",
+    label: "节次",
+    component: "BasicInput",
+    required: true,
+    componentProps: {},
+  },
+  {
+    field: "yhzgx",
+    label: "代课老师",
+    component: "BasicInput",
+    required: true,
+    componentProps: {},
+  },
+]);
+
+const dkList = reactive<any>({
+  xl: [{ value: {} }],
+});
+
+function addDk() {
+  dkList.xl.push({ value: {} });
+}
+
+function delDk(index: number, item: any) {
+  const list = cloneDeep(dkList.xl);
+  list.splice(index, 1);
+  dkList.xl = list;
+}
+
+setValue(props.data)
+
+const changeKsTime = (selectedTime?: string) => {
+  if (!selectedTime) {
+    return;
+  }
+  formData.value.qjkstime = selectedTime;
+  validateTime();
+};
+
+const changeJsTime = (selectedTime?: string) => {
+  if (!selectedTime) {
+    return;
+  }
+  formData.value.qjjstime = selectedTime;
+  validateTime();
+};
+
+const validateTime = () => {
+  const data = formData.value;
+  if (!data.qjkstime || !data.qjjstime) {
+    return false;
+  }
+  // 使用dayjs库进行时间比较
+  const ksTime = dayjs(data.qjkstime).valueOf();
+  const jsTime = dayjs(data.qjjstime).valueOf();
+  if (ksTime > jsTime) {
+    uni.showToast({
+      title: "请假开始时间不能大于请假结束时间!",
+      icon: "none",
+    });
+    return false;
+  }
+  // 计算请假时长（小时）
+  data.qjsc = Math.round((jsTime - ksTime) / (1000 * 60 * 60)) + "小时";
+  setValue({ qjsc: data.qjsc });
+  return true;
+}
+
+const submit = async () => {
+  const fd = await getValue();
+  if (!validateTime()) {
+    return;
+  }
+  const params = { ...fd };
+  if (props.data && props.data.id) {
+    params.id = props.data.id;
+  } else {
+    params.id = null;
+    params.jsId = getJs.bzrId; // 班主任ID
+    params.xqId = getJs.xqId; // 学期ID
+  }
+  params.flag = 2;
+  uni.showLoading({ title: "提交中..." });
+  await addQjApi(params).then(() => {
+    showToast({ title: "提交成功", icon: "success" });
+    uni.reLaunch({
+      url: "/pages/base/home/index"
+    });
+  });
+  uni.hideLoading();
+};
+
+</script>
diff --git a/src/pages/view/hr/qj/components/jsQjList.vue b/src/pages/view/hr/qj/components/jsQjList.vue
new file mode 100644
index 0000000..f78d5e4
--- /dev/null
+++ b/src/pages/view/hr/qj/components/jsQjList.vue
@@ -0,0 +1,140 @@
+<template>
+  <view class="leave-list">
+    <BasicListLayout @register="register" style="position: absolute;">
+      <template v-slot="{ data, index }">
+        <view class="leave-card" @click="goToDetail(data)">
+          <view class="card-header">
+            <text class="applicant-name">{{ data.xsxm }}的请假申请</text>
+          </view>
+          <view class="card-body">
+            <view class="info-row">
+              <text class="label">请假事由:</text>
+              <text class="value">{{ data.qjsy }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">开始时间:</text>
+              <text class="value">{{ data.qjkstime }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">结束时间:</text>
+              <text class="value">{{ data.qjjstime }}</text>
+            </view>
+          </view>
+          <view class="card-footer">
+            <text>查看详情</text>
+            <text class="arrow">
+              <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
+            </text>
+          </view>
+        </view>
+      </template>
+    </BasicListLayout>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
+import { findQjListApi } from "@/api/base/qjApi";
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+const { getJs } = useUserStore();
+const { setData } = useDataStore();
+
+let pageParams = ref({
+  rows: 10,
+  jsId: getJs.id
+})
+
+const [register, { reload }] = useLayout({
+  api: findQjListApi,
+  componentProps: {},
+  param: pageParams.value
+});
+
+// 查看详情或新增处理函数
+const goToDetail = (item: any | null) => {
+  setData(item);
+  let url = '/pages/view/hr/leaveApplication/detail'; // 使用新路径
+  uni.navigateTo({ url });
+};
+</script>
+
+<style lang="scss" scoped>
+.leave-list {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex: 1 0 1px;
+  position: relative;
+
+  .leave-card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+  }
+
+  .card-header {
+    padding: 12px 15px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .applicant-name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .card-body {
+    padding: 15px;
+
+    .info-row {
+      display: flex;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label {
+        font-size: 14px;
+        color: #666;
+        width: 70px;
+        flex-shrink: 0;
+        margin-right: 8px;
+      }
+
+      .value {
+        font-size: 14px;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+  .card-footer {
+    padding: 12px 15px;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    color: #888;
+    cursor: pointer;
+
+    .arrow {
+      font-size: 16px;
+      color: #ccc;
+    }
+  }
+
+  ::v-deep .zp-loading-fixed {
+    position: absolute;
+  }
+
+  ::v-deep .d-load-main {
+    position: absolute;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/components/progressList.vue b/src/pages/view/hr/qj/components/progressList.vue
new file mode 100644
index 0000000..3bb2c55
--- /dev/null
+++ b/src/pages/view/hr/qj/components/progressList.vue
@@ -0,0 +1,149 @@
+<template>
+  <view class="approval-progress">
+    <view class="progress-title">
+      <!-- <image src="/static/icons/approval.png" class="title-icon"></image> -->
+      <text class="applicant-name">审批进度</text>
+    </view>
+    <view class="divider"></view>
+    <view class="progress-list">
+      <view class="progress-item" v-for="(task, index) in taskList" :key="index">
+        <view class="progress-item-row">
+          <view class="item-avatar">
+            <image
+              :src="task.avatar || '/static/base/home/11222.png'"
+              class="w-full h-full"
+            ></image>
+          </view>
+          <view class="item-middle">
+            <text class="item-name">{{ task.name }}</text>
+            <text class="item-detail">{{ task.assignee || '' }}</text>
+          </view>
+          <view class="item-right">
+            <text class="item-time" v-if="task.endTime">{{ task.endTime }}</text>
+            <text class="item-status" v-else>待处理</text>
+          </view>
+        </view>
+        <view class="progress-item-line" v-if="index < taskList.length - 1"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { getQjActivitiHistoryApi } from "@/api/base/qjApi";
+// 接收外部传入属性
+const props = withDefaults(defineProps<{
+  procInstId: string
+}>(), {
+  procInstId: ''
+});
+
+// 工作流
+const taskList = ref<any[]>([]);
+
+const loadList = async (procInstId: string) => {
+  const res = await getQjActivitiHistoryApi({ processInstanceId: procInstId });
+  const list = res.result || [];
+  // list反向
+  taskList.value = list.reverse();
+}
+
+watch(() => props.procInstId, (newVal, oldVal) => {
+  // 添加回调函数处理逻辑
+  console.log('procInstId changed:', newVal, oldVal);
+  if (newVal) {
+    loadList(newVal);
+  }
+});
+
+if (props.procInstId) {
+  loadList(props.procInstId);
+}
+</script>
+
+<style lang="scss" scoped>
+.approval-progress {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  .progress-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+
+    .title-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+    }
+
+    .applicant-name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+
+  .progress-list {
+    display: flex;
+    flex-direction: column;
+
+    .progress-item {
+      .progress-item-row { 
+        display: flex;
+        align-items: center;
+        .item-avatar {
+          flex: 0 0 40px;
+          height: 40px;
+        }
+
+        .item-middle {
+          margin-left: 16px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .item-right {
+          flex: 1 0 1px;
+          display: flex;
+          align-items: flex-end;
+        }
+      }
+      .progress-item-line {
+        width: 1px;
+        height: 30px;
+        background-color: #999;
+        margin: 10px 20px;
+      }
+    }
+
+
+    .item-name {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .item-detail {
+      font-size: 14px;
+      color: #666;
+    }
+
+    .item-time,
+    .item-status {
+      font-size: 14px;
+      color: #999;
+      margin-left: auto;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/cxTj.vue b/src/pages/view/hr/qj/cxTj.vue
new file mode 100644
index 0000000..4a155b0
--- /dev/null
+++ b/src/pages/view/hr/qj/cxTj.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="leave-page">
+    重新提交
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from '@/api/base/qjApi';
+import { onLoad } from '@dcloudio/uni-app';
+import { useDataStore } from "@/store/modules/data";
+const { setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+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;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.leave-page {
+  height: 100vh;
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/leaveApplication/detail.vue b/src/pages/view/hr/qj/detail.vue
similarity index 100%
rename from src/pages/view/hr/leaveApplication/detail.vue
rename to src/pages/view/hr/qj/detail.vue
diff --git a/src/pages/view/hr/qj/dkQr.vue b/src/pages/view/hr/qj/dkQr.vue
new file mode 100644
index 0000000..0438b49
--- /dev/null
+++ b/src/pages/view/hr/qj/dkQr.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="leave-page">
+    代课教师确认
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from '@/api/base/qjApi';
+import { onLoad } from '@dcloudio/uni-app';
+import { useDataStore } from "@/store/modules/data";
+const { setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+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;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.leave-page {
+  height: 100vh;
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/index.vue b/src/pages/view/hr/qj/index.vue
new file mode 100644
index 0000000..212d895
--- /dev/null
+++ b/src/pages/view/hr/qj/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <view class="leave-page">
+    <!-- 选项卡 -->
+    <BasicTabs class="leave-tabs"
+            ref="tabsRef" :list="tabList" bar-width="60px" scroll-count="4"
+           :current="curTabIndex" @change="switchTab"
+          />
+    <view class="leave-edit" v-if="curTabIndex === 0">
+      <XsQjEdit />
+    </view>
+    <view class="leave-list" v-else>
+      <XsQjList />
+    </view>
+
+  </view>
+</template>
+
+<script setup lang="ts">
+import XsQjEdit from "./components/xsQjEdit.vue"
+import XsQjList from "./components/xsQjList.vue"
+
+const tabList = ref([
+  { name: "请假申请", id: "leave-edit" },
+  { name: "请假记录", id: "leave-list" },
+]);
+
+const curTabIndex = ref(0);
+
+const switchTab = (index : number) => {
+  curTabIndex.value = index;
+}
+</script>
+
+<style lang="scss" scoped>
+
+.leave-page {
+  flex: 1 0 1px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .leave-tabs {
+    flex: 0 0 45px;
+  }
+  .leave-edit,
+  .leave-list {
+    flex: 1 0 1px;
+    position: relative;
+  }
+}
+
+</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/jwcQr.vue b/src/pages/view/hr/qj/jwcQr.vue
new file mode 100644
index 0000000..e6c8647
--- /dev/null
+++ b/src/pages/view/hr/qj/jwcQr.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="leave-page">
+    教务处确认
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from '@/api/base/qjApi';
+import { onLoad } from '@dcloudio/uni-app';
+import { useDataStore } from "@/store/modules/data";
+const { setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+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;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.leave-page {
+  height: 100vh;
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/jwcXt.vue b/src/pages/view/hr/qj/jwcXt.vue
new file mode 100644
index 0000000..ab3b68a
--- /dev/null
+++ b/src/pages/view/hr/qj/jwcXt.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="leave-page">
+    教务处协调
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from '@/api/base/qjApi';
+import { onLoad } from '@dcloudio/uni-app';
+import { useDataStore } from "@/store/modules/data";
+const { setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+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;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.leave-page {
+  height: 100vh;
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/view/hr/qj/sp.vue b/src/pages/view/hr/qj/sp.vue
new file mode 100644
index 0000000..e766e47
--- /dev/null
+++ b/src/pages/view/hr/qj/sp.vue
@@ -0,0 +1,33 @@
+<template>
+  <view class="leave-page">
+    负责人审批
+  </view>
+</template>
+
+<script setup lang="ts">
+import { findQjById } from '@/api/base/qjApi';
+import { onLoad } from '@dcloudio/uni-app';
+import { useDataStore } from "@/store/modules/data";
+const { setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+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;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.leave-page {
+  height: 100vh;
+}
+</style> 
\ No newline at end of file