feat(wms): 添加收货确认功能并优化表单布局

1. 在入库页面添加收货确认弹窗及功能 2. 调整多个页面的表单布局比例 3. 初始化表单字段避免undefined错误 4. 优化日期格式化处理
2025-11-29 17:56:38 +08:00
parent 6c37c934bc
commit 49e5024f89
4 changed files with 106 additions and 76 deletions
--- a/klp-ui/src/views/wms/coil/do/warehousing.vue
+++ b/klp-ui/src/views/wms/coil/do/warehousing.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="app-container">
    <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="10">
        <div class="section-card">
          <!-- 入库 -->
          <div class="section-header">
@@ -130,7 +130,7 @@

      </el-col>

-      <el-col :span="12">
+      <el-col :span="14">
        <div class="section-card">
          <!-- 入库记录 -->
          <div class="section-header">
@@ -179,20 +179,50 @@
                <el-tag v-else type="primary">未收货</el-tag>
              </template>
            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button v-if="scope.row.actionStatus == 0 || scope.row.actionStatus == 1" type="primary"
+                  size="mini" @click="openReceiptModal(scope.row)">确认收货</el-button>
+              </template>
+            </el-table-column>
          </el-table>

-
          <Pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize" @pagination="getList" />
        </div>
      </el-col>
    </el-row>
+
+    <el-dialog title="确认收货" v-loading="loading" :visible.sync="receiptModalVisible" width="30%">
+      <el-form :model="coilInfo" ref="receiptFormRef" label-width="120px">
+        <el-form-item label="钢卷号" prop="currentCoilNo">
+          <el-input v-model="coilInfo.currentCoilNo" disabled placeholder="请输入钢卷号" />
+        </el-form-item>
+        <el-form-item label="净重" prop="netWeight">
+          <el-input v-model="coilInfo.netWeight" disabled placeholder="请输入净重" />
+        </el-form-item>
+        <el-form-item label="毛重" prop="grossWeight">
+          <el-input v-model="coilInfo.grossWeight" disabled placeholder="请输入毛重" />
+        </el-form-item>
+        <el-form-item label="实际库区" prop="actualWarehouseId">
+          <ActualWarehouseSelect v-model="coilInfo.actualWarehouseId" placeholder="请选择实际库区" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="coilInfo.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+
+      <template slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmReceipt" v-loading="buttonLoading">确认收货</el-button>
+        <el-button @click="receiptModalVisible = false">取消</el-button>
+      </template>
+    </el-dialog>
  </div>
 </template>

 <script>
-import { addMaterialCoil } from '@/api/wms/coil'
-import { listPendingAction, addPendingAction } from '@/api/wms/pendingAction'
+import { addMaterialCoil, updateMaterialCoilSimple, getMaterialCoil } from '@/api/wms/coil'
+import { listPendingAction, addPendingAction, updatePendingAction } from '@/api/wms/pendingAction'
 import MaterialSelect from "@/components/KLPService/MaterialSelect";
 import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
 import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
@@ -267,6 +297,17 @@ export default {
        ],
      },
      planList: [],
+
+      // 确认收货表单参数
+      receiptModalVisible: false,
+      receiptForm: {
+        currentCoilNo: null,
+        netWeight: null,
+        grossWeight: null,
+        actualWarehouseId: null,
+        remark: null,
+      },
+      coilInfo: {},
    }
  },
  mounted() {
@@ -322,7 +363,6 @@ export default {
              currentCoilNo: this.form.currentCoilNo,
              sourceType: 'manual',
              coilId: response.data.coilId,
-              // coilId: 0,
              priority: 0,
              remark: this.form.remark,
              actionStatus: 0,
@@ -333,11 +373,44 @@ export default {
          }).finally(() => {
            this.buttonLoading = false;
          });
-
-
        }
      });
    },
