优化操作出入库耗材多选

src/views/invoicing/components/consumableList.vue

@@ -17,7 +17,8 @@
             </el-form-item>
         </el-form>
         <div class="head-container">
-            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
+            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading" @select="firstSelectChange">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
                 <el-table-column label="耗材名称" prop="conName"></el-table-column>
                 <el-table-column label="价格" prop="price"></el-table-column>
                 <el-table-column label="耗材代码" prop="conCode"></el-table-column>
@@ -29,16 +30,20 @@
                         {{ formatDecimal(scope.row.stockNumber - scope.row.stockConsume, 2, true) }}
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" fixed="right">
+                <!-- <el-table-column label="操作" fixed="right">
                     <template v-slot="scope">
                         <el-button type="primary" size="mini" @click="confirmHandle(scope.row)">选择</el-button>
                     </template>
-                </el-table-column>
+                </el-table-column> -->
             </el-table>
         </div>
         <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
             @current-change="paginationChange" @size-change="sizeChange"
             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="confirmHandle">确 定</el-button>
+        </span>
     </el-dialog>
 </template>
 
@@ -71,9 +76,18 @@ export default {
         this.resetSearchForm = { ...this.searchForm }
     },
     methods: {
+        firstSelectChange() {
+            // console.log(selection)
+            let selection = this.$refs.table.selection
+            if (selection.length > 1 && this.isselect) {
+                const del_row = selection.shift();
+                this.$refs.table.toggleRowSelection(del_row, false);
+            }
+        },
         // 确定选商品
-        confirmHandle(row) {
-            this.$emit('success', row)
+        confirmHandle() {
+            let res = this.$refs.table.selection
+            this.$emit('success', res)
             this.close()
         },
         // 重置查询
@@ -120,9 +134,25 @@ export default {
         },
         show(goods) {
             this.dialogVisible = true
+            if (goods && goods.length) {
+                this.goods = goods
+            } else {
+                this.goods = []
+            }
+            this.resetHandle()
+            this.getTableData()
         },
         close() {
             this.dialogVisible = false
+        },
+        selection() {
+            this.goods.forEach(row => {
+                this.tableData.list.forEach((item, index) => {
+                    if (row.id == item.id) {
+                        this.$refs.table.toggleRowSelection(this.tableData.list[index]);
+                    }
+                })
+            });
         }
     }
 }