供应商远程搜索

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/branchSelect.vue

@@ -18,18 +18,6 @@ import * as DeptApi from '@/api/system/dept'
 
 import { defaultProps, handleTree } from '@/utils/tree'
 
-
-interface UserVO {
-  id: number
-  username: string
-  nickname: string
-}
-const props = defineProps({
-  initialUserList: {
-    type: Array as PropType<UserVO[]>,
-    default: () => []
-  }
-})
 const valueBranch: any = ref() //选中的值
 const deptTree = ref() // 树形结构
 

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/clientSelect.vue

@@ -12,32 +12,22 @@
     :loading="Loading"
     @change="onSelectChange"
   >
-    <el-option v-for="item in userSelectList" :key="item.id" :label="item.name" :value="item.id" />
+    <el-option v-for="item in clientSelectList" :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 clientList = ref<CustomerApi.CustomerVO[]>([]) //列表
+const clientSelectList = ref<CustomerApi.CustomerVO[]>([])
 const Loading = ref(false)
 
-// 初始化用户列表
+// 初始化列表
 onMounted(async () => {
-  const userParams = {
+  const clientParams = {
     pageNo: 1,
     pageSize: 10,
     code: undefined,
@@ -45,9 +35,9 @@ onMounted(async () => {
     status: undefined
   }
   try {
-    const data = await CustomerApi.getCustomerPage(userParams)
+    const data = await CustomerApi.getCustomerPage(clientParams)
     console.log(data.list)
-    userList.value = data.list
+    clientList.value = data.list
     // 设置初始值，如果需要的话
     remoteMethod('')
   } catch (error) {
@@ -60,18 +50,13 @@ const remoteMethod = (query: any) => {
     Loading.value = true
     setTimeout(() => {
       Loading.value = false
-      userSelectList.value = userList.value
+      clientSelectList.value = clientList.value
         .filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
         .slice(0, 10) //只显示前10个
     }, 200)
   } else {
-    userSelectList.value = userList.value.slice(0, 10)
+    clientSelectList.value = clientList.value.slice(0, 10)
   }
 }
 
-// const onSelectChange = (newValue: number | null) => {
-//   // console.log(newValue)
-//   emit('update:valueName', newValue)
-//   valueName.value = newValue
-// }
 </script>

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/index.vue

@@ -10,6 +10,7 @@
         <el-col :span="1"> 部门 </el-col>
         <el-col :span="1"> 人员 </el-col>
         <el-col :span="1"> 客户</el-col>
+        <el-col :span="1"> 供应商</el-col>
       </el-row>
       <!-- 搜索工作栏 -->
       <el-form

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/indexFrom.vue

@@ -7,21 +7,18 @@
       :rules="formRules"
       label-width="108px"
     >
-      <el-form-item label="上级部门" prop="parentId">   
-        <BranchSelect
-          v-model="formData.parentId"
-        />
+      <el-form-item label="上级部门" prop="parentId">
+        <BranchSelect v-model="formData.parentId" />
       </el-form-item>
 
       <el-form-item label="负责人" prop="leaderUserId">
-        <UserSelect
-          v-model="formData.leaderUserId"
-        />
+        <UserSelect v-model="formData.leaderUserId" />
       </el-form-item>
-      <el-form-item label="客户" prop="leaderUserId">
-        <ClientSelect
-          v-model="formData.clientId"
-        />
+      <el-form-item label="客户" prop="clientId">
+        <ClientSelect v-model="formData.clientId" />
+      </el-form-item>
+      <el-form-item label="供应商" prop="supplierId">
+        <SupplierSelect v-model="formData.supplierId" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -40,6 +37,7 @@ import { FormRules } from 'element-plus'
 import UserSelect from '../hlvuestyle/userSelect.vue'
 import BranchSelect from '../hlvuestyle/branchSelect.vue'
 import ClientSelect from '../hlvuestyle/clientSelect.vue'
+import SupplierSelect from '../hlvuestyle/supplierSelect.vue'
 
 defineOptions({ name: 'SystemDeptForm' })
 
@@ -54,11 +52,12 @@ const formData: any = ref({
   id: undefined,
   parentId: undefined,
   leaderUserId: undefined,
-  clientId:undefined,
+  clientId: undefined,
+  supplierId: undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive<FormRules>({
-  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const deptTree = ref() // 树形结构
@@ -66,7 +65,6 @@ const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const userSelectList = ref<UserApi.UserVO[]>([])
 const userSelectLoading = ref(false)
 
-
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -109,6 +107,8 @@ const resetForm = () => {
     id: undefined,
     parentId: undefined,
     leaderUserId: undefined,
+    clientId: undefined,
+    supplierId: undefined,
     status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()
@@ -122,5 +122,4 @@ const getTree = async () => {
   dept.children = handleTree(data)
   deptTree.value.push(dept)
 }
-
 </script>

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/supplierSelect.vue

@@ -0,0 +1,67 @@
+<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 SupplierApi from '@/api/heli/supplier'
+
+const valueName: any = ref() //选中的值
+const userList = ref<SupplierApi.SupplierVO[]>([]) // 用户列表
+const userSelectList = ref<SupplierApi.SupplierVO[]>([])
+const Loading = ref(false)
+
+// 初始化用户列表
+onMounted(async () => {
+  const queryParams = {
+    pageNo: 1,
+    pageSize: 10,
+    code: undefined,
+    brief: undefined,
+    status: undefined
+  }
+  try {
+    const data = await SupplierApi.getSupplierPage(queryParams)
+    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>