138 lines
4.7 KiB
Vue
138 lines
4.7 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="innerValue"
|
||
placeholder="请选择或搜索制造规范"
|
||
clearable
|
||
filterable
|
||
remote
|
||
:remote-method="handleRemoteSearch"
|
||
:loading="loading"
|
||
@change="handleSelectChange"
|
||
style="width: 100%"
|
||
>
|
||
<!-- 下拉选项：循环制造规范列表 -->
|
||
<el-option
|
||
v-for="item in mSpecList"
|
||
:key="item.specId"
|
||
:label="item.specName"
|
||
:value="item.specId"
|
||
/>
|
||
|
||
<!-- 无数据提示 -->
|
||
<el-option
|
||
v-if="mSpecList.length === 0 && !loading"
|
||
value=""
|
||
disabled
|
||
>
|
||
暂无匹配制造规范
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
|
||
<script>
|
||
import { listManufacturingSpec } from '@/api/work/manufacturingSpec'
|
||
import { debounce } from '@/utils' // 防抖：避免频繁触发接口请求
|
||
|
||
export default {
|
||
name: 'MSpecSelect',
|
||
// 1. 接收外部传入的v-model值（必加，双向绑定的入口）
|
||
props: {
|
||
value: {
|
||
type: [String, Number, undefined], // 支持字符串/数字ID（兼容不同后端返回类型）
|
||
default: undefined // 初始值默认undefined（未选择状态）
|
||
},
|
||
// 可选：允许外部自定义搜索参数的字段名（增强组件复用性）
|
||
searchKey: {
|
||
type: String,
|
||
default: 'specName' // 默认为“规范名称”搜索（对应接口的mSpecName参数）
|
||
},
|
||
// 可选：每页加载数量（外部可配置）
|
||
pageSize: {
|
||
type: Number,
|
||
default: 20
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mSpecList: [], // 制造规范列表数据
|
||
loading: false, // 远程请求加载状态
|
||
queryParams: {
|
||
// 搜索参数：默认用specName（可通过searchKey自定义）
|
||
specName: undefined,
|
||
pageNum: 1, // 分页：当前页码
|
||
pageSize: this.pageSize // 分页：每页条数（关联props的pageSize）
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 2. 核心：内部值与外部value的双向同步桥梁
|
||
innerValue: {
|
||
get() {
|
||
// 外部传入的value -> 内部el-select的v-model值（初始回显）
|
||
return this.value
|
||
},
|
||
set(newVal) {
|
||
// 内部el-select值变化时 -> 触发input事件，同步给外部v-model
|
||
this.$emit('input', newVal)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
// 3. 监听外部value变化（如父组件直接修改v-model值），同步更新内部选择状态
|
||
value(newVal) {
|
||
// 仅当外部值与内部值不一致时更新（避免死循环）
|
||
if (newVal !== this.innerValue) {
|
||
this.innerValue = newVal
|
||
}
|
||
},
|
||
// 监听searchKey变化（外部修改搜索字段时，重置搜索参数）
|
||
searchKey(newKey) {
|
||
// 清空原搜索字段的值（避免残留旧字段的搜索条件）
|
||
this.queryParams[this.searchKey] = undefined
|
||
}
|
||
},
|
||
created() {
|
||
// 初始化：加载默认制造规范列表
|
||
this.getList()
|
||
// 初始化防抖函数（300ms延迟，可根据需求调整）
|
||
this.debouncedSearch = debounce(this.getList, 300)
|
||
},
|
||
methods: {
|
||
// 4. 远程搜索逻辑（输入时触发）
|
||
handleRemoteSearch(query) {
|
||
// 根据searchKey设置搜索参数（如：specName=query）
|
||
this.queryParams[this.searchKey] = query.trim() // 去除首尾空格，避免无效搜索
|
||
this.queryParams.pageNum = 1 // 重置页码为1（新搜索从第一页开始）
|
||
this.debouncedSearch() // 防抖后执行搜索
|
||
},
|
||
|
||
// 5. 获取制造规范列表（远程接口请求）
|
||
getList() {
|
||
this.loading = true // 开始加载：显示加载动画
|
||
listManufacturingSpec(this.queryParams)
|
||
.then(res => {
|
||
// 接口成功：赋值列表数据（兼容res.rows或res.data.rows，避免接口返回格式差异）
|
||
this.mSpecList = res.rows || res.data?.rows || []
|
||
})
|
||
.catch(() => {
|
||
// 接口失败：清空列表，避免旧数据残留
|
||
this.mSpecList = []
|
||
this.$message.error('获取制造规范列表失败，请重试') // 错误提示（优化用户体验）
|
||
})
|
||
.finally(() => {
|
||
this.loading = false // 结束加载：隐藏加载动画
|
||
})
|
||
},
|
||
|
||
// 6. 选择变化时触发（返回完整订单项，方便父组件使用）
|
||
handleSelectChange(mSpecId) {
|
||
// 根据选中的ID，找到对应的完整制造规范对象
|
||
const selectedItem = this.mSpecList.find(item => item.specId === mSpecId)
|
||
// 触发change事件：返回完整项（父组件可通过@change接收）
|
||
this.$emit('change', selectedItem)
|
||
// 可选：触发input事件后，额外触发change事件（符合常规组件使用习惯）
|
||
this.$emit('update:value', selectedItem)
|
||
}
|
||
}
|
||
}
|
||
</script> |