| HTML |
|---|
<div id="mediq-dashboard" dir="rtl"> <style> /* ============================================================ MEDIQ DASHBOARD - SUPPLY PRESENTATION VERSION ============================================================ */ #mediq-dashboard, #mediq-dashboard * { box-sizing: border-box; } #mediq-dashboard { --navy: #073553; --navy-dark: #062d49; --primary: #08b9b0; --primary-dark: #069e98; --text: #173b59; --muted: #748b9e; --border: #dce9ef; --bg: #f4f9fb; --white: #ffffff; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; overflow: hidden; direction: rtl; font-family: Tahoma, Arial, sans-serif; color: var(--text); background: radial-gradient( circle at 12% 4%, rgba(9,185,176,.09), transparent 27% ), #f4f9fb; } /* ============================================================ HIDE CONFLUENCE ============================================================ */ html, body, #page, #full-height-container, #main, #content, #main-content, .aui-page-panel, .aui-page-panel-inner, .aui-page-panel-content, .content-body { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } html, body { overflow: hidden !important; } #footer, footer, .aui-footer, #header, #main-header, .breadcrumbs, #breadcrumbs, .page-metadata { display: none !important; } /* ============================================================ APP ============================================================ */ .mq-app { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0,1fr) 255px; direction: ltr; } /* ============================================================ SIDEBAR ============================================================ */ .mq-sidebar { grid-column: 2; height: 100vh; padding: 24px 17px; direction: rtl; color: #fff; display: flex; flex-direction: column; background: linear-gradient( 180deg, #073b5c 0%, #062e4a 100% ); box-shadow: -12px 0 45px rgba(7,53,83,.11); } /* LOGO */ .mq-logo { width: 100%; text-align: center; padding: 3px 5px 22px; border-bottom: 1px solid rgba(255,255,255,.10); } .mq-logo img { width: 174px; max-width: 92%; height: auto; } /* USER */ .mq-user { margin-top: 17px; padding: 14px 15px; border-radius: 14px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); } .mq-user-name { font-size: 12px; font-weight: 900; } .mq-user-role { margin-top: 6px; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 600; } /* ============================================================ LIFE CYCLE ============================================================ */ .mq-life-title { margin: 26px 7px 9px; color: rgba(255,255,255,.39); font-size: 9px; font-weight: 700; } .mq-life { display: flex; flex-direction: column; gap: 6px; } .mq-life-item { position: relative; min-height: 46px; padding: 0 13px; border-radius: 11px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.69); font-size: 11px; font-weight: 800; cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease, transform .15s ease; } .mq-life-item:hover { color: #fff; background: rgba(255,255,255,.075); } .mq-life-item.active { color: #fff; background: linear-gradient( 90deg, #08b9b0, #079e99 ); box-shadow: 0 10px 23px rgba(8,185,176,.18); } .mq-life-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); } .mq-life-item.active .mq-life-icon { background: rgba(255,255,255,.14); } .mq-life-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ LOGOUT ============================================================ */ .mq-sidebar-bottom { margin-top: auto; } .mq-logout { min-height: 43px; padding: 0 13px; border-radius: 10px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.65); font-size: 10px; font-weight: 700; cursor: pointer; } .mq-logout:hover { color: #fff; background: rgba(255,255,255,.07); } /* ============================================================ MAIN ============================================================ */ .mq-main { grid-column: 1; height: 100vh; direction: rtl; overflow-y: auto; padding: 0 clamp(25px,4vw,55px) 45px; } /* ============================================================ HEADER ============================================================ */ .mq-header { min-height: 88px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .mq-header-right { min-width: 0; } .mq-page-title { color: var(--navy); font-size: 20px; font-weight: 900; } .mq-page-description { margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 600; } /* CENTER */ .mq-center { padding: 10px 14px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: #536f84; font-size: 10px; font-weight: 700; } /* ============================================================ BREADCRUMB ============================================================ */ .mq-breadcrumb { min-height: 54px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .mq-bread-item { color: #8197a8; font-size: 10px; font-weight: 700; } .mq-bread-current { color: var(--primary-dark); font-weight: 900; } .mq-bread-separator { color: #b6c4cf; } /* ============================================================ HERO ============================================================ */ .mq-hero { position: relative; overflow: hidden; min-height: 112px; padding: 21px 24px; border-radius: 18px; color: #fff; display: flex; align-items: center; justify-content: space-between; background: linear-gradient( 105deg, #073b5c, #087c7d ); box-shadow: 0 15px 35px rgba(7,53,83,.10); } .mq-hero::before { content: ""; position: absolute; width: 250px; height: 250px; left: -70px; top: -150px; border-radius: 50%; background: rgba(16,222,205,.14); } .mq-hero-title { position: relative; z-index: 2; font-size: 16px; font-weight: 900; } .mq-hero-desc { position: relative; z-index: 2; margin-top: 6px; color: rgba(255,255,255,.70); font-size: 10px; } .mq-back-btn { position: relative; z-index: 2; display: none; min-width: 88px; height: 36px; padding: 0 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; font-family: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } .mq-back-btn:hover { background: rgba(255,255,255,.16); } /* ============================================================ CONTENT ============================================================ */ .mq-view { margin-top: 23px; animation: mqFade .22s ease; } @keyframes mqFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ SECTION HEADER ============================================================ */ .mq-section-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .mq-section-title { color: var(--navy); font-size: 14px; font-weight: 900; } .mq-section-desc { margin-top: 4px; color: var(--muted); font-size: 9px; } /* ============================================================ MODULE CARDS ============================================================ */ .mq-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; } .mq-module-card { position: relative; min-height: 176px; padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: #fff; cursor: pointer; box-shadow: 0 9px 26px rgba(19,65,90,.035); transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease; } .mq-module-card:hover { transform: translateY(-4px); border-color: rgba(8,185,176,.45); box-shadow: 0 18px 40px rgba(19,65,90,.08); } .mq-module-icon { width: 48px; height: 48px; margin-bottom: 17px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); background: linear-gradient( 145deg, #e9fbf9, #d9f7f3 ); } .mq-module-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mq-module-name { color: var(--navy); font-size: 12px; font-weight: 900; line-height: 1.8; } .mq-module-arrow { position: absolute; left: 18px; bottom: 17px; width: 29px; height: 29px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8ea5b5; background: #f3f7f9; font-size: 18px; } .mq-module-card:hover .mq-module-arrow { color: #fff; background: var(--primary); } /* ============================================================ LARGE ACTION CARDS ============================================================ */ .mq-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; } .mq-action-card { min-height: 155px; padding: 19px; border: 1px solid var(--border); border-radius: 17px; background: #fff; cursor: pointer; display: flex; align-items: center; gap: 16px; transition: .17s; } .mq-action-card:hover { border-color: rgba(8,185,176,.45); transform: translateY(-2px); box-shadow: 0 15px 35px rgba(24,74,98,.06); } .mq-action-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); background: #e7faf8; } .mq-action-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mq-action-title { color: var(--navy); font-size: 13px; font-weight: 900; } .mq-action-sub { margin-top: 6px; color: var(--muted); font-size: 9px; } /* ============================================================ ASSET LIST MENU ============================================================ */ .mq-list-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 16px; direction: ltr; } .mq-list-menu, .mq-preview { direction: rtl; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(19,65,90,.035); } .mq-list-menu { padding: 13px; } .mq-list-option { min-height: 52px; margin-bottom: 5px; padding: 0 13px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; color: #536f84; font-size: 10px; font-weight: 800; cursor: pointer; transition: .15s; } .mq-list-option:hover { color: var(--primary-dark); background: #f1faf9; } .mq-list-option.active { color: #087f7a; background: #e9f9f7; } .mq-option-badge { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(8,185,176,.09); color: var(--primary-dark); } /* ============================================================ PREVIEW ============================================================ */ .mq-preview { min-height: 390px; padding: 23px; } .mq-preview-title { color: var(--navy); font-size: 14px; font-weight: 900; } .mq-preview-description { margin-top: 7px; color: var(--muted); font-size: 9px; } /* MOCK CONTENT */ .mq-demo-box { margin-top: 23px; padding: 20px; border: 1px dashed #bdd4df; border-radius: 14px; background: #f8fbfc; } .mq-demo-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); background: #e6f9f7; } .mq-demo-text { color: #557287; text-align: center; font-size: 10px; line-height: 2; } .mq-demo-button { display: block; min-width: 125px; height: 38px; margin: 17px auto 0; border: 0; border-radius: 9px; background: linear-gradient( 90deg, #08aaa4, #0bc1b8 ); color: #fff; font-family: inherit; font-size: 10px; font-weight: 800; cursor: pointer; } /* ============================================================ PLACEHOLDER LIFE CYCLE ============================================================ */ .mq-empty-cycle { min-height: 350px; border: 1px dashed #c7dce5; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(255,255,255,.65); color: #7890a2; } .mq-empty-cycle strong { color: var(--navy); font-size: 15px; } .mq-empty-cycle span { margin-top: 8px; font-size: 10px; } /* ============================================================ TOAST ============================================================ */ .mq-toast { position: fixed; left: 30px; bottom: 27px; z-index: 10020; min-width: 260px; max-width: 360px; padding: 13px 16px; border-radius: 11px; color: #fff; background: #073b5c; box-shadow: 0 16px 40px rgba(0,0,0,.15); font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; } .mq-toast.show { opacity: 1; transform: translateY(0); } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1300px) { .mq-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:1000px) { .mq-app { grid-template-columns: minmax(0,1fr) 210px; } .mq-list-layout { grid-template-columns: 280px minmax(0,1fr); } } @media(max-width:800px) { .mq-sidebar { display: none; } .mq-app { display: block; } .mq-main { width: 100%; } .mq-card-grid, .mq-action-grid, .mq-list-layout { grid-template-columns: 1fr; } } </style> <div class="mq-app"> <!-- /* ============================================================ MEDIQ SIDEBAR NAVIGATION MAINTREE ============================================================ */ .mq-life-> <main class="mq-main"> title, .mq-life { display: none <!-- HEADER --> !important; } .mq-tree-title { margin: 22px 7px 9px; <header class="mq-header"> color: rgba(255,255,255,.39); font-size: 9px; <div class="mq-header-right"> font-weight: 700; } .mq-tree { display: flex; flex-direction: column; gap: <div5px; overflow-y: auto; overflow-x: hidden; padding-left: 2px; id="mqPageTitle" scrollbar-width: thin; } .mq-tree::-webkit-scrollbar { width: 4px; } .mq-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); class="mq-page-title"border-radius: 10px; } .mq-tree-row { min-height: 38px; padding: 0 10px; >border-radius: 9px; display: flex; align-items: center; gap: 8px; تأمینcolor: rgba(255,255,255,.70); font-size: 10px; font-weight: 800; cursor: </div> pointer; user-select: none; transition: background .15s ease, color .15s <divease; } .mq-tree-row:hover { color: #fff; background: rgba(255,255,255,.07); } .mq-tree-row.active { id="mqPageDesc"color: #fff; background: linear-gradient(90deg,#08b9b0,#079e99); } .mq-tree-row.parent-active:not(.active) { color: #fff; background: rgba(255,255,255,.055); } .mq-tree-row.level-1 { padding-right: class="mq-page-description" > مدیریت فرآیند تأمین تجهیزات پزشکی </div> </div> <div class="mq-center"> بیمارستان / مرکز درمانی </div> </header> <!-- BREADCRUMB --> <div 10px; } .mq-tree-row.level-2 { padding-right: 23px; font-size: 9.5px; } .mq-tree-row.level-3 { padding-right: 36px; font-size: 9px; } .mq-tree-row.level-4 { padding-right: 49px; font-size: 8.7px; color: rgba(255,255,255,.60); } .mq-tree-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: rgba(255,255,255,.32); } .mq-tree-row.active .mq-tree-dot { background: #fff; } .mq-tree-arrow { margin-right: auto; color: rgba(255,255,255,.45); font-size: 13px; transition: transform .18s ease; } .mq-tree-row.open > .mq-tree-arrow { transform: rotate(90deg); } .mq-tree-children { display: none; margin-top: 2px; } .mq-tree-children.open { display: block; } .mq-tree-separator { height: 1px; margin: 8px 9px; background: rgba(255,255,255,.08); } </style> <div class="mq-app"> <!-- ===================================================== MAIN id="mqBreadcrumb"===================================================== --> <main class="mq-breadcrumbmain" ></div>> <!-- HEROHEADER --> <section<header class="mq-heroheader"> <div> <div class="mq-header-right"> <div id="mqHeroTitlemqPageTitle" class="mq-heropage-title" > مدیریت تجهیزاتتأمین </div> <div id="mqHeroDescmqPageDesc" class="mq-heropage-descdescription" > بخشمدیریت موردنظرفرآیند خودتأمین را انتخاب کنید.تجهیزات پزشکی </div> </div> <button <div class="mq-center"> بیمارستان / مرکز درمانی id="mqBack" </div> </header> <!-- BREADCRUMB class="mq-back-btn"> <div type id="buttonmqBreadcrumb" >class="mq-breadcrumb" ></div> <!-- HERO بازگشت--> <section class="mq-hero"> </button> </section><div> <!-- DYNAMIC VIEW --><div <div id="mqViewmqHeroTitle" class="mq-viewhero-title" ></div> > </main> <!-- ===================================================== مدیریت SIDEBARتجهیزات ===================================================== --> <aside class="mq-sidebar"> </div> <div class="mq-logo"> <div <img srcid="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.pngmqHeroDesc" alt class="MediQmq-hero-desc" > </div> <div class="mq-user"> <div بخش موردنظر خود را انتخاب کنید. id="mqUserName"</div> class="mq-user-name"</div> ><button کاربر مدیکیو id="mqBack" </div> <div class="mq-userback-rolebtn"> مدیریت تجهیزات پزشکیtype="button" </div>> </div> <div class="mq-life-title"> بازگشت چرخه عمر تجهیزات</button> </div>section> <div class="mq-life"<!-- DYNAMIC VIEW --> <div classid="mq-life-item activemqView" data-cycleclass="supplymq-view" >></div> </main> <!-- ===================================================== <div class="mq-life-icon"> SIDEBAR ===================================================== --> <svg viewBox="0 0 24 24<aside class="mq-sidebar"> <div class="mq-logo"> <path d="M4 7h16"></path><img src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png" <path d="M6 7l1 13h10l1-13"></path> alt="MediQ" > </div> <path<div dclass="M9 4h6"></path> mq-user"> <div </svg> id="mqUserName" </div> class="mq-user-name" > تأمین کاربر </div> مدیکیو <div</div> <div class="mq-lifeuser-itemrole"> data-cycle="operation"مدیریت تجهیزات پزشکی ></div> </div> <div class="mq-life-icontitle"> چرخه عمر تجهیزات </div> <svg viewBox="0 0 24 24<div class="mq-life"> <div <circle cx="12class="mq-life-item active" cydata-cycle="12supply" > r<div class="3"mq-life-icon"> <svg viewBox="0 0 ></circle>24 24"> <path d="M12M4 3v37h16"></path> <path d="M12 18v3"></path> <path d="M3 12h3"M6 7l1 13h10l1-13"></path> <path d="M18M9 12h34h6"></path> </svg> </div> بهرهبرداریتأمین </div> <div class="mq-life-item" data-cycle="replacementoperation" > <div class="mq-life-icon"> <svg viewBox="0 0 24 24"> <circle <path d="M4 7h11"></path> <path dcx="M1212" 4l3 3-3 3"></path> <path dcy="M20 17H9"></path>12" <path d="M12 14l-3 3 3 r="3"></path> </svg> ></circle> </div> <path d="M12 3v3"></path> جایگزینی </div> <path <div d="M12 18v3"></path> class="mq-life-item" <path data-cycled="maintenance" M3 12h3"></path> > <path <div classd="mq-life-icon">M18 12h3"></path> <svg viewBox="0 0 24 24"> </svg> </div> <path بهرهبرداری </div> d="M14 6a4 4 0 0 0 4 4l-8 8-4-4 8-8z" <div class="mq-life-item" ></path> data-cycle="replacement" > </svg> <div class="mq-life-icon"> </div> <svg viewBox="0 0 24 نگهداری24"> </div> <path </div> d="M4 7h11"></path> <div class="mq-sidebar-bottom"> <div <path d="M12 4l3 3-3 3"></path> id="mqLogout" <path classd="mq-logout" M20 17H9"></path> > <path d="M12 14l-3 3 3 3"></path> خروج از حساب کاربری </div>svg> </div> </aside> </div> <div id="mqToast" class="mq-toast" ></div> <script> (function () { "use strict"; /* ============================================================ STATE ============================================================ */ var state = { جایگزینی </div> cycle: "supply",<div screen: "equipment", class="mq-life-item" selectedAssetSection: data-cycle="purchasedmaintenance" }; /* ============================================================ ELEMENTS ============================================================ */ var view = document.getElementById( > "mqView" ); var breadcrumb = <div class="mq-life-icon"> document.getElementById( <svg "mqBreadcrumb"viewBox="0 0 24 24"> ); var heroTitle = document.getElementById( "mqHeroTitle"<path ); var heroDesc = document.getElementById( "mqHeroDesc" ); var backButton = document.getElementById( "mqBack" d="M14 6a4 4 0 0 0 4 4l-8 8-4-4 8-8z" ); var pageTitle = document.getElementById( "mqPageTitle" );></path> var pageDesc = document.getElementById( "mqPageDesc" );</svg> var toast = document.getElementById( "mqToast"</div> ); /* ============================================================ ICONS ============================================================ */ var ICONS = { property: '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' + نگهداری </div> </div> '<path d="M5 7v9l7 4 7-4V7"></path>' +<!-- MEDIQ NAVIGATION TREE --> '<path<div dclass="M12 11v9"></path>', mq-tree-title">ساختار تأمین</div> maintenance: '<circle cx="12" cy="12" r="3"></circle>' + <div class="mq-tree" id="mqTree"> '<path<div d="M12 2v3"></path>' +class="mq-tree-row level-1 active" data-tree-action="equipment" data-tree-key="equipment"> '<path d="M12 19v3"></path>' + '<path<span dclass="M2 12h3mq-tree-dot"></path>' +span> '<path d="M19 12h3"></path>', finance: <span>مدیریت تجهیزات</span> '<circle cx="12" cy="12" r="9"></circle>' + '<path<span dclass="M8 12h8"></path>' + mq-tree-arrow">‹</span> '<path d="M12 8v8"></path>', </div> supply: '<path<div dclass="M4 7h16"></path>' + mq-tree-children open" data-tree-group="equipment"> '<path<div dclass="M6 7l1 13h10l1-13"></path>' +mq-tree-row level-2" data-tree-action="property" data-tree-key="property"> '<path d="M9 4h6"></path>', purchase: <span '<path dclass="M4 5h2l2 11h9l2-7H8mq-tree-dot"></path>' +span> '<circle cx="10" cy="20" r="1"></circle>' + <span>مدیریت اموال</span> '<circle cx="17" cy="20" r="1"></circle>', </div> newAsset: '<path<div dclass="M12 3l7 4-7 4-7-4 7-4z"></path>' + mq-tree-row level-2" data-tree-action="equipmentMaintenance" data-tree-key="equipmentMaintenance"> '<path d="M5 7v9l7 4 7-4V7<span class="mq-tree-dot"></path>' + span> '<path d="M18 3v6"></path>' + <span>مدیریت '<path d="M15 6h6"></path>', نگهداری و تعمیر</span> edit: '<path d="M4 20h4l11-11-4-4L4 16v4z"></path>' + </div> '<path<div d="M13 7l4 4"></path>', class="mq-tree-row level-2" data-tree-action="finance" data-tree-key="finance"> consumable: '<rect x="5" y="4" width="14" height="16" rx="2"></rect>' + <span class="mq-tree-dot"></span> <span>مدیریت '<path d="M8 9h8"></path>' + مالی و بهرهوری</span> '<path d="M8 13h8"></path>' }; /* ============================================================ TOAST ============================================================ */ var toastTimer = null; function showToast(message) { if (!toast) { </div> <div class="mq-tree-row level-2" data-tree-action="logistics" data-tree-key="logistics"> return; } <span toast.textContent =class="mq-tree-dot"></span> message; toast.classList.add( "show" <span>مدیریت تأمین و ); لجستیک</span> window.clearTimeout( toastTimer ); toastTimer<span class="mq-tree-arrow">‹</span> window.setTimeout( </div> function () { <div class="mq-tree-children" data-tree-group="logistics"> toast.classList.remove( <div class="mq-tree-row level-3" data-tree-action="purchase" "show" data-tree-key="purchase"> ); <span class="mq-tree-dot"></span> }, <span>خرید 2200دارایی</span> ); } /* ============================================================ BREADCRUMB ============================================================ */ function buildBreadcrumb(items) { </div> if (!breadcrumb) { return; } <div var html = ""; items.forEach( class="mq-tree-row level-3" data-tree-action="newAsset" data-tree-key="newAsset"> function (item,index) { var isLast<span class="mq-tree-dot"></span> index === <span>ورود items.length - 1; دارایی جدید</span> html += '<span class="' + mq-tree-arrow">‹</span> ( isLast</div> ?<div 'class="mq-breadtree-itemchildren" mqdata-bread-current'tree-group="newAsset"> : 'mq-bread-item' <div class="mq-tree-row level-4" data-tree-action="section" ) +data-mode="newAsset" data-section="purchased" data-tree-key="newAsset-purchased"><span class="mq-tree-dot"></span><span>لیست داراییهای خریداری شده</span></div> '">' + <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="technical" data-tree-key="newAsset-technical"><span item + '</span>'; class="mq-tree-dot"></span><span>شناسنامه فنی</span></div> if (!isLast) { html += '<span <div class="mq-bread-separator">/</span>'; tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="financial" data-tree-key="newAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div> } } <div ); breadcrumb.innerHTML = class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="maintenance" data-tree-key="newAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div> html; } /* ============================================================ CARD ============================================================ */ function moduleCard<div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="commercial" data-tree-key="newAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div> </div> <div class="mq-tree-row level-3" data-tree-action="editAsset" data-tree-key="editAsset"> <span class="mq-tree-dot"></span> <span>ویرایش دارایی</span> <span class="mq-tree-arrow">‹</span> </div> <div class="mq-tree-children" data-tree-group="editAsset"> <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="purchased" data-tree-key="editAsset-purchased"><span class="mq-tree-dot"></span><span>لیست داراییهای خریداری شده</span></div> <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="technical" data-tree-key="editAsset-technical"><span class="mq-tree-dot"></span><span>شناسنامه فنی</span></div> <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="financial" data-tree-key="editAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div> <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="maintenance" data-tree-key="editAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div> <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="commercial" data-tree-key="editAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div> </div> <div class="mq-tree-row level-3" data-tree-action="consumable" data-tree-key="consumable"> <span class="mq-tree-dot"></span> <span>کالاهای مصرفی</span> </div> </div> </div> <div class="mq-tree-separator"></div> <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="operation" data-tree-key="operation"> <span class="mq-tree-dot"></span><span>بهرهبرداری</span> </div> <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="replacement" data-tree-key="replacement"> <span class="mq-tree-dot"></span><span>جایگزینی</span> </div> <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="maintenance" data-tree-key="maintenanceCycle"> <span class="mq-tree-dot"></span><span>نگهداری</span> </div> </div> <div class="mq-sidebar-bottom"> <div id="mqLogout" class="mq-logout" > خروج از حساب کاربری </div> </div> </aside> </div> <div id="mqToast" class="mq-toast" ></div> <script> (function () { "use strict"; /* ============================================================ STATE ============================================================ */ var state = { cycle: "supply", screen: "equipment", selectedAssetSection: "purchased" }; /* ============================================================ ELEMENTS ============================================================ */ var view = document.getElementById( "mqView" ); var breadcrumb = document.getElementById( "mqBreadcrumb" ); var heroTitle = document.getElementById( "mqHeroTitle" ); var heroDesc = document.getElementById( "mqHeroDesc" ); var backButton = document.getElementById( "mqBack" ); var pageTitle = document.getElementById( "mqPageTitle" ); var pageDesc = document.getElementById( "mqPageDesc" ); var toast = document.getElementById( "mqToast" ); /* ============================================================ ICONS ============================================================ */ var ICONS = { property: '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' + '<path d="M5 7v9l7 4 7-4V7"></path>' + '<path d="M12 11v9"></path>', maintenance: '<circle cx="12" cy="12" r="3"></circle>' + '<path d="M12 2v3"></path>' + '<path d="M12 19v3"></path>' + '<path d="M2 12h3"></path>' + '<path d="M19 12h3"></path>', finance: '<circle cx="12" cy="12" r="9"></circle>' + '<path d="M8 12h8"></path>' + '<path d="M12 8v8"></path>', supply: '<path d="M4 7h16"></path>' + '<path d="M6 7l1 13h10l1-13"></path>' + '<path d="M9 4h6"></path>', purchase: '<path d="M4 5h2l2 11h9l2-7H8"></path>' + '<circle cx="10" cy="20" r="1"></circle>' + '<circle cx="17" cy="20" r="1"></circle>', newAsset: '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' + '<path d="M5 7v9l7 4 7-4V7"></path>' + '<path d="M18 3v6"></path>' + '<path d="M15 6h6"></path>', edit: '<path d="M4 20h4l11-11-4-4L4 16v4z"></path>' + '<path d="M13 7l4 4"></path>', consumable: '<rect x="5" y="4" width="14" height="16" rx="2"></rect>' + '<path d="M8 9h8"></path>' + '<path d="M8 13h8"></path>' }; /* ============================================================ TOAST ============================================================ */ var toastTimer = null; function showToast(message) { if (!toast) { return; } toast.textContent = message; toast.classList.add( "show" ); window.clearTimeout( toastTimer ); toastTimer = window.setTimeout( function () { toast.classList.remove( "show" ); }, 2200 ); } /* ============================================================ BREADCRUMB ============================================================ */ function buildBreadcrumb(items) { if (!breadcrumb) { return; } var html = ""; items.forEach( function (item,index) { var isLast = index === items.length - 1; html += '<span class="' + ( isLast ? 'mq-bread-item mq-bread-current' : 'mq-bread-item' ) + '">' + item + '</span>'; if (!isLast) { html += '<span class="mq-bread-separator">/</span>'; } } ); breadcrumb.innerHTML = html; } /* ============================================================ CARD ============================================================ */ function moduleCard( title, icon, action, clickable ) { return ( '<div class="mq-module-card" ' + ( clickable ? 'data-action="' + action + '"' : '' ) + '>' + '<div class="mq-module-icon">' + '<svg viewBox="0 0 24 24">' + icon + '</svg>' + '</div>' + '<div class="mq-module-name">' + title + '</div>' + ( clickable ? '<div class="mq-module-arrow">‹</div>' : '' ) + '</div>' ); } /* ============================================================ SCREEN : EQUIPMENT ============================================================ */ function renderEquipment() { state.screen = "equipment"; pageTitle.textContent = "تأمین"; pageDesc.textContent = "مدیریت فرآیند تأمین تجهیزات پزشکی"; heroTitle.textContent = "مدیریت تجهیزات"; heroDesc.textContent = "حوزه موردنظر را انتخاب کنید."; backButton.style.display = "none"; buildBreadcrumb( [ "تأمین", "مدیریت تجهیزات" ] ); view.innerHTML = '<div class="mq-section-head">' + '<div>' + '<div class="mq-section-title">' + 'مدیریت تجهیزات' + '</div>' + '<div class="mq-section-desc">' + 'یکی از حوزههای مدیریت تجهیزات را انتخاب کنید.' + '</div>' + '</div>' + '</div>' + '<div class="mq-card-grid">' + moduleCard( "مدیریت اموال", ICONS.property, "", false ) + moduleCard( "مدیریت نگهداری و تعمیر", ICONS.maintenance, "", false ) + moduleCard( "مدیریت مالی و بهرهوری", ICONS.finance, "", false ) + moduleCard( "مدیریت تأمین و لجستیک", ICONS.supply, "logistics", true ) + '</div>'; bindActions(); mqTreeActivate("equipment"); } /* ============================================================ SCREEN : LOGISTICS ============================================================ */ function renderLogistics() { state.screen = "logistics"; heroTitle.textContent = "مدیریت تأمین و لجستیک"; heroDesc.textContent = "عملیات موردنظر را انتخاب کنید."; backButton.style.display = "inline-block"; buildBreadcrumb( [ "تأمین", "مدیریت تجهیزات", "مدیریت تأمین و لجستیک" ] ); view.innerHTML = '<div class="mq-section-head">' + '<div>' + '<div class="mq-section-title">' + 'مدیریت تأمین و لجستیک' + '</div>' + '<div class="mq-section-desc">' + 'عملیات مرتبط با تأمین و لجستیک تجهیزات' + '</div>' + '</div>' + '</div>' + '<div class="mq-action-grid">' + actionCard( "خرید دارایی", "فرآیند خرید دارایی", ICONS.purchase, "purchase" ) + actionCard( "ورود دارایی جدید", "ثبت و تکمیل اطلاعات دارایی جدید", ICONS.newAsset, "newAsset" ) + actionCard( "ویرایش دارایی", "مشاهده و ویرایش اطلاعات دارایی موجود", ICONS.edit, "editAsset" ) + actionCard( "کالاهای مصرفی", "مدیریت کالاهای مصرفی", ICONS.consumable, "consumable" ) + '</div>'; bindActions(); mqTreeActivate("logistics"); } function actionCard( title, iconsubtitle, actionicon, clickableaction ) { return ( '<div class="mq-moduleaction-card" data-action="' + (action + '">' + clickable '<div class="mq-action-icon">' + ? 'data-action<svg viewBox="0 0 24 24">' + icon + '</svg>' + '</div>' + action + '<div>' + '"''<div class="mq-action-title">' + :title ''+ ) + '></div>' + '<div class="mq-moduleaction-iconsub">' + subtitle + '<svg viewBox="0 0 24 24"> '</div>' + '</div>' + '</div>' icon + ); } /* ============================================================ ASSET SECTION SCREEN ============================================================ */ function '</svg>' +renderAssetSections(mode) { state.screen = '</div>' + mode; '<div class="mq-module-name">' +var isNew = mode === title + "newAsset"; var '</div>' + title = (isNew ? "ورود دارایی clickableجدید" : "ویرایش دارایی موجود"; ? '<div class="mq-module-arrow">‹</div>'heroTitle.textContent = title; heroDesc.textContent = : ''isNew ) + '</div>' ); } /* ============================================================ SCREEN : EQUIPMENT ============================================================ */ function renderEquipment() {? "اطلاعات موردنیاز برای ورود دارایی را انتخاب کنید." : "بخش موردنظر برای ویرایش دارایی را انتخاب کنید."; statebackButton.style.screendisplay = "equipmentinline-block"; buildBreadcrumb( pageTitle.textContent =[ "تأمین"; , pageDesc.textContent ="مدیریت تجهیزات", "مدیریت فرآیند تأمین تجهیزاتو پزشکیلجستیک"; , heroTitle.textContent =title ] "مدیریت تجهیزات"); heroDescview.textContentinnerHTML = '<div "حوزه موردنظر را انتخاب کنید."; backButton.style.display = class="mq-list-layout">' + '<div class="mq-list-menu">' + "none"; buildBreadcrumblistOption( [ "تأمینpurchased", "مدیریت تجهیزات" "لیست ] داراییهای خریداری شده" ); view.innerHTML = '<div class="mq-section-head">' ) + '<div>' + listOption( '<div class="mq-section-title">' +"technical", 'مدیریت تجهیزات' +"شناسنامه فنی" '</div>') + listOption( '<div class="mq-section-desc">' + "financial", 'یکی از حوزههای مدیریت تجهیزات را انتخاب کنید.' +"شناسنامه مالی" '</div>') + '</div>' + listOption( '</div>' + "maintenance", '<div class="mq-card-grid">' + "شناسنامه نگهداری و moduleCard(تعمیر" "مدیریت اموال",) + ICONS.property, listOption( "commercial", false "شناسنامه بازرگانی" ) + moduleCard( '</div>' + '<div class="mq-preview">' + "مدیریت نگهداری و تعمیر", '<div id="mqPreviewContent"></div>' + ICONS.maintenance, '</div>' + "",'</div>'; bindSectionOptions(); renderPreview( falsestate.selectedAssetSection ); mqTreeActivate(mode + "-" + ) +state.selectedAssetSection); } function listOption( key, moduleCard(title ) { return ( '<div "مدیریت مالی و بهرهوری",' + 'class="mq-list-option" ICONS.finance,' + "",'data-section="' + key false+ )'">' + '<span>' moduleCard(+ "مدیریت تأمین و لجستیک",title + ICONS.supply,'</span>' + "logistics",'<span class="mq-option-badge">' + true'‹' + )'</span>' + '</div>'; bindActions(); } /* ============================================================ SCREENPREVIEW : LOGISTICSCONTENT ============================================================ */ function renderLogistics() {====== */ var SECTION_NAMES = { purchased: "لیست داراییهای خریداری شده", technical: "شناسنامه فنی", state.screen =financial: "logisticsشناسنامه مالی";, maintenance: "شناسنامه نگهداری heroTitle.textContent =و تعمیر", commercial: "مدیریت تأمین و"شناسنامه لجستیکبازرگانی" }; function renderPreview(section) { heroDesc state.textContentselectedAssetSection = section; "عملیات موردنظر را انتخابif کنید."; backButton.style.display = (state.screen === "newAsset" || state.screen === "editAsset") { mqTreeActivate(state.screen + "inline-block" + section); } var container buildBreadcrumb(= [ document.getElementById( "تأمینmqPreviewContent", ); "مدیریت تجهیزات",if (!container) { return; "مدیریت تأمین و لجستیک" } var title = ] )SECTION_NAMES[section]; viewcontainer.innerHTML = '<div class="mq-sectionpreview-headtitle">' + '<div>'title + '</div>' + '<div class="mq-sectionpreview-titledescription">' + ( 'مدیریت تأمین و لجستیک' + state.screen === '</div>' +"newAsset" '<div class="mq-section-desc">' + ? "این بخش برای ثبت اطلاعات دارایی جدید استفاده میشود." 'عملیات مرتبط با تأمین و لجستیک تجهیزات' + : "این بخش برای مشاهده و ویرایش اطلاعات دارایی موجود '</div>' + استفاده میشود." '</div>') + '</div>' + '<div class="mq-actiondemo-gridbox">' + actionCard('<div class="mq-demo-icon">' + "خرید دارایی",'✓' + '</div>' + "فرآیند خرید دارایی", '<div class="mq-demo-text">' + ICONS.purchase, title + "purchase" )'<br>' + actionCard( 'در مرحله بعد این بخش به اطلاعات واقعی Jira / Assets متصل "ورود دارایی جدید",میشود.' + "ثبت و تکمیل اطلاعات دارایی جدید",'</div>' + '<button ICONS.newAsset,' + "newAsset" ) + 'class="mq-demo-button" ' + actionCard( 'type="button" ' + "ویرایش دارایی", 'id="mqDemoButton"' + "مشاهده و ویرایش اطلاعات دارایی موجود",'>' + ICONS.edit,( "editAsset" state.screen === ) + actionCard("newAsset" "کالاهای مصرفی", ? "ثبت اطلاعات" "مدیریت کالاهای مصرفی", : ICONS.consumable,"مشاهده اطلاعات" "consumable") + )'</button>' + '</div>'; bindActions(); } function actionCard(var options = title, subtitle,document.querySelectorAll( icon, action ) { return ( "#mediq-dashboard .mq-list-option" '<div class="mq-action-card" data-action="' + ); for ( var i action= +0; '">' + i < options.length; i++ '<div class="mq-action-icon">' +) { options[i].classList.toggle( '<svg viewBox="0 0 24 24">' + "active", options[i].getAttribute( icon + "data-section" '</svg>' + ) === section '</div>' +); } var demoButton = '<div>' + document.getElementById( '<div class="mq-action-title">' +"mqDemoButton" ); if (demoButton) { title + demoButton.onclick = function '</div>' + () { '<div class="mq-action-sub">' + showToast( subtitle + "این بخش در مرحله اتصال به Jira / Assets فعال میشود." '</div>' + '</div>' + ); '</div>' }; );} } /* ============================================================ ASSETSIMPLE SECTIONPRESENTATION SCREENPAGES ============================================================ */ function renderAssetSections(mode) { state.screen = mode; var isNew = mode === "newAsset"; var title = isNew ? "ورود دارایی جدید" : "ویرایش دارایی موجود"; === */ function renderSimplePage( title ) { heroTitle.textContent = title; heroDesc.textContent = isNew ? "اطلاعات موردنیاز برای ورود دارایی را انتخاب کنید." : "بخش موردنظر برای ویرایش دارایی را انتخاب کنید."نمای پرزنت این بخش"; backButton.style.display = "inline-block"; buildBreadcrumb( [ "تأمین", "مدیریت تجهیزات", "مدیریت تأمین و لجستیک", title ] ); view.innerHTML = '<div class="mq-listempty-layoutcycle">' + '<div class="mq-list-menu"><strong>' + listOption( "purchased",title + "لیست داراییهای خریداری شده" ) + '</strong>' + listOption( '<span>' + "technical", 'این بخش در ادامه فرآیند طراحی تکمیل میشود.' + "شناسنامه فنی"'</span>' + '</div>'; } /* ============================================================ OTHER LIFE CYCLE ) + TABS ============================================================ */ function renderOtherCycle( key, listOption(title ) { state.cycle = key; "financial",pageTitle.textContent = title; pageDesc.textContent = "شناسنامه مالی" چرخه عمر تجهیزات پزشکی"; heroTitle.textContent = ) +title; heroDesc.textContent = "نمای ساختار listOption(این بخش"; backButton.style.display = "maintenancenone",; buildBreadcrumb( [ "شناسنامه نگهداری و تعمیر"title ] ) +; listOption(view.innerHTML = "commercial",'<div class="mq-empty-cycle">' + "شناسنامه بازرگانی"'<strong>' + )title + '</div>strong>' + '<div class="mq-preview"><span>' + '<div id="mqPreviewContent"></div>ساختار این بخش در مرحله بعد طراحی میشود.' + '</div>span>' + '</div>'; } bindSectionOptions(); /* ============================================================ BIND MODULE renderPreview(ACTIONS state.selectedAssetSection ); } ============================================================ */ function listOption( key, title bindActions() { var returnelements ( = '<div ' +document.querySelectorAll( 'class="mq-list-option" ' +#mediq-dashboard [data-action]" ); 'data-section="' +for ( var i key += 0; i '">' + < elements.length; '<span>' i++ ) { title + elements[i].onclick = function '</span>' + '<span class="mq-option-badge">' + () { var '‹'action += '</span>' + this.getAttribute( '</div>' ); } /* ============================================================ PREVIEW CONTENT ============================================================ */ var SECTION_NAMES = { purchased:"data-action" "لیست داراییهای خریداری شده", technical: ); "شناسنامه فنی", financial: "شناسنامه مالی", if ( maintenance: "شناسنامه نگهداری و تعمیر", action commercial:=== "شناسنامه بازرگانی" }; function renderPreview(section) { state.selectedAssetSection = "logistics" section; var container = document.getElementById() { "mqPreviewContent" renderLogistics(); if (!container) { return; } var title = SECTION_NAMES[section]; else if container.innerHTML =( '<div class="mq-preview-title">' + action === title + '</div>' + '<div class="mq-preview-description">' + "newAsset" () { state.screen === renderAssetSections( "newAsset" "newAsset" ? "این بخش برای ثبت اطلاعات دارایی جدید استفاده میشود." ); } : "این بخش برای مشاهده و ویرایش اطلاعات دارایی موجود استفاده میشود." else if ( ) + '</div>' + action === '<div class="mq-demo-box">' + '<div class="mq-demo-icon">' +"editAsset" '✓' +) { '</div>' + renderAssetSections( '<div class="mq-demo-text">' + title + "editAsset" '<br>' +); 'در مرحله بعد این بخش به اطلاعات واقعی Jira / Assets متصل میشود.' + } else if ( '</div>' + action === '<button ' + 'class="mq-demo-button" ' + "purchase" ) 'type="button" ' + { 'id="mqDemoButton"' + renderSimplePage( '>' + "خرید دارایی" ( ); state.screen === } "newAsset" else if ( ? "ثبت اطلاعات" action === : "مشاهده اطلاعاتconsumable" ) +{ '</button>' + '</div>'; renderSimplePage( var options = document.querySelectorAll( "#mediq-dashboard .mq-list-optionکالاهای مصرفی" ); for ( var i = 0); i < options.length; } i++ ) { }; options[i].classList.toggle(} } /* ============================================================ SECTION OPTIONS ============================================================ */ function bindSectionOptions() { "active", var options = options[i].getAttributedocument.querySelectorAll( "data-section"#mediq-dashboard .mq-list-option" ); for ) === section ( var i = )0; } vari demoButton =< options.length; document.getElementById( i++ ) { "mqDemoButton"options[i].onclick = ); iffunction (demoButton) { demoButton.onclick = renderPreview( function () { this.getAttribute( showToast( "data-section" "این بخش در مرحله اتصال به Jira / Assets فعال میشود.") ); }; } } /* ============================================================ SIMPLE PRESENTATION PAGESBACK ============================================================ */ function renderSimplePage( title ) { heroTitle.textContent = title; = */ if (backButton) { heroDescbackButton.textContentonclick = "نمایfunction پرزنت این بخش";() { backButton.style.display = "inline-block"; if ( buildBreadcrumb( [ state.screen === "تأمین", "مدیریت تجهیزاتlogistics", "مدیریت تأمین و لجستیک", ) { title ] renderEquipment(); view.innerHTML = '<div class="mq-empty-cycle">' + '<strong>' +} else if title + ( '</strong>' + '<span>' + state.screen === 'این بخش در ادامه فرآیند طراحی تکمیل میشود.' + "newAsset" || '</span>' + state.screen === '</div>'; } /* ============================================================ OTHER LIFE CYCLE TABS"editAsset" ============================================================ */ function renderOtherCycle( key, title ) { state.cycle = renderLogistics(); key;} pageTitle.textContent = else if ( title; pageDescstate.textContentscreen === "property" || "چرخه عمر تجهیزات پزشکی"; heroTitlestate.textContentscreen === "equipmentMaintenance" || title; heroDescstate.textContentscreen === "finance" "نمای ساختار این) بخش";{ backButton.style.display = "none"renderEquipment(); buildBreadcrumb( [} titleelse if ( ] ); viewstate.innerHTMLscreen === "purchase" || '<div class="mq-empty-cycle">' + state.screen === "consumable" '<strong>' +) { title +renderLogistics(); '</strong>' +} '<span>' +else { 'ساختار این بخش در مرحله بعد طراحی میشود.' +renderLogistics(); '</span>' +} '</div>'}; } /* ============================================================ BINDLIFE MODULECYCLE ACTIONSBUTTONS ============================================================ */ var lifeItems = document.querySelectorAll( "#mediq-dashboard .mq-life-item" ); for ( var i = */ function bindActions 0; i < lifeItems.length; i++ ) { lifeItems[i].onclick = function () { var elementscycle = document.querySelectorAll( this.getAttribute( "#mediq-dashboard [data-action]cycle" ); for ( var ix = 0; i x < elementslifeItems.length; i x++ ) { elements lifeItems[i].onclick =x] .classList .remove( function () { "active" var action = ); this.getAttribute( } this.classList.add( "data-action" "active" ); if ( if ( cycle === action === "supply" ) "logistics"{ ) { state.cycle = renderLogistics();"supply"; }renderEquipment(); } else if ( actioncycle === "operation" "newAsset" ) { ) { renderOtherCycle( renderAssetSections( "operation", "newAsset" "بهرهبرداری" ); } else if ( cycle === action === "replacement" "editAsset" ) { ) { renderOtherCycle( renderAssetSections( "replacement", "editAssetجایگزینی" ); } else if ( actioncycle === "purchasemaintenance" ) { renderSimplePagerenderOtherCycle( "خرید دارایی""maintenance", );"نگهداری" }); } else if ( action === }; } /* ============================================================ LOGOUT ============================================================ */ var logout = document.getElementById( "consumablemqLogout" ); if (logout) { logout.onclick = function () { renderSimplePage( window.location.href = "کالاهای مصرفی" ); } /logout.action"; }; } } /* ============================================================ SECTIONCURRENT OPTIONSUSER ============================================================ */ function bindSectionOptions()try { var options = document.querySelectorAll( if ( "#mediq-dashboard .mq-list-option"window.AJS && ); AJS.Meta for) ({ var iremoteUser = 0; i < options.length; AJS.Meta.get( i++ ) {"remote-user" options[i].onclick = ); functionif (remoteUser) { document renderPreview( .getElementById( this.getAttribute( "mqUserName" "data-section" ) .textContent )= )remoteUser; } }; } }catch(e) { } /* ============================================================ BACKSIDEBAR TREE ============================================================ */ iffunction mqTreeOpen(backButtongroup, open) { var backButton.onclickel = function () { if ( state.screen === document.querySelector('#mediq-dashboard [data-tree-group="' + group + '"]'); var row = document.querySelector('#mediq-dashboard [data-tree-key="' + group + '"]'); if (el) el.classList.toggle("open", !!open); if (row) row.classList.toggle("open", !!open); } function mqTreeReset() { var rows = "logistics"document.querySelectorAll("#mediq-dashboard .mq-tree-row"); for (var i = 0; i < rows.length; i++) { renderEquipment(rows[i].classList.remove("active"); } rows[i].classList.remove("parent-active"); else if ( } } function mqTreeActivate(key) { mqTreeReset(); var active state.screen === = document.querySelector('#mediq-dashboard [data-tree-key="' + key + '"]'); if "newAsset" ||(active) active.classList.add("active"); /* Default collapse */ mqTreeOpen("equipment", false); state.screen ===mqTreeOpen("logistics", false); mqTreeOpen("newAsset", false); mqTreeOpen("editAsset", false); if (key === "equipment" || key === "property" ) { renderLogistics(); || key === "equipmentMaintenance" || key === "finance" || key === "logistics" } else { || key === "purchase" || key === "newAsset" || key === "editAsset" || key === "consumable" || key.indexOf("newAsset-") === 0 || renderLogistics(); key.indexOf("editAsset-") === 0) { } mqTreeOpen("equipment", true); }; } /* ============================================================ LIFE CYCLE BUTTONS ============================================================ */ var lifeItems = document.querySelectorAll( "#mediq-dashboard .mq-life-item" ); for ( var i = 0; i < lifeItems.length; i++ ) { lifeItems[i].onclick = function () { var p1 = document.querySelector('[data-tree-key="equipment"]'); if (p1 && key !== "equipment") p1.classList.add("parent-active"); } if (key === "logistics" || key === "purchase" || key === "newAsset" || key === "editAsset" || key === "consumable" || key.indexOf("newAsset-") === 0 || key.indexOf("editAsset-") === 0) { mqTreeOpen("logistics", true); var p2 = document.querySelector('[data-tree-key="logistics"]'); if (p2 && key !== "logistics") p2.classList.add("parent-active"); } if (key === "newAsset" || key.indexOf("newAsset-") === 0) { mqTreeOpen("newAsset", true); var cycle =p3 = document.querySelector('[data-tree-key="newAsset"]'); if (p3 && key !== this.getAttribute("newAsset") p3.classList.add("parent-active"); } if (key === "editAsset" || key.indexOf("editAsset-") === 0) { "data-cycle" mqTreeOpen("editAsset", true); var p4 = document.querySelector('[data-tree-key="editAsset"]'); if (p4 && key for (!== "editAsset") p4.classList.add("parent-active"); } } function mqTreeSimpleEquipmentPage(title, key) { state.screen = key; var xpageTitle.textContent = 0"تأمین"; pageDesc.textContent = "مدیریت فرآیند تأمین تجهیزات پزشکی"; heroTitle.textContent x < lifeItems.length= title; heroDesc.textContent x++= "نمای پرزنت این بخش"; backButton.style.display = "inline-block"; buildBreadcrumb(["تأمین", "مدیریت تجهیزات", title]) {; view.innerHTML = '<div lifeItems[x]class="mq-empty-cycle">' + '<strong>' + title + .classList'</strong>' + '<span>این بخش در ادامه فرآیند طراحی تکمیل .remove(میشود.</span>' + '</div>'; mqTreeActivate(key); } function bindTree() { var rows = "active"document.querySelectorAll("#mediq-dashboard .mq-tree-row[data-tree-action]"); for (var i = 0; i < rows.length; i++) { ); rows[i].onclick = function () { } var action = this.classList.add(getAttribute("data-tree-action"); if (action === "activeequipment") { renderEquipment(); if (} else if (action cycle === "property") { mqTreeSimpleEquipmentPage("مدیریت اموال", "supplyproperty"); ) { } else if (action state.cycle ==== "equipmentMaintenance") { mqTreeSimpleEquipmentPage("مدیریت نگهداری و تعمیر", "supplyequipmentMaintenance"); } renderEquipment(); else if (action === "finance") }{ else if mqTreeSimpleEquipmentPage( "مدیریت مالی و بهرهوری", "finance"); cycle ===} else if (action === "operationlogistics") { ) { renderLogistics(); renderOtherCycle(} else if (action "operation",=== "purchase") { state.screen = "بهرهبرداریpurchase"; renderSimplePage("خرید دارایی"); } mqTreeActivate("purchase"); else if ( } else if cycle(action === "newAsset") { state.selectedAssetSection = "replacementpurchased"; ) { renderAssetSections("newAsset"); renderOtherCycle(} else if (action "replacement",=== "editAsset") { state.selectedAssetSection = "جایگزینیpurchased"; renderAssetSections("editAsset"); } else if (action === "consumable") { cyclestate.screen === "consumable"; renderSimplePage("maintenanceکالاهای مصرفی"); ) { mqTreeActivate("consumable"); renderOtherCycle(} else if "maintenance",(action === "section") { var mode = "نگهداری" this.getAttribute("data-mode"); var section = this.getAttribute("data-section"); } }; } /* ============================================================ LOGOUT ============================================================ */ var logout = document.getElementById( if (state.screen !== mode) { state.selectedAssetSection = section; renderAssetSections(mode); } else "mqLogout" { renderPreview(section); if (logout) { logout.onclick = } mqTreeActivate(mode + "-" + section); } else if (action === "cycle") { function () { var cycle = window.location.href =this.getAttribute("data-cycle"); "/logout.action"; if (cycle === "operation") { }; } /* ============================================================ CURRENT USER ============================================================ */ try { if renderOtherCycle("operation", "بهرهبرداری"); window.AJS && AJS.MetamqTreeActivate("operation"); ) { var remoteUser = } else if AJS.Meta.get( (cycle === "replacement") { "remote-user" renderOtherCycle("replacement", "جایگزینی"); ); if mqTreeActivate(remoteUser) { "replacement"); document} else if .getElementById((cycle === "maintenance") { renderOtherCycle("maintenance", "mqUserNameنگهداری"); ) mqTreeActivate("maintenanceCycle"); .textContent = } remoteUser;} } ; } } catch(e) { } /* ============================================================ INITIAL ============================================================ */ bindTree(); renderEquipment(); })(); </script> </div> |
Page History
Overview
Content Tools
Apps