license_info.html 5.6 KB

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