license_info.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>XUGULicense</title>
  7. <link rel="stylesheet" href="license_info.css">
  8. <link rel="stylesheet" href="license_info_distribution.css">
  9. </head>
  10. <body>
  11. <header>
  12. <h1>XUGU License</h1>
  13. <div class="right-container">
  14. <div id="capture-license-btn" class="capture-license-button" style="display: none;">
  15. 主动抓取 License 数据
  16. </div>
  17. <div class="login-button">点击显示用户信息</div>
  18. </div>
  19. </header>
  20. <!-- 模态框结构 -->
  21. <div id="loginModal" class="login-modal">
  22. <div class="login-modal-content">
  23. <span class="login-modal-close">&times;</span> <!-- 关闭按钮放在这里 -->
  24. <div id="userInfoContainer"></div>
  25. </div>
  26. </div>
  27. <div class="container">
  28. <aside>
  29. <nav>
  30. <ul>
  31. <li><a href="#" class="active" id="license-info-link"><i class="fas fa-home"></i> License 信息</a></li>
  32. <li><a href="#" id="user-management-link"><i class="fas fa-users"></i> 用户管理</a></li>
  33. <li><a href="#" id="role-management-link"><i class="fas fa-users"></i> 角色管理</a></li>
  34. </ul>
  35. </nav>
  36. </aside>
  37. <main>
  38. <!-- 包裹搜索框、下拉框、时间选择框和确定按钮的 div -->
  39. <div class="search-container">
  40. <!-- License 状态下拉框 -->
  41. <select id="license-status-filter" aria-label="选择 License 状态">
  42. <option value="">License 状态</option>
  43. <option value="已生成">已生成</option>
  44. <option value="未生成">未生成</option>
  45. <option value="已失效">已失效</option>
  46. </select>
  47. <!-- 开始时间选择框,类型改为 date -->
  48. <input type="date" id="start-date" placeholder="开始时间" />
  49. <!-- 结束时间选择框,类型改为 date -->
  50. <input type="date" id="end-date" placeholder="结束时间" />
  51. <!-- 搜索框 -->
  52. <input type="text" id="search-bar" style="display: none;" placeholder="搜索..." />
  53. <!-- 确定按钮 -->
  54. <button id="submit-button">确定</button>
  55. <button id="reset-button">返回</button>
  56. </div>
  57. <div class="license-info-container" id="license-info-restaurant-list"> </div>
  58. <!-- 这是显示内容的区域 -->
  59. </main>
  60. </div>
  61. <!-- 模态框结构 -->
  62. <div id="license-info-modal" class="license-info-modal">
  63. <div class="license-info-modal-content">
  64. <!-- 关闭模态框的按钮 -->
  65. <span class="license-info-close">&times;</span>
  66. <!-- 上半部分: 按钮和项目信息 -->
  67. <div id="license-info-modal-header" class="license-info-modal-header">
  68. </div>
  69. <!-- 下半部分: 动态显示字段内容 -->
  70. <div id="license-info-modal-body" class="license-info-modal-body"></div>
  71. <!-- 分页按钮 -->
  72. <div class="license-info-modal-pagination">
  73. <button id="prev-page">上一页</button>
  74. <button id="next-page">下一页</button>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- 分发模态框 -->
  79. <div id="DistributeModal" class="DistributeModal">
  80. <div class="DistributeModal-content">
  81. <span class="DistributeModal-close">&times;</span>
  82. <!-- 上半部分: 分发邮箱 -->
  83. <div id="DistributeModal-email-section" class="DistributeModal-section">
  84. <h2>分发邮箱</h2>
  85. <div class="DistributeModal-email-button-wrapper">
  86. <button id="DistributeModal-add-email-btn" class="DistributeModal-button">新增邮箱</button>
  87. <button id="DistributeModal-email-confirm-btn" class="DistributeModal-button">确认邮箱分发</button>
  88. </div>
  89. <div id="DistributeModal-email-inputs">
  90. <!-- 动态生成邮箱输入 -->
  91. </div>
  92. <!-- 新增:复选框行 -->
  93. <div id="DistributeModal-checkbox-row" class="DistributeModal-checkbox-wrapper">
  94. <label class="DistributeModal-checkbox-label">
  95. <input type="checkbox" id="salesEmailCheckbox" class="DistributeModal-checkbox">
  96. <span class="DistributeModal-checkbox-custom"></span>
  97. 销售邮箱 (${item.SalesPerson}: ${item.SalesEmail})
  98. </label>
  99. <label class="DistributeModal-checkbox-label">
  100. <input type="checkbox" id="supportEmailCheckbox" class="DistributeModal-checkbox">
  101. <span class="DistributeModal-checkbox-custom"></span>
  102. 运维邮箱 (${item.SupportPerson}: ${item.SupportEmail})
  103. </label>
  104. </div>
  105. </div>
  106. <!-- 下半部分: 分发用户 -->
  107. <div id="DistributeModal-user-section" class="DistributeModal-section">
  108. <div class="DistributeModal-user-button-wrapper">
  109. <button id="distributeUser-add-select-btn" class="DistributeModal-button">新增用户下拉框</button>
  110. <button id="distributeUser-confirm-btn" class="DistributeModal-button">确认用户分发</button>
  111. </div>
  112. <div id="DistributeModal-user-inputs">
  113. <!-- 动态生成的用户选择框 -->
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- 分发历史模态框 -->
  119. <div id="distributionHistory-modal" class="distributionHistory-modal">
  120. <div class="distributionHistory-modal-content">
  121. <span class="distributionHistory-modal-close">&times;</span> <!-- 修改了关闭按钮的类名 -->
  122. <h2>分发历史</h2>
  123. <div id="distributionHistory-user-content"></div> <!-- 修改了用户分发记录的 ID -->
  124. <div id="distributionHistory-email-content"></div> <!-- 修改了邮箱分发记录的 ID -->
  125. </div>
  126. </div>
  127. <script src="license_info.js"></script>
  128. <script src="license_info_modal.js"></script>
  129. <script src="license_info_distribution.js"></script>
  130. <script
  131. src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js">
  132. </script>
  133. </body>
  134. </html>