klp-oa/klp-ui/src/views/wms/order/components/PSpecSelect.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>