Select 选择器 ​

<template>
  <w-radio-group v-model="size" aria-label="size control" class="mb-8">
    <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-title>基础用法</w-title>
  <div class="flex flex-wrap gap-4 items-center">
    <w-select v-model="value" style="width: 240px" :size="size">
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      disabled
      :size="size"
      placeholder="请选择就诊科室"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value4"
      disabled
      :size="size"
      placeholder="请选择就诊科室"
      style="width: 240px"
      class="ml-4"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
  </div>
  <w-divider />
  <w-title
    >禁用选项：在 w-option 中，设定 disabled 值为 true，即可禁用该选项</w-title
  >
  <w-select
    v-model="value1"
    :size="size"
    placeholder="请选择就诊科室"
    style="width: 240px"
    :suffix-icon="CaretBottom"
  >
    <template #prefix>
      <w-icon>
        <search />
      </w-icon> </template
    ><w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </w-select>
  <w-divider />
  <w-title>可清空：为 w-select 设置 clearable 属性，则可将选择器清空 </w-title>
  <w-select
    v-model="value2"
    clearable
    :size="size"
    placeholder="请选择就诊科室"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-divider />
  <w-title>轻量化：为 w-select 设置 plain 属性 </w-title>
  <w-select
    v-model="value2"
    clearable
    :size="size"
    plain
    placeholder="请选择就诊科室"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <w-select
    v-model="value2"
    class="ml-8"
    :size="size"
    clearable
    plain
    disabled
    placeholder="请选择就诊科室"
    style="width: 240px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CaretBottom, Search } from '@win-design-next/icons-vue'

const value = ref('')
const value1 = ref('')
const value2 = ref('cardiovascular')
const value4 = ref('cardiovascular')

const size = ref('default')

const options = [
  {
    value: 'cardiovascular',
    label: `心血管内科（WinDesignNext is a basic UI component library developed based
          on Vue. js 3. x）`,
  },
  {
    value: 'neurology',
    label: '神经内科',
  },
  {
    value: 'gastroenterology',
    label: '消化内科',
  },
  {
    value: 'respiratory',
    label: '呼吸内科',
  },
  {
    value: 'endocrinology',
    label: '内分泌科',
    disabled: true,
  },
]
</script>

<template>
  <w-select
    v-model="value"
    :options="options"
    :props="props"
    placeholder="请选择给药途径"
    style="width: 240px"
  />
</template>

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

const value = ref('')

const props = {
  value: 'id',
  label: 'label',
  options: 'options',
  disabled: 'disabled',
}

const options = [
  {
    id: 'oral',
    label: '口服',
  },
  {
    id: 'intravenous',
    label: '静脉滴注',
    disabled: true,
  },
  {
    id: 'intramuscular',
    label: '肌肉注射',
  },
  {
    id: 'subcutaneous',
    label: '皮下注射',
    disabled: true,
  },
  {
    id: 'inhalation',
    label: '雾化吸入',
  },
]
</script>

<template>
  <div class="flex gap-4 items-center mb-8">
    <w-select
      v-model="value"
      style="width: 240px"
      status="success"
      tips="检验结果在参考范围内"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      style="width: 240px"
      status="error"
      tips="危急值结果，请立即复核并上报"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      style="width: 240px"
      status="danger"
      tips="危急值结果，请立即复核并上报"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value"
      style="width: 240px"
      status="warning"
      tips="结果接近临界值，请结合临床判断"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
  </div>
</template>

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

const value = ref('')

const options = [
  {
    value: 'bloodRoutine',
    label: '血常规',
  },
  {
    value: 'urineRoutine',
    label: '尿常规',
  },
  {
    value: 'liverFunction',
    label: '肝功能',
  },
  {
    value: 'renalFunction',
    label: '肾功能',
  },
  {
    value: 'bloodSugar',
    label: '血糖',
    disabled: true,
  },
]
</script>

