Table 表格 ​

<template>
  <div class="flex gap-4 items-center mb-4">
    <w-radio-group v-model="size" aria-label="size control">
      <w-radio-button value="extra-large">extra-large</w-radio-button>
      <w-radio-button value="large">large</w-radio-button>
      <w-radio-button value="default">default</w-radio-button>
      <w-radio-button value="small">small</w-radio-button>
      <w-radio-button value="mini">mini</w-radio-button>
    </w-radio-group>
    <w-switch
      v-model="hover"
      inline-prompt
      active-text="悬浮显示行背景色"
      inactive-text="悬浮不显示行背景色"
    />
  </div>
  <w-table
    :hover="hover"
    :size="size"
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <w-table-column
      width="120"
      prop="name"
      label="药品名称（WinDesignNext is a basic UI component library developed based on Vue. js 3. x ）"
      show-overflow-tooltip
    />
    <w-table-column width="180" prop="size" label="规格" />
    <w-table-column width="180" prop="unit" label="单位" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
  </w-table>
</template>

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

const tableData = [
  {
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
    status: true,
    date: '2024-04-18 12:00',
  },
  {
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
    status: false,
    date: '2024-04-18 12:00',
  },
  {
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
    status: true,
    date: '2024-04-18 12:00',
  },
  {
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
    status: false,
    date: '2024-04-18 12:00',
  },
  {
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
    status: true,
    date: '2024-04-18 12:00',
  },
]

interface User {
  date: string
  name: string
  address: string
}

const hover = ref(true)

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 3) {
    return 'disabled-row'
  }
  return ''
}

const size = ref('default')
</script>

<style>
.w3-table .disabled-row {
  --w3-table-tr-bg-color: var(--w3-color-info-plain);
}
</style>

<template>
  <w-table :data="tableData" style="width: 100%">
    <w-table-column prop="name" label="药品名称" />
    <w-table-column prop="size" label="规格" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
  </w-table>

  <w-table
    :data="tableData"
    empty-text="暂无药品数据"
    style="width: 100%"
    class="mb-4 mt-4"
  >
    <w-table-column prop="name" label="药品名称" />
    <w-table-column prop="size" label="规格" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
  </w-table>

  <w-table :data="tableData" style="width: 100%">
    <w-table-column prop="name" label="药品名称" />
    <w-table-column prop="size" label="规格" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
    <template #empty>
      <w-empty description="没有查询到相关药品" />
    </template>
  </w-table>
</template>

<script lang="ts" setup>
const tableData = []
</script>

<template>
  <w-table
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
    @current-change="handleCurrentChange"
  >
    <w-table-column type="index" width="50" />
    <w-table-column property="date" label="入院日期" width="150" />
    <w-table-column property="name" label="姓名" width="120" />
    <w-table-column property="diagnosis" label="诊断" />
  </w-table>
  <div style="margin-top: 20px">
    <w-button @click="setCurrent(tableData[1])">选中第二行</w-button>
    <w-button @click="setCurrent()">取消选中</w-button>
  </div>
</template>

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

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

interface Patient {
  date: string
  name: string
  diagnosis: string
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof WTable>>()

const setCurrent = (row?: Patient) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: Patient | undefined) => {
  currentRow.value = val
}
const tableData: Patient[] = [
  {
    date: '2026-08-01',
    name: '张伟',
    diagnosis: '高血压2级',
  },
  {
    date: '2026-08-03',
    name: '李娜',
    diagnosis: '社区获得性肺炎',
  },
  {
    date: '2026-07-28',
    name: '王强',
    diagnosis: '右胫骨骨折',
  },
  {
    date: '2026-08-05',
    name: '陈静',
    diagnosis: '妊娠期糖尿病',
  },
]
</script>

