feat:选择饭卡类型组件

src/components/Select/SelectUser.vue

@@ -7,11 +7,6 @@
                 <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>
@@ -61,8 +56,10 @@ async function getOptions() {
 }
 
 function remoteSearch(params: string) {
-    queryForm.name = params
-    getOptions()
+    if (params != queryForm.name) {
+        queryForm.name = params
+        getOptions()
+    }
 }
 
 function clear() {

src/components/Select/SelectWalletType.vue

@@ -0,0 +1,77 @@
+<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.id" :label="`${v.name}`" :value="v.id">
+            <div class="flex items-center justify-center">
+                <div class="color-primary">{{ v.name }}</div>
+                <div class="flex items-center just ml5">
+                    <el-tag size="small">{{ state.walletType.find((i: any) => i.value == v.uniqueCode).label }}</el-tag>
+                </div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts" name="select-wallet-type">
+import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
+import * as walletTypeApi from '/@/api/wallet/wallet-type'
+import { useDict } from '/@/hooks/dict'
+
+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: [],
+    walletType: []
+})
+
+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 walletTypeApi.fetchList(_pa)
+        state.options = data.records ?? []
+
+        const { wallet_type } = useDict('wallet_type')
+        state.walletType = wallet_type
+    } finally {
+        setTimeout(() => state.loading = false, 500);
+    }
+}
+
+function remoteSearch(params: string) {
+    if (params != queryForm.name) {
+        queryForm.name = params
+        getOptions()
+    }
+}
+
+function clear() {
+    state.selectId = null
+    getOptions()
+}
+
+</script>

src/components/index.ts

@@ -15,6 +15,7 @@ import PreviewImage from "/@/components/PreviewImage/index.vue"
 
 // 业务组件
 import SelectUser from '/@/components/Select/SelectUser.vue'
+import SelectWalletType from '/@/components/Select/SelectWalletType.vue'
 
 
 // 第三方组件
@@ -52,6 +53,7 @@ export default {
 		app.component('SvgIcon', SvgIcon);
 		app.component('PreviewImage', PreviewImage)
 		app.component('SelectUser', SelectUser)
+		app.component('SelectWalletType', SelectWalletType)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {