hanhai88
/
tcs-front-tabler


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
							<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户-SIMANC TCS</title>
    <!-- 在页面加载前应用保存的主题设置，避免闪烁 -->
    <script src="../js/themePreSet.js"></script>
    <!-- 预渲染导航栏，减少延迟 -->
    <script src="../js/headerPreRender.js"></script>
    <!-- Tabler Core CSS -->
    <link
      href="../assets/css/app.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="page">
      <!-- 顶部导航栏容器 -->
      <div id="tcs-header-container" class="tcs-header-container"></div>
      <header
        class="navbar navbar-expand-md tcs-container-space-x tcs-navbar-compact justify-content-between flex-column flex-md-row"
      >
        <div class="d-flex flex-column flex-md-row w-100 align-items-start align-items-md-center mb-2 mb-md-0">
          <div class="d-flex flex-wrap align-items-center me-md-auto">
            <div class="d-flex flex-wrap align-items-center">
              <!-- <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">开始:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-start"
                />
              </div>
              <div class="tcs-filter-group mb-2 mb-md-0 me-md-2">
                <label class="form-label mb-0 me-2 d-inline">结束:</label>
                <input
                  type="date"
                  class="form-control tcs-form-item"
                  value="2025-03-16"
                  id="date-end"
                />
              </div> -->
              <!-- <div class="tcs-filter-group mb-2 mb-md-0">
                <label class="form-label mb-0 me-2 d-inline">区域:</label>
                <div>
                  <select class="form-select tcs-form-item" id="status-filter">
                    <option selected>全部</option>
                    <option>A6</option>
                    <option>A7</option>
                    <option>A8</option>
                    <option>A9</option>
                    <option>A10</option>
                  </select>
                </div>
              </div> -->
            </div>
          </div>
          <div class="d-flex align-items-center ms-md-auto mt-2 mt-md-0">
            <button class="btn btn-primary tcs-form-item" data-bs-toggle="modal" data-bs-target="#addUserModal">
              <i class="ti ti-plus me-1"></i>添加
            </button>
            <!-- <button class="btn btn-danger ms-2 tcs-form-item">
              <i class="ti ti-refresh me-1"></i>更新云地图
            </button> -->
          </div>
        </div>
      </header>
      <!-- 页面内容 -->
      <div
        class="page-wrapper"
      >
      <div class="card tcs-card-full border-0">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table
              class="table table-vcenter card-table table-hover tcs-table-compact"
              id="data-table"
            >
              <thead>
                <tr>
                  <th>编号</th>
                  <th>类型</th>
                  <th>用户名</th>
                  <th>说明</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <!-- 表格内容将由JavaScript动态生成 -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer d-flex align-items-center tcs-card-footer-compact flex-column flex-md-row">
          <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center mb-2 mb-md-0 w-100 w-md-auto">
            <span id="pagination-info" class="text-secondary mb-2 mb-md-0">
              <!-- 分页信息将由JavaScript动态生成 -->
            </span>
            <div class="ms-0 ms-md-3 d-flex align-items-center">
              <span class="me-2 text-secondary">每页显示</span>
              <div class="dropdown d-inline-block">
                <button
                  class="btn dropdown-toggle px-2 tcs-form-item-pagiton"
                  type="button"
                  data-bs-toggle="dropdown"
                >
                  <span id="current-page-size">10</span>
                  <span class="ms-1 d-none d-sm-inline">条记录</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="10"
                    >10</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="20"
                    >20</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="50"
                    >50</a
                  >
                  <a
                    class="dropdown-item page-size-item"
                    href="#"
                    data-size="100"
                    >100</a
                  >
                </div>
              </div>
            </div>
          </div>
          <ul class="pagination m-0 ms-md-auto mt-2 mt-md-0" id="pagination-controls">
            <!-- 分页控件将由JavaScript动态生成 -->
          </ul>
        </div>
      </div>
    </div>

    <!-- 添加用户模态框 -->
    <div class="modal modal-blur fade" id="addUserModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable" 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">
            <form id="addUserForm" class="needs-validation" novalidate>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">类型</label>
                <div class="col">
                  <select class="form-select" name="type" required>
                    <option value="" selected disabled>请选择用户类型</option>
                    <option value="超级管理员">超级管理员</option>
                    <option value="配置管理员">配置管理员</option>
                    <option value="用户">用户</option>
                  </select>
                  <div class="invalid-feedback">请选择用户类型</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">用户名</label>
                <div class="col">
                  <input type="text" class="form-control" name="username" placeholder="用户名" required>
                  <div class="invalid-feedback">请输入用户名</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">密码</label>
                <div class="col">
                  <input type="password" class="form-control" name="password" placeholder="密码" required minlength="6">
                  <div class="invalid-feedback">请输入至少6位的密码</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label required text-end">确认密码</label>
                <div class="col">
                  <input type="password" class="form-control" name="confirmPassword" placeholder="确认密码" required>
                  <div class="invalid-feedback">请确认密码</div>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-3 col-form-label text-end">说明</label>
                <div class="col">
                  <textarea class="form-control" name="description" rows="3" placeholder="用户说明信息"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码模态框 -->
    <div class="modal modal-blur fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-md 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">
            <form id="changePasswordForm" class="needs-validation" novalidate>
              <input type="hidden" name="userId" id="change-password-user-id">
              <div class="mb-3">
                <label class="form-label">用户名</label>
                <div class="form-control-plaintext" id="change-password-username"></div>
              </div>
              <div class="mb-3">
                <label class="form-label required">新密码</label>
                <input type="password" class="form-control" name="newPassword" placeholder="新密码" required minlength="6">
                <div class="invalid-feedback">请输入至少6位的新密码</div>
              </div>
              <div class="mb-3">
                <label class="form-label required">确认新密码</label>
                <input type="password" class="form-control" name="confirmNewPassword" placeholder="确认新密码" required>
                <div class="invalid-feedback">请确认新密码</div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="savePasswordBtn">保存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabler Core JS -->
    <script src="../assets/js/tabler.min.js"></script>
    <script src="../assets/js/jquery-3.7.1.min.js"></script>
    <script src="../js/themePoc.js"></script>
    <!-- 表格组件JS -->
    <script src="../js/tcsTable.js"></script>
    <!-- 模态框组件JS -->
    <script src="../js/tcsModal.js"></script>
    <!-- 页面特定的JavaScript -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 配置表格选项
        const tableOptions = {
          tableId: "data-table",
          paginationInfoId: "pagination-info",
          paginationControlsId: "pagination-controls",
          pageSizeId: "current-page-size",
          pageSizeItemClass: "page-size-item",
          defaultPageSize: 10,
          columns: [
            { field: "id", title: "编号", className: "tcs-table-id-column" },
            { field: "type", title: "类型", className: "tcs-table-type-column" },
            { field: "username", title: "用户名", className: "tcs-table-username-column" },
            { field: "description", title: "说明", className: "tcs-table-desc-column" },
            { 
              field: "actions", 
              title: "操作", 
              className: "tcs-table-action-column",
              formatter: function(value, row) {
                return `<div class="btn-list">
                          <button class="btn btn-sm btn-outline-primary tcs-table-oper-btn" data-id="${row.id}" data-bs-toggle="modal" data-bs-target="#changePasswordModal">修改密码</button>
                        </div>`;
              }
            }
          ]
        };
        
        // 生成用户数据
        const userData = generateUserData();
        
        // 初始化表格
        const userTable = new TcsTable(tableOptions, userData);
        
        // 生成用户数据
        function generateUserData() {
          return [
            {
              id: 0,
              type: "超级管理员",
              username: "supper",
              description: "超级管理员可配置本系统所有信息",
              actions: ""
            },
            {
              id: 1,
              type: "配置管理员",
              username: "admin",
              description: "可创建和区域相关的配置",
              actions: ""
            },
            {
              id: 2,
              type: "用户",
              username: "user",
              description: "操作用户",
              actions: ""
            }
          ];
        }
        
        // 时间格式化函数
        function formatDateTime(dateTimeStr) {
          if (!dateTimeStr || dateTimeStr === "-") return "-";
          
          const date = new Date(dateTimeStr.replace(" ", "T"));
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
        }

        // ---------------------初始化模态框组件---------------------
        
        // 添加用户模态框
        const addUserModal = new TcsModal({
          modalId: 'addUserModal',
          confirmBtnId: 'saveUserBtn',
          formId: 'addUserForm',
          onValidate: function() {
            // 验证两次密码是否一致
            const form = document.getElementById('addUserForm');
            const password = form.querySelector('[name="password"]').value;
            const confirmPassword = form.querySelector('[name="confirmPassword"]').value;
            
            if (password !== confirmPassword) {
              TcsNotify.show('两次输入的密码不一致', 'danger');
              return false;
            }
            
            return true;
          },
          onConfirm: function(data) {
            // 这里添加保存用户的逻辑
            console.log('保存新用户', data);
            
            // 模拟添加新用户到表格
            const newId = userData.length;
            const newUser = {
              id: newId,
              type: data.type,
              username: data.username,
              description: data.description || '',
              actions: ""
            };
            
            // 添加到数据源
            userData.push(newUser);
            
            // 刷新表格
            userTable.refresh(userData);
            
            // 显示成功提示
            TcsNotify.show('用户已添加成功！', 'success');
          }
        });
        
        // 修改密码模态框
        document.querySelectorAll('#data-table').forEach(table => {
          table.addEventListener('click', function(e) {
            // 检查是否点击了修改密码按钮
            const passwordBtn = e.target.closest('button[data-bs-target="#changePasswordModal"]');
            if (passwordBtn) {
              const userId = passwordBtn.getAttribute('data-id');
              
              // 查找用户数据
              const user = userData.find(u => u.id == userId);
              if (user) {
                // 填充模态框数据
                document.getElementById('change-password-user-id').value = user.id;
                document.getElementById('change-password-username').textContent = user.username;
              }
            }
          });
        });
        
        // 保存密码按钮
        const changePasswordModal = new TcsModal({
          modalId: 'changePasswordModal',
          confirmBtnId: 'savePasswordBtn',
          formId: 'changePasswordForm',
          onValidate: function() {
            // 验证两次密码是否一致
            const form = document.getElementById('changePasswordForm');
            const newPassword = form.querySelector('[name="newPassword"]').value;
            const confirmNewPassword = form.querySelector('[name="confirmNewPassword"]').value;
            
            if (newPassword !== confirmNewPassword) {
              TcsNotify.show('两次输入的密码不一致', 'danger');
              return false;
            }
            
            return true;
          },
          onConfirm: function(data) {
            // 这里添加修改密码的逻辑
            console.log('修改密码', data);
            
            // 查找用户
            const user = userData.find(u => u.id == data.userId);
            if (user) {
              // 在实际应用中，这里会发送请求到服务器修改密码
              
              // 显示成功提示
              TcsNotify.show(`用户"${user.username}"的密码已修改成功！`, 'success');
            }
          }
        });
      });
    </script>
  </body>
</html>