+
+    // 打开收货弹窗
+    openReceiptModal(row) {
+      this.loading = true
+      // 打开确认收货弹窗
+      this.receiptModalVisible = true;
+      this.receiptForm = row;
+      // 根据钢卷id查询钢卷信息
+      getMaterialCoil(row.coilId).then(res => {
+        this.coilInfo = res.data;
+        this.loading = false
+      })
+    },
+    // 确认收货
+    confirmReceipt() {
+      // 二次确认
+      this.$modal.confirm("收货后刚钢卷会进入库存并占用所选的实际库区,是否继续?").then(() => {
+        this.buttonLoading = true;
+        // 更新操作记录状态 actionStatus: 2
+        updatePendingAction({
+          ...this.receiptForm,
+          actionStatus: 2,
+        }).then(_ => {
+          this.$message.success("确认收货成功");
+          this.getList()
+        }).finally(() => {
+          this.buttonLoading = false;
+        });
+        // 更新钢卷状态为当前钢卷; dataType: 1
+        updateMaterialCoilSimple({
+          ...this.coilInfo,
+          dataType: 1,
+        })
+      })
+    },
    // 取消操作
    cancel() {
      this.form = {};
--- a/klp-ui/src/views/wms/delivery/plan/index.vue
+++ b/klp-ui/src/views/wms/delivery/plan/index.vue
@@ -178,7 +178,10 @@ export default {
        planType: 0,
      },
      // 表单参数
-      form: {},
+      form: {
+        planName: '',
+        planDate: '',
+      },
      // 表单校验
      rules: {
      }
--- a/klp-ui/src/views/wms/receive/detail/index.vue
+++ b/klp-ui/src/views/wms/receive/detail/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="app-container">
    <el-row :gutter="10">
-      <el-col :span="4">
+      <el-col :span="6">
        <el-card>
          <el-input v-model="planQueryParams.planName" placeholder="计划名称" clearable @change="handlePlanQuery"
            style="width: 100%;" />
@@ -20,7 +20,7 @@
        </el-card>
      </el-col>

-      <el-col :span="20">
+      <el-col :span="18">
        <el-card>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
--- a/klp-ui/src/views/wms/receive/plan/index.vue
+++ b/klp-ui/src/views/wms/receive/plan/index.vue
@@ -2,18 +2,10 @@
  <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="planName">
-        <el-input
-          v-model="queryParams.planName"
-          placeholder="请输入收货计划名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.planName" placeholder="请输入收货计划名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="计划日期" prop="planDate">
-        <el-date-picker clearable
-          v-model="queryParams.planDate"
-          type="date"
-          value-format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择计划日期">
        </el-date-picker>
      </el-form-item>
@@ -25,42 +17,18 @@

    <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>
@@ -91,30 +59,15 @@
            </div>
          </div>
          <div class="card-actions">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(row)"
-            >修改</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(row)"
-            >删除</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

-    <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="500px" append-to-body>
@@ -123,10 +76,7 @@
          <el-input v-model="form.planName" placeholder="请输入收货计划名称" />
        </el-form-item>
        <el-form-item label="计划日期" prop="planDate">
-          <el-date-picker clearable
-            v-model="form.planDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
+          <el-date-picker clearable v-model="form.planDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择计划日期">
          </el-date-picker>
        </el-form-item>
@@ -178,7 +128,10 @@ export default {
        planType: 1
      },
      // 表单参数
-      form: {},
+      form: {
+        planName: '',
+        planDate: '',
+      },
      // 表单校验
      rules: {
      }
@@ -246,7 +199,8 @@ export default {
    handleAdd() {
      // this.reset();
      // 默认选中今天的日期和时间, 格式化未yyyy-MM-dd HH:mm:ss
-      this.form.planDate = new Date().toLocaleString().replace('T', ' ').replace().replace(/\//g, '-')
+      this.form.planDate = new Date().toLocaleString().substring(0, 19).replace(/\//g, '-').replace('T', ' ')
+      console.log(this.form.planDate, 'this.form.planDate')
      // 收货计划名称格式为年-月-日命名
      this.form.planName = new Date().toLocaleDateString().replace(/\//g, '-') + '收货计划'
      // 计划类型为收货计划