xkrs_ms/ruoyi-ui/src/views/benyi/experience/apply.vue

 <template>
  <div class="apply-input">
    <h2 class="title">入班半日体验申请表</h2>
    <p class="info">为了更好地了解贵园，申请来贵园进行入班半日体验。</p>
    <div class="apply-form">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="家长姓名" prop="jzxm">
          <el-input v-model="form.jzxm" placeholder="请输入家长姓名" />
          <el-input v-model="form.schoolid" v-if="false" />
        </el-form-item>
        <el-form-item label="联系方式" prop="lxfs">
          <el-input v-model="form.lxfs" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="幼儿姓名" prop="yexm">
          <el-input v-model="form.yexm" placeholder="请输入幼儿姓名" />
        </el-form-item>
        <el-form-item label="幼儿出生日期" prop="csrq">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.csrq"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择幼儿出生日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="拟入园时间" prop="nrysj">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.nrysj"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择拟入园时间"
          ></el-date-picker>
        </el-form-item>
        <div>
          <div>
            <el-form-item label="预约体验时间" prop="sqtysj">
              <el-date-picker
                clearable
                size="small"
                v-model="form.sqtysj"
                style="width: 200px"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="申请体验时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="swxw">
              <el-radio-group v-model="form.swxw">
                <el-radio label="1">上午</el-radio>
                <el-radio label="2">下午</el-radio>
              </el-radio-group>
            </el-form-item>
            <p class="come-txt">来园入班体验。请园长为我安排与我孩子年龄段相适应的班级。届时，我将与我的孩子准时入班进行半日体验。</p>
          </div>
          <p class="thanks-top">请园长批准我的申请为盼。</p>
          <p class="thanks">谢谢！</p>
        </div>
      </el-form>
      <div class="btns">
        <el-button class="btn" type="primary" @click="submitForm">确 定</el-button>
        <el-button class="btn" @click="cancel">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addExperience } from "@/api/benyi/experience";

export default {
  name: "Apply",
  data() {
    return {
      activeNames: ["1"],
      yysj: "",
      sworxw: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        jzxm: [
          { required: true, message: "家长姓名不能为空", trigger: "blur" },
        ],
        yexm: [
          { required: true, message: "幼儿姓名不能为空", trigger: "blur" },
        ],
        csrq: [
          { required: true, message: "幼儿出生日期不能为空", trigger: "blur" },
        ],
        lxfs: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        nrysj: [
          { required: true, message: "拟入园时间不能为空", trigger: "blur" },
        ],
        sqtysj: [
          { required: true, message: "申请体验时间不能为空", trigger: "blur" },
        ],
        swxw: [
          { required: true, message: "下午或下午不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    const sid = this.$route.params && this.$route.params.id;
    this.form.schoolid = sid;
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        jzxm: undefined,
        yexm: undefined,
        csrq: undefined,
        lxfs: undefined,
        nrysj: undefined,
        sqtysj: undefined,
        swxw: undefined,
        schoolid: undefined,
        createTime: undefined,
      };
      this.resetForm("form");
    },
    // 返回按钮
    cancel() {
      this.$router.go(-1);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addExperience(this.form).then((response) => {
            if (response.code === 200) {
              this.msgSuccess("您的申请提交成功，等待园长回复");
              this.reset();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.apply-input {
  padding-top: 30px;
  p {
    margin: 0;
  }
  .title {
    text-align: center;
    font-size: 18px;
  }
  .info {
    text-align: center;
  }
  .apply-form {
    width: 500px;
    margin: 30px auto 0;
  }
  .btns {
    display: flex;
    margin-top: 30px;
    .btn {
      flex: 1;
      margin: 0 10px;
    }
  }
  .come-txt {
    line-height: 22px;
    text-indent: 2em;
  }
  .thanks-top {
    padding: 8px 0 8px 0;
    text-align: right;
  }
  .thanks {
    text-align: right;
  }
}
@media screen and (max-width: 768.89px) {
  .apply-input {
    padding: 30px 10px 0;
    .apply-form {
      width: 100%;
    }
  }
}
</style>