feat:后台用户关系绑定

src/components/Select/SelectUser.vue

@@ -1,8 +1,24 @@
 <template>
-	<el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder" clearable
-		remote-show-suffix filterable remote :remote-method="remoteSearch" :loading="state.loading"
-		@visible-change="(e: boolean) => e && getOptions()" @change="change">
-		<el-option v-for="v in state.options" :key="v.userId" :label="`${v.name}-${v.phone}`" :value="v.userId">
+	<el-select
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
+		clearable
+		remote-show-suffix
+		filterable
+		remote
+		:remote-method="remoteSearch"
+		:loading="state.loading"
+		@visible-change="(e: boolean) => e && getOptions()"
+		@change="change"
+	>
+		<el-option
+			v-for="v in state.options"
+			:key="v.userId"
+			:label="`${v.name}-${v.phone}`"
+			:value="v.userId"
+			:disabled="isExcluded(v.userId)"
+		>
 			<div class="flex items-center">
 				<div class="color-primary">{{ v.name }}</div>
 				<div class="pl5 color-success">{{ v.phone }}</div>
@@ -20,9 +36,11 @@ const selectId = defineModel()
 
 export type Props = {
 	placeholder?: string
+	excludeUserIds?: Array<string | number>
 }
 const props = withDefaults(defineProps<Props>(), {
 	placeholder: "输入姓名、手机号",
+	excludeUserIds: () => [],
 })
 
 const queryForm = reactive<any>({
@@ -68,13 +86,12 @@ function remoteSearch(params: string) {
 	}
 }
 
-function clear() {
-	state.selectId = null
-	getOptions()
-}
-
 function change(v: any) {
 	const targetUser = state.options.find((i: any) => i.userId == v)
 	emit("change", targetUser)
 }
+
+function isExcluded(userId: string | number) {
+	return props.excludeUserIds.some((id) => String(id) === String(userId))
+}
 </script>