chore:构架

Yi.Bbs.Vue3/src/components/UserSelectInfo.vue

@@ -0,0 +1,129 @@
+<template>
+      <el-select
+      style="width: 600px;"
+        v-model="value"
+        multiple
+        filterable
+        remote
+        reserve-keyword
+        placeholder="请输入用户账号（可多选）"
+        remote-show-suffix
+        :remote-method="remoteMethod"
+        :loading="loading"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+</template>
+
+<script  setup>
+import { onMounted, ref,computed  } from 'vue'
+import {listUser} from '@/apis/userApi'
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
+
+//这个为可选择的列表，{value,label},value为用户id，label为账号名称（不可重复）
+const options = ref([])
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
+})
+
+
+const loading = ref(false)
+
+onMounted( async()=>{
+
+ const response= await  listUser({ids:value.value.join()});
+ const res=response.data.items;
+   //下拉列表
+   options.value = res
+  .map((item) => {
+    return { value: `${item.id}`, label: `用户:${item.userName}` }
+  })
+})
+
+
+const loadUser=async(query)=>{
+  const response= await listUser({userName:query});
+  const res=response.data.items;
+  //下拉列表
+  options.value = res
+  .map((item) => {
+    return { value: `${item.id}`, label: `用户:${item.userName}` }
+  })
+}
+
+const remoteMethod =async (query) => {
+  if (query) {
+    loading.value = true
+   await loadUser(query);
+   loading.value = false
+  } else {
+    options.value = []
+  }
+}
+
+const states = [
+  'Alabama',
+  'Alaska',
+  'Arizona',
+  'Arkansas',
+  'California',
+  'Colorado',
+  'Connecticut',
+  'Delaware',
+  'Florida',
+  'Georgia',
+  'Hawaii',
+  'Idaho',
+  'Illinois',
+  'Indiana',
+  'Iowa',
+  'Kansas',
+  'Kentucky',
+  'Louisiana',
+  'Maine',
+  'Maryland',
+  'Massachusetts',
+  'Michigan',
+  'Minnesota',
+  'Mississippi',
+  'Missouri',
+  'Montana',
+  'Nebraska',
+  'Nevada',
+  'New Hampshire',
+  'New Jersey',
+  'New Mexico',
+  'New York',
+  'North Carolina',
+  'North Dakota',
+  'Ohio',
+  'Oklahoma',
+  'Oregon',
+  'Pennsylvania',
+  'Rhode Island',
+  'South Carolina',
+  'South Dakota',
+  'Tennessee',
+  'Texas',
+  'Utah',
+  'Vermont',
+  'Virginia',
+  'Washington',
+  'West Virginia',
+  'Wisconsin',
+  'Wyoming',
+]
+</script>