From 61045751f3a0eb795e31f3dddf17980dff615a4c Mon Sep 17 00:00:00 2001
From: qiuhongwu <Qhw0227@163.com>
Date: Thu, 18 Jan 2024 13:50:12 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E8=BF=9C=E7=A8=8B=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E3=80=91=E6=96=B0=E5=A2=9E=20=E5=AE=A2=E6=88=B7=E8=BF=9C?=
 =?UTF-8?q?=E7=A8=8B=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/heli/hlvuestyle/clientSelect.vue    | 77 +++++++++++++++++++
 .../src/views/heli/hlvuestyle/index.vue       | 13 +++-
 .../src/views/heli/hlvuestyle/indexFrom.vue   |  7 ++
 .../src/views/heli/hlvuestyle/userSelect.vue  | 14 ++--
 4 files changed, 100 insertions(+), 11 deletions(-)
 create mode 100644 mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/clientSelect.vue

diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/clientSelect.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/clientSelect.vue
new file mode 100644
index 00000000..30807427
--- /dev/null
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/clientSelect.vue
@@ -0,0 +1,77 @@
+<template>
+  <!-- 客户选择 -->
+  <el-select
+    v-model="valueName"
+    placeholder="请输入客户"
+    :remote-method="remoteMethod"
+    remote-show-suffix
+    remote
+    clearable
+    reserve-keyword
+    filterable
+    :loading="Loading"
+    @change="onSelectChange"
+  >
+    <el-option v-for="item in userSelectList" :key="item.id" :label="item.name" :value="item.id" />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, toRefs } from 'vue'
+import * as CustomerApi from '@/api/heli/customer'
+interface UserVO {
+  id: number
+  username: string
+  nickname: string
+}
+const props = defineProps({
+  initialUserList: {
+    type: Array as PropType<UserVO[]>,
+    default: () => []
+  }
+})
+const valueName: any = ref() //选中的值
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+const userSelectList = ref<UserApi.UserVO[]>([])
+const Loading = ref(false)
+
+// 初始化用户列表
+onMounted(async () => {
+  const userParams = {
+    pageNo: 1,
+    pageSize: 10,
+    code: undefined,
+    brief: undefined,
+    status: undefined
+  }
+  try {
+    const data = await CustomerApi.getCustomerPage(userParams)
+    console.log(data.list)
+    userList.value = data.list
+    // 设置初始值，如果需要的话
+    remoteMethod('')
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+const remoteMethod = (query: any) => {
+  if (query) {
+    Loading.value = true
+    setTimeout(() => {
+      Loading.value = false
+      userSelectList.value = userList.value
+        .filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
+        .slice(0, 10) //只显示前10个
+    }, 200)
+  } else {
+    userSelectList.value = userList.value.slice(0, 10)
+  }
+}
+
+// const onSelectChange = (newValue: number | null) => {
+//   // console.log(newValue)
+//   emit('update:valueName', newValue)
+//   valueName.value = newValue
+// }
+</script>
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/index.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/index.vue
index 1c3d1750..8c6c000b 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/index.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/index.vue
@@ -2,10 +2,15 @@
   <el-card class="hl-card">
     <template #header>
       <div class="card-header">
-        <span>信息/管理</span>
+        <span>远程搜索</span>
       </div>
     </template>
     <ContentWrap class="borderxx">
+      <el-row style="font-size: 20px; font-weight: 700;margin-bottom: 30px">
+        <el-col :span="1"> 部门 </el-col>
+        <el-col :span="1"> 人员 </el-col>
+        <el-col :span="1"> 客户</el-col>
+      </el-row>
       <!-- 搜索工作栏 -->
       <el-form
         class="-mb-15px"
@@ -15,12 +20,12 @@
         label-width="108px"
       >
         <el-form-item>
-          <el-button @click="handleQuery" type="primary"
+          <!-- <el-button @click="handleQuery" type="primary"
             ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
           >
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> -->
           <el-button type="primary" plain @click="openForm('create')">
-            <Icon icon="ep:plus" class="mr-5px" /> 新增
+            <Icon icon="ep:plus" class="mr-5px" /> 远程搜索示例
           </el-button>
           <!-- <el-button
           type="success"
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/indexFrom.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/indexFrom.vue
index 0ffbed09..dc5fffe1 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/indexFrom.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/indexFrom.vue
@@ -18,6 +18,11 @@
           v-model="formData.leaderUserId"
         />
       </el-form-item>
+      <el-form-item label="客户" prop="leaderUserId">
+        <ClientSelect
+          v-model="formData.clientId"
+        />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -34,6 +39,7 @@ import { CommonStatusEnum } from '@/utils/constants'
 import { FormRules } from 'element-plus'
 import UserSelect from '../hlvuestyle/userSelect.vue'
 import BranchSelect from '../hlvuestyle/branchSelect.vue'
+import ClientSelect from '../hlvuestyle/clientSelect.vue'
 
 defineOptions({ name: 'SystemDeptForm' })
 
@@ -48,6 +54,7 @@ const formData: any = ref({
   id: undefined,
   parentId: undefined,
   leaderUserId: undefined,
+  clientId:undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive<FormRules>({
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/userSelect.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/userSelect.vue
index 42962d28..546d6215 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/userSelect.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/userSelect.vue
@@ -64,15 +64,15 @@ const remoteMethod = (query: any) => {
     userSelectLoading.value = true
     setTimeout(() => {
       userSelectLoading.value = false
-      userSelectList.value = userList.value.filter((item) => {
-        return (
-          item.nickname.toLowerCase().includes(query.toLowerCase()) ||
-          item.username.toLowerCase().includes(query.toLowerCase())
-        )
-      })
+      userSelectList.value = userList.value.filter(
+          (item) =>
+            item.nickname.toLowerCase().includes(query.toLowerCase()) ||
+            item.username.toLowerCase().includes(query.toLowerCase())
+        ).slice(0, 10)//只显示前10个
+        
     }, 200)
   } else {
-    userSelectList.value = userList.value
+    userSelectList.value = userList.value.slice(0, 10)//只显示前10个
   }
 }