|
|
|
@ -1,70 +1,106 @@
|
|
|
|
|
<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 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 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 valueNameObject: any = ref() //选中的值
|
|
|
|
|
const emit = defineEmits(['update:newValue'])
|
|
|
|
|
const compositionList = ref<CompositionApi.CompositionVO[]>([]) // 用户列表
|
|
|
|
|
const compositionSelectList = ref<CompositionApi.CompositionVO[]>([])
|
|
|
|
|
const Loading = ref(false)
|
|
|
|
|
//接收调用组件传递的值
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
modelValue: {
|
|
|
|
|
type: [Number, String],
|
|
|
|
|
required: true // 如果是必需的属性,可以设置为true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 初始化用户列表
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
const queryParams = {
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
id: undefined,
|
|
|
|
|
name: undefined,
|
|
|
|
|
code: undefined,
|
|
|
|
|
brief: undefined,
|
|
|
|
|
status: undefined
|
|
|
|
|
description: undefined,
|
|
|
|
|
status: undefined,
|
|
|
|
|
original: undefined,
|
|
|
|
|
density: undefined,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const valueName: 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 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
|
|
|
|
|
// 设置初始值,如果需要的话
|
|
|
|
|
remoteMethod('')
|
|
|
|
|
compositionSelectList.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 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)
|
|
|
|
|
const onVisibleChange = (isVisible: boolean) => {
|
|
|
|
|
if (!isVisible) {
|
|
|
|
|
// 下拉框关闭时,重置查询参数和下拉框列表
|
|
|
|
|
queryParams.name = undefined
|
|
|
|
|
compositionList.value = []
|
|
|
|
|
compositionSelectList.value = []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|