动态表单、校验

v-for=”(item, index) in form.leaveApplications”

:prop=”leaveApplications.${index}.leaveType”

<template>
  <a-modal
    v-model="visible"
    :title="`请假申请`"
    :maskClosable="false"
    :width="700"
    :bodyStyle="{
      height: '600px',
      overflowY: 'auto',
    }"
    centered
    @ok="onFinish"
    @cancel="handleCancel"
    ok-text="确认"
    cancel-text="取消"
  >
    <a-form-model :model="form" ref="dynamicValidateForm">
      <a-row
        v-for="(item, index) in form.leaveApplications"
        :key="index"
        :gutter="16"
        style="border-bottom: 1px solid #eee"
      >
        <a-col :span="6">
          <a-form-model-item
            label="请假类型"
            :prop="`leaveApplications.${index}.leaveType`"
            :rules="leaveTypeRules"
          >
            <a-select
              v-model="form.leaveApplications[index].leaveType"
              placeholder="请选择请假类型"
            >
              <a-select-option
                v-for="i in LEAVE_TYPE"
                :key="i.label"
                :value="i.label"
                ></a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            label="请假时间"
            :prop="`leaveApplications.${index}.leaveTime`"
            :rules="leaveTimeRules"
          >
            <a-range-picker
              show-time
              style="width: 100%"
              v-model="form.leaveApplications[index].leaveTime"
              :placeholder="['开始时间', '结束时间']"
              @change="calculateLeaveDuration(index)"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item
            label="请假时长"
            :prop="`leaveApplications.${index}.leaveDuration`"
            :rules="leaveDurationRules"
          >
            <a-input
              suffix="小时"
              v-model="form.leaveApplications[index].leaveDuration"
              disabled
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            label="请假理由"
            :prop="`leaveApplications.${index}.reason`"
            :rules="reasonRules"
          >
            <a-textarea
              v-model="form.leaveApplications[index].reason"
              placeholder="请输入请假理由"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 16px;
          padding: 16px;
          border: 1px dashed #ccc;
          background: #fafafa;
          text-align: center;
          border-radius: 8px;
        "
      >
        <span
          style="cursor: pointer; user-select: none"
          @click="addLeaveApplication"
        >
          <a-button type="primary" size="small" shape="circle" icon="plus" />
          添加</span
        >
      </div>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from "moment";
import _ from "lodash";
import { LEAVE_TYPE } from "../service/leaveApplication.service";
export default {
  data() {
    return {
      LEAVE_TYPE: LEAVE_TYPE,
      visible: false,
      form: {
        leaveType: "", // 请假类型
        leaveApplications: [this.createLeaveApplication()],
      },
      leaveTypeRules: [
        {
          required: true,
          message: "请选择请假类型",
          trigger: ["change", "blur"],
        },
      ],
      leaveTimeRules: [
        {
          required: true,
          message: "请选择请假时间",
          trigger: ["change", "blur"],
        },
      ],
      leaveDurationRules: [
        {
          required: true,
          message: "",
          trigger: ["change", "blur"],
        },
      ],
      reasonRules: [
        {
          required: true,
          message: "请输入请假理由",
          trigger: ["change", "blur"],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    createLeaveApplication() {
      return { leaveType: "", leaveTime: [], reason: "", leaveDuration: 0 };
    },
    addLeaveApplication() {
      this.form.leaveApplications.push(this.createLeaveApplication());
    },
    calculateLeaveDuration(index) {
      const start = this.form.leaveApplications[index].leaveTime[0];
      const end = this.form.leaveApplications[index].leaveTime[1];
      if (start && end) {
        const duration = Math.abs(end.diff(start, "hours", true)); // 计算小时差
        this.form.leaveApplications[index].leaveDuration = duration.toFixed(1);
      } else {
        this.form.leaveApplications[index].leaveDuration = 0;
      }
    },
    onFinish() {
      this.$refs[`dynamicValidateForm`].validate((valid) => {
        if (valid) {
          console.log("提交的请假申请:", this.form);
        } else {
          console.log("表单验证失败");
        }
      });
    },
    openModal() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
      this.queryForm = {};
      this.$refs.queryForm.resetFields();
    },
  },
};
</script>