zhxy-jzd/src/pages/base/leave-request/components/xsQjEdit.vue

<template>
  <BasicLayout :fixed="false">
    <view class="p-15">
      <BasicForm @register="register" />
    </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 { dicApi } from "@/api/system/dic";
import { jzAddXsQjApi } from "@/api/base/server";
import { showToast } from "@/utils/uniapp";
import dayjs from "dayjs";
import { useUserStore } from "@/store/modules/user";
const { getCurXs, getUser } = useUserStore();

// 接收外部传入属性
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: "我有事情",
    sflx: 1
  })
});

let formData = ref<any>({});

const [register, { getValue, setValue }] = useForm({
  schema: [
    {
      field: "qjlx",
      label: "请假类型",
      required: true,
      component: "BasicPicker",
      componentProps: {
        api: dicApi,
        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: "sflx",
      label: "是否离校",
      component: "BasicCheckbox",
      required: true,
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {
        data: [
          { value: 0, text: "否" },
          { value: 1, text: "是" },
        ],
      },
    },
    {
      field: "qjtp",
      label: "请假图片",
      component: "BasicUpload",
      required: true,
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {},
    },
  ],
});

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.xsId = getCurXs.id; // 学生ID
    params.jsId = getCurXs.bzrId; // 班主任ID
    params.xqId = getCurXs.xqId; // 学期ID
    params.jzId = getUser.jzId; // 家长ID
  }
  params.flag = 2;
  uni.showLoading({ title: "提交中..." });
  await jzAddXsQjApi(params).then(() => {
    showToast({ title: "提交成功", icon: "success" });
    uni.reLaunch({ 
      url: "/pages/base/home/index"
    });
  });
  uni.hideLoading();
};

</script>