Transfer 穿梭框 ​

<template>
  <div class="transfer-ellipsis-demo">
    <w-transfer v-model="value" :data="data" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const names = [
  '血常规',
  '尿常规',
  '肝功能十项',
  '肾功能五项',
  '空腹血糖',
  '糖化血红蛋白',
  '血脂四项',
  '凝血四项',
  'C 反应蛋白',
  '降钙素原',
  '乙肝五项',
  '丙肝抗体',
  '电解质四项',
  '结核感染 T 细胞检测',
  '自身抗体筛查',
]

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    let label = names[i - 1]
    // 部分检验项目使用长文本，演示超出省略和悬浮 Tooltip
    if (i === 3)
      label =
        '肝功能十项 - 丙氨酸氨基转移酶、天门冬氨酸氨基转移酶、总胆红素、直接胆红素、总蛋白等'
    if (i === 7) label = 'Lipid Panel (血脂四项) - TC、TG、HDL-C、LDL-C'
    if (i === 11)
      label =
        '乙肝五项（HBsAg、HBsAb、HBeAg、HBeAb、HBcAb）- 反映乙肝病毒感染与免疫状态'
    // 已停用的检验项目禁止被选择
    data.push({
      key: i,
      label,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])
</script>

<style scoped lang="scss">
.transfer-ellipsis-demo {
  :deep(.w3-transfer-panel) {
    width: 200px;
  }
}
</style>

<template>
  <div>
    <p>通过 render-content 自定义数据项</p>
    <w-transfer
      v-model="leftValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['待开检查', '已开检查']"
      :button-texts="['撤回', '开具']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #left-footer>
        <w-button class="transfer-footer" size="small">保存申请</w-button>
      </template>
      <template #right-footer>
        <w-button class="transfer-footer" size="small">保存申请</w-button>
      </template>
    </w-transfer>
    <p>通过 scoped slot 自定义数据项</p>
    <w-transfer
      v-model="rightValue"
      style="display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :titles="['待开检查', '已开检查']"
      :button-texts="['撤回', '开具']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #default="{ option }">
        <span>{{ option.key }} - {{ option.label }}</span>
      </template>
      <template #left-footer>
        <w-button class="transfer-footer" size="small">保存申请</w-button>
      </template>
      <template #right-footer>
        <w-button class="transfer-footer" size="small">保存申请</w-button>
      </template>
    </w-transfer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type {
  TransferDirection,
  TransferKey,
  renderContent,
} from 'win-design-next'

interface Option {
  key: number
  label: string
  disabled: boolean
}

// 检查医嘱项目
const names = [
  '十二导联心电图',
  '胸部正位 DR',
  '腹部彩超',
  '头颅 CT 平扫',
  '腰椎正侧位片',
  '心脏彩超',
  '动态心电图（Holter）',
  '动态血压监测',
  '肺功能检查',
  '电子胃镜',
  '电子肠镜',
  '骨密度检测',
  '脑电图',
  '经颅多普勒（TCD）',
  '眼底照相',
]

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: names[i - 1],
      // 已停用的检查项目禁止开具
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc: renderContent = (h, option) => h('span', null, option.label)

const handleChange = (
  value: TransferKey[],
  direction: TransferDirection,
  movedKeys: TransferKey[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style>
.transfer-footer {
  margin-left: 8px;
  padding: 6px 5px;
}
</style>

<template>
  <w-transfer
    v-model="value"
    :props="{
      key: 'value',
      label: 'desc',
    }"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  value: number
  desc: string
  disabled: boolean
}

// 会诊科室：数据源没有 key/label 字段，value/desc 与之对应
const departments = [
  '心血管内科',
  '神经内科',
  '呼吸与危重症医学科',
  '消化内科',
  '内分泌科',
  '肾内科',
  '血液内科',
  '普通外科',
  '骨科',
  '神经外科',
  '泌尿外科',
  '妇科',
  '儿科',
  '急诊医学科',
  '重症医学科（ICU）',
]

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      value: i,
      desc: departments[i - 1],
      // 暂未开放会诊的科室禁用
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])
</script>

<template>
  <w-transfer v-model="value" :data="data">
    <template #left-empty>
      <w-empty :image-size="60" description="暂无数据" />
    </template>
    <template #right-empty>
      <w-empty :image-size="60" description="暂无数据" />
    </template>
  </w-transfer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface DataItem {
  key: number
  label: string
  disabled: boolean
}

