Ver código fonte

feat(forecast-form): 添加物料表格行删除功能

yz 2 semanas atrás
pai
commit
489c8ee36a

+ 44 - 0
src/components/forecast-form/forecast-form-mixin.js

@@ -1030,6 +1030,50 @@ export default {
     },
 
     /**
+     * 删除物料行
+     * @description 在下方物料表格中删除指定行,包含二次确认流程;删除后保持数据与UI同步。
+     * @param {import('./types').ForecastFormMixinData['stockTableData'][number]} row - 待删除的表格行数据
+     * @param {number} index - 行索引
+     * @returns {Promise<void>}
+     * @this {import('./types').ForecastFormMixinComponent & Vue}
+     */
+    async handleDelete(row, index) {
+      try {
+        // 索引校验,必要时根据唯一标识兜底定位
+        let removeIndex = typeof index === 'number' ? index : -1
+        if (removeIndex < 0 || removeIndex >= this.stockTableData.length) {
+          const keyId = row && (row.id != null ? row.id : row.goodsId)
+          removeIndex = this.stockTableData.findIndex(r => (r.id != null ? r.id : r.goodsId) === keyId)
+        }
+        if (removeIndex < 0) {
+          this.$message && this.$message.warning('未定位到要删除的记录')
+          return
+        }
+
+        // 二次确认
+        await this.$confirm('确认删除该物料吗?删除后可重新通过上方选择器导入。', '提示', {
+          type: 'warning',
+          confirmButtonText: '删除',
+          cancelButtonText: '取消'
+        })
+
+        // 使用 Vue.set/delete 保持响应式
+        this.$delete(this.stockTableData, removeIndex)
+
+        // 如有需要,清理与该行相关的临时状态(当前实现无行级临时状态)
+        // 例如:this.currentInventory = null
+
+        this.$message && this.$message.success('已删除')
+      } catch (e) {
+        // 用户取消不提示为错误,其他情况做日志记录
+        if (e && e !== 'cancel') {
+          console.error('删除失败:', e)
+          this.$message && this.$message.error('删除失败,请稍后重试')
+        }
+      }
+    },
+
+    /**
      * 品牌变更处理
      * @param {number} brandId - 品牌ID
      * @returns {void}

+ 11 - 0
src/components/forecast-form/index.vue

@@ -74,6 +74,17 @@
                 />
               </template>
             </el-table-column>
+            <!-- 操作列:删除按钮 -->
+            <el-table-column label="操作" fixed="right" width="120">
+              <template #default="{ row, $index }">
+                <el-button
+                  type="text"
+                  size="small"
+                  icon="el-icon-delete"
+                  @click="handleDelete(row, $index)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
           </el-table>
           <div class="table-tip">提示:先在上方选择物料并点击“导入物料”,导入后的数据将显示在表格并参与保存流程。</div>
         </div>