修改页面

src/components/SelectMaterial/index.vue

@@ -9,10 +9,10 @@
         </el-button>
       </el-form-item>
     </el-form>
-    <el-table v-loading="loading" :data="materialList" ref="table" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+    <el-table ref="multipleTable" v-loading="loading" :data="materialList" @selection-change="handleSelectionChange" :row-key="getRowKey">
+      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
       <el-table-column label="原料名称" align="center" prop="name" />
-      <el-table-column label="原料数量" align="center" prop="quantity">
+      <el-table-column label="原料数量" align="center">
         <template slot-scope="scope">
           <div style="display: flex;align-items: center;">
             <el-input v-model="scope.row.quantity" placeholder="请输入原料数量" />
@@ -23,9 +23,15 @@
         </template>
       </el-table-column>
     </el-table>
-
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="getList" />
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="queryParams.pageNum"
+      :page-sizes="[10, 20, 30, 40,50]"
+      :page-size="queryParams.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
@@ -45,10 +51,10 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
+      // // 非单个禁用
+      // single: true,
+      // // 非多个禁用
+      // multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 总条数
@@ -61,13 +67,56 @@ export default {
         pageSize: 10,
         name: null,
         state: 1,
-      },
+      }
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleCurrentChange(val){
+      this.queryParams.pageNum=val;
+      this.queryParams.pageSize=10;  
+      listMaterial(this.queryParams).then((response) => {
+        this.materialList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        if(this.ids.length>0){
+          for(let i=0;i<this.ids.length;i++){
+            for(let j=0;j<this.materialList.length;j++){
+              if(this.ids[i].quantity!=""){
+                if(this.ids[i].id==this.materialList[j].id){
+                  this.materialList[j].quantity=this.ids[i].quantity
+                }
+              }
+            }
+          }
+        }
+      });
+    },
+    handleSizeChange(val){
+      this.queryParams.pageSize=val;
+      this.queryParams.pageNum=1; 
+      listMaterial(this.queryParams).then((response) => {
+        this.materialList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        if(this.ids.length>0){
+          for(let i=0;i<this.ids.length;i++){
+            for(let j=0;j<this.materialList.length;j++){
+              if(this.ids[i].quantity!=""){
+                if(this.ids[i].id==this.materialList[j].id){
+                  this.materialList[j].quantity=this.ids[i].quantity
+                }
+              }
+            }
+          }
+        }
+      });
+    },
+    getRowKey(row){
+      return row.id
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -78,23 +127,37 @@ export default {
       });
     },
     openModal() {
-      this.getList()
+      this.getList();
       this.open = true;
     },
     // 取消按钮
     cancel() {
+      this.$refs.multipleTable.clearSelection();
       this.open = false;
     },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
-      this.getList();
+      listMaterial(this.queryParams).then((response) => {
+        this.materialList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        if(this.ids.length>0){
+          for(let i=0;i<this.ids.length;i++){
+            for(let j=0;j<this.materialList.length;j++){
+              if(this.ids[i].quantity!=""){
+                if(this.ids[i].id==this.materialList[j].id){
+                  this.materialList[j].quantity=this.ids[i].quantity
+                }
+              }
+            }
+          }
+        }
+      });
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange(selection) {       
       this.ids = selection;
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
     },
     /** 提交按钮 */
     submitForm() {
@@ -123,7 +186,7 @@ export default {
             return item;
           })
         );
-        this.$refs.table.clearSelection();
+        this.$refs.multipleTable.clearSelection();
         this.open = false;
       }
     },

src/views/order/order/index.vue

@@ -67,7 +67,7 @@
       </el-table-column>      
       <el-table-column width="200" label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-           <el-button size="mini" type="text" v-if="authBtn(['2','3','4','5','6','7','13'], scope.row.state)"
+           <el-button size="mini" type="text" v-if="authBtn(['2','3','4','5','6','7','10','13'], scope.row.state)"
             @click="refundClick(scope.row)"  v-hasPermi="['system:order:refund']">退款</el-button>      
         </template>
       </el-table-column>