From eb0c70270264d5eafd5879b9df1f9a3e5e85c2b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 12 Aug 2025 11:23:58 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E9=80=80=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/api/wms/stockIo.js                 |   8 +
 .../KLPService/MaterialSelect/index.vue       |   3 +
 klp-ui/src/views/wms/hotProduct/index.vue     |  22 +-
 klp-ui/src/views/wms/rawMaterial/index.vue    |   2 -
 .../src/views/wms/stockIo/panels/detail.vue   |  16 +-
 .../views/wms/stockIo/panels/returnCreate.vue | 436 ++++++++++++++++++
 .../views/wms/stockIo/panels/stockIoPage.vue  | 129 ++----
 klp-ui/src/views/wms/stockIo/return.vue       |   2 +-
 8 files changed, 519 insertions(+), 99 deletions(-)
 create mode 100644 klp-ui/src/views/wms/stockIo/panels/returnCreate.vue

diff --git a/klp-ui/src/api/wms/stockIo.js b/klp-ui/src/api/wms/stockIo.js
index 1ee00b98..78aa6e9b 100644
--- a/klp-ui/src/api/wms/stockIo.js
+++ b/klp-ui/src/api/wms/stockIo.js
@@ -124,3 +124,11 @@ export function scanOutStock(data) {
     data: data
   })
 }
