store-manage-app/src/pages/make-card/create.vue

<template>
  <view>
    <CuNavbar title="补卡申请">
      <template #right>
        <view class="text-24rpx text-white" @click="submit">提交</view>
      </template>
    </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="date">
          <uv-input
            placeholder="请选择日期"
            readonly
            @click="openDatePicker"
            inputAlign="right"
            :border="`none`"
            v-model="form.date"
          >
          </uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item required label="补卡类型" prop="sign_time">
          <uv-input
            placeholder="请选择"
            @click="openPicker"
            readonly
            inputAlign="right"
            :border="`none`"
            v-model="form.sign_time"
          >
          </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-line color="#f5f5f5"></uv-line>
        <uv-form-item label="外勤" prop="isOutSide">
          <view class="flex flex-1 justify-end">
            <uv-switch size="20" v-model="form.isOutSide"></uv-switch>
          </view>
        </uv-form-item>
        <uv-form-item v-if="form.isOutSide" required label="外勤事由" prop="outside_remarks" labelPosition="top">
          <uv-textarea
            v-model="form.outside_remarks"
            count
            placeholder="请输入"
            :border="`none`"
            :maxlength="200"
          ></uv-textarea>
        </uv-form-item>
      </uv-form>
    </view>
    <uv-picker ref="pickerRef" :columns="columns" @confirm="confirmPicker"></uv-picker>
    <uv-datetime-picker placeholder="请选择日期" ref="datetimePicker" mode="datetime" @confirm="confirmDatePicker">
    </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 = [["上班补卡", "上班补卡"]]
const formRef = ref(null)
const datetimePicker = ref(null)
const pickerRef = ref(null)
const modalRef = ref(null)
// const value = ref(Number(new Date())
const id = ref(0)
const loading = ref(false)
const form = reactive({
  date: "",
  sign_time: "",
  reason: "",
  outside_remarks: "",
  isOutSide: false
})
const openPicker = () => {
  pickerRef.value.open()
}
const openDatePicker = () => {
  datetimePicker.value.open()
}
const confirmDatePicker = e => {
  form.date = timeFormat(e.value, "yyyy-MM-dd hh:mm")
}
const confirmPicker = e => {
  form.sign_time = e.value[0]
}
const rules = reactive({
  date: [{ required: true, message: "请选择时间" }],
  sign_time: [{ required: true, message: "请选择类型" }],
  reason: [{ required: true, message: "请输入补卡理由" }],
  outside_remarks: [{ required: true, message: "请输入补卡理由" }]
})
onLoad(options => {
  id.value = options.id
  if (id.value) {
    http
      .request({
        url: `/hr/sign-repairs/${options.id}`,
        method: "GET",
        header: {
          Accept: "application/json"
        }
      })
      .then(res => {
        form.date = timeFormat(res.date, "yyyy-MM-dd hh:mm")
        form.reason = res.reason
        form.isOutSide = res.sign_type == 1 ? false : true
        form.outside_remarks = res.outside_remarks
        form.sign_time = res.sign_time == 1 ? "上班补卡" : "下班补卡"
      })
  }
})

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/sign-repairs/${id.value}` : "/hr/sign-repairs"
    let method = id.value ? "PUT" : "POST"
    await http.request({
      url: url,
      method: method,
      header: {
        Accept: "application/json"
      },
      data: {
        date: form.date,
        sign_time: form.sign_time == "上班补卡" ? 1 : 2,
        reason: form.reason,
        outside_remarks: form.outside_remarks,
        sign_type: form.isOutSide ? 2 : 1
      }
    })
    uni.showToast({
      title: "提交成功",
      icon: "none"
    })
    formRef.value.resetFields()
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
</script>