<template>
  <w-radio-group v-model="size" aria-label="size control" class="mb-8">
    <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-title>基础用法</w-title>
  <div class="mr-4">
    <w-select
      v-model="value1"
      clearable
      multiple
      :size="size"
      placeholder="请选择检查项目"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </w-select>
  </div>
  <w-divider />
  <w-title>标签样式</w-title>
  <div class="mr-4">
    <w-select
      v-model="value1"
      tag-type="danger"
      multiple
      :size="size"
      placeholder="请选择检查项目"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
  </div>
  <w-divider />
  <w-title>折叠标签</w-title>
  <div class="flex flex-wrap gap-4">
    <div>
      <p>使用 collapse-tags</p>
      <w-select
        v-model="value2"
        multiple
        collapse-tags
        :size="size"
        placeholder="请选择检查项目"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div>
      <p>使用 collapse-tags-tooltip</p>
      <w-select
        v-model="value3"
        multiple
        collapse-tags
        collapse-tags-tooltip
        :size="size"
        placeholder="请选择检查项目"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div>
      <p>使用 max-collapse-tags</p>
      <w-select
        v-model="value4"
        multiple
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
        :size="size"
        placeholder="请选择检查项目"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
  <w-divider />
  <w-title>禁用</w-title>
  <div class="flex gap-4">
    <w-select
      v-model="value1"
      clearable
      multiple
      disabled
      :size="size"
      placeholder="请选择检查项目"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
    <w-select
      v-model="value5"
      clearable
      multiple
      disabled
      :size="size"
      placeholder="请选择检查项目"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-select>
  </div>
</template>

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

const size = ref('default')

const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])
const value5 = ref(['chestXray', 'chestCT'])

const options = [
  {
    value: 'chestXray',
    label: `胸部 DR（WinDesignNext is a basic UI component library developed based
          on Vue. js 3. x）`,
    disabled: true,
  },
  {
    value: 'chestCT',
    label: `胸部 CT 平扫（WinDesignNext is a basic UI component library developed
          based on Vue. js 3. x）`,
  },
  {
    value: 'headMRI',
    label: '头颅 MRI 平扫',
    disabled: true,
  },
  {
    value: 'abdomenUltrasound',
    label: '腹部彩超',
  },
  {
    value: 'echocardiography',
    label: '心脏彩超',
  },
  {
    value: 'holter',
    label: '24 小时动态心电图',
    disabled: true,
  },
  {
    value: 'gastroscopy',
    label: '胃镜检查',
  },
  {
    value: 'colonoscopy',
    label: '肠镜检查',
  },
  {
    value: 'carotidUltrasound',
    label: '颈动脉彩超',
  },
  {
    value: 'boneDensity',
    label: '骨密度测定',
  },
]
</script>

<template>
  <w-select v-model="value" placeholder="请选择药品" style="width: 240px">
    <w-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <w-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </w-option-group>
  </w-select>
</template>

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

const value = ref('')
const options = [
  {
    label: '抗微生物药',
    options: [
      {
        value: 'amoxicillin',
        label: '阿莫西林胶囊',
      },
      {
        value: 'levofloxacin',
        label: '左氧氟沙星片',
      },
    ],
  },
  {
    label: '消化系统药',
    options: [
      {
        value: 'omeprazole',
        label: '奥美拉唑肠溶胶囊',
      },
      {
        value: 'domperidone',
        label: '多潘立酮片',
      },
      {
        value: 'montmorillonite',
        label: '蒙脱石散',
      },
      {
        value: 'hydrotalcite',
        label: '铝碳酸镁咀嚼片',
      },
    ],
  },
]
</script>

<template>
  <div class="m-4">
    <w-select
      v-model="value"
      value-key="id"
      placeholder="请选择患者"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item"
      />
    </w-select>
    <p>选中患者信息：{{ value ? value.desc : '未选择' }}</p>
  </div>
</template>

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

