典型工艺维护：分页

src/api/ManufacturingCenter/TypicalProcessMaintenance.js

@@ -23,14 +23,15 @@ export function getPartsName(num) {
   })
 }
 
-export function getTableData(partsCategoriesCheck, partsCategories, partsNameCheck, partsName) {
+export function getTableData(pageCurrent, pageSize, partsCategoriesCheck, partsCategories, partsNameCheck, partsName) {
   return request({
     url: '',
     method: 'post',
     data: {
       type: '1',
       name: '车间生产管理工艺_基础表_典型工艺名称_查询数据_综合查询',
-      param: `典型工艺名称分类流水号_check=${partsCategoriesCheck}&典型工艺名称分类流水号=${partsCategories}&典型工艺流水号_check=${partsNameCheck}&典型工艺流水号=${partsName}&典型工艺流水号1_check=0`
+      param: `典型工艺名称分类流水号_check=${partsCategoriesCheck}&典型工艺名称分类流水号=${partsCategories}&典型工艺流水号_check=${partsNameCheck}&典型工艺流水号=${partsName}&典型工艺流水号1_check=0`,
+      Pagination: pageCurrent + '&' + pageSize
     }
   })
 }

src/views/ManufacturingCenter/TypicalProcessMaintenance/index.vue

@@ -2,38 +2,36 @@
 <template>
   <div class="app-container">
     <el-card>
-      <div style="margin-top: -10px;">
+      <span>零件分类:</span>
-        <el-row>
+      <el-select v-model="partsCategoriesValue" size="small" filterable clearable placeholder="零件分类" @change="getPartsName">
-          <span>零件分类:</span>
+        <el-option
-          <el-select v-model="partsCategoriesValue" size="small" filterable clearable placeholder="零件分类" @change="getPartsName">
+          v-for="item in partsCategories"
-            <el-option
+          :key="item.value"
-              v-for="item in partsCategories"
+          :label="item.label"
-              :key="item.value"
+          :value="item.value"/>
-              :label="item.label"
+      </el-select>
-              :value="item.value"/>
+      <span>零件名称:</span>
-          </el-select>
+      <el-select v-model="partsNameValue" size="small" filterable clearable placeholder="零件名称" @change="getTableData" >
-
+        <el-option
-          <span>零件名称:</span>
+          v-for="item in partsName"
-          <el-select v-model="partsNameValue" size="small" filterable clearable placeholder="零件名称" @change="getTableData" >
+          :key="item.value"
-            <el-option
+          :label="item.label"
-              v-for="item in partsName"
+          :value="item.value"/>
-              :key="item.value"
+      </el-select>
-              :label="item.label"
+      <span>典型工艺号:</span>
-              :value="item.value"/>
+      <el-input v-model="typicalNumValue" auto-complete="off" style="width: 100px" size="small" readonly/>
-          </el-select>
+      <el-button size="small" type="success" icon="el-icon-search" style="margin-left: 10px" @click="total=0;pageCurrent=1;pageSize=20;getTableData()">查询</el-button>
-
+      <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="addTableData">增加</el-button>
-          <span>典型工艺号:</span>
+      <el-button size="small" type="warning" icon="el-icon-menu" style="margin-left: 10px" @click="editConfirm">保存</el-button>
-          <el-input v-model="typicalNumValue" auto-complete="off" style="width: 200px" size="small" />
-          <el-button size="small" type="primary" icon="el-icon-search" style="margin: 10px 0 0 10px" @click="getTableData">查询</el-button>
-          <el-button size="small" type="info" icon="el-icon-circle-plus-outline" style="margin: 10px 0 0 10px" @click="addTableData">增加</el-button>
-          <el-button size="small" type="success" icon="el-icon-cjn-09" style="margin: 10px 0 0 10px" @click="editConfirm">保存</el-button>
-        </el-row>
-      </div>
     </el-card>
 
     <el-card>
       <el-table v-loading="loading" :data="tableData" border style="width: 100%;max-height: 550px;" size="mini" height="550px">
-        <el-table-column prop="num" label="序号" width="50" align="center" type="index"/>
+        <el-table-column prop="num" label="序号" width="50" align="center" type="index">
+          <template slot-scope="scope">
+            {{ scope.row.工艺序号 }}
+          </template>
+        </el-table-column>
         <el-table-column prop="name" label="工艺名称" width="230" align="center">
           <template slot-scope="scope">
             <el-input
@@ -66,12 +64,12 @@
         </el-table-column>
         <el-table-column prop="name" label="单件" align="center">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.单件定额工时" style="width:90px" placeholder="单件定额"/>
+            <el-input v-model="scope.row.单件定额工时" size="mini" style="width:90px" placeholder="单件定额"/>
           </template>
         </el-table-column>
         <el-table-column prop="name" label="准结" align="center">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.准结定额工时" style="width:90px" placeholder="准结定额"/>
+            <el-input v-model="scope.row.准结定额工时" size="mini" style="width:90px" placeholder="准结定额"/>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="300" align="center" fixed="right">
@@ -101,6 +99,16 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="block" style="margin-top: 10px;">
+        <el-pagination
+          :current-page="pageCurrent"
+          :page-sizes="[20, 30, 40, 50]"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"/>
+      </div>
     </el-card>
 
     <el-dialog :visible.sync="dialogFormVisible" title="工艺名称、工艺要求选择" center width="400px">
@@ -145,6 +153,9 @@ import { getPartsCategories, getPartsName, getTableData, upMove, downMove, deleR
 export default {
   data() {
     return {
+      pageCurrent: 1,
+      pageSize: 20,
+      total: 0,
       partsCategories: [],
       partsCategoriesCheck: null,
       partsCategoriesValue: '',
@@ -181,7 +192,7 @@ export default {
       getPartsName(this.partsCategoriesValue).then(res => {
         const data = res.data
         data.length > 0 ? this.partsNameValue = data[0].典型工艺流水号 : this.partsNameValue = ''
-        this.typicalNumValue = data[0].典型工艺号
+        this.typicalNumValue = data.length > 0 ? data[0].典型工艺号 : ''
         data.map(item => {
           this.partsName.push({
             label: item.典型工艺名称,
@@ -193,11 +204,25 @@ export default {
     getTableData() {
       this.partsCategoriesValue ? this.partsCategoriesCheck = 1 : this.partsCategoriesCheck = 0
       this.partsNameValue ? this.partsNameCheck = 1 : this.partsNameCheck = 0
-      this.loading = true
+      if (this.partsCategoriesCheck === 0 && this.partsNameCheck === 0) {
-      getTableData(this.partsCategoriesCheck, this.partsCategoriesValue, this.partsNameCheck, this.partsNameValue).then(res => {
+        this.$message.error('请选择查询条件')
-        this.loading = false
+      } else {
-        this.tableData = res.data
+        this.loading = true
-      })
+        getTableData(this.pageCurrent, this.pageSize, this.partsCategoriesCheck, this.partsCategoriesValue, this.partsNameCheck, this.partsNameValue).then(res => {
+          this.loading = false
+          this.tableData = res.data.rows
+          this.total = res.data.total
+        })
+      }
+    },
+    handleSizeChange(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.getTableData()
+    },
+    handleCurrentChange(val) {
+      this.pageCurrent = val
+      this.getTableData()
     },
     upMove(row) {
       upMove(row.典型工艺流水号, row.典型工艺工序流水号).then(res => {
@@ -234,7 +259,7 @@ export default {
           if (res.data[0].result === '1') {
             index++
           } else {
-            this.$message.error('零件保存失败')
+            this.$message.error('零件工艺保存失败')
           }
           if (index === this.tableData.length) {
             this.$message.success('保存修改成功')
@@ -302,4 +327,7 @@ export default {
 span{
   margin: 20px;
 }
+  .el-card{
+    margin-bottom: 15px;
+  }
 </style>