封装设备型号远程搜索 及替换订单信息中设备型号搜索

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

@@ -25,7 +25,7 @@ const queryParams = {
   description: undefined,
   status: undefined,
   original: undefined,
-  density: undefined,
+  density: undefined
 }
 
 const valueName: any = ref() //选中的值
@@ -49,6 +49,7 @@ const gitlist = async () => {
     let foundInitialUserInList = false
     for (const composition of compositionList.value) {
       if (composition.id === initialUser.id) {
+        valueName.value = initialUser.name
         foundInitialUserInList = true
         break
       }
@@ -56,6 +57,7 @@ const gitlist = async () => {
     // 如果初始用户不在列表中，则将其添加到列表开头
     if (!foundInitialUserInList && !compositionSelectList.value.length) {
       compositionList.value.unshift(initialUser)
+      valueName.value = initialUser.name
     }
     // loading.value = false
   }

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

@@ -0,0 +1,107 @@
+<template>
+  <!-- 材质选择 -->
+  <el-select v-model="valueName" placeholder="请输入设备" :remote-method="remoteMethod" remote-show-suffix remote clearable reserve-keyword filterable :loading="Loading" @change="onSelectChange" @visible-change="onVisibleChange">
+    <el-option v-for="item in eqyipSelectList" :key="item.id" :label="item.name" :value="item.id" />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, toRefs } from 'vue'
+import * as EquipApi from '@/api/heli/equip'
+//接收调用组件传递的值
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    required: true // 如果是必需的属性，可以设置为true
+  }
+})
+
+const queryParams = {
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  name: undefined,
+  mouldTypeId: undefined,
+  status: undefined,
+}
+
+const valueName: any = ref() //选中的值
+const valueNameObject: any = ref() // 存储选中的完整用户对象
+const emit = defineEmits(['update:newValue'])
+const eqyipList = ref<EquipApi.EquipVO[]>([]) // 用户列表
+const eqyipSelectList = ref<EquipApi.EquipVO[]>([])
+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 EquipApi.getEquipPage(queryParams)
+  eqyipList.value = [...eqyipList.value, ...data.list]
+  // 设置初始值
+  if (propsmodelValue.value) {
+    valueName.value = propsmodelValue.value
+    const initialUser = await EquipApi.getEquip(valueName.value)
+    console.log(initialUser);
+    
+    // 查找初始用户是否已经在 eqyipList 中
+    let foundInitialUserInList = false
+    for (const eqyip of eqyipList.value) {
+      if (eqyip.id === initialUser.id) {
+        valueName.value =initialUser.name
+        foundInitialUserInList = true
+        break
+      }
+    }
+    // 如果初始用户不在列表中，则将其添加到列表开头
+    if (!foundInitialUserInList && !eqyipSelectList.value.length) {
+     eqyipList.value.unshift(initialUser)
+     valueName.value = initialUser.name
+    }
+    // loading.value = false
+  }
+  eqyipSelectList.value = eqyipList.value
+  loading.value = false
+}
+
+const remoteMethod = async (query: any) => {
+  loading.value = true
+  eqyipSelectList.value = []
+  try {
+    if (query) {
+      queryParams.name = query
+      const data = await EquipApi.getEquipPage(queryParams)
+      eqyipList.value = data.list
+      eqyipSelectList.value = data.list
+    } else {
+      gitlist()
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+// 初始化用户列表
+onMounted(async () => {
+  try {
+    await gitlist()
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+const onVisibleChange = (isVisible: boolean) => {
+  if (!isVisible) {
+    // 下拉框关闭时，重置查询参数和下拉框列表
+    queryParams.name = undefined
+    eqyipList.value = []
+   eqyipSelectList.value = []
+  }
+}
+
+const onSelectChange = (newValue: any) => {
+  valueNameObject.value = eqyipList.value.find((eqyip) => eqyip.id === newValue) // 更新选中的完整用户对象
+  emit('update:newValue', valueNameObject.value)
+}
+</script>

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

@@ -15,6 +15,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 class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="108px">

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

@@ -31,6 +31,9 @@
       <el-form-item label="物料" prop="materialId">
         <MaterialSelect v-model="formData.materialId" @update:newValue="handleSelectedMaterial" />
       </el-form-item>
+       <el-form-item label="设备" prop="eqyipId">
+        <EquipSelect v-model="formData.eqyipId" @update:newValue="handleSelectedEquip" />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -53,6 +56,7 @@ import CompositionSelect from '../hlvuestyle/compositionSelect.vue'
 import WorkshopSelect from '../hlvuestyle/workshopSelect.vue'
 import MaterialSelect from '../hlvuestyle/materialSelect.vue'
 import ClassesSelect from '../hlvuestyle/classesSelect.vue'
+import EquipSelect from '../hlvuestyle/equipSelect.vue'
 import { defineComponent } from 'vue'
 defineOptions({ name: 'SystemDeptForm' })
 
@@ -73,6 +77,7 @@ const formData: any = ref({
   workshopId: undefined,
   materialId: undefined,
   classesId: undefined,
+  eqyipId:undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive<FormRules>({
@@ -182,4 +187,10 @@ const handleSelectedMaterial = (newValue: any) => {
   console.log('接收物料对应的数据:', newValue)
   formData.value. materialId = newValue.id
 }
+
+//接收设备传递的数据
+const handleSelectedEquip = (newValue: any) => {
+  console.log('接收设备对应的数据:', newValue)
+  formData.value.eqyipId = newValue.id
+}
 </script>

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

@@ -294,10 +294,15 @@
                     </template>
                   </el-table-column>
                   <el-table-column label="设备型号" min-width="150" align="center">
-                    <template #default="{ row, $index }">
+                    <!-- <template #default="{ row, $index }">
                       <el-form-item :prop="`${$index}.deviceModel`" :rules="subFormRules.deviceModel" class="mb-0px!">
                         <el-input :disabled="detailDisabled || (alterDisabled && row.id)" v-model="row.deviceModel" placeholder="请输入设备型号" />
                       </el-form-item>
+                    </template> -->
+                    <template #default="{ row, $index }">
+                      <el-form-item :prop="`${$index}.deviceModel`" :rules="subFormRules.deviceModel" class="mb-0px!">
+                        <EquipSelect v-model="row.deviceModel" @update:newValue="handleSelectedequip($index, $event)" :disabled="detailDisabled || (alterDisabled && row.id)" />
+                      </el-form-item>
                     </template>
                   </el-table-column>
                   <el-table-column min-width="150" align="center">
@@ -322,7 +327,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" @update:newValue="handleSelected($index, $event)" :disabled="detailDisabled" :class="{ 'alter-class': fieldHasAlterInRow('compositionId', row) }" />
+                        <CompositionSelect v-model="row.compositionId" @update:newValue="handleSelectedcomposition($index, $event)" :disabled="detailDisabled" :class="{ 'alter-class': fieldHasAlterInRow('compositionId', row) }" />
                       </el-form-item>
                     </template>
                   </el-table-column>
@@ -462,7 +467,8 @@ import { useUserStore } from '@/store/modules/user'
 import { getUserProfile } from '@/api/system/user/profile'
 import { getOperateLogPage } from '@/api/system/operatelog'
 import UserSelect from '../hlvuestyle/userSelect.vue'
-import CompositionSelect from "@/views/heli/hlvuestyle/compositionSelect.vue";
+import CompositionSelect from '@/views/heli/hlvuestyle/compositionSelect.vue'
+import EquipSelect from '@/views/heli/hlvuestyle/equipSelect.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -947,12 +953,19 @@ onMounted(() => {
 })
 
 // 材质传递的值
-const handleSelected = (currentIndex: number,newValue: any) => {
+const handleSelectedcomposition = (currentIndex: number, newValue: any) => {
+  
   formData.value.projectOrderSubs[currentIndex].compositionId = newValue?.id
 }
+//职工
 const handleSelectedUser = (newValue: any) => {
   formData.value.businessMan = newValue?.id
 }
+// 设备
+const handleSelectedequip = (currentIndex: number, newValue: any) => {
+   console.log(currentIndex, newValue);
+  formData.value.projectOrderSubs[currentIndex].deviceModel = newValue?.id
+}
 </script>
 <style>
 a {