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

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

klp-ui/src/views/erp/purchase/index.vue

@@ -30,14 +30,16 @@
         </div>
       </header>
       <el-table :data="mappingRows" border size="small" class="mapping-table">
-        <el-table-column label="产品ID">
+        <el-table-column label="产品">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.productId" placeholder="产品ID" />
+            <!-- <el-input v-model="scope.row.productId" placeholder="产品ID" /> -->
+            <ProductSelect v-model="scope.row.productId" placeholder="选择产品" />
           </template>
         </el-table-column>
-        <el-table-column label="原料ID">
+        <el-table-column label="原料">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" />
+            <!-- <el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" /> -->
+            <RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="选择原料" />
           </template>
         </el-table-column>
         <el-table-column label="转换率">
@@ -91,7 +93,8 @@
       <el-tabs v-model="activeTab" class="plain-tabs">
         <el-tab-pane label="收货记录" name="receipt">
           <div class="inline-filter">
-            <el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable />
+            <!-- <el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable /> -->
+            <OrderSelect v-model="receiptQuery.orderId" size="small" clearable />
             <el-input v-model="receiptQuery.itemId" placeholder="明细ID" size="small" clearable />
             <div class="filter-actions">
               <el-button size="small" type="primary" @click="loadReceipts">查询</el-button>
@@ -130,7 +133,8 @@
 
         <el-tab-pane label="退货管理" name="return">
           <div class="inline-filter">
-            <el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable />
+            <!-- <el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable /> -->
+            <OrderSelect v-model="returnQuery.orderId" placeholder="选择订单" size="small" clearable />
             <el-select v-model="returnQuery.status" placeholder="状态" size="small" clearable>
               <el-option label="草稿" :value="0" />
               <el-option label="完成" :value="1" />
@@ -226,10 +230,12 @@
     <el-dialog :title="receiptDialog.title" :visible.sync="receiptDialog.visible" width="480px">
       <el-form :model="receiptDialog.form" :rules="receiptRules" ref="receiptForm" label-width="100px" size="small">
         <el-form-item label="订单ID" prop="orderId">
-          <el-input v-model="receiptDialog.form.orderId" />
+          <!-- <el-input v-model="receiptDialog.form.orderId" /> -->
+          <OrderSelect v-model="receiptDialog.form.orderId" />
         </el-form-item>
         <el-form-item label="明细ID" prop="itemId">
-          <el-input v-model="receiptDialog.form.itemId" />
+          <!-- <el-input v-model="receiptDialog.form.itemId" /> -->
+          <OrderDetailSelect v-model="receiptDialog.form.itemId" :orderId="receiptDialog.form.orderId" />
         </el-form-item>
         <el-form-item label="收货数量" prop="receivedQty">
           <el-input-number v-model="receiptDialog.form.receivedQty" :min="0" :precision="3" />
@@ -259,10 +265,10 @@
     </el-dialog>
 
     <!-- 退货弹窗 -->
-    <el-dialog :title="returnDialog.title" :visible.sync="returnDialog.visible" width="500px">
+    <el-dialog :title="returnDialog.title" :visible.sync="returnDialog.visible" width="600px">
       <el-form :model="returnDialog.form" :rules="returnRules" ref="returnForm" label-width="100px" size="small">
         <el-form-item label="订单ID" prop="orderId">
-          <el-input v-model="returnDialog.form.orderId" />
+          <OrderSelect v-model="returnDialog.form.orderId" placeholder="选择订单" size="small" clearable />
         </el-form-item>
         <el-form-item label="退货类型">
           <el-select v-model="returnDialog.form.returnType" clearable>
@@ -292,10 +298,11 @@
     </el-dialog>
 
     <!-- 退货明细弹窗 -->
-    <el-dialog :title="returnItemDialog.title" :visible.sync="returnItemDialog.visible" width="520px">
+    <el-dialog :title="returnItemDialog.title" :visible.sync="returnItemDialog.visible" width="600px">
       <div class="toolbar">
         <el-input v-model="returnItemQuery.returnId" placeholder="退货单ID" size="small" clearable class="toolbar-input" />
-        <el-input v-model="returnItemQuery.itemId" placeholder="订单明细ID" size="small" clearable class="toolbar-input" />
+        <OrderSelect v-model="returnItemQuery.orderId" />
+        <OrderDetailSelect v-model="returnItemQuery.itemId" :orderId="returnItemQuery.orderId" placeholder="选择订单明细" size="small" clearable />
         <el-button size="small" type="primary" @click="loadReturnItems">查询</el-button>
         <el-button size="small" @click="resetReturnItemQuery">重置</el-button>
         <div class="toolbar-spacer"></div>
@@ -328,8 +335,11 @@
         <el-form-item label="退货单ID" prop="returnId">
           <el-input v-model="returnItemFormDialog.form.returnId" />
         </el-form-item>
+        <el-form-item label="订单ID" prop="orderId">
+          <OrderSelect v-model="returnItemFormDialog.form.orderId" placeholder="选择订单" size="small" clearable />
+        </el-form-item>
         <el-form-item label="订单明细ID" prop="itemId">
-          <el-input v-model="returnItemFormDialog.form.itemId" />
+          <OrderDetailSelect v-model="returnItemFormDialog.form.itemId" :orderId="returnItemFormDialog.form.orderId" placeholder="选择订单明细" size="small" clearable />
         </el-form-item>
         <el-form-item label="退货数量" prop="returnQty">
           <el-input-number v-model="returnItemFormDialog.form.returnQty" :min="0" :precision="3" />
@@ -368,9 +378,19 @@ import {
   getPurchasePriceTrend,
   getSupplierQuality
 } from '@/api/erp/purchase'
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
+import ProductSelect from '@/components/KLPService/ProductSelect'
+import OrderSelect from '@/components/KLPService/OrderSelect'
+import OrderDetailSelect from '@/components/KLPService/OrderDetailSelect'
 
 export default {
   name: 'ErpPurchaseWorkbench',
+  components: {
+    RawMaterialSelect,
+    ProductSelect,
+    OrderSelect,
+    OrderDetailSelect,
+  },
   data() {
     return {
       mappingRows: [{ productId: '', rawMaterialId: '', conversionRate: 1 }],
@@ -585,6 +605,7 @@ export default {
     // 退货明细
     openReturnItemDialog() {
       this.returnItemDialog.visible = true
+
       this.loadReturnItems()
     },
     loadReturnItems() {
@@ -607,7 +628,7 @@ export default {
         this.returnItemFormDialog.form = { ...row }
         this.returnItemFormDialog.title = '编辑退货明细'
       } else {
-        this.returnItemFormDialog.form = { returnId: '', itemId: '', returnQty: 0 }
+        this.returnItemFormDialog.form = { returnId: '', itemId: '', returnQty: 0, orderId: row.orderId }
         this.returnItemFormDialog.title = '新增退货明细'
       }
       this.returnItemFormDialog.visible = true