<template>
  <w-table
    ref="multipleTableRef"
    :data="tableData"
    row-key="id"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <w-table-column
      type="selection"
      width="50"
      :selectable="selectable"
      :selectable-tooltip="selectableTooltip"
    />
    <w-table-column width="200" prop="name" label="药品名称" />
    <w-table-column prop="size" label="规格" />
    <w-table-column prop="count" label="数量" />
    <w-table-column prop="price" label="单价(元)" align="right" />
    <w-table-column prop="total" label="金额(元)" align="right" />
  </w-table>
  <div style="margin-top: 20px">
    <w-button @click="toggleSelection([tableData[1], tableData[2]])">
      选中 2、3 行
    </w-button>
    <w-button @click="toggleSelection([tableData[1], tableData[2]], false)">
      取消选中 2、3 行
    </w-button>
    <w-button @click="toggleSelection()">取消选中所有行</w-button>
  </div>
</template>

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

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

interface User {
  id: number
  name: string
  size: string
  count: string
  unit: string
  price: string
  total: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User, index: number) => ![4, 7].includes(index)
const selectableTooltip = (row: User, index: number) => {
  if (index === 4) return '该药品禁止选择'
  if (index === 7) return '该药品库存不足'
  return ''
}
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    id: 3,
    name: '炔诺酮片',
    size: '625微克/片',
    count: '10',
    unit: '片',
    price: '10.00',
    total: '100.00',
  },
  {
    id: 4,
    name: '扶达胶囊',
    size: '100毫克/粒',
    count: '5',
    unit: '粒',
    price: '12.00',
    total: '60.00',
  },
  {
    id: 5,
    name: '百士欣胶囊',
    size: '10毫克/粒',
    count: '2',
    unit: '粒',
    price: '22.50',
    total: '45.00',
  },
  {
    id: 6,
    name: '别嘌醇片',
    size: '100毫克/片',
    count: '10',
    unit: '片',
    price: '14.50',
    total: '145.00',
  },
  {
    id: 7,
    name: '复方维生素注射液',
    size: '2毫升/支',
    count: '10',
    unit: '支',
    price: '12.73',
    total: '127.30',
  },
  {
    id: 8,
    name: '注射用盐酸多巴胺',
    size: '20毫升/支',
    count: '6',
    unit: '支',
    price: '49.80',
    total: '298.80',
  },
  {
    id: 9,
    name: '阿莫西林胶囊',
    size: '250毫克/粒',
    count: '24',
    unit: '粒',
    price: '1.50',
    total: '36.00',
  },
  {
    id: 10,
    name: '布洛芬缓释胶囊',
    size: '300毫克/粒',
    count: '20',
    unit: '粒',
    price: '0.95',
    total: '19.00',
  },
]
</script>

<template>
  <w-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
  >
    <w-table-column prop="date" label="入院日期" sortable width="180" />
    <w-table-column prop="name" label="姓名" width="180" />
    <w-table-column prop="diagnosis" label="诊断" :formatter="formatter" />
  </w-table>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'win-design-next'

interface Patient {
  date: string
  name: string
  diagnosis: string
}

const formatter = (row: Patient, column: TableColumnCtx<Patient>) => {
  return row.diagnosis
}

const tableData: Patient[] = [
  {
    date: '2026-08-06',
    name: '杨帆',
    diagnosis: '急性胰腺炎',
  },
  {
    date: '2026-08-05',
    name: '陈静',
    diagnosis: '妊娠期糖尿病',
  },
  {
    date: '2026-08-03',
    name: '李娜',
    diagnosis: '社区获得性肺炎',
  },
  {
    date: '2026-08-01',
    name: '张伟',
    diagnosis: '高血压2级',
  },
]
</script>

