Elmentui实现订单拆单功能

Elmentui实现订单拆分开票功能

需求

订单在开票时候，允许按照订单明细行和数量拆分开票，一个订单需要一次性完成全部明细行拆分才能提交开票

思路

实现一个订单拆单的功能，支持按照行和数量拆分，使用elementui
首先有一个table显示全部订单行明细，table下面有tabs默认有一个tab，通过点击添加和删除按钮新增tab，tab中也有新增和删除按钮，用于选择第一个tab中的明细行，直到全部明细拆分完成

示例代码

html"><template><div><el-table :data="orderDetails" border style="width: 100%"><el-table-column prop="productName" label="产品名称" width="150"></el-table-column><el-table-column prop="quantity" label="数量" width="100"><template slot-scope="scope"><el-input-numberv-model="scope.row.quantity":min="0"@change="handleQuantityChange(scope.row)"></el-input-number></template></el-table-column><el-table-column prop="price" label="单价" width="100"></el-table-column><el-table-column prop="total" label="总价" width="100"></el-table-column></el-table><el-tabs v-model="activeTabIndex" type="card" @tab-remove="handleTabRemove"><el-tab-pane v-for="(tab, index) in splitTabs" :key="index" :label="'拆单' + (index + 1)"><el-table :data="tab.selectedDetails" border style="width: 100%"><el-table-column prop="productName" label="产品名称" width="150"></el-table-column><el-table-column prop="quantity" label="数量" width="100"><template slot-scope="scope"><el-input-numberv-model="scope.row.quantity":min="0"@change="handleSelectedQuantityChange(tab, scope.row)"></el-input-number></template></el-table-column><el-table-column prop="price" label="单价" width="100"></el-table-column><el-table-column prop="total" label="总价" width="100"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="danger"size="mini"@click="handleRemoveSelectedRow(tab, scope.$index)">删除</el-button></template></el-table-column></el-table><el-row><el-col :span="12"><el-select v-model="selectedProduct" placeholder="选择产品"><el-optionv-for="product in orderDetails":key="product.productName":label="product.productName":value="product.productName"></el-option></el-select></el-col><el-col :span="12"><el-input-number v-model="selectedQuantity" :min="0" placeholder="输入数量"></el-input-number></el-col><el-button type="primary" @click="handleAddSelectedRow(splitTabs[activeTabIndex])">添加明细</el-button></el-row></el-tab-pane></el-tabs><el-button type="primary" @click="handleAddTab">添加拆单Tab</el-button></div>
</template><script>
export default {data() {return {orderDetails: [{productName: '产品A',quantity: 10,price: 100,total: 1000},{productName: '产品B',quantity: 5,price: 200,total: 1000},{productName: '产品C',quantity: 8,price: 150,total: 1200}],splitTabs: [{selectedDetails: []}],activeTabIndex: 0,selectedProduct: '',selectedQuantity: 0}},methods: {handleAddTab() {this.splitTabs.push({selectedDetails: []});},handleTabRemove(targetName) {const index = this.splitTabs.findIndex(tab => tab.label === targetName);if (index!== -1) {this.splitTabs.splice(index, 1);if (this.activeTabIndex === index && this.splitTabs.length > 0) {this.activeTabIndex = Math.min(this.activeTabIndex, this.splitTabs.length - 1);}}},handleAddSelectedRow(tab) {const product = this.orderDetails.find(item => item.productName === this.selectedProduct);if (product) {tab.selectedDetails.push({...product,quantity: this.selectedQuantity});this.selectedProduct = '';this.selectedQuantity = 0;}},handleRemoveSelectedRow(tab, rowIndex) {const removedRow = tab.selectedDetails[rowIndex];this.returnQuantityToOriginal(removedRow);tab.selectedDetails.splice(rowIndex, 1);},handleQuantityChange(row) {const currentQuantity = row.quantity;const index = this.orderDetails.findIndex(item => item.productName === row.productName);if (index!== -1) {this.orderDetails[index].quantity = currentQuantity;}},handleSelectedQuantityChange(tab, row) {const currentQuantity = row.quantity;const sourceIndex = this.orderDetails.findIndex(item => item.productName === row.productName);if (sourceIndex!== -1) {const quantityDiff = this.orderDetails[sourceIndex].quantity - currentQuantity;this.orderDetails[sourceIndex].quantity = currentQuantity;this.updateQuantityInTabs(tab, row.productName, quantityDiff);}},updateQuantityInTabs(tab, productName, quantityDiff) {tab.selectedDetails.forEach(item => {if (item.productName === productName) {item.quantity += quantityDiff;}});},returnQuantityToOriginal(removedRow) {const index = this.orderDetails.findIndex(item => item.productName === removedRow.productName);if (index!== -1) {this.orderDetails[index].quantity += removedRow.quantity;}}}
}
</script>