luojiaquan
117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="innerValue"
|
||
:placeholder="placeholder"
|
||
:clearable="clearable"
|
||
:filterable="filterable"
|
||
:disabled="disabled"
|
||
:loading="loading"
|
||
:size="size"
|
||
:multiple="false"
|
||
style="width: 100%;"
|
||
@change="handleChange"
|
||
>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.userId"
|
||
:label="formatLabel(item)"
|
||
:value="String(item.userId)"
|
||
:disabled="item.status === '1'"
|
||
>
|
||
<span>{{ item.nickName || item.userName }}<template v-if="item.status === '1'">（停用）</template></span>
|
||
<span
|
||
v-if="showCode && item.userName"
|
||
class="user-select-sub"
|
||
>{{ item.userName }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
|
||
<script setup name="UserSelect">
|
||
import { computed, onMounted, ref, watch } from 'vue'
|
||
import { useUsers } from './useUsers'
|
||
|
||
const props = defineProps({
|
||
/** 绑定值：用户ID（字符串/数字），清空时为 null */
|
||
modelValue: {
|
||
type: [String, Number],
|
||
default: null
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择用户'
|
||
},
|
||
clearable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
filterable: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
/** 选项右侧是否显示登录账号 */
|
||
showCode: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'change'])
|
||
|
||
const { userList, ensureUsers, findUser } = useUsers()
|
||
const loading = ref(false)
|
||
const innerValue = ref(props.modelValue === null || props.modelValue === undefined ? null : String(props.modelValue))
|
||
|
||
watch(() => props.modelValue, (val) => {
|
||
innerValue.value = val === null || val === undefined || val === '' ? null : String(val)
|
||
})
|
||
|
||
/** 兜底：当前值在用户列表中不存在（停用/未加载到）时补占位项，避免显示空白 */
|
||
const options = computed(() => {
|
||
const list = userList.value
|
||
if (innerValue.value && !findUser(innerValue.value)) {
|
||
return [{ userId: innerValue.value, userName: '', nickName: String(innerValue.value) }, ...list]
|
||
}
|
||
return list
|
||
})
|
||
|
||
/** 选项文本：停用用户追加（停用）标记，便于编辑历史数据时识别 */
|
||
function formatLabel(item) {
|
||
const name = item.nickName || item.userName
|
||
return item.status === '1' ? `${name}（停用）` : name
|
||
}
|
||
|
||
function handleChange(val) {
|
||
const value = val === '' ? null : val
|
||
emit('update:modelValue', value)
|
||
emit('change', value, value === null ? null : findUser(value))
|
||
}
|
||
|
||
onMounted(() => {
|
||
loading.value = true
|
||
ensureUsers().finally(() => {
|
||
loading.value = false
|
||
})
|
||
})
|
||
|
||
defineExpose({
|
||
reload: () => ensureUsers(true)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-select-sub {
|
||
float: right;
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 12px;
|
||
}
|
||
</style>
|