<template>
  <w-button @click="resetDateFilter">清除日期筛选</w-button>
  <w-button @click="clearFilter">清除全部筛选</w-button>
  <w-table
    ref="tableRef"
    class="mt-4"
    row-key="date"
    :data="tableData"
    style="width: 100%"
  >
    <w-table-column
      prop="date"
      label="入院日期（WinDesignNext is a basic UI component library developed based on Vue. js 3. x）"
      sortable
      width="180"
      column-key="date"
      :filters="[
        { text: '2026-07-15', value: '2026-07-15' },
        { text: '2026-07-20', value: '2026-07-20' },
        { text: '2026-08-01', value: '2026-08-01' },
        { text: '2026-08-06', value: '2026-08-06' },
      ]"
      :filter-method="filterHandler"
    />
    <w-table-column prop="name" label="姓名" width="180" />
    <w-table-column prop="diagnosis" label="诊断" :formatter="formatter" />

    <w-table-column
      prop="status"
      label="状态"
      width="100"
      :filters="[
        { text: '在院', value: '在院' },
        { text: '出院', value: '出院' },
        { text: '转科', value: '转科' },
        { text: '病危', value: '病危' },
      ]"
      :filter-method="filterStatus"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <w-tag :type="statusTagType(scope.row.status)" disable-transitions>{{
          scope.row.status
        }}</w-tag>
      </template>
    </w-table-column>
  </w-table>
  <w-table
    ref="tableRef"
    class="mt-4"
    row-key="date"
    :data="tableData"
    style="width: 100%"
  >
    <w-table-column
      prop="date"
      label="入院日期"
      sortable
      width="180"
      column-key="date"
      :filters="[
        { text: '2026-07-15', value: '2026-07-15' },
        { text: '2026-07-20', value: '2026-07-20' },
        { text: '2026-08-01', value: '2026-08-01' },
        { text: '2026-08-06', value: '2026-08-06' },
      ]"
      :filter-method="filterHandler"
    />
    <w-table-column prop="name" label="姓名" width="180" />
    <w-table-column prop="diagnosis" label="诊断" :formatter="formatter" />

    <w-table-column
      prop="status"
      label="状态"
      width="100"
      :filters="[
        { text: '在院', value: '在院' },
        { text: '出院', value: '出院' },
        { text: '转科', value: '转科' },
        { text: '病危', value: '病危' },
      ]"
      :filter-method="filterStatus"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <w-tag :type="statusTagType(scope.row.status)" disable-transitions>{{
          scope.row.status
        }}</w-tag>
      </template>
    </w-table-column>
  </w-table>
</template>

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

import type { TableColumnCtx, TableInstance } from 'win-design-next'

interface Patient {
  date: string
  name: string
  diagnosis: string
  status: string
}

const tableRef = ref<TableInstance>()

const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
}
const clearFilter = () => {
  tableRef.value!.clearFilter()
}
const formatter = (row: Patient, column: TableColumnCtx<Patient>) => {
  return row.diagnosis
}
const statusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    在院: 'primary',
    转科: 'warning',
    病危: 'danger',
    出院: 'success',
  }
  return typeMap[status] ?? 'info'
}
const filterStatus = (value: string, row: Patient) => {
  return row.status === value
}
const filterHandler = (
  value: string,
  row: Patient,
  column: TableColumnCtx<Patient>
) => {
  const property = column['property']
  return row[property] === value
}

const tableData: Patient[] = [
  {
    date: '2026-08-06',
    name: '杨帆',
    diagnosis: '急性胰腺炎',
    status: '病危',
  },
  {
    date: '2026-08-01',
    name: '张伟',
    diagnosis: '高血压2级',
    status: '在院',
  },
  {
    date: '2026-07-15',
    name: '刘秀英',
    diagnosis: '脑梗死后遗症',
    status: '转科',
  },
  {
    date: '2026-07-20',
    name: '赵敏',
    diagnosis: '2型糖尿病',
    status: '出院',
  },
]
</script>

