nas-tools/web/templates/setting/users.html

{% import 'macro/svg.html' as SVG %}
<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          用户管理
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="javascript:show_user_modal()" class="btn btn-primary d-none d-sm-inline-block">
            {{ SVG.plus() }}
            新增用户
          </a>
          <a href="javascript:show_user_modal()" class="btn btn-primary d-sm-none btn-icon">
            {{ SVG.plus() }}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12">
        <div class="card">
          <div class="card-body border-bottom py-3">
            <div class="d-flex">
              <div class="text-muted">
                共 {{ UserCount }} 条记录
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-vcenter card-table table-hover table-striped">
              <thead>
              <tr>
                <th>用户名</th>
                <th>权限</th>
                <th class="w-3"></th>
              </tr>
              </thead>
              <tbody>
              {% if Users %}
                {% for User in Users %}
                  <tr>
                    <td>{{ User.name or '' }}</td>
                    <td>
                      <div class="form-selectgroup">
                        {% for pri in User.pris %}
                          <span class="form-selectgroup-label form-selectgroup-item">{{ pri }}</span>
                        {% endfor %}
                      </div>
                    </td>
                    <td>
                      <a href="javascript:delete_user('{{ User.name }}')" title="删除用户">
                        {{ SVG.x() }}
                      </a>
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="3" align="center">没有数据</td>
                </tr>
              {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-user" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新增用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">用户名</label>
              <input type="text" value="" id="user_name" class="form-control">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">密码</label>
              <input type="password" value="" id="user_password" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="mb-3">
            <label class="form-label required">权限</label>
            <div class="form-selectgroup">
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="我的媒体库" class="form-selectgroup-input">
                <span class="form-selectgroup-label">我的媒体库</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="资源搜索" class="form-selectgroup-input" checked>
                <span class="form-selectgroup-label">资源搜索</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="探索" class="form-selectgroup-input" checked>
                <span class="form-selectgroup-label">探索</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="站点管理" class="form-selectgroup-input">
                <span class="form-selectgroup-label">站点管理</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="订阅管理" class="form-selectgroup-input">
                <span class="form-selectgroup-label">订阅管理</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="下载管理" class="form-selectgroup-input">
                <span class="form-selectgroup-label">下载管理</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="媒体整理" class="form-selectgroup-input">
                <span class="form-selectgroup-label">媒体整理</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="服务" class="form-selectgroup-input">
                <span class="form-selectgroup-label">服务</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="checkbox" name="user_pris" value="系统设置" class="form-selectgroup-input">
                <span class="form-selectgroup-label">系统设置</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link me-auto" data-bs-dismiss="modal">取消</button>
        <a href="javascript:add_user()" id="add_user_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 打开新增窗口
  function show_user_modal() {
    $("#modal-user").modal('show');
  }

  // 新增用户
  function add_user() {
    const name = $("#user_name").val();
    const password = $("#user_password").val();
    let pris = select_GetSelectedVAL("user_pris");
    if (!name) {
      $("#user_name").addClass("is-invalid");
      return;
    } else {
      $("#user_name").removeClass("is-invalid");
    }
    if (!password) {
      $("#user_password").addClass("is-invalid");
      return;
    } else {
      $("#user_password").removeClass("is-invalid");
    }
    if (pris.length === 0) {
      return;
    }
    $("#modal-user").modal('hide');
    const params = {"oper": "add", "name": name, "password": password, "pris": pris};
    ajax_post("user_manager", params, function (ret) {
      window_history_refresh();
    });
  }

  // 删除用户
  function delete_user(name) {
    const params = {"oper": "del", "name": name};
    ajax_post("user_manager", params, function (ret) {
      window_history_refresh();
    });
  }
</script>