diff --git a/src/pages/approval/components/Components.vue b/src/pages/approval/components/Components.vue
index d331ce8..001aede 100644
--- a/src/pages/approval/components/Components.vue
+++ b/src/pages/approval/components/Components.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="pb-3">
     <view class="bg-white mx-4 p-2 rounded-2">
       <Input
         :id="0"
@@ -76,6 +76,22 @@
         type="department"
         :multiple="true"
       ></MemberOrDepartment>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <Leave :id="12"></Leave>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePickerGroup :id="13" type="businessTrip" unit="date"></DatetimePickerGroup>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePickerGroup :id="14" type="goOut" unit="dateHalfDay"></DatetimePickerGroup>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <Overtime :id="15"></Overtime>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <DatetimePicker
+        :id="16"
+        type="datetime"
+        required
+        title="补卡时间"
+        @change="changeDate"
+      ></DatetimePicker>
     </view>
   </view>
 </template>
@@ -88,8 +104,11 @@
   import Images from '@/pages/approval/components/Images.vue'
   import Description from '@/pages/approval/components/Description.vue'
   import MemberOrDepartment from '@/pages/approval/components/MemberOrDepartment.vue'
+  import Leave from '@/pages/approval/components/Leave.vue'
+  import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
+  import Overtime from '@/pages/approval/components/Overtime.vue'
 
