✨ feat: 生产管理初步重构

klp-ui/src/views/wms/order/components/PSpecSelect.vue

@@ -0,0 +1,138 @@
+<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 'lodash' // 防抖：避免频繁触发接口请求
+
+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>