236 lines
7.2 KiB
JavaScript
236 lines
7.2 KiB
JavaScript
/** 质检卡片 Demo · 共享卡片 HTML 片段 */
|
|
;(function () {
|
|
const TASKS = [
|
|
{
|
|
name: 'HBV-DNA 定量',
|
|
status: '进行中',
|
|
statusClass: 'el-tag--warning',
|
|
type: '实验室',
|
|
typeClass: 'el-tag--success',
|
|
conclusion: '待结论',
|
|
conclusionClass: 'el-tag--info',
|
|
code: 'RW202606120101',
|
|
assignee: '张三',
|
|
action: '填写结果'
|
|
},
|
|
{
|
|
name: 'HIV 抗体筛查',
|
|
status: '待执行',
|
|
statusClass: 'el-tag--info',
|
|
type: '第三方',
|
|
typeClass: 'el-tag--primary',
|
|
conclusion: '待结论',
|
|
conclusionClass: 'el-tag--info',
|
|
code: 'RW202606120102',
|
|
assignee: '李四',
|
|
action: '开始'
|
|
},
|
|
{
|
|
name: '细胞活性检测',
|
|
status: '已完成',
|
|
statusClass: 'el-tag--success',
|
|
type: '实验室',
|
|
typeClass: 'el-tag--success',
|
|
conclusion: '通过',
|
|
conclusionClass: 'el-tag--success',
|
|
code: 'RW202606120103',
|
|
assignee: '王五',
|
|
action: '查看'
|
|
}
|
|
]
|
|
|
|
const WORK_ORDERS = [
|
|
{
|
|
index: 1,
|
|
no: 'ZJ202606120001',
|
|
status: '已配置',
|
|
statusClass: 'el-tag--warning',
|
|
trigger: '样本接收',
|
|
triggerClass: 'el-tag--primary',
|
|
labCode: 'LAB-202506120001',
|
|
sampleType: '脐带血',
|
|
method: '实验室 / 第三方',
|
|
time: '2026-06-12 09:35'
|
|
},
|
|
{
|
|
index: 2,
|
|
no: 'ZJ202606120015',
|
|
status: '待配置',
|
|
statusClass: 'el-tag--info',
|
|
trigger: '生产过程',
|
|
triggerClass: 'el-tag--warning',
|
|
labCode: 'LAB-202506120002',
|
|
sampleType: '脐带血',
|
|
method: '实验室',
|
|
time: '2026-06-12 14:20'
|
|
},
|
|
{
|
|
index: 3,
|
|
no: 'ZJ202606120028',
|
|
status: '已完成',
|
|
statusClass: 'el-tag--success',
|
|
trigger: '样本接收',
|
|
triggerClass: 'el-tag--primary',
|
|
labCode: 'LAB-202506120003',
|
|
sampleType: '胎盘组织',
|
|
method: '第三方',
|
|
time: '2026-06-11 16:48'
|
|
}
|
|
]
|
|
|
|
function renderTasks(mineMode) {
|
|
return TASKS.map(function (t) {
|
|
return (
|
|
'<div class="qc-task-card qc-task-card--compact">' +
|
|
'<div class="qc-task-card__line qc-task-card__line--top">' +
|
|
'<span class="qc-task-card__name">' +
|
|
t.name +
|
|
'</span>' +
|
|
'<div class="qc-task-card__tags">' +
|
|
'<span class="el-tag ' +
|
|
t.statusClass +
|
|
'">' +
|
|
t.status +
|
|
'</span>' +
|
|
'<span class="el-tag ' +
|
|
t.typeClass +
|
|
'">' +
|
|
t.type +
|
|
'</span>' +
|
|
'<span class="el-tag ' +
|
|
t.conclusionClass +
|
|
'">' +
|
|
t.conclusion +
|
|
'</span>' +
|
|
'</div></div>' +
|
|
'<div class="qc-task-card__line qc-task-card__line--bottom">' +
|
|
'<span class="qc-task-card__code">' +
|
|
t.code +
|
|
'</span>' +
|
|
'<span class="qc-task-card__sep">·</span>' +
|
|
'<span class="qc-task-card__assignees">' +
|
|
t.assignee +
|
|
'</span>' +
|
|
'<div class="qc-work-order-task-sublist__ops">' +
|
|
'<button class="btn-op-item primary sm">' +
|
|
t.action +
|
|
'</button>' +
|
|
'<button class="btn-op-item sm">⋯</button>' +
|
|
'</div></div></div>'
|
|
)
|
|
}).join('')
|
|
}
|
|
|
|
function renderWorkOrder(wo, mineMode) {
|
|
const headBtn = mineMode
|
|
? '<button class="btn-op-item primary">查看</button>'
|
|
: '<button class="btn-op-item primary">配置检测</button><button class="btn-op-item">⋯</button>'
|
|
|
|
return (
|
|
'<article class="qc-work-order-card">' +
|
|
'<header class="qc-work-order-card__head">' +
|
|
'<div class="qc-work-order-card__head-inner">' +
|
|
'<div class="qc-work-order-card__head-main">' +
|
|
'<div class="qc-work-order-card__title-row">' +
|
|
'<span class="qc-work-order-card__index">' +
|
|
wo.index +
|
|
'</span>' +
|
|
'<span class="qc-work-order-card__no">' +
|
|
wo.no +
|
|
'</span>' +
|
|
'<span class="el-tag ' +
|
|
wo.statusClass +
|
|
'">' +
|
|
wo.status +
|
|
'</span>' +
|
|
'<span class="el-tag ' +
|
|
wo.triggerClass +
|
|
'">' +
|
|
wo.trigger +
|
|
'</span>' +
|
|
'</div>' +
|
|
'<dl class="qc-work-order-card__meta">' +
|
|
'<div class="qc-work-order-card__meta-item"><dt>实验室入库编码</dt><dd>' +
|
|
wo.labCode +
|
|
'</dd></div>' +
|
|
'<div class="qc-work-order-card__meta-item"><dt>样本类型</dt><dd>' +
|
|
wo.sampleType +
|
|
'</dd></div>' +
|
|
'<div class="qc-work-order-card__meta-item"><dt>检测方式</dt><dd>' +
|
|
wo.method +
|
|
'</dd></div>' +
|
|
'<div class="qc-work-order-card__meta-item"><dt>创建时间</dt><dd>' +
|
|
wo.time +
|
|
'</dd></div>' +
|
|
'</dl></div>' +
|
|
'<div class="qc-work-order-card__ops">' +
|
|
headBtn +
|
|
'</div></div></header>' +
|
|
'<section class="qc-work-order-card__tasks">' +
|
|
'<div class="qc-work-order-task-sublist__head">' +
|
|
'<div class="qc-work-order-task-sublist__head-title">质检任务</div>' +
|
|
'<span class="qc-work-order-task-sublist__count">共 3 项任务</span>' +
|
|
'</div>' +
|
|
'<div class="qc-task-cards-grid">' +
|
|
renderTasks(mineMode) +
|
|
'</div></section></article>'
|
|
)
|
|
}
|
|
|
|
window.QcCardDemo = {
|
|
renderList: function (container, mineMode, limit) {
|
|
if (!container) return
|
|
const rows = typeof limit === 'number' ? WORK_ORDERS.slice(0, limit) : WORK_ORDERS
|
|
container.innerHTML = rows
|
|
.concat(
|
|
typeof limit === 'number' && limit > WORK_ORDERS.length
|
|
? WORK_ORDERS.slice(0, limit - WORK_ORDERS.length).map(function (wo, i) {
|
|
return Object.assign({}, wo, {
|
|
index: WORK_ORDERS.length + i + 1,
|
|
no: wo.no.replace(/\d+$/, function (n) {
|
|
return String(Number(n) + WORK_ORDERS.length + i).padStart(3, '0')
|
|
})
|
|
})
|
|
})
|
|
: []
|
|
)
|
|
.map(function (wo) {
|
|
return renderWorkOrder(wo, mineMode)
|
|
})
|
|
.join('')
|
|
},
|
|
renderSingleCard: function (container, mineMode) {
|
|
if (!container) return
|
|
container.innerHTML = renderWorkOrder(WORK_ORDERS[0], mineMode)
|
|
},
|
|
initModeTabs: function () {
|
|
const tabs = document.querySelectorAll('[data-mode-tab]')
|
|
const lists = document.querySelectorAll('[data-card-list]')
|
|
tabs.forEach(function (tab) {
|
|
tab.addEventListener('click', function () {
|
|
const mode = tab.getAttribute('data-mode-tab')
|
|
tabs.forEach(function (t) {
|
|
t.classList.toggle('active', t === tab)
|
|
})
|
|
lists.forEach(function (list) {
|
|
window.QcCardDemo.renderList(list, mode === 'mine')
|
|
})
|
|
document.querySelectorAll('[data-single-card]').forEach(function (el) {
|
|
window.QcCardDemo.renderSingleCard(el, mode === 'mine')
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-card-list]').forEach(function (el) {
|
|
window.QcCardDemo.renderList(el, false)
|
|
})
|
|
document.querySelectorAll('[data-single-card]').forEach(function (el) {
|
|
window.QcCardDemo.renderSingleCard(el, false)
|
|
})
|
|
window.QcCardDemo.initModeTabs()
|
|
})
|
|
})()
|