<template>
  <w-title>行拖拽 · 整行模式（第二行禁止拖拽）：draggable-row</w-title>
  <w-table
    :data="rowData"
    draggable-row
    :row-draggable="(_, index) => index !== 1"
    style="width: 100%"
    @row-drag-end="onRowDragEnd"
  >
    <w-table-column prop="bedNo" label="床号" width="90" />
    <w-table-column prop="name" label="姓名" width="100" />
    <w-table-column prop="gender" label="性别" width="70" />
    <w-table-column prop="age" label="年龄" width="70" />
    <w-table-column prop="date" label="入院日期" width="110" />
    <w-table-column prop="diagnosis" label="诊断" />
    <w-table-column prop="dept" label="科室" width="110" />
    <w-table-column prop="doctor" label="主管医生" width="100" />
  </w-table>
  <w-divider />
  <w-title
    >行拖拽 · 手柄模式（仅可通过手柄图标拖拽）：添加 `type="drag"`
    的列会渲染拖拽手柄</w-title
  >
  <w-table
    :data="handleData"
    draggable-row
    :row-draggable="(_, index) => index !== 1"
    style="width: 100%"
    @row-drag-end="onHandleDragEnd"
  >
    <w-table-column type="drag" width="60" />
    <w-table-column prop="bedNo" label="床号" width="90" />
    <w-table-column prop="name" label="姓名" width="100" />
    <w-table-column prop="gender" label="性别" width="70" />
    <w-table-column prop="age" label="年龄" width="70" />
    <w-table-column prop="date" label="入院日期" width="110" />
    <w-table-column prop="diagnosis" label="诊断" />
    <w-table-column prop="dept" label="科室" width="110" />
    <w-table-column prop="doctor" label="主管医生" width="100" />
  </w-table>
  <w-divider />
  <w-title>列拖拽（列由 tableItems 配置渲染）：draggable-column</w-title>
  <w-table
    :data="columnData"
    draggable-column
    style="width: 100%"
    @column-drag-move="onColumnDragMove"
    @column-drag-end="onColumnDragEnd"
  >
    <w-table-column
      v-for="item in tableItems"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :draggable="item.draggable"
    />
  </w-table>
</template>

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

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

interface Patient {
  bedNo: string
  name: string
  gender: string
  age: string
  date: string
  diagnosis: string
  dept: string
  doctor: string
}

interface ColumnItem {
  label: string
  prop: string
  width?: string
  draggable?: boolean
}

interface Medicine {
  name: string
  size: string
  factory: string
  batchNo: string
  expiry: string
  stock: string
  price: string
  insurance: string
}

// 列拖拽表：列由配置数组 v-for 渲染（业务常见用法）
const tableItems = ref<ColumnItem[]>([
  { label: '药品名称', prop: 'name', width: '180' },
  { label: '规格（禁止拖拽）', prop: 'size', width: '180', draggable: false },
  { label: '生产厂家', prop: 'factory', width: '140' },
  { label: '批号', prop: 'batchNo', width: '120' },
  { label: '有效期至', prop: 'expiry', width: '120' },
  { label: '库存', prop: 'stock', width: '90' },
  { label: '零售价（元）', prop: 'price', width: '110' },
  { label: '医保类型', prop: 'insurance', width: '100' },
])

const medicines = (): Medicine[] => [
  {
    name: '注射用头孢曲松钠',
    size: '1g×10支',
    factory: '华北制药',
    batchNo: 'B20260312',
    expiry: '2027-09-30',
    stock: '320',
    price: '12.50',
    insurance: '甲类',
  },
  {
    name: '盐酸氨溴索口服液',
    size: '100ml',
    factory: '上海恒瑞',
    batchNo: 'B20260208',
    expiry: '2028-01-15',
    stock: '156',
    price: '18.80',
    insurance: '乙类',
  },
  {
    name: '甘精胰岛素注射液',
    size: '3ml×1支',
    factory: '诺和诺德',
    batchNo: 'B20260401',
    expiry: '2026-12-20',
    stock: '88',
    price: '263.00',
    insurance: '乙类',
  },
  {
    name: '苯磺酸氨氯地平片',
    size: '5mg×28片',
    factory: '辉瑞制药',
    batchNo: 'B20260119',
    expiry: '2027-06-30',
    stock: '512',
    price: '32.60',
    insurance: '甲类',
  },
]

