222e5bb11a
完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="selectedValue"
|
|
:placeholder="placeholder"
|
|
:clearable="clearable"
|
|
:disabled="disabled"
|
|
:multiple="multiple"
|
|
:filterable="filterable"
|
|
:size="size"
|
|
@change="handleChange"
|
|
>
|
|
<el-option
|
|
v-for="item in operatorOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
<span :style="{ color: item.color }">{{ item.label }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { OPERATOR_OPTIONS } from '@/config/constants'
|
|
import type { Operator } from '@/types/api'
|
|
|
|
interface Props {
|
|
modelValue?: Operator | Operator[]
|
|
placeholder?: string
|
|
clearable?: boolean
|
|
disabled?: boolean
|
|
multiple?: boolean
|
|
filterable?: boolean
|
|
size?: 'large' | 'default' | 'small'
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: Operator | Operator[] | undefined): void
|
|
(e: 'change', value: Operator | Operator[] | undefined): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: '请选择运营商',
|
|
clearable: true,
|
|
disabled: false,
|
|
multiple: false,
|
|
filterable: true,
|
|
size: 'default'
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const operatorOptions = OPERATOR_OPTIONS
|
|
|
|
const selectedValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => {
|
|
emit('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const handleChange = (value: Operator | Operator[] | undefined) => {
|
|
emit('change', value)
|
|
}
|
|
</script>
|