材质远程搜索

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

@@ -0,0 +1,61 @@
+<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 compositionSelectList" :key="item.id" :label="item.name" :value="item.id" />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, toRefs } from 'vue'
+import * as CompositionApi from '@/api/heli/composition'
+const valueName: any = ref() //选中的值
+const compositionList = ref<CompositionApi.CompositionVO[]>([]) // 用户列表
+const compositionSelectList = ref<CompositionApi.CompositionVO[]>([])
+const Loading = ref(false)
+
+// 初始化用户列表
+onMounted(async () => {
+  const queryParams = {
+    pageNo: 1,
+    pageSize: 10,
+    code: undefined,
+    brief: undefined,
+    status: undefined
+  }
+  try {
+    const data = await CompositionApi.getCompositionPage(queryParams)
+    console.log(data.list)
+    compositionList.value = data.list
+    // 设置初始值，如果需要的话
+    remoteMethod('')
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+const remoteMethod = (query: any) => {
+  if (query) {
+    Loading.value = true
+    setTimeout(() => {
+      Loading.value = false
+      compositionSelectList.value = compositionList.value
+        .filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
+        .slice(0, 10) //只显示前10个
+    }, 200)
+  } else {
+    compositionSelectList.value = compositionList.value.slice(0, 10)
+  }
+}
+
+</script>

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

@@ -11,6 +11,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

@@ -20,6 +20,9 @@
       <el-form-item label="供应商" prop="supplierId">
         <SupplierSelect v-model="formData.supplierId" />
       </el-form-item>
+       <el-form-item label="材质" prop="compositionId">
+        <CompositionSelect v-model="formData.compositionId" />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -38,6 +41,7 @@ import UserSelect from '../hlvuestyle/userSelect.vue'
 import BranchSelect from '../hlvuestyle/branchSelect.vue'
 import ClientSelect from '../hlvuestyle/clientSelect.vue'
 import SupplierSelect from '../hlvuestyle/supplierSelect.vue'
+import CompositionSelect from '../hlvuestyle/compositionSelect.vue'
 
 defineOptions({ name: 'SystemDeptForm' })
 
@@ -54,6 +58,7 @@ const formData: any = ref({
   leaderUserId: undefined,
   clientId: undefined,
   supplierId: undefined,
+  compositionId:undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive<FormRules>({

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

@@ -12,7 +12,7 @@
     :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 supplierSelectList" :key="item.id" :label="item.name" :value="item.id" />
   </el-select>
 </template>
 
@@ -21,8 +21,8 @@ import { ref, onMounted, toRefs } from 'vue'
 import * as SupplierApi from '@/api/heli/supplier'
 
 const valueName: any = ref() //选中的值
-const userList = ref<SupplierApi.SupplierVO[]>([]) // 用户列表
+const supplierList = ref<SupplierApi.SupplierVO[]>([]) // 用户列表
-const userSelectList = ref<SupplierApi.SupplierVO[]>([])
+const supplierSelectList = ref<SupplierApi.SupplierVO[]>([])
 const Loading = ref(false)
 
 // 初始化用户列表
@@ -37,7 +37,7 @@ onMounted(async () => {
   try {
     const data = await SupplierApi.getSupplierPage(queryParams)
     console.log(data.list)
-    userList.value = data.list
+    supplierList.value = data.list
     // 设置初始值，如果需要的话
     remoteMethod('')
   } catch (error) {
@@ -50,12 +50,12 @@ const remoteMethod = (query: any) => {
     Loading.value = true
     setTimeout(() => {
       Loading.value = false
-      userSelectList.value = userList.value
+      supplierSelectList.value = supplierList.value
         .filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
         .slice(0, 10) //只显示前10个
     }, 200)
   } else {
-    userSelectList.value = userList.value.slice(0, 10)
+    supplierSelectList.value = supplierList.value.slice(0, 10)
   }
 }