const patients = (): Patient[] => [
  {
    bedNo: '1',
    name: '杨帆',
    gender: '男',
    age: '45',
    date: '2026-08-06',
    diagnosis: '急性胰腺炎',
    dept: '消化内科',
    doctor: '周明',
  },
  {
    bedNo: '2',
    name: '陈静',
    gender: '女',
    age: '31',
    date: '2026-08-05',
    diagnosis: '妊娠期糖尿病',
    dept: '内分泌科',
    doctor: '刘芳',
  },
  {
    bedNo: '3',
    name: '李娜',
    gender: '女',
    age: '58',
    date: '2026-08-03',
    diagnosis: '社区获得性肺炎',
    dept: '呼吸内科',
    doctor: '王强',
  },
  {
    bedNo: '4',
    name: '张伟',
    gender: '男',
    age: '67',
    date: '2026-08-01',
    diagnosis: '高血压2级',
    dept: '心内科',
    doctor: '赵敏',
  },
  {
    bedNo: '5',
    name: '刘建国',
    gender: '男',
    age: '72',
    date: '2026-07-28',
    diagnosis: '慢性阻塞性肺疾病急性加重',
    dept: '呼吸内科',
    doctor: '王强',
  },
  {
    bedNo: '6',
    name: '孙丽',
    gender: '女',
    age: '39',
    date: '2026-07-25',
    diagnosis: '甲状腺功能亢进',
    dept: '内分泌科',
    doctor: '刘芳',
  },
]

// 三个表格独立数据源，互不影响
const rowData = ref(patients())
const handleData = ref(patients())
const columnData = ref(medicines())

const onRowDragEnd = (
  row: Patient,
  oldIndex: number,
  newIndex: number,
  data: Patient[]
) => {
  // data 即拖拽后的最新数据，回写外部数据源（按需提交接口）
  rowData.value = data
  console.log('最新的 data：', data, rowData.value)
}

const onHandleDragEnd = (
  row: Patient,
  oldIndex: number,
  newIndex: number,
  data: Patient[]
) => {
  handleData.value = data
  console.log('最新的 data：', data)
}

const onColumnDragMove = (
  column: TableColumnCtx<Medicine>,
  target: TableColumnCtx<Medicine>,
  position: 'before' | 'after'
) => {
  // 拖动经过表头时实时反馈：将插入到目标列的左侧（before）或右侧（after）
  console.log(`列 ${column.label} 将插入到 ${target.label} ${position}`)
}

const onColumnDragEnd = (
  column: TableColumnCtx<Medicine>,
  oldIndex: number,
  newIndex: number,
  columns: TableColumnCtx<Medicine>[]
) => {
  // columns 即拖拽后的最新列顺序：按它重排 tableItems，
  // v-for 自动按新顺序渲染，tableItems 即可直接提交接口
  tableItems.value = columns.map(
    (col) => tableItems.value.find((item) => item.prop === col.property)!
  )
  console.log('最新的列配置：', tableItems.value)
}
</script>

<template>
  <w-table :data="tableData" border style="width: 100%" max-height="360">
    <w-table-column
      v-for="column in visibleColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    />
    <w-table-column
      prop="action"
      label="操作"
      width="120"
      fixed="right"
      :settings="tableColumns"
      :settings-change="handleChangeTableColumns"
    >
      <template #settings-content="{ settingsList, checked }">
        <p class="w3-table-settings__title">其他设置</p>
        <p>已选 {{ checked.length }} / {{ settingsList.length }} 列</p>
      </template>
      <template #default>
        <w-button link type="primary" size="small"> 执行 </w-button>
      </template>
    </w-table-column>
  </w-table>
</template>

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

// 病历号为必选列：lock 锁定勾选、drag: false 固定在首位不可拖
const tableColumns = ref([
  {
    prop: 'id',
    label: '病历号',
    width: 110,
    show: true,
    lock: true,
    drag: false,
  },
  { prop: 'name', label: '患者姓名', width: 90, show: true },
  { prop: 'sex', label: '性别', width: 70, show: true },
  { prop: 'age', label: '年龄', width: 70, show: true },
  { prop: 'drug', label: '药品名称', width: 140, show: true },
  { prop: 'size', label: '规格', width: 100, show: true },
  { prop: 'date', label: '给药日期', width: 110, show: true },
  { prop: 'route', label: '给药途径', width: 90, show: false },
  { prop: 'usage', label: '医嘱内容', width: 150, show: true },
  { prop: 'count', label: '数量', width: 70, show: true },
  { prop: 'unit', label: '单位', width: 70, show: true },
  { prop: 'price', label: '单价（元）', width: 100, show: false },
  { prop: 'amount', label: '金额（元）', width: 100, show: true },
  { prop: 'nurse', label: '执行护士', width: 90, show: true },
  { prop: 'execTime', label: '执行时间', width: 150, show: false },
  { prop: 'remark', label: '备注', width: 130, show: false },
])

