feat:选择商户组件

.env.development

@@ -8,12 +8,12 @@ VITE_OPEN = true
 ENV = 'development'
 
 # ADMIN 服务地址
-VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
-#VITE_ADMIN_PROXY_PATH = http://192.168.110.156:9999
+# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
+VITE_ADMIN_PROXY_PATH = http://localhost:9999
 
 # 图片访问基础地址
-VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
-# VITE_IMAGE_BASE_PATH = http://localhost:9999
+# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
+VITE_IMAGE_BASE_PATH = http://localhost:9999
 
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003

src/components/Select/SelectMerchant.vue

@@ -0,0 +1,74 @@
+<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">
+                <div class="color-primary">{{ v.name }}</div>
+                <div class="flex items-center just ml5">
+                    <el-tag size="small">
+                        {{ v.deptName }}
+                    </el-tag>
+                </div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts" name="select-merchant">
+import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue'
+import * as merchantApi from '/@/api/canteen/merchantInfo'
+
+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 merchantApi.fetchList(_pa)
+        state.options = data.records ?? []
+    } 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

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

src/views/wallet/wallet-active/form.vue

@@ -2,9 +2,10 @@
   <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
     <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
+
         <el-col :span="12" class="mb20">
           <el-form-item label="用户id" prop="userId">
-            <el-input v-model="form.userId" placeholder="请输入用户id" />
+            <select-merchant v-model="form.userId" placeholder="请输入用户id" />
           </el-form-item>
         </el-col>
 

src/views/wallet/wallet-freeze/index.vue

@@ -45,7 +45,7 @@
 
 <script setup lang="ts" name="systemWalletFreeze">
 import { BasicTableProps, useTable } from "/@/hooks/table";
-import { getObj, addObj, putObj } from '/@/api/wallet/wallet-active'
+import { getObj, addObj, putObj, fetchList } from '/@/api/wallet/wallet-active'
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';