projectmanager/app/account/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>
        <select
          name="category"
          lay-verify="required"
          lay-reqText="请选择账号类型"
          class="layui-select"
          lay-search=""
          lay-filter="category"
        ></select>
      </td>
      <td class="layui-td-gray-2">账号渠道<font>*</font></td>
      <td colspan="3">
        <select
          name="channel"
          lay-verify="required"
          lay-reqText="请选择账号渠道"
          class="layui-select"
          lay-search=""
          lay-filter="channel"
        ></select>
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">电子邮箱<font>*</font></td>
      <td>
        <input
          type="text"
          name="email"
          lay-verify="required"
          lay-reqText="请输入电子邮箱"
          placeholder="请输入电子邮箱"
          class="layui-input"
          value=""
        />
      </td>
      <td class="layui-td-gray-2">创建手机号<font>*</font></td>
      <td colspan="3">
        <input
          type="text"
          name="regphone"
          lay-verify="required"
          lay-reqText="请输入创建手机号"
          placeholder="请输入创建手机号"
          class="layui-input"
          value=""
        />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">账号<font>*</font></td>
      <td>
        <input
          type="text"
          name="account"
          lay-verify="required"
          lay-reqText="请输入账号"
          placeholder="请输入账号"
          class="layui-input"
          value=""
        />
      </td>
      <td class="layui-td-gray-2">密码<font>*</font></td>
      <td>
        <input
          type="text"
          name="pwd"
          lay-verify="required"
          lay-reqText="请输入密码"
          placeholder="请输入密码"
          class="layui-input"
          value=""
        />
      </td>
    </tr>
    <tr>
      <td class="layui-td-gray-2">备注<font>*</font></td>
      <td colspan="3">
        <textarea
          type="text"
          name="remark"
          lay-verify="required"
          lay-reqText="请输入备注"
          placeholder="请输入备注"
          class="layui-input"
          value=""
          style="height: 200px"
        />
      </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 form = layui.form,
      layer = layui.layer;

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

    // 获取帐户渠道
    fetch("/account/index/getaddchannel")
      .then((response) => response.json())
      .then((data) => {
        var select = document.querySelector('select[name="channel"]');
        select.innerHTML = '<option value="">请选择账号渠道</option>';
        data.forEach((channel) => {
          var option = document.createElement("option");
          option.value = channel.id;
          option.innerText = channel.channel;
          select.appendChild(option);
        });
        form.render("select");
      })
      .catch((error) => {
        console.error("Error:", error);
      });

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