type Option = {
  id: number
  label: string
  desc: string
}
const value = ref<Option>()
const options = ref([
  { id: 1, label: '张伟', desc: '男 · 35岁 · 住院号 0321568' },
  { id: 2, label: '李娜', desc: '女 · 28岁 · 住院号 0321901' },
  { id: 3, label: '王芳', desc: '女 · 52岁 · 住院号 0322107' },
  { id: 4, label: '张伟', desc: '男 · 61岁 · 住院号 0322345' },
])
</script>

<template>
  <w-select
    v-model="value"
    :empty-values="[null, undefined]"
    :value-on-clear="null"
    clearable
    placeholder="请选择就诊类型"
    style="width: 240px"
    @clear="handleClear"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage } from 'win-design-next'

const value = ref('')

const options = [
  {
    value: '',
    label: '全部',
  },
  {
    value: 'outpatient',
    label: '门诊',
  },
  {
    value: 'emergency',
    label: '急诊',
  },
  {
    value: 'inpatient',
    label: '住院',
  },
  {
    value: 'physicalExam',
    label: '体检',
  },
]

const handleClear = () => {
  WMessage.info(`清空后的值为：${value.value}`)
}
</script>

<template>
  <div class="flex">
    <div class="mr-4">
      <p>单选</p>
      <w-select
        v-model="value"
        filterable
        placeholder="请输入诊断关键字"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div class="mr-4">
      <p>多选</p>
      <w-select
        v-model="value1"
        multiple
        filterable
        placeholder="请输入诊断关键字"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
</template>

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

const value = ref('')
const value1 = ref([])

const options = [
  {
    value: 'I10',
    label: '原发性高血压',
  },
  {
    value: 'E11',
    label: '2型糖尿病',
  },
  {
    value: 'I25',
    label: '冠心病',
  },
  {
    value: 'J18',
    label: '肺炎',
  },
  {
    value: 'I63',
    label: '脑梗死',
  },
]
</script>

<template>
  <w-select
    v-model="value"
    filterable
    :filter-fields="['code', 'pinyin', 'alias', 'keyword']"
    placeholder="支持编码/拼音/别名/关键字搜索"
    style="width: 320px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :data="item"
    />
  </w-select>
</template>

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

const value = ref('')

const options = [
  {
    value: 'XJ001',
    label: '阿莫西林胶囊',
    code: 'XJ001',
    pinyin: 'amoxilin',
    alias: '阿莫仙',
    keyword: '青霉素类抗生素',
  },
  {
    value: 'XJ002',
    label: '布洛芬缓释胶囊',
    code: 'XJ002',
    pinyin: 'buluofen',
    alias: '芬必得',
    keyword: '解热镇痛药',
  },
  {
    value: 'XJ003',
    label: '左氧氟沙星片',
    code: 'XJ003',
    pinyin: 'zuoyangfuxingsha',
    alias: '可乐必妥',
    keyword: '喹诺酮类抗菌药',
  },
  {
    value: 'XJ004',
    label: '奥美拉唑肠溶胶囊',
    code: 'XJ004',
    pinyin: 'aomeilazuo',
    alias: '洛赛克',
    keyword: '质子泵抑制剂',
  },
]
</script>

<template>
  <div class="flex">
    <div class="mr-4">
      <p>多选 + 面板内搜索</p>
      <w-select
        v-model="value"
        multiple
        filterable
        filterable-dropdown
        placeholder="请选择"
        style="width: 240px"
        @focus="logEvent('focus')"
        @blur="logEvent('blur')"
        @change="handleChange"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div>
      <p>远程搜索 + 面板内搜索</p>
      <w-select
        v-model="value1"
        multiple
        filterable
        remote
        filterable-dropdown
        :remote-method="remoteMethod"
        :loading="loading"
        placeholder="请输入关键字"
        style="width: 240px"
      >
        <w-option
          v-for="item in remoteOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
  <p class="focus-event-log">
    {{
      events.length
        ? '焦点事件将在此显示：选中项、Esc 或点击选择区收起面板不会触发 blur，仅焦点离开组件时触发'
        : '点击选择区触发 focus；选中项、按 Esc 或再点选择区收起面板不会触发 blur；点击组件外部才会触发 blur'
    }}
  </p>
  <ul v-if="events.length" class="focus-event-log">
    <li v-for="(item, index) in events" :key="index">{{ item }}</li>
  </ul>