-  const columns = ref<Record<number, any>>([
+  const columns = ref<Record<number, string>>([
     {
       value: 0,
       label: '男装'
diff --git a/src/pages/approval/components/DatetimePicker.vue b/src/pages/approval/components/DatetimePicker.vue
index 95fc9c5..e27f5d8 100644
--- a/src/pages/approval/components/DatetimePicker.vue
+++ b/src/pages/approval/components/DatetimePicker.vue
@@ -6,7 +6,9 @@
     </view>
     <view class="py-2" @click="openDialog">
       <view class="flex flex-items-center flex-justify-between">
-        <view>{{ text || placeholder }}</view>
+        <view :class="text ? 'custom-color-black' : 'color-#838589'">
+          {{ text || placeholder }}
+        </view>
         <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
       </view>
     </view>
@@ -104,7 +106,31 @@
     },
     placeholder: {
       type: String,
-      default: '请输入'
+      default: '请选择'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledText: {
+      type: String,
+      default: ''
+    },
+    minDate: {
+      type: [Number, null],
+      default: null
+    },
+    maxDate: {
+      type: [Number, null],
+      default: null
+    },
+    minDateText: {
+      type: String,
+      default: ''
+    },
+    maxDateText: {
+      type: String,
+      default: ''
     }
   })
 
@@ -159,6 +185,13 @@
   }
 
   const openDialog = () => {
+    if (props.disabled) {
+      uni.showToast({
+        title: props.disabledText,
+        icon: 'none'
+      })
+      return
+    }
     if (!props.value) {
       if (text.value === '') {
         timestamp.value = new Date().getTime()
@@ -180,6 +213,20 @@
   }
 
   const confirm = () => {
+    if (props.minDate && timestamp.value < props.minDate) {
+      uni.showToast({
+        title: props.minDateText,
+        icon: 'none'
+      })
+      return
+    }
+    if (props.maxDate && timestamp.value > props.maxDate) {
+      uni.showToast({
+        title: props.maxDateText,
+        icon: 'none'
+      })
+      return
+    }
     show.value = false
     returnTimestamp.value = timestamp.value
     if (props.type === 'dateHalfDay') {
@@ -193,4 +240,16 @@
   const afterLeave = () => {
     showPicker.value = false
   }
+
+  const clear = () => {
+    text.value = ''
+    date.value = ''
+    halfDay.value = ''
+    returnTimestamp.value = 0
+    emits('change', { id: props.id, value: returnTimestamp.value, text: text.value })
+  }
+
+  defineExpose({
+    clear
+  })
 </script>
diff --git a/src/pages/approval/components/DatetimePickerGroup.vue b/src/pages/approval/components/DatetimePickerGroup.vue
new file mode 100644
index 0000000..3d3142d
--- /dev/null
+++ b/src/pages/approval/components/DatetimePickerGroup.vue
@@ -0,0 +1,110 @@
+<template>
+  <view>
+    <DatetimePicker
+      :id="1"
+      ref="startDatetimePicker"
+      title="开始时间"
+      @change="changeDate"
+      :max-date="endTimestamp"
+      max-date-text="开始时间不能晚于结束时间"
+      required
+      :disabled="disabled"
+      :disabled-text="disabledText"
+      :type="unit"
+    ></DatetimePicker>
+    <wd-divider color="#bcbfbe"></wd-divider>
+    <DatetimePicker
+      :id="2"
+      title="结束时间"
+      ref="endDatetimePicker"
+      :min-date="startTimestamp"
+      min-date-text="结束时间不能早于开始时间"
+      @change="changeDate"
+      required
+      :type="unit"
+      :disabled="disabled"
+      :disabled-text="disabledText"
+    ></DatetimePicker>
+    <wd-divider color="#bcbfbe"></wd-divider>
+    <Input
+      :id="3"
+      ref="inputComponent"
+      type="number"
+      :title="`${textMap[type]}时长${unit === 'datetime' ? '（小时）' : '（天）'}`"
+      required
+      :readonly="updateTime"
+      placeholder="自动计算"
+      @change="inputChange"
+    ></Input>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
+  import Input from '@/pages/approval/components/Input.vue'
+
+  const textMap = {
+    leave: '请假',
+    businessTrip: '出差',
+    goOut: '外出',
+    overtime: '加班'
+  }
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    unit: {
+      type: String,
+      default: 'date'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disabledText: {
+      type: String,
+      default: ''
+    },
+    updateTime: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const startTimestamp = ref(0)
+  const endTimestamp = ref(0)
+
+  const startDatetimePicker = ref(null)
+  const endDatetimePicker = ref(null)
+  const inputComponent = ref(null)
+
+  const changeDate = e => {
+    if (e.id === 1) {
+      startTimestamp.value = e.value
+    } else {
+      endTimestamp.value = e.value
+    }
+  }
+
+  const inputChange = e => {
+    console.log('inputChange', e)
+  }
+
+  const clear = () => {
+    startDatetimePicker.value.clear()
+    endDatetimePicker.value.clear()
+    inputComponent.value.clear()
+  }
+
+  defineExpose({
+    clear
+  })
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/approval/components/Input.vue b/src/pages/approval/components/Input.vue
index 96df501..9334107 100644
--- a/src/pages/approval/components/Input.vue
+++ b/src/pages/approval/components/Input.vue
@@ -11,6 +11,7 @@
         :placeholder="placeholder"
         :maxlength="type === 'text' ? 30 : 15"
         v-model="text"
+        :readonly="readonly"
         @input="change(id, $event)"
       ></wd-input>
     </view>
@@ -46,6 +47,10 @@
     placeholder: {
       type: String,
       default: '请输入'
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   })
 
@@ -56,6 +61,14 @@
   const change = (id, data) => {
     emits('change', { id, value: data.value })
   }
+
+  const clear = () => {
+    text.value = ''
+  }
+
+  defineExpose({
+    clear
+  })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/approval/components/Leave.vue b/src/pages/approval/components/Leave.vue
new file mode 100644
index 0000000..b7bade7
--- /dev/null
+++ b/src/pages/approval/components/Leave.vue
@@ -0,0 +1,97 @@
+<template>
+  <view>
+    <SelectPicker
+      :id="0"
+      title="请假类型"
+      placeholder="请选择"
+      :columns="columns"
+      required
+      @change="changeSelect"
+    ></SelectPicker>
+    <wd-divider color="#bcbfbe"></wd-divider>
+    <DatetimePickerGroup
+      ref="timeGroup"
+      type="leave"
+      :disabled="!leaveType"
+      :updateTime="updateTime"
+      :unit="leaveType?.unit ?? 'date'"
+      disabled-text="请选择请假类型"
+      :id="1"
+    ></DatetimePickerGroup>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
+  import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
+
+  const leaveType = ref(null)
+  const timeGroup = ref(null)
+
+  const columns = ref<Record<number, string>>([
+    {
+      value: 0,
+      label: '年假',
+      unit: 'date'
+    },
+    {
+      value: 1,
+      label: '事假',
+      unit: 'dateHalfDay'
+    },
+    {
+      value: 2,
+      label: '病假',
+      unit: 'datetime'
+    },
+    {
+      value: 3,
+      label: '婚假',
+      unit: 'date',
+      limit: 5
+    },
+    {
+      value: 4,
+      label: '产假',
+      unit: 'datetime',
+      limit: 24.5
+    },
+    {
+      value: 5,
+      label: '陪产假',
+      unit: 'datetime'
+    },
+    {
+      value: 6,
+      label: '丧假',
+      unit: 'date'
+    },
+    {
+      value: 7,
+      label: '哺乳假',
+      unit: 'date'
+    }
+  ])
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    updateTime: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const changeSelect = e => {
+    leaveType.value = e.value
+    timeGroup.value.clear()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wd-divider {
+    padding: 0 0.5rem;
+  }
+</style>
diff --git a/src/pages/approval/components/MemberOrDepartment.vue b/src/pages/approval/components/MemberOrDepartment.vue
index 5339c4c..e582118 100644
--- a/src/pages/approval/components/MemberOrDepartment.vue
+++ b/src/pages/approval/components/MemberOrDepartment.vue
@@ -6,7 +6,9 @@
     </view>
     <view class="py-2" @click="toSelect">
       <view class="flex flex-items-center flex-justify-between">
-        <view>{{ text || placeholder }}</view>
+        <view :class="text ? 'custom-color-black' : 'color-#838589'">
+          {{ text || placeholder }}
+        </view>
         <wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
       </view>
     </view>
diff --git a/src/pages/approval/components/Overtime.vue b/src/pages/approval/components/Overtime.vue
new file mode 100644
index 0000000..683a52c
--- /dev/null
+++ b/src/pages/approval/components/Overtime.vue
@@ -0,0 +1,43 @@
+<template>
+  <view>
+    <DatetimePicker
+      :id="0"
+      ref="startDatetimePicker"
+      title="加班日期"
+      @change="changeDate"
+      required
+    ></DatetimePicker>
+    <wd-divider v-if="timestamp" color="#bcbfbe"></wd-divider>
+    <DatetimePickerGroup
+      v-if="timestamp"
+      type="overtime"
+      unit="datetime"
+      :id="1"
+    ></DatetimePickerGroup>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import DatetimePickerGroup from '@/pages/approval/components/DatetimePickerGroup.vue'
+  import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
+
+  const timestamp = ref<number>(0)
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    }
+  })
+
+  const changeDate = e => {
+    timestamp.value = e.value
+    console.log('changeDate', e)
+  }
+</script>
+
+<style scoped lang="scss">
+  .wd-divider {
+    padding: 0 0.5rem;
+  }
+</style>
diff --git a/src/pages/approval/components/SelectPicker.vue b/src/pages/approval/components/SelectPicker.vue
index 4ce41f7..99708b3 100644
--- a/src/pages/approval/components/SelectPicker.vue
+++ b/src/pages/approval/components/SelectPicker.vue
@@ -12,7 +12,9 @@
         v-model="picker"
         :columns="columns"
         size="large"
-      />
+        @change="change"
+        select-size="large"
+      ></wd-select-picker>
     </view>
   </view>
 </template>
@@ -51,11 +53,17 @@
     }
   })
 
+  const emits = defineEmits(['change'])
+
   onMounted(() => {
     if (props.value) {
       picker.value = props.value
     }
   })
+
+  const change = ({ value }) => {
+    emits('change', { id: props.id, value: props.columns.find(item => item.value === value) })
+  }
 </script>
 
 <style scoped lang="scss">
@@ -63,4 +71,34 @@
     padding: var(--wot-cell-wrapper-padding, 10px) 0;
     background-color: transparent;
   }
+
+  :deep(.wd-radio-group),
+  :deep(.wd-checkbox-group) {
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+  }
+
+  :deep(.wd-action-sheet) {
+    background-color: #f3f5fa;
+  }
+
+  :deep(.uni-scroll-view-content) {
+    padding-bottom: 0.5rem;
+  }
+
+  :deep(.wd-radio),
+  :deep(.wd-checkbox) {
+    position: relative;
+    padding: 1rem !important;
+  }
+
+  :deep(.wd-radio)::after,
+  :deep(.wd-checkbox)::after {
+    position: absolute;
+    bottom: 0;
+    left: 4%;
+    width: 92%;
+    content: '';
+    border-bottom: 1px solid #efefef;
+  }
 </style>