feat(采购模块): 实现订单选择组件并优化UI交互

refactor(采购管理): 替换输入框为选择组件提升用户体验
style(表格样式): 调整表格边框和间距优化视觉效果

klp-ui/src/components/KLPService/OrderDetailSelect/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <el-select v-model="innerValue" placeholder="请选择" v-if="orderId" clearable>
+      <el-option
+        v-for="item in options"
+        :key="item.itemId"
+        :label="item.materialTypeCode + '[' + item.specification + ']'"
+        :value="item.itemId"
+      />
+    </el-select>
+    <!-- <div v-else-if="loading" style="border: 1px solid #828991; padding: 1px;">
+      加载中...
+    </div> -->
+    <div v-else v-loading="loading" style="border: 1px solid #828991; padding: 1px;">请先选择订单后再选择明细</div>
+  </div>
+</template>
+
+<script>
+import { listPurchaseOrderItem } from '@/api/erp/purchase'
+
+export default {
+  props: {
+    orderId: {
+      type: String,
+      default: () => ''
+    },
+    value: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      options: [],
+      loading: false
+    }
+  },
+  computed: {
+    innerValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    loadItems() {
+      if (!this.orderId) {
+        return
+      }
+      this.loading = true
+      listPurchaseOrderItem({
+        orderId: this.orderId,
+        pageSize: 9999,
+      }).then(res => {
+        this.loading = false
+        if (res.code === 200) {
+          this.options = res.rows || []
+        }
+      }).catch(error => {
+        this.loading = false
+        console.error('订单明细搜索失败:', error)
+      })
+    }
+  },
+  watch: {
+    orderId: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.loadItems()
+        }
+      },
+      immediate: true
+    }
+  }
+}
+</script>

klp-ui/src/components/KLPService/OrderSelect/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-select
+    v-model="innerValue"
+    filterable
+    remote
+    reserve-keyword
+    placeholder="输入订单号搜索"
+    :remote-method="remoteMethod"
+    :loading="loading"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { listPurchaseOrder } from '@/api/erp/purchase'
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // innerValue: this.value, // 内部维护的选中值
+      options: [],
+      loading: false
+    }
+  },
+  computed: {
+    // 计算属性，将内部值同步到父组件
+    innerValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+       this.$emit('input', val)
+      }
+    }
+  },
+  // watch: {
+  //   // 监听父组件传入的value变化，同步到内部值
+  //   value(newVal) {
+  //     this.innerValue = newVal
+  //   },
+  //   // 监听内部值变化，同步到父组件
+  //   innerValue(newVal) {
+  //     this.$emit('input', newVal)
+  //   }
+  // },
+  methods: {
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true
+        listPurchaseOrder({
+          pageNum: 1,
+          pageSize: 10,
+          orderCode: query
+        }).then(res => {
+          this.loading = false
+          this.options = res.rows.map(item => ({
+            value: item.orderId,
+            label: item.orderCode
+          }))
+        }).catch(error => {
+          this.loading = false
+          console.error('订单搜索失败:', error)
+        })
+      } else {
+        this.options = []
+      }
+    }
+  }
+}
+</script>