diff --git a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
index 6ff4e014..2d02f930 100644
--- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue
@@ -4,8 +4,6 @@
     :placeholder="placeholder"
     filterable
     clearable
-    remote
-    :remote-method="debouncedRemoteMethod"
     :loading="loading"
     @change="onChange"
     style="width: 100%"
@@ -67,25 +65,19 @@ export default {
     this.fetchOptions("");
   },
   methods: {
-    fetchOptions(keyword) {
+    fetchOptions() {
       this.loading = true;
-      listRawMaterial({ pageNum: 1, pageSize: 10, rawMaterialName: keyword }).then(res => {
+      listRawMaterial({ pageNum: 1, pageSize: 9999 }).then(res => {
         this.options = res.rows || [];
         this.loading = false;
       }).catch(() => {
         this.loading = false;
       });
     },
-    remoteMethod(keyword) {
-      this.fetchOptions(keyword);
+    async onChange(val) {
+      const rawMaterial = this.options.find(p => p.rawMaterialId === val);
+      this.$emit('change', rawMaterial);
     },
-    debouncedRemoteMethod: debounce(function(keyword) {
-      this.remoteMethod(keyword);
-    }, 400),
-    onChange(val) {
-      this.$emit("input", val);
-      this.$emit("change", val);
-    }
   }
 };
 </script>
diff --git a/klp-ui/src/views/wms/order/index.vue b/klp-ui/src/views/wms/order/index.vue
index c82c8683..f640df07 100644
--- a/klp-ui/src/views/wms/order/index.vue
+++ b/klp-ui/src/views/wms/order/index.vue
@@ -157,10 +157,10 @@
       <OrderDetailPanel :orderId="detailOrderId" />
     </el-dialog>
 
-    <!-- 智能采购单弹窗 -->
-    <el-dialog :title="`智能采购单（订单ID：${clacOrderId}）`" :visible.sync="clacDialogVisible" width="90%" append-to-body>
+    <!-- 智能采购单弹窗, 底部弹出 -->
+    <el-drawer :title="`智能采购单（订单ID：${clacOrderId}）`" direction="btt" :visible.sync="clacDialogVisible"  width="100%" size="90%" append-to-body>
       <clac-panel :orderId="clacOrderId" @confirm="handleRecommendConfirm" />
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
diff --git a/klp-ui/src/views/wms/purchasePlan/index.vue b/klp-ui/src/views/wms/purchasePlan/index.vue
index cd09f7ff..4f8cdd0a 100644
--- a/klp-ui/src/views/wms/purchasePlan/index.vue
+++ b/klp-ui/src/views/wms/purchasePlan/index.vue
@@ -239,6 +239,25 @@
         <el-button @click="detailOpen = false">关 闭</el-button>
       </div>
     </el-dialog>
+
+    <!-- 新增采购计划底部抽屉 -->
+    <el-drawer
+      title="新增采购计划"
+      :visible.sync="addDrawerOpen"
+      direction="btt"
+      size="90%"
+      :with-header="true"
+      :wrapperClosable="false"
+      custom-class="purchase-drawer"
+      append-to-body
+      mask-closable="false"
+    >
+      <CreatePurchasePanel
+        :order-id="''"
+        :recommend-data="{}"
+        @confirm="onAddConfirm"
+      />
+    </el-drawer>
   </div>
 </template>
 
@@ -247,13 +266,15 @@ import { listPurchasePlan, getPurchasePlan, delPurchasePlan, addPurchasePlan, up
 import { listOrder } from "@/api/wms/order";
 import PurchasePlanClac from "./panels/clac.vue";
 import PurchasePlanDetail from "./panels/detail.vue";
+import CreatePurchasePanel from "./panels/CreatePurchasePanel.vue";
 import { EOrderStatus } from "../../../utils/enums";
 
 export default {
   name: "PurchasePlan",
   components: {
     PurchasePlanClac,
-    PurchasePlanDetail
+    PurchasePlanDetail,
+    CreatePurchasePanel
   },
   dicts: ['order_status'],
   data() {
@@ -327,7 +348,8 @@ export default {
         status: [
           { required: true, message: "状态不能为空", trigger: "change" }
         ],
-      }
+      },
+      addDrawerOpen: false,
     };
   },
   mounted() {
@@ -383,9 +405,7 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加采购计划主";
+      this.addDrawerOpen = true;
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -498,7 +518,19 @@ export default {
     handleDetail(row) {
       this.selectedPlanId = row.planId;
       this.detailOpen = true;
+    },
+    onAddConfirm() {
+      this.addDrawerOpen = false;
+      this.getList();
     }
   }
 };
 </script>
+
+<style>
+.purchase-drawer .el-drawer__body {
+  padding: 24px;
+  background: #f9f9f9;
+  overflow-y: auto;
+}
+</style>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
new file mode 100644
index 00000000..0ab03932
--- /dev/null
+++ b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="purchase-plan-transfer">
+    <!-- 采购单信息区 -->
+    <el-card class="section-card" shadow="never">
+      <div slot="header" class="section-title">采购单信息</div>
+      <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
+        <el-form-item label="计划编号" prop="planCode">
+          <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="owner">
+          <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="transfer-content">
+      <!-- 原料区（待筛选） -->
+      <el-card class="section-card left-table" shadow="never">
+        <div slot="header" class="section-title">原料区（待筛选）</div>
+        <div class="filter-bar">
+          <el-input
+            v-model="rawMaterialNameFilter"
+            placeholder="请输入原材料名称"
+            size="small"
+            style="width: 200px; margin-bottom: 10px;"
+            @keyup.enter.native="handleRawMaterialFilter"
+            clearable
+          />
+          <el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
+        </div>
+        <el-table
+          :data="rawMaterialList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          ref="leftTable"
+          border
+          :loading="rawMaterialLoading"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="rawMaterialName" label="原材料名称" />
+          <el-table-column prop="rawMaterialCode" label="原材料编码" />
+          <el-table-column prop="unit" label="单位" />
+        </el-table>
+        <el-pagination
+          :current-page="pageNum"
+          :page-size="pageSize"
+          :total="total"
+          @current-change="handlePageChange"
+          layout="total, prev, pager, next"
+        />
+      </el-card>
+      <!-- 中间操作按钮 -->
+      <div class="transfer-actions">
+        <el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
+        <el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
+      </div>
+      <!-- 采购单明细区 -->
+      <el-card class="section-card right-table" shadow="never">
+        <div slot="header" class="section-title">采购单明细</div>
+        <el-table
+          :data="purchaseList"
+          @selection-change="handleRightSelectionChange"
+          style="width: 100%"
+          ref="rightTable"
+          border
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="rawMaterialName" label="原材料名称" />
+          <el-table-column prop="rawMaterialCode" label="原材料编码" />
+          <el-table-column prop="unit" label="单位" />
+          <el-table-column prop="quantity" label="计划采购数">
+            <template #default="scope">
+              <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="owner" label="负责人">
+            <template #default="scope">
+              <el-input v-model="scope.row.owner" size="small" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注">
+            <template #default="scope">
+              <el-input v-model="scope.row.remark" size="small" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
+      <el-button type="primary" @click="confirm" :loading="submitLoading">{{ submitLoading ? '提交中...' : '确认' }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createPurchasePlan } from '@/api/wms/purchasePlan'
+import { listRawMaterial } from '@/api/wms/rawMaterial'
+
+export default {
+  name: 'CreatePurchasePanel',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    },
+    recommendData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // 原材料表格相关
+      rawMaterialList: [],
+      total: 0,
+      pageNum: 1,
+      pageSize: 10,
+      rawMaterialLoading: false,
+      leftSelected: [],
+      rightSelected: [],
+      rawMaterialNameFilter: '',
+      // 采购列表
+      purchaseList: [],
+      // 细化的loading状态
+      formLoading: false,
+      submitLoading: false,
+      mainForm: {
+         planCode: '',
+         owner: '',
+         remark: ''
+       },
+      mainFormRules: {
+        planCode: [
+          { required: true, message: '请输入计划编号', trigger: 'blur' }
+        ],
+        owner: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    recommendData: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.detailList) {
+          this.purchaseList = newVal.detailList
+          this.mainForm = {
+            planCode: newVal.planCode || '',
+            owner: newVal.owner || '',
+            remark: newVal.remark || ''
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.fetchRawMaterials();
+  },
+  methods: {
+    // 原材料分页查询
+    fetchRawMaterials() {
+      this.rawMaterialLoading = true;
+      listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
+        // 过滤掉已在采购列表中的原材料
+        const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
+        this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
+        this.total = res.total || 0;
+        this.rawMaterialLoading = false;
+      }).catch(() => {
+        this.rawMaterialLoading = false;
+      });
+    },
+    handlePageChange(page) {
+      this.pageNum = page;
+      this.fetchRawMaterials();
+    },
+    handleSelectionChange(selection) {
+      this.leftSelected = selection;
+    },
+    handleRightSelectionChange(selection) {
+      this.rightSelected = selection;
+    },
+    handleRawMaterialFilter() {
+      this.pageNum = 1;
+      this.fetchRawMaterials();
+    },
+    addToPurchase() {
+      // 去重添加
+      const ids = this.purchaseList.map(item => item.rawMaterialId);
+      const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
+        ...item,
+        quantity: 0,
+        owner: '',
+        remark: ''
+      }));
+      this.purchaseList = this.purchaseList.concat(newItems);
+      this.$refs.leftTable.clearSelection();
+      this.fetchRawMaterials();
+    },
+    removeFromPurchase() {
+      const removeIds = this.rightSelected.map(item => item.rawMaterialId);
+      this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
+      this.$refs.rightTable.clearSelection();
+      this.fetchRawMaterials();
+    },
+    confirm() {
+      this.submitLoading = true;
+      this.$refs.mainFormRef.validate(async(valid) => {
+        if (!valid) {
+          this.$message.error('请完整填写主数据信息');
+          this.submitLoading = false;
+          return;
+        }
+        // 校验采购列表数据（除remark外都不能为空）
+        const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
+        const invalid = filtered.some(row => {
+          return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
+        });
+        if (invalid) {
+          this.$message.error('请完整填写所有必填项');
+          this.submitLoading = false;
+          return;
+        }
+        // 合并主数据和明细数据
+        const submitData = {
+          ...this.mainForm,
+          orderId: this.orderId,
+          detailList: filtered
+        };
+        await createPurchasePlan(submitData);
+        this.$emit('confirm', submitData);
+        this.submitLoading = false;
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.purchase-plan-transfer {
+  display: flex;
+  flex-direction: column;
+}
+.section-card {
+  margin-bottom: 20px;
+}
+.section-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+}
+.transfer-content {
+  display: flex;
+  align-items: flex-start;
+}
+.left-table {
+  width: 30%;
+}
+.right-table {
+  width: 60%;
+}
+.transfer-actions {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.transfer-actions .el-button {
+  margin: 10px 0;
+}
+.filter-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style> 
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/RecommendPurchasePanel.vue b/klp-ui/src/views/wms/purchasePlan/panels/RecommendPurchasePanel.vue
new file mode 100644
index 00000000..aa364459
--- /dev/null
+++ b/klp-ui/src/views/wms/purchasePlan/panels/RecommendPurchasePanel.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <el-button v-if="showButton" type="primary" @click="handleRecommend" :loading="loading">推荐采购计划</el-button>
+  </div>
+</template>
+
+<script>
+import { recommendPurchasePlan } from '@/api/wms/purchasePlan'
+
+export default {
+  name: 'RecommendPurchasePanel',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  mounted() {
+    if (!this.showButton) {
+      this.handleRecommend();
+    }
+  },
+  methods: {
+    async handleRecommend() {
+      if (!this.orderId) {
+        this.$message.error('缺少订单ID');
+        return;
+      }
+      this.loading = true;
+      try {
+        const res = await recommendPurchasePlan(this.orderId);
+        this.$emit('recommend', res.data);
+      } catch (e) {
+        this.$message.error('推荐失败');
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/clac.vue b/klp-ui/src/views/wms/purchasePlan/panels/clac.vue
index 44ed7d89..e22db312 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/clac.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/clac.vue
@@ -1,89 +1,27 @@
 <template>
-  <div>
-    <!-- 全局loading遮罩 -->
-    <div v-if="globalLoading" class="global-loading-overlay">
-      <el-loading-spinner></el-loading-spinner>
-      <p>正在加载推荐数据...</p>
-    </div>
+  <div class="purchase-plan-transfer">
+    <!-- 推荐采购计划（自动推荐，无按钮） -->
+    <recommend-purchase-panel :order-id="orderId" :show-button="false" @recommend="onRecommend" />
 
-    <!-- 采购计划主数据表单 -->
-    <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 20px;" v-loading="formLoading" element-loading-text="正在加载主数据...">
-      <el-form-item label="计划编号" prop="planCode">
-        <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
-      </el-form-item>
-      <el-form-item label="负责人" prop="owner">
-        <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
-      </el-form-item>
-    </el-form>
-
-    <el-form :inline="true" @submit.native.prevent>
-    </el-form>
-    <el-table 
-      :data="tableData" 
-      style="width: 100%; margin-top: 20px" 
-      border 
-      :loading="tableLoading" 
-      element-loading-text="正在加载明细数据..."
-      element-loading-spinner="el-icon-loading"
-      :empty-text="tableLoading ? '正在加载数据...' : '暂无数据'"
-    >
-      <el-table-column prop="rawMaterialId" label="原材料ID" width="120">
-        <template #default="scope">
-          <RawMaterialSelect v-model="scope.row.rawMaterialId" size="small" :loading="selectLoading" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="owner" label="负责人" width="120">
-        <template #default="scope">
-          <el-input v-model="scope.row.owner" size="small" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="quantity" label="计划采购数" width="120">
-        <template #default="scope">
-          <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="unit" label="单位" width="100">
-        <template #default="scope">
-          <el-input v-model="scope.row.unit" size="small" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="remark" label="备注" width="180">
-        <template #default="scope">
-          <el-input v-model="scope.row.remark" size="small" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="100">
-        <template #default="scope">
-          <el-button type="danger" size="small" @click="removeRow(scope.$index)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
-      <el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || tableLoading || formLoading">
-        {{ submitLoading ? '提交中...' : '确认' }}
-      </el-button>
-    </div>
+    <!-- 创建采购计划表单及明细 -->
+    <create-purchase-panel
+      :order-id="orderId"
+      :recommend-data="recommendData"
+      @confirm="onConfirm"
+    />
   </div>
 </template>
 
 <script>
-import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
-import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
-import { updateOrder } from '@/api/wms/order'
-
-const EOrderStatus = {
-  NEW: 0,
-  PRODUCTIONING: 1,
-  FINISH: 2,
-  CANCEL: 3
-}
+import RecommendPurchasePanel from './RecommendPurchasePanel.vue'
+import CreatePurchasePanel from './CreatePurchasePanel.vue'
 
 export default {
   name: 'PurchasePlanClac',
-  components: { RawMaterialSelect },
+  components: {
+    RecommendPurchasePanel,
+    CreatePurchasePanel
+  },
   props: {
     orderId: {
       type: [String, Number],
@@ -92,139 +30,53 @@ export default {
   },
   data() {
     return {
-      tableData: [],
-      // 细化的loading状态
-      globalLoading: false, // 全局loading
-      formLoading: false,   // 表单loading
-      tableLoading: false,  // 表格loading
-      selectLoading: false, // 选择器loading
-      submitLoading: false, // 提交loading
-      mainForm: {
-         planCode: '',
-         owner: '',
-         remark: ''
-       },
-      mainFormRules: {
-        planCode: [
-          { required: true, message: '请输入计划编号', trigger: 'blur' }
-        ],
-        owner: [
-          { required: true, message: '请输入负责人', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    orderId: {
-      immediate: true,
-      handler(newVal) {
-        this.loadData(newVal)
-      }
-    },
-    tableData: {
-      handler() {
-        this.ensureEmptyRow();
-      },
-      deep: true
+      recommendData: {}
     }
   },
   methods: {
-    loadData(orderId) {
-      // 设置全局loading
-      this.globalLoading = true;
-      this.formLoading = true;
-      this.tableLoading = true;
-      this.selectLoading = true;
-
-      if (!orderId) {
-        this.tableData = []
-        this.clearAllLoading();
-        this.ensureEmptyRow();
-        return
-      }
-
-      recommendPurchasePlan(orderId).then(res => {
-        console.log(res, '推荐数据')
-        this.tableData = res.data.detailList;
-        this.mainForm = res.data;
-        this.ensureEmptyRow();
-      }).finally(() => {
-        this.clearAllLoading();
-      })
+    onRecommend(data) {
+      this.recommendData = data
     },
-    clearAllLoading() {
-      this.globalLoading = false;
-      this.formLoading = false;
-      this.tableLoading = false;
-      this.selectLoading = false;
-    },
-    removeRow(index) {
-      this.tableData.splice(index, 1)
-      this.ensureEmptyRow();
-    },
-    confirm() {
-      this.submitLoading = true;
-
-      // 校验主数据表单
-      this.$refs.mainFormRef.validate(async(valid) => {
-        if (!valid) {
-          this.$message.error('请完整填写主数据信息');
-          this.submitLoading = false;
-          return;
-        }
-
-        // 校验表格数据（除remark外都不能为空）
-        const filtered = this.tableData.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
-        const invalid = filtered.some(row => {
-          return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
-        });
-        if (invalid) {
-          this.$message.error('请完整填写所有必填项');
-          this.submitLoading = false;
-          return;
-        }
-
-        // 合并主数据和明细数据
-        const submitData = {
-          ...this.mainForm,
-          orderId: this.orderId,
-          detailList: filtered
-        };
-        await createPurchasePlan(submitData);
-        await updateOrder({
-          orderId: this.orderId,
-          orderStatus: EOrderStatus.PRODUCTIONING
-        })
-        // this.$message.success('操作已确认');
-        console.log(submitData);
-        this.$emit('confirm', submitData);
-        this.submitLoading = false;
-      });
-    },
-    ensureEmptyRow() {
-      // 如果tableData为空，或最后一行已填写原材料，则补充一个空行
-      if (
-        this.tableData.length === 0 ||
-        (this.tableData[this.tableData.length - 1] && this.tableData[this.tableData.length - 1].rawMaterialId)
-      ) {
-        this.tableData.push({
-          rawMaterialId: '',
-          owner: '',
-          quantity: 0,
-          unit: '',
-          remark: ''
-        });
-      }
+    onConfirm(submitData) {
+      this.$emit('confirm', submitData)
     }
   }
 }
 </script>
 
 <style scoped>
-.el-form {
+.purchase-plan-transfer {
+  display: flex;
+  flex-direction: column;
+}
+.section-card {
   margin-bottom: 20px;
 }
-
+.section-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+}
+.transfer-content {
+  display: flex;
+  align-items: flex-start;
+}
+.left-table {
+  width: 30%;
+}
+.right-table {
+  width: 60%;
+}
+.transfer-actions {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.transfer-actions .el-button {
+  margin: 10px 0;
+}
 .global-loading-overlay {
   position: absolute;
   top: 0;
@@ -239,21 +91,14 @@ export default {
   z-index: 2000;
   border-radius: 4px;
 }
-
 .global-loading-overlay p {
   margin-top: 10px;
   color: #409EFF;
   font-size: 14px;
 }
-
-/* 表格loading样式优化 */
-.el-table .el-loading-mask {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.el-table .el-loading-spinner .el-loading-text {
-  color: #409EFF;
-  font-size: 14px;
-  margin-top: 10px;
+.filter-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
index 7ef71357..aa898eb6 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
@@ -129,7 +129,7 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="原材料" prop="rawMaterialId">
-          <el-input v-model="form.rawMaterialId" placeholder="请输入原材料ID" />
+          <RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
           <el-input v-model="form.owner" placeholder="请输入负责人" />
@@ -138,7 +138,7 @@
           <el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
         </el-form-item>
         <el-form-item label="单位" prop="unit">
-          <el-input v-model="form.unit" placeholder="请输入单位" />
+          <el-input v-model="form.unit" placeholder="请输入单位" :disabled="true" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -163,11 +163,13 @@
 import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, addPurchasePlanDetail, updatePurchasePlanDetail } from "@/api/wms/purchasePlanDetail";
 import { EPurchaseDetailStatus } from "@/utils/enums";
 import StockInDialog from "./stockin.vue";
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
 
 export default {
   name: "PurchasePlanDetail",
   components: {
-    StockInDialog
+    StockInDialog,
+    RawMaterialSelect
   },
   props: {
     planId: {
@@ -411,6 +413,11 @@ export default {
       this.getList();
       this.stockInVisible = false;
       this.selectedArrivalItems = []; // 清空选中的明细
+    },
+    onRawMaterialChange(rawMaterial) {
+      if (rawMaterial && rawMaterial.unit) {
+        this.form.unit = rawMaterial.unit;
+      }
     }
   }
 };
diff --git a/klp-ui/src/views/wms/stockIo/panels/detail.vue b/klp-ui/src/views/wms/stockIo/panels/detail.vue
index e2edb401..ab873457 100644
--- a/klp-ui/src/views/wms/stockIo/panels/detail.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/detail.vue
@@ -70,7 +70,6 @@
       </el-row>
       <el-table v-loading="loading" :data="stockIoDetailList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="明细ID" align="center" prop="detailId"/>
         <el-table-column label="库区/库位" align="center" prop="warehouseName" />
         <el-table-column 
           v-if="stockIo.ioType === 'transfer'" 
@@ -78,7 +77,11 @@
           align="center" 
           prop="fromWarehouseName" 
         />
-        <el-table-column label="物品类型" align="center" prop="itemType" />
+        <el-table-column label="物品类型" align="center" prop="itemType">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
+          </template>
+        </el-table-column>
         <el-table-column label="物品ID" align="center" prop="itemId" />
         <el-table-column label="数量" align="center" prop="quantity" />
         <el-table-column label="单位" align="center" prop="unit" />
@@ -155,9 +158,9 @@
             <warehouse-select v-model="form.fromWarehouseId" placeholder="请选择源库区/库位" />
           </el-form-item>
           <el-form-item label="物品类型" prop="itemType">
-            <el-select v-model="form.itemType" placeholder="请选择物品类型" style="width: 100%">
-              <el-option label="原材料" :value="ITEM_TYPE.RAW_MATERIAL"></el-option>
-              <el-option label="产品" :value="ITEM_TYPE.PRODUCT"></el-option>
+            <el-select v-model="form.itemType" placeholder="请选择物品类型">
+              <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="物品ID" prop="itemId">
@@ -165,11 +168,13 @@
               v-if="form.itemType === ITEM_TYPE.RAW_MATERIAL"
               v-model="form.itemId"
               placeholder="请选择原材料"
+              @change="onItemChange"
             />
             <ProductSelect
               v-else-if="form.itemType === ITEM_TYPE.PRODUCT"
               v-model="form.itemId"
               placeholder="请选择产品"
+              @change="onItemChange"
             />
             <el-input
               v-else
@@ -181,7 +186,7 @@
             <el-input v-model="form.quantity" placeholder="请输入数量" />
           </el-form-item>
           <el-form-item label="单位" prop="unit">
-            <el-input v-model="form.unit" placeholder="请输入单位" />
+            <el-input v-model="form.unit" placeholder="请输入单位" :disabled="unitDisabled" />
           </el-form-item>
           <el-form-item label="批次号" prop="batchNo">
             <el-input v-model="form.batchNo" placeholder="请输入批次号" />
@@ -217,6 +222,7 @@ export default {
     RawMaterialSelect,
     ProductSelect
   },
+  dicts: ['stock_item_type'],
   props: {
     stockIo: {
       type: Object,
@@ -260,7 +266,8 @@ export default {
       single: true,
       multiple: true,
       statusLoading: false, // 新增状态修改按钮加载状态
-      cancelLoading: false // 撤回按钮加载状态
+      cancelLoading: false, // 撤回按钮加载状态
+      unitDisabled: false // 新增：单位输入框是否禁用
     };
   },
   watch: {
@@ -405,6 +412,7 @@ export default {
         batchNo: undefined,
         remark: undefined
       };
+      this.unitDisabled = false; // 新增：重置单位输入框为可编辑
       this.resetForm("form");
     },
     cancel() {
@@ -526,6 +534,12 @@ export default {
       if (type === 'return') return 'warning';
       if (type === 'relocation') return 'info';
       return 'default';
+    },
+    onItemChange(e) {
+      if (e && e.unit) {
+        this.form.unit = e.unit;
+        this.unitDisabled = true;
+      }
     }
   }
 }