订单信息 材质远程搜索优化

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

@@ -1,70 +1,106 @@
 <template>
   <!-- 材质选择 -->
-  <el-select
+  <el-select v-model="valueName" placeholder="请输入材质" :remote-method="remoteMethod" remote-show-suffix remote clearable reserve-keyword filterable :loading="Loading" @change="onSelectChange" @visible-change="onVisibleChange">
-    v-model="valueName"
+    <el-option v-for="item in compositionSelectList" :key="item.id" :label="item.name" :value="item.id" />
-    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 props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    required: true // 如果是必需的属性，可以设置为true
+  }
+})
+
+const queryParams = {
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  name: undefined,
+  code: undefined,
+  description: undefined,
+  status: undefined,
+  original: undefined,
+  density: undefined,
+}
+
 const valueName: any = ref() //选中的值
-const valueNameObject: any = ref() //选中的值
+const valueNameObject: any = ref() // 存储选中的完整用户对象
 const emit = defineEmits(['update:newValue'])
 const compositionList = ref<CompositionApi.CompositionVO[]>([]) // 用户列表
 const compositionSelectList = ref<CompositionApi.CompositionVO[]>([])
-const Loading = ref(false)
+const loading = ref(false)
+const SelectLoading = ref(false)
+const propsmodelValue = toRefs(props).modelValue // 获取 props 中的 modelValue
+const initialValue: any = ref(null) // 存储初始选中的用户 ID
+
+const gitlist = async () => {
+  const data = await CompositionApi.getCompositionPage(queryParams)
+  compositionList.value = [...compositionList.value, ...data.list]
+  // 设置初始值
+  if (propsmodelValue.value) {
+    valueName.value = propsmodelValue.value
+    const initialUser = await CompositionApi.getComposition(valueName.value)
+    // 查找初始用户是否已经在 compositionList 中
+    let foundInitialUserInList = false
+    for (const composition of compositionList.value) {
+      if (composition.id === initialUser.id) {
+        foundInitialUserInList = true
+        break
+      }
+    }
+    // 如果初始用户不在列表中，则将其添加到列表开头
+    if (!foundInitialUserInList && !compositionSelectList.value.length) {
+      compositionList.value.unshift(initialUser)
+    }
+    // loading.value = false
+  }
+  compositionSelectList.value = compositionList.value
+  loading.value = false
+}
 
+const remoteMethod = async (query: any) => {
+  loading.value = true
+  compositionSelectList.value = []
+  try {
+    if (query) {
+      queryParams.name = query
+      const data = await CompositionApi.getCompositionPage(queryParams)
+      compositionList.value = data.list
+      compositionSelectList.value = data.list
+    } else {
+      gitlist()
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
 // 初始化用户列表
 onMounted(async () => {
-  const queryParams = {
-    pageNo: 1,
-    pageSize: 10,
-    code: undefined,
-    brief: undefined,
-    status: undefined
-  }
   try {
-    const data = await CompositionApi.getCompositionPage(queryParams)
+    await gitlist()
-    compositionList.value = data.list
-    // 设置初始值，如果需要的话
-    remoteMethod('')
   } catch (error) {
     console.error(error)
   }
 })
 
-const remoteMethod = (query: any) => {
+const onVisibleChange = (isVisible: boolean) => {
-  if (query) {
+  if (!isVisible) {
-    Loading.value = true
+    // 下拉框关闭时，重置查询参数和下拉框列表
-    setTimeout(() => {
+    queryParams.name = undefined
-      Loading.value = false
+    compositionList.value = []
-      compositionSelectList.value = compositionList.value
+    compositionSelectList.value = []
-        .filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
-        .slice(0, 10) //只显示前10个
-    }, 200)
-  } else {
-    compositionSelectList.value = compositionList.value.slice(0, 10)
   }
 }
+
 const onSelectChange = (newValue: any) => {
-  valueNameObject.value = compositionList.value.find( composition =>  composition.id === newValue); // 更新选中的完整用户对象
+  valueNameObject.value = compositionList.value.find((composition) => composition.id === newValue) // 更新选中的完整用户对象
   emit('update:newValue', valueNameObject.value)
 }
 </script>

mes-ui/mes-ui-admin-vue3/src/views/heli/projectorder/detail.vue

@@ -321,7 +321,7 @@
                     <template #header> <span class="hl-table_header">*</span>材质 </template>
                     <template #default="{ row, $index }">
                       <el-form-item :prop="`${$index}.compositionId`" :rules="subFormRules.compositionId" class="mb-0px!">
-                        <CompositionSelect v-model="row.compositionId" :disabled="detailDisabled" :class="{ 'alter-class': fieldHasAlterInRow('compositionId', row) }"/>
+                        <CompositionSelect v-model="row.compositionId" @update:newValue="handleSelected($index, $event)" :disabled="detailDisabled" :class="{ 'alter-class': fieldHasAlterInRow('compositionId', row) }" />
                       </el-form-item>
                     </template>
                   </el-table-column>
@@ -943,6 +943,24 @@ onMounted(() => {
   }
   queryData(query.active, query.id)
 })
+
+// 材质传递的值
+const handleSelected = (currentIndex: number,newValue: any) => {
+  console.log('当前行索引：', currentIndex);
+  // console.log('新材料值：', newValue);
+  formData.value.projectOrderSubs[currentIndex].compositionId = newValue?.id
+  console.log(formData.value.projectOrderSubs[currentIndex].compositionId);
+  
+  
+  // 遍历表格所有行找到对应行数据
+  // formData.value.projectOrderSubs.forEach((row, index) => {
+  //   console.log(row);
+    
+  //   row.compositionId = newValue?.id; // 更新当前行的compositionId
+   
+  // });
+
+}
 </script>
 <style>
 a {