List 列表 ​

<template>
  <w-radio-group v-model="size">
    <w-radio value="large">Large</w-radio>
    <w-radio value="default">Default</w-radio>
    <w-radio value="small">Small</w-radio>
    <w-radio value="mini">Mini</w-radio>
  </w-radio-group>
  <div class="mb-8 mt-8 flex gap-8">
    <w-switch
      v-model="config.split"
      active-text="Split"
      inactive-text="No split"
    />
    <w-switch
      v-model="config.border"
      active-text="Border"
      inactive-text="No border"
    />
  </div>
  <div class="flex gap-8">
    <w-list
      class="flex-1"
      :size="size"
      :split="config.split"
      :border="config.border"
      footer="共 5 个科室"
    >
      <template #header>
        <div>今日开放挂号科室</div>
      </template>
      <w-list-item>心血管内科</w-list-item>
      <w-list-item>呼吸与危重症医学科</w-list-item>
      <w-list-item>神经内科</w-list-item>
      <w-list-item>消化内科</w-list-item>
      <w-list-item>内分泌科</w-list-item>
    </w-list>
    <w-list
      class="flex-1"
      :size="size"
      :split="config.split"
      :border="config.border"
    >
      <w-list-item>心血管内科</w-list-item>
      <w-list-item>呼吸与危重症医学科</w-list-item>
      <w-list-item>神经内科</w-list-item>
      <w-list-item>消化内科</w-list-item>
      <w-list-item>内分泌科</w-list-item>
    </w-list>
  </div>
</template>

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

const config = ref({
  split: true,
  border: true,
})

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

<style scoped></style>

<template>
  <w-list split>
    <template #header>
      <div>会诊申请</div>
    </template>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="术前评估 · 心血管内科"
        description="患者高龄合并冠心病，拟行胆囊切除术，需麻醉科与心内科共同评估手术及麻醉风险"
      />
      <template #action>
        <w-button type="primary" text>查看</w-button>
        <w-button type="primary" text>回复</w-button>
      </template>
    </w-list-item>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="疑难病例讨论 · 呼吸与危重症医学科"
        description="肺部占位性质待定，需呼吸科、胸外科、病理科联合讨论，明确下一步诊疗方案"
      />
      <template #action>
        <w-button type="primary" text>查看</w-button>
        <w-button type="primary" text>回复</w-button>
      </template>
    </w-list-item>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="转科治疗 · 重症医学科"
        description="患者病情恶化，需转入 ICU 进一步监护治疗，请协助安排床位及交接"
      />
      <template #action>
        <w-button type="primary" text>查看</w-button>
        <w-button type="primary" text>回复</w-button>
      </template>
    </w-list-item>
  </w-list>
</template>

<template>
  <w-list border split>
    <template #header>
      <div>今日就诊队列</div>
    </template>
    <w-list-item>王建国 男 58岁 心血管内科</w-list-item>
    <w-list-item stripe>李淑芬 女 62岁 呼吸与危重症医学科</w-list-item>
    <w-list-item>张伟 男 45岁 神经内科</w-list-item>
    <w-list-item stripe>陈静 女 38岁 消化内科</w-list-item>
    <w-list-item>刘强 男 51岁 内分泌科</w-list-item>
  </w-list>
</template>

<template>
  <div class="flex gap-8">
    <w-list class="flex-1" height="150px" split>
      <template #header>
        <div>height 固定 150px</div>
      </template>
      <w-list-item v-for="item in items" :key="item">{{ item }}</w-list-item>
    </w-list>
    <w-list class="flex-1" border :max-height="120" split>
      <template #header>
        <div>maxHeight 封顶 120</div>
      </template>
      <w-list-item v-for="item in items" :key="item">{{ item }}</w-list-item>
    </w-list>
  </div>
</template>

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

const items = ref([
  '王建国 男 58岁 心血管内科',
  '李淑芬 女 62岁 呼吸与危重症医学科',
  '张伟 男 45岁 神经内科',
  '陈静 女 38岁 消化内科',
  '刘强 男 51岁 内分泌科',
  '赵敏 女 29岁 肾内科',
  '孙磊 男 67岁 血液内科',
])
</script>

<style scoped></style>