projectmanager/app/plan/view/index/add.html

<form class="layui-form page-content p-4">
  <h3 class="h3-title">新建目标计划</h3>
  <table class="layui-table layui-table-form">
    <tr>
      <td class="layui-td-gray-2">项目名称<font>*</font>
      </td>
      <td>
        <input type="text" name="name" lay-verify="required" lay-reqText="请输入项目名称" placeholder="请输入项目名称"
          class="layui-input" value="" />
      </td>
      <td class="layui-td-gray-2">项目类型<font>*</font>
      </td>
      <td colspan="3">
        <select name="cate" lay-verify="required" lay-reqText="请选择项目类型" class="layui-select" lay-search=""
          lay-filter="cate"></select>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">重要程度<font>*</font>
      </td>
      <td>
        <select name="important" lay-verify="required" lay-reqText="请选择项目类型" class="layui-select" lay-search=""
          lay-filter="important">
          <option value="1">★</option>
          <option value="2">★★</option>
          <option value="3">★★★</option>
          <option value="4">★★★★</option>
          <option value="5">★★★★★</option>
        </select>
      </td>
      <td class="layui-td-gray-2">项目金额
      </td>
      <td colspan="3">
        <input type="text" name="price" lay-verify="" lay-reqText="请输入项目金额" placeholder="请输入项目金额，例如：20000.10"
          class="layui-input" value="" />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">计划年份<font>*</font>
      </td>
      <td>
        <input type="text" name="year" lay-verify="required" lay-reqText="请输入" placeholder="例如：2024" class="layui-input"
          value="" />
      </td>
      <td class="layui-td-gray-2">负责人<font>*</font>
      </td>
      <td colspan="3">
        <input type="text" name="responsible" lay-verify="required" lay-reqText="请输入" placeholder="请输入"
          class="layui-input" value="" />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">开始时间
      </td>
      <td>
        <input type="text" name="start_time" lay-verify="" lay-reqText="请选择开始时间" placeholder="请选择开始时间"
          class="layui-input" value="" id="start_time" />
      </td>
      <td class="layui-td-gray-2">结束时间
      </td>
      <td colspan="3">
        <input type="text" name="end_time" lay-verify="" lay-reqText="请选择结束时间" placeholder="请选择结束时间"
          class="layui-input" value="" id="end_time" />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">计划进度
      </td>
      <td colspan="4">
        <textarea name="schedule" lay-verify="" lay-reqText="请输入" placeholder="请输入项目进度" class="layui-textarea"
          value=""></textarea>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">备注
      </td>
      <td colspan="4">
        <textarea name="schedule" lay-verify="" lay-reqText="请输入" placeholder="请输入备注" class="layui-textarea"
          value=""></textarea>
      </td>
    </tr>
  </table>

  <div class="pt-1">
    <input type="hidden" name="id" value="0" />
    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
      立即提交
    </button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>

<script>
  layui.use(["form", "layer"], function () {
    var laydate = layui.laydate;
    var form = layui.form,
      layer = layui.layer;

    laydate.render({
      elem: '#start_time',
    });
    laydate.render({
      elem: '#end_time',
    });

    // 获取项目类别
    fetch("/plan/index/getprojectcate")
      .then((response) => response.json())
      .then((data) => {
        var select = document.querySelector('select[name="cate"]');
        select.innerHTML = '<option value="">请选择项目类型</option>';
        data.data.forEach((cate) => {
          var option = document.createElement("option");
          option.value = cate.id;
          option.innerText = cate.cate;
          select.appendChild(option);
        });
        form.render("select");
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    // 监听提交事件
    form.on("submit(webform)", function (data) {
      // 发送请求并处理响应
      fetch("/plan/index/add", {
        method: "POST",
        body: JSON.stringify(data.field),
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((result) => {
          layer.msg(result.msg);
          if (result.code === 2) {
            setTimeout(function () {
              document.querySelector("form").reset(); // Reset the form
              location.reload(); // 刷新页面
            }, 1000);
          }
        });

      return false;
    });
  });
</script>