| HTML |
|---|
<!-- فونت وزیر --> <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" /> <h2 style="text-align:center; font-family:Vazir, Tahoma; color:#333; font-weight:600; margin-top:20px;"> مستندات اعتباربخشی </h2> <!-- فیلترهای زیبا --> <div id="search-filters" style=" display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:25px 0; direction:rtl;"> <select id="filterAxis" onchange="updateSubAxis(); filterTable()" style="flex:0 1 160px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;"> <option value="">انتخاب محور</option> <option value="modiriyat">رهبری و مدیریت</option> <option value="mored">مراقبت و درمان</option> <option value="hemayat">حمایت از گیرنده خدمت</option> </select> <select id="filterSubAxis" onchange="filterTable()" style="flex:0 1 160px; padding:10px 15px; border-radius:25px; border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px; background:#fff; cursor:pointer;"> <option value="">انتخاب زیرمحور</option> </select> </div> <table id="archiveTable" border="1" style="width:100%; border-collapse:collapse; text-align:center;"> <thead> <tr> <th>محور</th> <th>زیرمحور</th> <th>کمیته</th> <th>عنوان سند</th> <th>نوع سند</th> <th>تاریخ ثبت اولیه</th> <th>تاریخ آخرین بازنگری</th> <th>تاریخ ویرایش</th> <th>کد ویرایش</th> <th>فایل</th> </tr> </thead> <tbody id="archiveBody"></tbody> </table> <!-- CSS جدول زیبا --> <style> #myTable#archiveTable { width: 100%; border-collapse: separate; border-spacing: 0; width: 100%; font-family: Vazir, Tahoma; direction: rtl; box-shadow: 0 2px4px 8px12px rgba(0,0,0,0.108); border-radius: 10px12px; overflow: hidden; margin-bottom: 30px; } #myTable #archiveTable thead th { background-color: #f2f2f2: linear-gradient(90deg, #4facfe, #00f2fe); padding color: 10px#fff; font-weight: 600; text-align: center; } #archiveTable thead th { padding: 12px 10px; border-bottom: 1px solid #dddrgba(255,255,255,0.3); } #myTable #archiveTable tbody td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #eee#f0f0f0; } #myTable#archiveTable tbody tr:nth-child(even) { background-color: #fafafa#f9f9f9; } #myTable #archiveTable tbody tr:hover { background-color: #e6f7ff#e0f7ff; transition: background-color 0.3s; } #myTable #archiveTable theadtbody tr:first-child th:first-child { border-top-right-radius: 10px; } #myTable thead tr:first-child th:last-child { border-top-left-radius: 10px; } #myTable tbody tr:last-child td:first-child { border-bottom-right-radius: 10px; } #myTable tbody tr:last-child td:last-child { border-bottom-left-radius: 10px; } td a { color: #007bff; text-decoration: none; font-weight: 500; } #archiveTable tbody tr td a:hover { text-decoration: underline; } #search-filters select { transition: all 0.3s; } #search-filters select:hover { box-shadow: 0 2px 6px8px rgba(0,0,0,0.15); } </style> <script> async function loadArchive() { const pageIdArchive = "85045557"; const archiveName = "archive.json"; const res = await fetch(`/rest/api/content/${pageIdArchive}/child/attachment?filename=${archiveName}`, { credentials: 'include', headers: { 'Accept': 'application/json' } }); const data = await res.json(); if (!data.results || !data.results.length) return []; const txt = await fetch(data.results[0]._links.download, { credentials: 'include' }).then(r => r.text()); return JSON.parse(txt); } async function populateArchiveTable() { const tbody = document.getElementById('archiveBody'); tbody.innerHTML = ""; const archive = await loadArchive(); const axisMap = { modiriyat: "رهبری و مدیریت", mored: "مراقبت و درمان", hemayat: "حمایت از گیرنده خدمت" }; archive.forEach(r => { const tr = document.createElement("tr"); const mahvarTitle = axisMap[r.mahvar] || "-"; tr.innerHTML = ` <td>${mahvarTitle}</td> <td>${r.zirmohvar || "-"}</td> <td>${r.komiteh || "-"}</td> <td>${r.document_name || "-"}</td> <td>${r.noe_sanad || "-"}</td> <td>${r.date_initial || "-"}</td> <td>${r.date_revision || "-"}</td> <td>${r.date_update || "-"}</td> <td>${r.revision_code || "00"}</td> <td><a href="${r.file}" target="_blank">دانلود</a></td> `; tbody.appendChild(tr); }); } document.addEventListener("DOMContentLoaded", populateArchiveTable); </script> |
...