zkxw/docs/qc-card-separation-demos/_cards.js

/** 质检卡片 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()
  })
})()