// settings 数组即单一数据源：show 控制显隐、数组顺序即列顺序
const visibleColumns = computed(() =>
  tableColumns.value.filter((column) => column.show)
)

const handleChangeTableColumns = (settings: typeof tableColumns.value) => {
  tableColumns.value = settings
}

const tableData = ref(
  Array.from({ length: 5 }, (_, i) => ({
    id: `BL2026${String(1001 + i)}`,
    name: ['张三', '李四', '王五', '赵六', '钱七'][i],
    sex: i % 2 === 0 ? '男' : '女',
    age: 28 + i * 6,
    drug: [
      '阿莫西林胶囊',
      '左氧氟沙星片',
      '注射用头孢呋辛钠',
      '蒙脱石散',
      '氯化钠注射液',
    ][i],
    size: ['0.25克/粒', '0.5克/片', '0.75克/支', '3克/袋', '0.9% 250ml'][i],
    date: `2026-09-${String(i + 10).padStart(2, '0')}`,
    route: i % 2 === 0 ? '口服' : '静脉滴注',
    usage: i % 2 === 0 ? '每次 2 粒，每日 3 次' : '每次 1 支，每日 2 次',
    count: 1 + i,
    unit: ['粒', '片', '支', '袋', '瓶'][i],
    price: ((i % 5) * 10 + 12.5).toFixed(2),
    amount: (((i % 5) * 10 + 12.5) * (1 + i)).toFixed(2),
    nurse: ['张丽', '李丹', '王丽娟'][i % 3],
    execTime: `2026-09-${String(i + 10).padStart(2, '0')} 08:30`,
    remark: i % 2 === 0 ? '皮试阴性后使用' : '餐后服用',
  }))
)
</script>

<template>
  <div class="flex gap-4 items-center mb-4 flex-wrap">
    <w-switch
      v-model="hover"
      inline-prompt
      active-text="悬浮显示行背景色"
      inactive-text="悬浮不显示行背景色"
    />
    <w-button @click="scrollToIndex(0)">滚动到第 1 行</w-button>
    <w-button @click="scrollToIndex(19)">滚动到第 20 行</w-button>
    <w-button @click="scrollToIndex(39, 20)"
      >滚动到第 40 行（offset 20）</w-button
    >
    <w-button @click="scrollToLastRow">scrollToRow 最后一行</w-button>
  </div>
  <w-table
    ref="tableRef"
    :hover="hover"
    :data="tableData"
    row-key="patientNo"
    style="width: 100%"
    height="280"
    :h-scrollbar-size="12"
    :scrollbar-size="12"
  >
    <w-table-column fixed prop="date" label="入院日期" width="150" />
    <w-table-column prop="name" label="姓名" width="120" />
    <w-table-column prop="department" label="科室" width="120" />
    <w-table-column prop="allergyHistory" label="过敏史" width="320" />
    <w-table-column prop="chiefComplaint" label="主诉" width="600" />
    <w-table-column
      prop="patientNo"
      fixed="right"
      label="患者编号"
      width="160"
    />
  </w-table>
</template>

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

const hover = ref(true)
const tableRef = ref()

const names = [
  '张伟',
  '李娜',
  '王强',
  '刘秀英',
  '陈静',
  '杨帆',
  '孙丽华',
  '赵明',
  '周敏',
  '吴磊',
]
const departments = [
  '心血管内科',
  '呼吸内科',
  '骨科',
  '神经内科',
  '妇产科',
  '消化内科',
  '内分泌科',
  '泌尿外科',
]
const allergies = [
  '无已知过敏',
  '青霉素过敏，头孢曲松皮试阳性',
  '磺胺类药物过敏',
  '头孢类过敏，海鲜过敏',
  '阿司匹林哮喘病史，碘造影剂过敏',
  '青霉素过敏',
]
const complaints = [
  '反复头晕、头痛 1 周，加重伴视物旋转 2 天，既往高血压病史 10 年',
  '咳嗽、咳痰伴发热 5 天，加重伴胸闷、气促 1 天',
  '车祸外伤致右小腿肿痛、畸形、活动受限 4 小时',
  '左侧肢体无力伴言语不清 1 月余，加重 3 天',
  '孕 28 周，多饮、多尿伴血糖升高 2 周',
  '上腹部持续性疼痛 8 小时，伴恶心、呕吐，进食后加重',
  '间断胸闷、心悸 2 年，加重伴夜间阵发性呼吸困难 3 天',
  '双下肢水肿伴尿量减少 1 周，既往慢性肾炎病史',
]