+
+export function returnStock(data) {
+  return request({
+    url: '/wms/stockIo/returnStock',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/klp-ui/src/components/KLPService/MaterialSelect/index.vue b/klp-ui/src/components/KLPService/MaterialSelect/index.vue
index 888c06d6..f4d15c24 100644
--- a/klp-ui/src/components/KLPService/MaterialSelect/index.vue
+++ b/klp-ui/src/components/KLPService/MaterialSelect/index.vue
@@ -48,6 +48,9 @@
       },
       _itemId: {
         get() {
+          if (!this.itemId) {
+            return this.itemId;
+          }
           return this.itemId.toString();
         },
         set(val) {
diff --git a/klp-ui/src/views/wms/hotProduct/index.vue b/klp-ui/src/views/wms/hotProduct/index.vue
index e378a916..5dc76ab7 100644
--- a/klp-ui/src/views/wms/hotProduct/index.vue
+++ b/klp-ui/src/views/wms/hotProduct/index.vue
@@ -119,7 +119,12 @@
               访问量分布
             </span>
           </div>
-          <div ref="pieChart" class="chart-container"></div>
+          <div class="chart-container">
+            <ChartWrapper>
+              <div ref="pieChart" style="height: 100%; width: 100%;"></div>
+            </ChartWrapper>
+          </div>
+          
         </el-card>
       </el-col>
     </el-row>
@@ -134,7 +139,12 @@
               访问量趋势图
             </span>
           </div>
-          <div ref="barChart" class="chart-container-large"></div>
+
+          <div class="chart-container-large">
+            <ChartWrapper>
+              <div ref="barChart" style="height: 100%; width: 100%;"></div>
+            </ChartWrapper>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -160,9 +170,15 @@
 <script>
 import * as echarts from 'echarts'
 import { getProductRanking } from '@/api/wms/productSalesScript'
+import ChartWrapper from '@/components/ChartWrapper/index.vue'
+import resizeMinix from '@/views/wms/stock/panels/resize.js'
 
 export default {
+  mixins: [resizeMinix],
   name: 'HotProduct',
+  components: {
+    ChartWrapper
+  },
   data() {
     return {
       loading: false,
@@ -181,6 +197,8 @@ export default {
     this.loadData()
     this.initCharts()
     window.addEventListener('resize', this.handleResize)
+    this.initResizeListener(this.$refs.barChart)
+    this.initResizeListener(this.$refs.pieChart)
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
diff --git a/klp-ui/src/views/wms/rawMaterial/index.vue b/klp-ui/src/views/wms/rawMaterial/index.vue
index a8332409..2953ddf5 100644
--- a/klp-ui/src/views/wms/rawMaterial/index.vue
+++ b/klp-ui/src/views/wms/rawMaterial/index.vue
@@ -95,7 +95,6 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -105,7 +104,6 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
diff --git a/klp-ui/src/views/wms/stockIo/panels/detail.vue b/klp-ui/src/views/wms/stockIo/panels/detail.vue
index e59fe6f5..e88aa18e 100644
--- a/klp-ui/src/views/wms/stockIo/panels/detail.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/detail.vue
@@ -211,7 +211,7 @@
 
 <script>
 import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
-import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo } from "@/api/wms/stockIo";
+import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, returnStock } from "@/api/wms/stockIo";
 import WarehouseSelect from '@/components/WarehouseSelect';
 import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
 import ProductSelect from '@/components/KLPService/ProductSelect';
@@ -330,6 +330,20 @@ export default {
       // 确认审核
       this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
         this.auditLoading = true;
+        // 如果是退库单，则需要先审核出库单
+        if (this.stockIo.ioType === 'withdraw') {
+          returnStock(this.stockIo).then(response => {
+            this.$modal.msgSuccess('审核成功');
+            this.$set(this.stockIo, 'status', 2);
+            // 刷新明细列表
+            this.getList();
+            // 通知父组件状态已更新
+            this.$emit('status-changed', this.stockIo);
+          }).finally(() => {
+            this.auditLoading = false;
+          })
+          return;
+        }
         auditStockIo(this.stockIo.stockIoId).then(response => {
           this.$modal.msgSuccess('审核成功');
           // 更新主表状态
diff --git a/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue b/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
new file mode 100644
index 00000000..02e126cf
--- /dev/null
+++ b/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="app-container">
+    <template v-if="stockIo && stockIo.stockIoId">
+      <el-row>
+        <el-form :model="returnForm" :rules="rules" inline label-width="120px">
+          <el-form-item label="出库单单号">
+            <el-input :value="stockIo.stockIoCode" disabled placeholder="请输入父单号" />
+          </el-form-item>
+          <el-form-item label="出库单ID" prop="parentId">
+            <el-input v-model="returnForm.parentId" disabled placeholder="请输入父单号" />
+          </el-form-item>
+          <el-form-item label="退库单号" prop="stockIoCode">
+            <el-input v-model="returnForm.stockIoCode" placeholder="请输入出入库单号" />
+          </el-form-item>
+
+          <el-form-item label="业务类型" prop="bizType">
+            <el-select v-model="returnForm.bizType" placeholder="请选择业务类型">
+              <el-option v-for="dict in dict.type.stock_biz_type" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="returnForm.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-table v-loading="loading" :data="manualList">
+        <el-table-column label="库区/库位" align="center" prop="warehouseName" />
+        <el-table-column v-if="stockIo.ioType === 'transfer'" label="源库区/库位" align="center" prop="fromWarehouseName" />
+        <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="物品信息" align="center" prop="itemId">
+          <template slot-scope="scope">
+            <raw-material-info v-if="scope.row.itemType === ITEM_TYPE.RAW_MATERIAL" :material-id="scope.row.itemId" />
+            <product-info v-else-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
+            <span v-else>{{ scope.row.itemId }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="BOM" align="center">
+          <template slot-scope="scope">
+            <BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="单位" align="center" prop="unit" />
+        <el-table-column label="批次号" align="center" prop="batchNo" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column width="55" label="开关">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.switchInput" />
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="180" align="center" prop="quantity">
+          <template slot-scope="scope">
+            <el-input-number style="width: 160px;" v-model="scope.row.count" :max="scope.row.quantity"
+              placeholder="请输入数量" @input="handleQuantityInput(scope.row)" controls-position="right" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+      <!-- 操作按钮 -->
+      <div style="margin-top: 20px; text-align: right;">
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </div>
+    </template>
+    <template v-else>
+      <div style="height:200px;text-align:center;line-height:200px;">未获取到主表数据</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
+import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, addStockIoWithDetail } from "@/api/wms/stockIo";
+import WarehouseSelect from '@/components/WarehouseSelect';
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
+import ProductSelect from '@/components/KLPService/ProductSelect';
+import SemiSelect from '@/components/KLPService/SemiSelect';
+import { ITEM_TYPE } from '@/utils/enums';
+import { RawMaterialInfo, ProductInfo } from "@/components/KLPService";
+import BomInfoMini from '@/components/KLPService/Renderer/BomInfoMini.vue';
+import MaterialSelect from '@/components/KLPService/MaterialSelect/index.vue';
+
+export default {
+  name: "returnCreatePanel",
+  components: {
+    WarehouseSelect,
+    RawMaterialSelect,
+    ProductSelect,
+    RawMaterialInfo,
+    ProductInfo,
+    BomInfoMini,
+    SemiSelect,
+    MaterialSelect
+  },
+  dicts: ['stock_item_type', 'stock_biz_type'],
+  props: {
+    stockIo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      ITEM_TYPE,
+      loading: true,
+      stockIoDetailList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        stockIoId: undefined
+      },
+      returnForm: {
+
+      },
+      auditLoading: false,
+      open: false,
+      title: '',
+      form: {},
+      buttonLoading: false,
+      rules: {
+        warehouseId: [
+          { required: true, message: "库区/库位不能为空", trigger: "blur" }
+        ],
+        itemType: [
+          { required: true, message: "物品类型不能为空", trigger: "blur" }
+        ],
+        itemId: [
+          { required: true, message: "物品ID不能为空", trigger: "blur" }
+        ],
+        quantity: [
+          { required: true, message: "数量不能为空", trigger: "blur" }
+        ],
+        unit: [
+          { required: true, message: "单位不能为空", trigger: "blur" }
+        ]
+      },
+    };
+  },
+  watch: {
+    'stockIo.stockIoId': {
+      handler(val) {
+        if (val) {
+          this.queryParams.stockIoId = val;
+          this.returnForm.parentId = val;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    manualList() {
+      return this.stockIoDetailList.filter(item => item.recordType === 0);
+    }
+  },
+  mounted() {
+    if (this.stockIo && this.stockIo.stockIoId) {
+      this.queryParams.stockIoId = this.stockIo.stockIoId;
+      this.getList();
+    }
+  },
+  methods: {
+    getList() {
+      if (!this.queryParams.stockIoId) return;
+      this.loading = true;
+      listStockIoDetail(this.queryParams).then(response => {
+        this.stockIoDetailList = response.rows.map(item => {
+          return {
+            ...item,
+            count: item.quantity,
+            switchInput: true
+          }
+        });
+        this.total = response.total;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleAudit() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      // 确认审核
+      this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
+        this.auditLoading = true;
+        auditStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('审核成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 2);
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('审核失败:', error);
+          this.$modal.msgError('审核失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.auditLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消审核
+      });
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.detailId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleQuantityInput(row) {
+      row.count = Math.min(row.count, row.quantity);
+    },
+    handleAdd() {
+      this.reset();
+      this.form.stockIoId = this.stockIo.stockIoId;
+      this.form.recordType = 0; // 新增时设为手动录入
+      this.open = true;
+      this.title = "添加出入库单明细";
+    },
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const detailId = row.detailId || this.ids
+      getStockIoDetail(detailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.form.recordType = 0; // 修改时强制设为手动录入
+        this.open = true;
+        this.title = "修改出入库单明细";
+      });
+    },
+    submitForm() {
+      // 手动校验
+      if (!this.returnForm.stockIoCode) {
+        this.$modal.msgError("请输入退库单号");
+        return;
+      }
+      if (!this.returnForm.bizType) {
+        this.$modal.msgError("请选择业务类型");
+        return;
+      }
+      if (!this.manualList.filter(el => el.switchInput).length) {
+        this.$modal.msgError("请至少选择一个明细");
+        return;
+      }
+      const payload = {
+        stockIoCode: this.returnForm.stockIoCode,
+        bizType: this.returnForm.bizType,
+        remark: this.returnForm.remark,
+        ioType: 'withdraw',
+        parentId: this.returnForm.parentId,
+        details: this.manualList.filter(el => el.switchInput).map(el => {
+          const { detailId, stockIoId, switchInput, ...rest } = el;
+          return {
+            ...rest,
+            quantity: el.count,
+            recordType: 0
+          }
+        })
+      };
+      addStockIoWithDetail(payload).then(response => {
+        this.$modal.msgSuccess("提交成功");
+        this.$emit('finish', this.stockIo);
+      }).catch(error => {
+        this.$modal.msgError("提交失败：" + (error.message || "未知错误"));
+      });
+    },
+    handleDelete(row) {
+      const detailIds = row.detailId || this.ids;
+      this.$modal.confirm('是否确认删除出入库单明细编号为"' + detailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStockIoDetail(detailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        // 删除明细后刷新主表状态
+        this.refreshStockIoStatus();
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    reset() {
+      this.form = {
+        detailId: undefined,
+        stockIoId: undefined,
+        warehouseId: undefined,
+        fromWarehouseId: undefined,
+        itemType: undefined,
+        itemId: undefined,
+        quantity: undefined,
+        unit: undefined,
+        batchNo: undefined,
+        remark: undefined
+      };
+      this.unitDisabled = false; // 新增：重置单位输入框为可编辑
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    handleExport() {
+      this.download('wms/stockIoDetail/export', {
+        ...this.queryParams
+      }, `stockIoDetail_${new Date().getTime()}.xlsx`)
+    },
+    getAuditButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '审核入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '审核出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '审核移库';
+      } else {
+        return '审核';
+      }
+    },
+    getStatusButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '提交入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '提交出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '提交移库';
+      } else {
+        return '提交';
+      }
+    },
+    handleUpdateStatus() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      this.$modal.confirm('确认要提交此出入库单吗？提交后将无法修改明细。').then(() => {
+        this.statusLoading = true;
+        updateStockIoStatus(this.stockIo.stockIoId, 1).then(response => {
+          this.$modal.msgSuccess('状态更新成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 1);
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('状态更新失败:', error);
+          this.$modal.msgError('状态更新失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.statusLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消状态更新
+      });
+    },
+    handleCancel() {
+      this.$modal.confirm('确认要撤回此出入库单吗？撤回后将回滚库存数据。').then(() => {
+        this.cancelLoading = true;
+        cancelStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('撤回成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 1);
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('撤回失败:', error);
+          this.$modal.msgError('撤回失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.cancelLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消撤回
+      });
+    },
+    refreshStockIoStatus() {
+      // 刷新主表状态
+      if (this.stockIo && this.stockIo.stockIoId) {
+        getStockIo(this.stockIo.stockIoId).then(response => {
+          const updatedStockIo = response.data;
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', updatedStockIo.status);
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('刷新主表状态失败:', error);
+        });
+      }
+    },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      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;
+      }
+    }
+  }
+}
+</script>
diff --git a/klp-ui/src/views/wms/stockIo/panels/stockIoPage.vue b/klp-ui/src/views/wms/stockIo/panels/stockIoPage.vue
index 3ca7f4f2..6328aa84 100644
--- a/klp-ui/src/views/wms/stockIo/panels/stockIoPage.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/stockIoPage.vue
@@ -2,21 +2,13 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="单号" prop="stockIoCode">
-        <el-input
-          v-model="queryParams.stockIoCode"
-          placeholder="请输入出入库单号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.stockIoCode" placeholder="请输入出入库单号" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="业务类型" prop="bizType">
         <el-select v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
-          <el-option
-            v-for="dict in dict.type.stock_biz_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+          <el-option v-for="dict in dict.type.stock_biz_type" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="单据状态" prop="status">
@@ -34,53 +26,25 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
+          @click="handleUpdate">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="stockIoList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="true"/>
+      <el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="true" />
       <el-table-column label="出入库单号" align="center" prop="stockIoCode" />
       <el-table-column label="类型" align="center" prop="ioType">
         <template slot-scope="scope">
@@ -106,36 +70,18 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            
-          >删除</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-document"
-            @click="showDetail(scope.row)"
-          >明细</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-document" @click="showDetail(scope.row)">明细</el-button>
+          <el-button size="mini" type="text" icon="el-icon-document"
+            v-if="scope.row.ioType === 'out' && scope.row.status === 2"
+            @click="showReturnCreate(scope.row)">退库</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改出入库单主对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
@@ -145,12 +91,8 @@
         </el-form-item>
         <el-form-item label="业务类型" prop="bizType">
           <el-select v-model="form.bizType" placeholder="请选择业务类型">
-            <el-option
-              v-for="dict in dict.type.stock_biz_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+            <el-option v-for="dict in dict.type.stock_biz_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="单据状态" prop="status">
@@ -166,17 +108,12 @@
       </div>
     </el-dialog>
     <!-- 明细弹窗 -->
-    <el-dialog
-      title="单据明细"
-      :visible.sync="detailDialogVisible"
-      width="1000px"
-      append-to-body
-      @close="onDetailClosed"
-    >
-      <StockIoDetailPanel 
-        :stockIo="detailStockIo" 
-        @status-changed="onStatusChanged"
-      />
+    <el-dialog title="单据明细" :visible.sync="detailDialogVisible" width="1000px" append-to-body @close="onDetailClosed">
+      <StockIoDetailPanel :stockIo="detailStockIo" @status-changed="onStatusChanged" />
+    </el-dialog>
+
+    <el-dialog title="退库单" :visible.sync="returnCreateDialogVisible" width="1000px" append-to-body>
+      <ReturnCreatePanel :stockIo="form" @finish="returnCreateDialogVisible = false" />
     </el-dialog>
   </div>
 </template>
@@ -184,11 +121,12 @@
 <script>
 import { listStockIo, getStockIo, delStockIo, addStockIo, updateStockIo } from "@/api/wms/stockIo";
 import StockIoDetailPanel from './detail.vue';
+import ReturnCreatePanel from './returnCreate.vue';
 
 export default {
   name: "StockIo",
   dicts: ['stock_biz_type', 'stock_status'],
-  components: { StockIoDetailPanel },
+  components: { StockIoDetailPanel, ReturnCreatePanel },
   props: {
     ioType: {
       require: true
@@ -253,6 +191,7 @@ export default {
       },
       detailDialogVisible: false,
       detailStockIo: null,
+      returnCreateDialogVisible: false,
     };
   },
   created() {
@@ -303,7 +242,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.stockIoId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -415,7 +354,11 @@ export default {
         other: '其他'
       };
       return map[type] || type;
+    },
+    showReturnCreate(row) {
+      this.returnCreateDialogVisible = true;
+      this.form = { ...row };
     }
   }
-};
+}
 </script>
diff --git a/klp-ui/src/views/wms/stockIo/return.vue b/klp-ui/src/views/wms/stockIo/return.vue
index 4fc927ba..b62fe4b2 100644
--- a/klp-ui/src/views/wms/stockIo/return.vue
+++ b/klp-ui/src/views/wms/stockIo/return.vue
@@ -1,5 +1,5 @@
 <template>
-  <StockIoPage ioType="return" />
+  <StockIoPage ioType="withdraw" />
 </template>
 
 <script>