</template>

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

const value = ref([])
const value1 = ref([])

const events = ref<string[]>([])

const logEvent = (name: string) => {
  events.value = [...events.value, name].slice(-6)
}

const handleChange = (val: string | string[]) => {
  logEvent(`change：${Array.isArray(val) ? val.join('、') : val}`)
}

const options = [
  {
    value: 'I10',
    label: '原发性高血压',
  },
  {
    value: 'E11',
    label: '2型糖尿病',
  },
  {
    value: 'I25',
    label: '冠心病',
  },
  {
    value: 'J18',
    label: '肺炎',
  },
  {
    value: 'I63',
    label: '脑梗死',
  },
]

const loading = ref(false)
const remoteOptions = ref<{ value: string; label: string }[]>([])

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      remoteOptions.value = options.filter((item) => item.label.includes(query))
    }, 200)
  } else {
    remoteOptions.value = []
  }
}
</script>

<style scoped>
.focus-event-log {
  margin-top: 8px;
  font-size: 13px;
  color: var(--w3-font-color-secondary);
}
</style>

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <w-select
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="输入科室名称检索"
        :remote-method="remoteMethod"
        :loading="loading"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
</template>

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

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = departments.map((item) => {
    return { value: item, label: item }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    options.value = []
  }
}

const departments = [
  '心血管内科',
  '神经内科',
  '消化内科',
  '呼吸内科',
  '内分泌科',
  '肾内科',
  '血液内科',
  '普外科',
  '骨科',
  '神经外科',
  '泌尿外科',
  '胸外科',
  '妇产科',
  '儿科',
  '眼科',
  '耳鼻喉科',
  '口腔科',
  '皮肤科',
  '急诊科',
  '重症医学科',
]
</script>

<template>
  <w-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    :reserve-keyword="false"
    :before-create-option="beforeCreateOption"
    placeholder="请选择或输入过敏原"
    style="width: 320px"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage } from 'win-design-next'

const value = ref<string[]>([])
const options = [
  { value: 'penicillin', label: '青霉素' },
  { value: 'ceftriaxone', label: '头孢曲松' },
  { value: 'sulfonamides', label: '磺胺类' },
]

// 输入不存在的过敏原后回车，先经过本回调校验：
// 返回 true（或 Promise resolve true）→ 正常创建并写入绑定值；
// 返回 false → 该条目不会被创建，modelValue 不变。
const beforeCreateOption = (option: unknown, inputValue: unknown) => {
  return new Promise<boolean>((resolve) => {
    setTimeout(() => {
      const result = Math.random(1) > 0.5 ? true : false
      WMessage({
        message: result ? '通过拦截' : '发生错误',
        type: result ? 'success' : 'error',
      })
      resolve(result)
    }, 1000)
  })
}
</script>

<template>
  <div class="flex gap-4 items-center mb-8">
    <w-select
      v-model="value"
      select-on-press-space
      placeholder="检验项目：空格选中悬浮项"
      style="width: 240px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </w-select>
    <w-select
      v-model="multiValue"
      multiple
      select-on-press-space
      placeholder="检验组合：空格选中/反选，回车收起"
      style="width: 320px"
    >
      <w-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </w-select>
  </div>
</template>

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

const value = ref('')
const multiValue = ref<string[]>([])

const options = [
  {
    value: 'bloodRoutine',
    label: '血常规',
  },
  {
    value: 'urineRoutine',
    label: '尿常规',
  },
  {
    value: 'stoolRoutine',
    label: '便常规',
  },
  {
    value: 'liverFunction',
    label: '肝功能',
  },
  {
    value: 'bloodGas',
    label: '血气分析',
    disabled: true,
  },
]
</script>