const pad = (n: number) => String(n).padStart(2, '0')

const tableData = Array.from({ length: 50 }, (_, i) => {
  const day = (i % 28) + 1
  const month = (i % 8) + 1
  return {
    date: `2026-${pad(month)}-${pad(day)}`,
    name: names[i % names.length],
    department: departments[i % departments.length],
    allergyHistory: allergies[i % allergies.length],
    chiefComplaint: complaints[i % complaints.length],
    patientNo: `ZY2026${pad(month)}${pad(day)}${String(i + 1).padStart(
      3,
      '0'
    )}`,
  }
})

const scrollToIndex = (index: number, offset?: number) => {
  tableRef.value?.scrollToIndex(index, offset)
}

const scrollToLastRow = () => {
  tableRef.value?.scrollToRow(tableData[tableData.length - 1])
}
</script>

<template>
  <w-table :data="tableData" style="width: 100%" max-height="250">
    <w-table-column fixed prop="date" label="给药日期" width="150" />
    <w-table-column prop="name" label="药品名称" width="120" />
    <w-table-column prop="size" label="规格" width="120" />
    <w-table-column prop="route" label="给药途径" width="120" />
    <w-table-column prop="usage" label="医嘱内容" width="600" />
    <w-table-column prop="nurse" label="执行护士" width="120" />
    <w-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <w-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </w-button>
      </template>
    </w-table-column>
  </w-table>
  <w-button class="mt-4" style="width: 100%" @click="onAddItem">
    新增医嘱
  </w-button>
</template>

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

const now = new Date()

const tableData = ref([
  {
    date: '2026-08-06',
    name: '阿莫西林胶囊',
    size: '0.25克/粒',
    route: '口服',
    usage: '每次 2 粒，每日 3 次',
    nurse: '张丽',
  },
  {
    date: '2026-08-06',
    name: '左氧氟沙星片',
    size: '0.5克/片',
    route: '口服',
    usage: '每次 1 片，每日 1 次',
    nurse: '李丹',
  },
  {
    date: '2026-08-07',
    name: '注射用头孢呋辛钠',
    size: '0.75克/支',
    route: '静脉滴注',
    usage: '每次 1 支，每日 2 次（皮试阴性后使用）',
    nurse: '王丽娟',
  },
])

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD'),
    name: '蒙脱石散',
    size: '3克/袋',
    route: '口服',
    usage: '每次 1 袋，每日 3 次，首剂加倍',
    nurse: '王丽娟',
  })
}
</script>

<template>
  <w-switch
    v-model="alongSide"
    active-text="滚动条占列（scrollbar-along-side）"
    class="mb-4"
  />
  <w-table
    class="mb-4"
    scrollbar-always-on
    :data="tableData"
    :scrollbar-along-side="alongSide"
    style="width: 100%"
    :h-scrollbar-size="12"
    :scrollbar-size="12"
    max-height="250"
  >
    <w-table-column prop="date" label="给药日期" width="150" />
    <w-table-column prop="name" label="药品名称" width="120" />
    <w-table-column prop="size" label="规格" width="120" />
    <w-table-column prop="route" label="给药途径" width="120" />
    <w-table-column prop="usage" label="医嘱内容" width="600" />
    <w-table-column prop="nurse" label="执行护士" width="120" />
    <w-table-column fixed="right" label="操作" min-width="120">
      <template #default>
        <w-button link type="primary" size="small"> 执行 </w-button>
      </template>
    </w-table-column>
  </w-table>
  <w-table
    :data="tableData"
    :scrollbar-along-side="alongSide"
    scrollbar-always-on
    style="width: 100%"
    max-height="250"
  >
    <w-table-column prop="date" label="给药日期" width="150" />
    <w-table-column prop="name" label="药品名称" width="120" />
    <w-table-column prop="size" label="规格" width="120" />
    <w-table-column prop="route" label="给药途径" width="120" />
    <w-table-column prop="usage" label="医嘱内容" width="600" />
    <w-table-column prop="nurse" label="执行护士" width="120" />
    <w-table-column label="操作" min-width="120">
      <template #default>
        <w-button link type="primary" size="small"> 执行 </w-button>
      </template>
    </w-table-column>
  </w-table>