// 当日出诊医生
const doctors = [
  '张伟 主任医师',
  '李军 副主任医师',
  '王芳 主治医师',
  '刘洋 主任医师',
  '陈静 副主任医师',
  '杨帆 主治医师',
  '赵磊 住院医师',
  '黄敏 主任医师',
  '周杰 副主任医师',
  '吴倩 主治医师',
  '徐强 住院医师',
  '孙丽 主任医师',
  '马超 副主任医师',
  '朱丽 主治医师',
  '胡军 住院医师',
]

const generateData = (): DataItem[] => {
  const data: DataItem[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: doctors[i - 1],
      // 停诊的医生不可预约
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref(generateData())
const value = ref([])
</script>

<template>
  <w-transfer
    v-model="value"
    filterable
    :filter-method="filterMethod"
    filter-placeholder="输入拼音码搜索，如 AMX"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  code: string
}

// 药品目录：code 为药品名拼音首字母缩写
const drugs = [
  ['阿莫西林胶囊', 'AMX'],
  ['布洛芬缓释胶囊', 'BLF'],
  ['头孢克肟分散片', 'TBK'],
  ['左氧氟沙星片', 'ZYF'],
  ['奥美拉唑肠溶胶囊', 'AML'],
  ['二甲双胍缓释片', 'EJS'],
  ['苯磺酸氨氯地平片', 'ALD'],
  ['硝酸甘油片', 'XSG'],
  ['氯雷他定片', 'LLT'],
  ['蒙脱石散', 'MTS'],
]

const generateData = () => {
  const data: Option[] = []
  drugs.forEach(([label, code], index) => {
    data.push({
      label,
      code,
      key: index,
    })
  })
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query, item) => {
  return item.code.toLowerCase().includes(query.toLowerCase())
}
</script>

<template>
  <w-transfer
    v-model="value"
    :data="data"
    filterable
    :panel-width="['400px', '300px']"
    panel-height="200px"
    show-pagination
    :render-checked="renderChecked"
    :page-size="8"
    @left-page-change="onLeftPageChange"
    @right-page-change="onRightPageChange"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 50; i++) {
    data.push({
      key: i,
      label: `住院患者 ${String(i).padStart(3, '0')}`,
      // 已出院的患者不可再分配床位
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const onLeftPageChange = (val: number) => {
  console.log('left page change', val)
}

const onRightPageChange = (val: number) => {
  console.log('right page change', val)
}

const renderChecked = (checked: number, total: number, filed: any) => {
  if (filed === 'left') {
    return `<span>${checked}/${total}</span> (待分配)`
  }

  return `<span>${checked}/${total}</span> (已分配)`
}
</script>

<template>
  <w-transfer v-model="value" :data="data" one-way />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

// 单向选择参与今日会诊的科室
const departments = [
  '心血管内科（文字超出显示）',
  '神经外科',
  '骨科',
  '普通外科',
  '胸外科',
  '泌尿外科',
  '烧伤科',
  '重症医学科',
  '康复医学科',
  '疼痛科',
  '精神科',
  '临床营养科',
]

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 12; i++) {
    data.push({
      key: i,
      label: departments[i - 1],
      // 无会诊资质的科室不可选
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([1, 2, 3])
</script>

<template>
  <div>
    <w-transfer v-model="value" :data="data" simple />
    <p class="tip">简单模式下没有中间的穿梭按钮，单击列表项即可移动。</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

// 术前需完成的检验项目
const items = [
  '血常规',
  '尿常规',
  '便常规',
  '肝功能',
  '肾功能',
  '空腹血糖',
  '血脂',
  '电解质',
  '凝血功能',
  '血沉',
  'C 反应蛋白',
  '降钙素原',
]

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 12; i++) {
    data.push({
      key: i,
      label: items[i - 1],
      // 已完成的项目不可再选择
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([1, 2])
</script>

<style scoped>
.tip {
  margin-top: 12px;
  font-size: 13px;
  color: var(--w-text-color-secondary);
}
</style>

<template>
  <w-transfer
    v-model="value"
    :data="data"
    :disabled-right="disabledRight"
    target-clearable
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

// 摆药单药品目录
const drugs = [
  '0.9% 氯化钠注射液',
  '5% 葡萄糖注射液',
  '阿莫西林胶囊',
  '头孢呋辛酯片',
  '左氧氟沙星片',
  '奥美拉唑肠溶胶囊',
  '苯磺酸氨氯地平片',
  '二甲双胍缓释片',
  '氯雷他定片',
  '布洛芬缓释胶囊',
  '硝酸甘油片',
  '蒙脱石散',
]

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 12; i++) {
    data.push({
      key: i,
      label: drugs[i - 1],
      // 已停用的药品不可摆药
      disabled: i % 5 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([2, 3, 4])
// 已在摆药单、且医嘱已执行不允许再取消的药品
const disabledRight = ref<number[]>([3])
</script>

<template>
  <w-transfer
    v-model="value"
    :data="data"
    selectable
    filterable
    :titles="['全部检验项目', '已申请项目']"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  parentKey: number
  parentLabel: string
  disabled?: boolean
}

// 检验项目按检验类型分组，selectable 以下拉框按分组过滤
const groups = [
  {
    label: '血液学检验',
    items: [
      '血常规',
      '网织红细胞计数',
      '嗜酸性粒细胞计数',
      '血小板计数',
      '红细胞沉降率',
      '血型鉴定',
    ],
  },
  {
    label: '生化检验',
    items: [
      '肝功能十项',
      '肾功能五项',
      '空腹血糖',
      '血脂四项',
      '电解质六项',
      '血淀粉酶',
    ],
  },
  {
    label: '免疫学检验',
    items: [
      '乙肝五项',
      '丙肝抗体',
      '梅毒螺旋体抗体',
      'HIV 抗体',
      '结核感染 T 细胞检测',
      '自身抗体筛查',
    ],
  },
]

const generateData = (): Option[] => {
  const data: Option[] = []
  groups.forEach((group, groupIndex) => {
    group.items.forEach((label, itemIndex) => {
      const key = groupIndex * 6 + itemIndex + 1
      data.push({
        key,
        label,
        parentKey: groupIndex + 1,
        parentLabel: group.label,
        // 标本不足暂不可申请的项目
        disabled: key % 7 === 0,
      })
    })
  })
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([1, 4])
</script>

<template>
  <w-transfer v-model="value" :data="data" virtual-scroll />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 2000; i++) {
    data.push({
      key: i,
      label: `住院患者 ${String(i).padStart(4, '0')}`,
      // 已出院的患者不可选择
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([])
</script>

<template>
  <w-transfer
    v-model="value"
    :data="flatData"
    filterable
    :titles="['科室目录', '已选科室']"
    @left-search="handleLeftSearch"
  >
    <template #source="{ selectedKeys, onSelect }">
      <w-tree
        ref="treeRef"
        default-expand-all
        show-checkbox
        check-strictly
        node-key="key"
        :data="treeData"
        :props="treeProps"
        :filter-node-method="filterNode"
        :default-checked-keys="selectedKeys"
        @check="onSelect"
      />
    </template>
  </w-transfer>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

interface TreeNode {
  key: number
  label: string
  disabled?: boolean
  children?: TreeNode[]
}

const treeProps = {
  label: 'label',
  children: 'children',
  disabled: 'disabled',
}

const rawTree: TreeNode[] = [
  {
    key: 1,
    label: '内科',
    children: [
      { key: 11, label: '心血管内科' },
      { key: 12, label: '呼吸内科' },
      { key: 13, label: '消化内科（默认禁用）', disabled: true },
    ],
  },
  {
    key: 2,
    label: '外科',
    children: [
      { key: 21, label: '普通外科' },
      { key: 22, label: '骨科' },
    ],
  },
]

// 已穿梭到右侧的科室（父节点或子节点）在左侧树中禁用（树内置 disabled 呈现），
// 避免重复穿梭；从右侧移回后对应节点自动恢复可用
const treeData = computed(() =>
  rawTree.map((node) => ({
    ...node,
    disabled: value.value.includes(node.key) || node.disabled,
    children: node.children?.map((child) => ({
      ...child,
      disabled: value.value.includes(child.key) || child.disabled,
    })),
  }))
)

const flatData = ref<TreeNode[]>(
  rawTree.reduce(
    (acc: TreeNode[], node) => acc.concat(node, node.children || []),
    []
  )
)

const value = ref<number[]>([11])
const treeRef = ref()

const filterNode = (query: string, data: TreeNode) =>
  !query || data.label.includes(query)

const handleLeftSearch = (query: string) => {
  treeRef.value?.filter(query)
}
</script>

<template>
  <w-transfer v-model="value" :data="transferData">
    <template #source="{ data, selectedKeys, onSelect }">
      <w-tree
        default-expand-all
        show-checkbox
        node-key="key"
        :props="treeProps"
        :default-checked-keys="selectedKeys"
        :data="sourceTree(data)"
        @check="onSelect"
      />
    </template>
  </w-transfer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface TreeNode {
  key: number
  label: string
  disabled?: boolean
  children?: TreeNode[]
}

const treeProps = { label: 'label', children: 'children', disabled: 'disabled' }

const treeData: TreeNode[] = [
  {
    key: 1,
    label: '总院',
    children: [
      { key: 11, label: '内科楼' },
      { key: 12, label: '外科楼' },
    ],
  },
  {
    key: 2,
    label: '南院区',
    children: [
      { key: 21, label: '门诊楼' },
      { key: 22, label: '医技楼' },
    ],
  },
]

// 父子关联：父节点只作容器，只有叶子节点参与穿梭
const collectLeaves = (nodes: TreeNode[]): TreeNode[] =>
  nodes.flatMap((node) =>
    node.children?.length ? collectLeaves(node.children) : [node]
  )

const transferData = ref<TreeNode[]>(collectLeaves(treeData))

/**
 * 按源数据重建树：父节点只作容器，叶子节点仍在源列表中的正常可选，
 * 已穿梭到右侧的叶子禁用（树内置 disabled 呈现），避免父子关联勾选时被重复穿梭
 */
const sourceTree = (data: { key: number }[]): TreeNode[] => {
  const keys = new Set(data.map((item) => item.key))
  const travel = (nodes: TreeNode[]): TreeNode[] =>
    nodes.map((node) =>
      node.children?.length
        ? { ...node, children: travel(node.children) }
        : { ...node, disabled: !keys.has(node.key) || node.disabled }
    )

  return travel(treeData)
}

// 初始已穿梭「内科楼」，用于展示穿梭后的树形态
const value = ref<number[]>([11])
</script>

<template>
  <w-transfer
    v-model="value"
    :data="data"
    :panel-width="['360px', '360px']"
    show-table
    panel-height="270px"
  >
    <template #left-header-title> 医嘱（共 {{ data.length }} 条） </template>
    <template #source="{ data: list, onSelect }">
      <w-table
        :data="list"
        :border="false"
        height="270"
        row-key="key"
        @select-all="handleSelect($event, onSelect)"
        @selection-change="handleSelect($event, onSelect)"
      >
        <w-table-column type="selection" width="46" reserve-selection />
        <w-table-column show-overflow-tooltip prop="label" label="医嘱内容" />
        <w-table-column prop="dept" label="开单科室" width="100" />
      </w-table>
    </template>
    <template #target="{ data: list, onSelect }">
      <w-table
        :data="list"
        :border="false"
        height="270"
        row-key="key"
        @select-all="handleSelect($event, onSelect)"
        @selection-change="handleSelect($event, onSelect)"
      >
        <w-table-column type="selection" width="46" reserve-selection />
        <w-table-column show-overflow-tooltip prop="label" label="医嘱内容" />
        <w-table-column prop="dept" label="开单科室" width="100" />
      </w-table>
    </template>
  </w-transfer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TransferKey } from 'win-design-next'

interface Option {
  key: number
  label: string
  dept: string
  disabled?: boolean
}

// 长期医嘱（内容 + 开单科室），列表区由 source / target 插槽替换为表格
const orders = [
  ['心电监护', 'ICU'],
  ['持续低流量吸氧', '呼吸内科'],
  ['一级护理', '护理部'],
  ['低盐低脂饮食', '营养科'],
  ['0.9% 氯化钠注射液 250ml 静滴', '急诊药房'],
  ['头孢呋辛钠 1.5g 静滴 q12h', '急诊药房'],
  ['奥美拉唑 40mg 静推 qd', '消化内科'],
  ['测血压 q2h', '护理部'],
  ['测血糖 qid', '内分泌科'],
  ['留置导尿', '泌尿外科'],
  ['雾化吸入 bid', '呼吸内科'],
  ['卧床休息', '骨科'],
]

const generateData = (): Option[] => {
  const data: Option[] = []
  for (let i = 1; i <= 12; i++) {
    data.push({
      key: i,
      label: orders[i - 1][0],
      dept: orders[i - 1][1],
      // 已停止的医嘱不可选择
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref<number[]>([1, 2])

// w-table 的 select-all / selection-change 回传行对象数组，转成 onSelect 约定的 checkedKeys
const handleSelect = (
  rows: Option[],
  onSelect: (cur: unknown, ctx: { checkedKeys: TransferKey[] }) => void
) => {
  onSelect(null, { checkedKeys: rows.map((row) => row.key) })
}
</script>