订单信息客户名称替换远程搜索

8 months ago · 64b0851552
parent 779d2be5ec
commit 64b0851552
3 changed files with 119 additions and 112 deletions
--- a/mes-ui/mes-ui-admin-vue3/src/api/heli/customer/index.ts
+++ b/mes-ui/mes-ui-admin-vue3/src/api/heli/customer/index.ts
@ -5,6 +5,7 @@ export interface CustomerVO {
  code: string
  brief: string
  name: string
+  briefOrName:string
  industry: string
  level: number
  userId: string
--- 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
@ -1,77 +1,117 @@
 <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 clientSelectList"
-      :key="item.id"
-      :label="item.code + ' ' + item.name"
-      :value="item.id"
-    />
+  <el-select v-model="propsmodelValue" v-loading="loading" element-loading-background="rgb(255, 255, 255)" placeholder="请输入客户" :remote-method="remoteMethod" remote-show-suffix remote clearable reserve-keyword filterable :loading="clientSelectLoading" @change="onSelectChange" @visible-change="onVisibleChange">
+    <el-option v-for="item in clientSelectList" :key="item.id" :label="item.brief + ' ' + item.name" :value="item.id" />
  </el-select>
 </template>

 <script lang="ts" setup>
-import { ref, onMounted, toRefs } from 'vue'
+import { ref, onMounted, toRefs, computed } from 'vue'
 import * as CustomerApi from '@/api/heli/customer'
+import { any } from 'vue-types'

+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+    required: true // 如果是必需的属性，可以设置为true
+  }
+})
+
+const clientParams = {
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined,
+  brief: undefined,
+  status: undefined,
+  briefOrName: undefined
+}
 const valueName: any = ref() //选中的值
 const valueNameObject: any = ref() //选中的值
 const emit = defineEmits(['update:newValue'])

 const clientList = ref<CustomerApi.CustomerVO[]>([]) //列表
 const clientSelectList = ref<CustomerApi.CustomerVO[]>([])