</template>

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

const alongSide = ref(true)

const tableData = ref(
  Array.from({ length: 20 }, (_, i) => ({
    date: `2026-08-${String((i % 28) + 1).padStart(2, '0')}`,
    name: ['阿莫西林胶囊', '左氧氟沙星片', '注射用头孢呋辛钠', '蒙脱石散'][
      i % 4
    ],
    size: ['0.25克/粒', '0.5克/片', '0.75克/支', '3克/袋'][i % 4],
    route: i % 2 === 0 ? '口服' : '静脉滴注',
    usage:
      i % 2 === 0
        ? '每次 2 粒，每日 3 次'
        : '每次 1 支，每日 2 次（皮试阴性后使用）',
    nurse: ['张丽', '李丹', '王丽娟'][i % 3],
  }))
)
</script>

<template>
  <div class="flex gap-4 mb-8 flex-wrap">
    <w-switch
      v-model="always"
      active-text="一直显示（horizontal-scroll-always）"
    />
    <w-switch
      v-model="wheelHorizontal"
      active-text="Shift + 滚轮横向滚动（wheel-horizontal-scroll）"
    />
  </div>
  <p
    v-if="wheelHorizontal"
    class="mb-4 text-sm"
    style="color: var(--w-text-color-secondary)"
  >
    按住 Shift 并滚动鼠标滚轮，可横向滚动表格内容。
  </p>
  <w-table
    class="mb-4"
    horizontal-scroll
    :wheel-horizontal-scroll="wheelHorizontal"
    :h-scrollbar-size="12"
    :horizontal-scroll-always="always"
    :horizontal-scroll-offset="0"
    :data="tableData"
    border
    style="width: 100%"
    max-height="480"
  >
    <w-table-column prop="name" label="药品名称" width="180" fixed="left" />
    <w-table-column prop="date" label="给药日期" width="150" />
    <w-table-column prop="size" label="规格" width="120" />
    <w-table-column prop="route" label="给药途径" width="120" />
    <w-table-column prop="usage" label="医嘱内容" width="240" />
    <w-table-column prop="count" label="数量" width="100" />
    <w-table-column prop="unit" label="单位" width="100" />
    <w-table-column prop="price" label="单价（元）" width="120" />
    <w-table-column prop="nurse" label="执行护士" width="120" />
    <w-table-column fixed="right" label="操作" width="120">
      <template #default>
        <w-button link type="primary" size="small"> 执行 </w-button>
      </template>
    </w-table-column>
  </w-table>
</template>

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

const always = ref(true)
const wheelHorizontal = ref(true)

const tableData = ref(
  Array.from({ length: 30 }, (_, i) => ({
    date: `2026-09-${String((i % 28) + 1).padStart(2, '0')}`,
    name: ['阿莫西林胶囊', '左氧氟沙星片', '注射用头孢呋辛钠', '蒙脱石散'][
      i % 4
    ],
    size: ['0.25克/粒', '0.5克/片', '0.75克/支', '3克/袋'][i % 4],
    route: i % 2 === 0 ? '口服' : '静脉滴注',
    usage:
      i % 2 === 0
        ? '每次 2 粒，每日 3 次'
        : '每次 1 支，每日 2 次（皮试阴性后使用）',
    count: 1 + (i % 3),
    unit: ['粒', '片', '支', '袋'][i % 4],
    price: ((i % 5) * 10 + 12.5).toFixed(2),
    nurse: ['张丽', '李丹', '王丽娟'][i % 3],
  }))
)
</script>