客户管理编辑页修改

2026-09-15 16:34:24 +08:00
parent 7679a7d091
commit 73e425b12f
20 changed files with 2904 additions and 2025 deletions
@@ -0,0 +1,110 @@
+<template>
+  <el-select
+    v-model="innerValue"
+    :placeholder="placeholder"
+    :clearable="clearable"
+    :filterable="filterable"
+    :disabled="disabled"
+    :loading="loading"
+    :size="size"
+    :multiple="false"
+    value-on-clear="null"
+    style="width: 100%;"
+    @change="handleChange"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.userId"
+      :label="item.nickName || item.userName"
+      :value="String(item.userId)"
+    >
+      <span>{{ item.nickName || item.userName }}</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 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>