-const Loading = ref(false)
+const propsmodelValue = toRefs(props).modelValue // 获取 props 中的 modelValue
+const loading = ref(true)
+const clientSelectLoading = ref(false)
+
+const gitlist = async () => {
+  const data = await CustomerApi.getCustomerPage(clientParams)
+  clientList.value = [...clientList.value, ...data.list]
+  console.log(clientList.value)

+  // 设置初始值
+  if (propsmodelValue.value) {
+    valueName.value = propsmodelValue.value
+    console.log(valueName.value, 'valueName.value')
+
+    const initialclient = await CustomerApi.getCustomer(valueName.value)
+    console.log(initialclient, 'initialclient')
+
+    // 查找初始用户是否已经在 clientList 中
+    let foundInitialclientInList = false
+    for (const client of clientList.value) {
+      if (client.id === initialclient.id) {
+        propsmodelValue.value = initialclient.brief + ' ' + initialclient.name
+        foundInitialclientInList = true
+        break
+      }
+    }
+    // 如果初始用户不在列表中，则将其添加到列表开头
+    if (!foundInitialclientInList) {
+      clientList.value.unshift(initialclient)
+
+      propsmodelValue.value = initialclient.brief + ' ' + initialclient.name
+    }
+  }
+  clientSelectList.value = clientList.value
+  loading.value = false
+}
+
+const remoteMethod = async (query: any) => {
+  clientSelectLoading.value = true
+  clientSelectList.value = []
+  try {
+    if (query) {
+      clientParams.briefOrName = query
+      const data = await CustomerApi.getCustomerPage(clientParams)
+      clientList.value = data.list
+      clientSelectList.value = data.list
+    } else {
+      gitlist()
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    clientSelectLoading.value = false
+  }
+}
 // 初始化列表
 onMounted(async () => {
-  const clientParams = {
-    pageNo: 1,
-    pageSize: 10,
-    code: undefined,
-    brief: undefined,
-    status: undefined
-  }
  try {
-    const data = await CustomerApi.getCustomerPage(clientParams)
-    clientList.value = data.list
-    // 设置初始值，如果需要的话
-    remoteMethod('')
+    await gitlist()
  } catch (error) {
    console.error(error)
  }
 })
+watch(propsmodelValue, (newValue: any) => {
+  if (newValue) {
+    clientList.value = []
+    gitlist()
+  }
+})

-const remoteMethod = (query: any) => {
-  if (query) {
-    Loading.value = true
-    setTimeout(() => {
-      Loading.value = false
-      clientSelectList.value = clientList.value
-        .filter(
-          (item) =>
-            item.code.toLowerCase().includes(query.toLowerCase()) ||
-            item.name.toLowerCase().includes(query.toLowerCase())
-        )
-        .slice(0, 10) //只显示前10个
-    }, 200)
-  } else {
-    clientSelectList.value = clientList.value.slice(0, 10)
+const onVisibleChange = (isVisible: boolean) => {
+  if (!isVisible) {
+    // 下拉框关闭时，重置查询参数和下拉框列表
+    clientParams.briefOrName = undefined
+    clientList.value = []
+    clientSelectList.value = []
  }
 }

 const onSelectChange = (newValue: any) => {
-  valueNameObject.value = clientList.value.find(client => client.id === newValue); // 更新选中的完整用户对象
+  valueNameObject.value = clientList.value.find((client) => client.id === newValue) // 更新选中的完整用户对象
  emit('update:newValue', valueNameObject.value)
 }
 </script>
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/projectorder/detail.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/projectorder/detail.vue
@ -135,9 +135,10 @@
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户名称" prop="customerId">
-                  <el-select class="!w-250px" v-model="formData.customerId" placeholder="请输入客户名称" :remote-method="remoteCustomerSearch" remote-show-suffix remote clearable reserve-keyword filterable :loading="customerSelectLoading" :disabled="alterDisabled || detailDisabled">
+                  <!-- <el-select class="!w-250px" v-model="formData.customerId" placeholder="请输入客户名称" :remote-method="remoteCustomerSearch" remote-show-suffix remote clearable reserve-keyword filterable :loading="customerSelectLoading" :disabled="alterDisabled || detailDisabled">
                    <el-option v-for="item in customerSelectList" :key="item.id" :label="item.name" :value="item.id" />
-                  </el-select>
+                  </el-select> -->
+                  <ClientSelect :disabled="alterDisabled || detailDisabled" v-model="formData.customerId"   @update:newValue="handleSelectedClient" />
                </el-form-item>
              </el-col>
            </el-row>
@ -408,7 +409,7 @@
        <el-row>
          <el-col>
            <el-card class="hl-incard">
-              <el-table :data="formData.operateLogs" class="hl-table" :style="{ height: formData.operateLogs.length > 10 ? '450px' : '' }">
+              <el-table v-if="formData && formData.operateLogs" :data="formData.operateLogs" class="hl-table" :style="{ height: formData.operateLogs.length > 10 ? '450px' : '' }">
                <el-table-column prop="type" label="操作" align="center">
                  <template #default="scope">
                    {{ getDictLabel(DICT_TYPE.SYSTEM_OPERATE_TYPE, scope.row.type) }}
@ -466,9 +467,10 @@ import download from '@/utils/download'
 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 UserSelect from '@/views/heli/hlvuestyle/userSelect.vue'
 import CompositionSelect from '@/views/heli/hlvuestyle/compositionSelect.vue'
 import EquipSelect from '@/views/heli/hlvuestyle/equipSelect.vue'
+import ClientSelect from '@/views/heli/hlvuestyle/clientSelect.vue'

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@ -558,45 +560,26 @@ const fieldHasAlterInRow = (fieldName, row) => {
 }

 const deptList = ref<Tree[]>([]) // 树形结构
-const userList = ref<UserApi.UserVO[]>([]) // 用户列表
-// const userSelectList = ref<UserApi.UserVO[]>([])
-// const userSelectLoading = ref(false)
+// const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
+// const customerList = ref<CustomerApi.CustomerVO[]>([])
+// const customerSelectList = ref<CustomerApi.CustomerVO[]>([])
+// const customerSelectLoading = ref(false)

-// const remoteUserSearch = (query: string) => {
+// const remoteCustomerSearch = (query: string) => {
 //   if (query) {
-//     userSelectLoading.value = true
+//     customerSelectLoading.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())
-//         )
+//       customerSelectLoading.value = false
+//       customerSelectList.value = customerList.value.filter((item) => {
+//         return item.name.toLowerCase().includes(query.toLowerCase())
 //       })
 //     }, 200)
 //   } else {
-//     userSelectList.value = userList.value
+//     customerSelectList.value = customerList.value
 //   }
 // }

-const customerList = ref<CustomerApi.CustomerVO[]>([])
-const customerSelectList = ref<CustomerApi.CustomerVO[]>([])
-const customerSelectLoading = ref(false)
-
-const remoteCustomerSearch = (query: string) => {
-  if (query) {
-    customerSelectLoading.value = true
-    setTimeout(() => {
-      customerSelectLoading.value = false
-      customerSelectList.value = customerList.value.filter((item) => {
-        return item.name.toLowerCase().includes(query.toLowerCase())
-      })
-    }, 200)
-  } else {
-    customerSelectList.value = customerList.value
-  }
-}
-
 /** 子表的表单 */
 const projectOrderSubFormRef = ref()

@ -611,6 +594,7 @@ const queryData = async (type: string, id?: number) => {
    if (id) {
      formData.value = await ProjectOrderApi.getProjectOrder(id)
      
+
      if (formData.value.hasAlter == 1) {
        alterDisabled.value = true
      }
@ -645,46 +629,23 @@ const queryData = async (type: string, id?: number) => {
    }
    // 加载部门树
    deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-
-    // // 获得用户列表
-    // let userParams = {
+    // 获得客户列表
+    // let customerParams = {
    //   pageNo: 1,
    //   pageSize: 10,
-    //   status: '0'
+    //   status: '1'
    // }
-    // const data = await UserApi.getUserPage(userParams)
-    // userList.value = data.list
-    // userSelectList.value = data.list
-
-    // 获得客户列表
-    let customerParams = {
-      pageNo: 1,
-      pageSize: 10,
-      status: '1'
-    }
-    const customerData = await CustomerApi.getCustomerPage(customerParams)
-    customerList.value = customerData.list
-    customerSelectList.value = customerData.list
+    // const customerData = await CustomerApi.getCustomerPage(customerParams)
+    // customerList.value = customerData.list
+    // customerSelectList.value = customerData.list

    // // 绑定默认部门

    const userProfile = await getUserProfile(formData.value.businessMan)
+
    if (userProfile.dept) {
      formData.value.businessDeptId = userProfile.dept.id
    }
-    // // 判断远程查询中是否存在当前默认人 如无则手动设置
-    // const hasContainMe = userSelectList.value.some((user) => {
-    //   return user.id == formData.value.businessMan
-    // })
-    // if (!hasContainMe) {
-    //   if (userSelectList.value.length == userParams.pageSize) {
-    //     userSelectList.value.splice(userSelectList.value.length - 1, 1, {
-    //       id: userProfile.id,
-    //       username: userProfile.username,
-    //       nickname: userProfile.nickname
-    //     })
-    //   }
-    // }
  } finally {
    formLoading.value = false
  }
@ -959,9 +920,14 @@ const handleSelectedUser = (newValue: any) => {
 }
 // 设备
 const handleSelectedequip = (currentIndex: number, newValue: any) => {
-  console.log(currentIndex, newValue)
+  // console.log(currentIndex, newValue)
  formData.value.projectOrderSubs[currentIndex].deviceModel = newValue?.id
 }
+//客户
+const handleSelectedClient = (newValue: any) => {
+  console.log(newValue)
+  formData.value.customerId = newValue?.id
+}
 </script>
 <style>
 a {