store-manage-app/src/pages/ask-leave/create.vue

<template>
  <view>
    <CuNavbar title="请假申请"></CuNavbar>
    <view class="card-shadow px-base">
      <uv-form labelPosition="left" :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="250rpx">
        <uv-form-item required label="请假类别" prop="type_id">
          <uv-input
            placeholder="请选择"
            @click="openPicker"
            readonly
            inputAlign="right"
            :border="`none`"
            v-model="form.type_id"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item required label="请假开始时间" prop="start_at">
          <uv-input
            placeholder="请选择日期"
            readonly
            @click="openStartDatePicker"
            inputAlign="right"
            :border="`none`"
            v-model="form.start_at"
          >
          </uv-input>
        </uv-form-item>
        <uv-form-item required label="请假结束时间" prop="end_at">
          <uv-input
            placeholder="请选择日期"
            readonly
            @click="openEndDatePicker"
            inputAlign="right"
            :border="`none`"
            v-model="form.end_at"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item required label="请假理由" prop="reason" labelPosition="top">
          <uv-textarea v-model="form.reason" count placeholder="请输入" :border="`none`" :maxlength="200"></uv-textarea>
        </uv-form-item>
      </uv-form>
    </view>
    <view class="mt-20rpx px-base">
      <uv-button type="primary" @click="submit">提交</uv-button>
    </view>
    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
    <uv-datetime-picker
      placeholder="请选择日期"
      v-model="startValue"
      ref="dateStartPicker"
      mode="datetime"
      @confirm="confirmStartDatePicker"
    >
    </uv-datetime-picker>
    <uv-datetime-picker
      v-model="endValue"
      placeholder="请选择日期"
      ref="dateEndPicker"
      mode="datetime"
      @confirm="confirmEndDatePicker"
    >
    </uv-datetime-picker>
    <uv-modal ref="modalRef" title="提示" content="确定提交吗?" @confirm="onSubmit" :showCancelButton="true"></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from "@/components/cu-navbar/index"
import { ref, reactive, computed } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { http } from "@/utils/request"
import { timeFormat } from "@climblee/uv-ui/libs/function/index"
const columns = ref([])
const pickerData = ref([])
const formRef = ref(null)
const dateStartPicker = ref(null)
const dateEndPicker = ref(null)
const pickerRef = ref(null)
const modalRef = ref(null)
const startValue = ref(Number(new Date()))
const endValue = ref(Number(new Date()))
const id = ref(0)
const loading = ref(false)
const form = reactive({
  start_at: "",
  end_at: "",
  reason: "",
  type_id: ""
})
const openPicker = () => {
  pickerRef.value.open()
}
const openStartDatePicker = () => {
  dateStartPicker.value.open()
}
const openEndDatePicker = () => {
  dateEndPicker.value.open()
}
const confirmStartDatePicker = e => {
  form.start_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
}
const confirmEndDatePicker = e => {
  form.end_at = timeFormat(e.value, "yyyy-mm-dd hh:MM:ss")
}
const confirmPicker = e => {
  form.type_id = e.value[0]
}
const rules = reactive({
  start_at: [{ required: true, message: "请选择时间" }],
  end_at: [{ required: true, message: "请选择时间" }],
  reason: [{ required: true, message: "请输入请假理由" }],
  type_id: [{ required: true, message: "请选择请假类别" }]
})
onLoad(options => {
  http
    .request({
      url: `/keywords?parent_key=holiday_type`,
      method: "GET",
      header: {
        Accept: "application/json"
      }
    })
    .then(res => {
      let names = res.map(item => item.name)
      columns.value = [names]
      pickerData.value = res
    })
  id.value = options.id
  if (id.value) {
    http
      .request({
        url: `/hr/holidays/${options.id}`,
        method: "GET",
        header: {
          Accept: "application/json"
        }
      })
      .then(res => {
        startValue.value = res.start_at * 1000
        endValue.value = res.end_at * 1000
        form.start_at = timeFormat(res.start_at, "yyyy-mm-dd hh:MM:ss")
        form.end_at = timeFormat(res.end_at, "yyyy-mm-dd hh:MM:ss")
        form.reason = res.reason
        form.type_id = res.type.name
      })
  }
})

const submit = () => {
  formRef.value.validate().then(res => {
    modalRef.value.open()
  })
}

const onSubmit = async () => {
  if (loading.value) return
  loading.value = true
  try {
    let url = id.value ? `/hr/holidays/${id.value}` : "/hr/holidays"
    let method = id.value ? "PUT" : "POST"
    await http.request({
      url: url,
      method: method,
      header: {
        Accept: "application/json"
      },
      data: {
        start_at: form.start_at,
        type_id: pickerData.value.find(item => item.name === form.type_id).id,
        reason: form.reason,
        end_at: form.end_at
      }
    })
    uni.showToast({
      title: "提交成功",
      icon: "none"
    })
    formRef.value.resetFields()
    uni.$emit('refresh')
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
</script>