projectmanager/app/account/view/index/view.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>