<template>
  <w-select
    v-model="value1"
    show-checkbox
    clearable
    multiple
    collapse-tags
    placeholder="请选择给药时间"
    style="width: 240px"
    @select-all="handleSelectAll"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </w-select>
</template>

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

const value1 = ref([])

const options = [
  { value: '08:00', label: '08:00' },
  { value: '12:00', label: '12:00' },
  { value: '16:00', label: '16:00', disabled: true },
  { value: '20:00', label: '20:00' },
  { value: '00:00', label: '00:00' },
  { value: '04:00', label: '04:00' },
]

const handleSelectAll = (selection: unknown) => {
  console.log('select-all:', selection)
}
</script>

<template>
  <w-select
    v-model="value1"
    multiple
    draggable-tag
    placeholder="请选择药品，拖拽调整用药顺序"
    @tag-drag-start="handleDragStart"
    @tag-drag-move="handleDragMove"
    @tag-drag-end="handleDragEnd"
  >
    <w-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
  <p class="drag-event-log">
    {{ eventLog || '拖拽已选标签调整用药顺序，事件将在此显示' }}
  </p>
</template>

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

const value1 = ref([
  '0.9% 氯化钠注射液 100ml',
  '注射用头孢曲松钠 2g',
  '5% 葡萄糖注射液 250ml',
])

const options = [
  { value: '0.9% 氯化钠注射液 100ml', label: '0.9% 氯化钠注射液 100ml' },
  { value: '注射用头孢曲松钠 2g', label: '注射用头孢曲松钠 2g' },
  { value: '5% 葡萄糖注射液 250ml', label: '5% 葡萄糖注射液 250ml' },
  { value: '注射用奥美拉唑钠 40mg', label: '注射用奥美拉唑钠 40mg' },
  { value: '维生素 C 注射液 2ml', label: '维生素 C 注射液 2ml' },
]

const eventLog = ref('')

const handleDragStart = () => {
  eventLog.value = 'tag-drag-start：开始拖拽'
}

const handleDragMove = (_event: DragEvent, origin: number) => {
  eventLog.value = `tag-drag-move：原索引 ${origin}`
}

const handleDragEnd = (_event: DragEvent, val: string[]) => {
  eventLog.value = `tag-drag-end：${val.join(' → ')}`
}
</script>

<style scoped>
.drag-event-log {
  margin-top: 8px;
  font-size: 13px;
  color: var(--w3-font-color-secondary);
}
</style>

<template>
  <div class="mb-4">
    <w-title
      >单选：默认（7 列 / 320px 宽）:自定义设置列数（4 列 / 290px 宽）</w-title
    >
    <div class="mr-4 flex gap-4">
      <w-select
        v-model="value1"
        tight
        placeholder="请选择单位"
        style="width: 280px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-select
        v-model="value2"
        tight
        :tight-column="4"
        :tight-width="290"
        placeholder="请选择单位"
        style="width: 280px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
  <w-divider />
  <div class="mb-4">
    <w-title>多选：默认</w-title>
    <div class="mr-4 gap-4 flex">
      <w-select
        v-model="value3"
        style="width: 280px"
        :tight-width="400"
        :tight-column="6"
        tight
        multiple
        placeholder="请选择单位"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-select
        v-model="value4"
        style="width: 280px"
        :tight-width="380"
        :tight-column="6"
        tight
        multiple
        placeholder="请选择"
      >
        <w-option-group label="单位">
          <w-option label="克" value="克" />
          <w-option label="千克" value="千克" />
          <w-option label="毫克" value="毫克" />
          <w-option label="吨" value="吨" />
          <w-option label="磅" value="磅" />
          <w-option label="两" value="两" />
          <w-option label="升" value="升" />
          <w-option label="毫升" value="毫升" />
          <w-option label="立方米" value="立方米" />
          <w-option label="袋" value="袋" />
          <w-option label="箱" value="箱" />
          <w-option label="瓶" value="瓶" />
        </w-option-group>
        <w-option-group label="用法">
          <w-option label="口服" value="口服" />
          <w-option label="静脉注射" value="静脉注射" />
          <w-option label="肌肉注射" value="肌肉注射" />
          <w-option label="皮下注射" value="皮下注射" />
          <w-option label="外用" value="外用" />
          <w-option label="雾化吸入" value="雾化吸入" />
        </w-option-group>
      </w-select>
    </div>
  </div>
