feat:人员搜索组件

src/components/Select/SelectUser.vue

@@ -0,0 +1,73 @@
+<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()">
+        <el-option v-for="v in state.options" :key="v.userId" :label="`${v.name}-${v.phone}`" :value="v.userId">
+            <div class="flex items-center">
+                <div class="color-primary">{{ v.name }}</div>
+                <div class="pl5 color-success">{{ v.phone }}</div>
+            </div>
+            <template #loading>
+                <svg class="circular" viewBox="0 0 50 50">
+                    <circle class="path" cx="25" cy="25" r="20" fill="none" />
+                </svg>
+            </template>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts" name="select-user">
+import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
+import * as userApi from '/@/api/admin/user'
+
+const selectId = defineModel()
+
+export type Props = {
+    placeholder?: string,
+}
+const props = withDefaults(defineProps<Props>(), {
+    placeholder: "请选择",
+})
+
+const queryForm = reactive<any>({
+    name: "",
+    current: 1,
+    size: 10,
+})
+
+const state = reactive<any>({
+    loading: true,
+    selectId: selectId,
+    options: []
+})
+
+watch(selectId, (newVal, oldValue) => {
+    if (newVal == oldValue) return
+    state.selectId = newVal
+    getOptions()
+}, { immediate: true })
+
+async function getOptions() {
+    try {
+        state.loading = true
+        const _pa = {
+            ...queryForm
+        }
+        const { data } = await userApi.pageList(_pa)
+        state.options = data.records ?? []
+    } finally {
+        setTimeout(() => state.loading = false, 500);
+    }
+}
+
+function remoteSearch(params: string) {
+    queryForm.name = params
+    getOptions()
+}
+
+function clear() {
+    state.selectId = null
+    getOptions()
+}
+
+</script>