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>

src/components/index.ts

@@ -13,6 +13,10 @@ import TagList from '/@/components/TagList/index.vue';
 import SvgIcon from '/@/components/SvgIcon/index.vue';
 import PreviewImage from "/@/components/PreviewImage/index.vue"
 
+// 业务组件
+import SelectUser from '/@/components/Select/SelectUser.vue'
+
+
 // 第三方组件
 import ElementPlus from 'element-plus';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
@@ -34,7 +38,7 @@ import { App } from 'vue';
 export default {
 	install(app: App) {
 		app.component('DictTag', DictTag);
-		app.component('DictSelect',DictSelect)
+		app.component('DictSelect', DictSelect)
 		app.component('Pagination', Pagination);
 		app.component('RightToolbar', RightToolbar);
 		app.component('uploadExcel', UploadExcel);
@@ -46,7 +50,8 @@ export default {
 		app.component('DelWrap', DelWrap);
 		app.component('TagList', TagList);
 		app.component('SvgIcon', SvgIcon);
-		app.component('PreviewImage',PreviewImage)
+		app.component('PreviewImage', PreviewImage)
+		app.component('SelectUser', SelectUser)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {