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

<form class="layui-form page-content p-4">
  <h3 class="h3-title">新建报销</h3>
  <div class="p-4 border-b">
    <h3 class="h3-title hover">
      <span>基本信息</span>
    </h3>
  </div>
  <div class="layui-row border-b">
    <table class="layui-table layui-table-form">
      <tr>
        <td class="layui-td-gray-2">账单编号<font>*</font>
        </td>
        <td>
          <input type="text" name="order" lay-verify="required" disabled class="layui-input"
            value="{{ generateBillNumber() }}" />
        </td>
        <td class="layui-td-gray-2">隶属部门<font>*</font>
        </td>
        <td colspan="3">
          <select name="department" lay-verify="required" lay-reqText="请选择项目类型" class="layui-select" lay-search=""
            lay-filter="department"></select>
        </td> 
      </tr>
      <tr>
        <td class="layui-td-gray-2">创建者
        </td>
        <td colspan="4">
          <input type="hidden" name="creater" lay-verify="required" disabled class="layui-input" value="" />
          <input type="text" name="creatername" required disabled class="layui-input" value="" />
        </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=""
            rows="1"></textarea>
        </td>
      </tr>
    </table>
  </div>

  <div class="pt-1">
    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">
      立即提交
    </button>
  </div>
</form>

<script>
  //生成账单编号
  function generateBillNumber() {
    var currentDate = new Date();
    var year = currentDate.getFullYear().toString().slice(-2);
    var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
    var day = ('0' + currentDate.getDate()).slice(-2);
    var hours = ('0' + currentDate.getHours()).slice(-2);
    var minutes = ('0' + currentDate.getMinutes()).slice(-2);
    var seconds = ('0' + currentDate.getSeconds()).slice(-2);
    var milliseconds = ('00' + currentDate.getMilliseconds()).slice(-3);

    return year + month + day + hours + minutes + seconds + milliseconds;
  }
  // 修改生成账单编号的函数，直接设置到对应的input元素的value属性上
  function setBillNumber() {
    var billNumber = generateBillNumber();
    document.querySelector('input[name="order"]').value = billNumber;
  }

  // 调用函数设置账单编号
  setBillNumber();

</script>

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

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

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

    // 获取创建者
    const apiUrl = '/reimbursement/index/getcreater';

    fetch(apiUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error('接口反馈有误！');
        }
        return response.json();
      })
      .then(data => {
        // 假设返回的数据中创建者的名字存储在 data.createrId
        document.querySelector('input[name="creater"]').value = data.createrId;
        document.querySelector('input[name="creatername"]').value = data.createrName;
      })
      .catch(error => {
        console.error('获取操作出现问题:', error);
      });

    // 监听提交事件
    form.on("submit(webform)", function (data) {
      // 发送请求并处理响应
      fetch("/reimbursement/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>