</template>

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

const value1 = ref('')
const value2 = ref('')
const value3 = ref([])
const value4 = ref([])

const options = [
  '支',
  '包',
  '瓶',
  '粒',
  '袋',
  '盒',
  '丸',
  '次',
  '对',
  '个',
  '张',
  '根',
  '颗',
  '板',
  '条',
  'U',
  'IU',
  '万IU',
  'mg',
  'g',
].map((unit) => ({ value: unit, label: unit }))
</script>

<!-- eslint-disable vue/no-deprecated-slot-attribute -- Vue2 迁移用法:slot 属性标记置顶选项,由 w-select 内部兼容处理 -->
<template>
  <div style="display: flex; gap: 24px">
    <div>
      <p style="margin: 0 0 8px">单选</p>
      <w-select
        v-model="value"
        clearable
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :slot="item.top ? 'top' : 'default'"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
    <div>
      <p style="margin: 0 0 8px">多选</p>
      <w-select
        v-model="multipleValue"
        multiple
        clearable
        placeholder="请选择"
        style="width: 240px"
      >
        <w-option
          v-for="item in options"
          :key="item.value"
          :slot="item.top ? 'top' : 'default'"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
    </div>
  </div>
</template>

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

const value = ref('')
const multipleValue = ref<string[]>([])
const options = ref([
  { value: 'Option 1', label: '炔诺酮片', top: true },
  { value: 'Option 2', label: '阿司匹林' },
  { value: 'Option 3', label: '布洛芬' },
  { value: 'Option 4', label: '对乙酰氨基酚' },
])
</script>

<template>
  <w-select v-model="value" placeholder="请选择患者" style="width: 240px">
    <w-option
      v-for="item in patients"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span
        style="float: right; color: var(--w3-font-color-third); font-size: 13px"
      >
        {{ item.value }}
      </span>
    </w-option>
  </w-select>
</template>

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

const value = ref('')
const patients = [
  {
    value: '0321568',
    label: '王建国（12 床）',
  },
  {
    value: '0321790',
    label: '李秀兰（15 床）',
  },
  {
    value: '0322014',
    label: '张伟（08 床）',
  },
  {
    value: '0322267',
    label: '刘洋（09 床）',
  },
  {
    value: '0322431',
    label: '陈静（11 床）',
  },
  {
    value: '0322589',
    label: '杨桂芳（13 床）',
  },
]
</script>

<template>
  <w-select
    v-model="value"
    multiple
    clearable
    collapse-tags
    placeholder="请选择会诊科室"
    popper-class="custom-header"
    :max-collapse-tags="1"
    style="width: 240px"
  >
    <template #header>
      <w-checkbox
        v-model="checkAll"
        :indeterminate="indeterminate"
        @change="handleCheckAll"
      >
        全部
      </w-checkbox>
    </template>
    <w-option
      v-for="item in departments"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </w-select>
</template>

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

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

const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref<CheckboxValueType[]>([])
const departments = ref([
  {
    value: 'cardiology',
    label: '心血管内科',
  },
  {
    value: 'neurosurgery',
    label: '神经外科',
  },
  {
    value: 'orthopedics',
    label: '骨科',
  },
  {
    value: 'criticalCare',
    label: '重症医学科',
  },
  {
    value: 'respiratory',
    label: '呼吸内科',
  },
  {
    value: 'nutrition',
    label: '营养科',
  },
])

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === departments.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    value.value = departments.value.map((_) => _.value)
  } else {
    value.value = []
  }
}
</script>

<style>
.custom-header {
  .w3-checkbox {
    display: flex;
    height: unset;
  }
}
</style>