设备管理页面接口测试

src/api/system/device.js

+import request from '@/utils/request'
+// import Qs from 'qs'
+
+// 查询设备列表
+export function listDevice(query) {
+  return request({
+    url: '/nltdevice/queryNltDeviceByPagination',
+    method: 'get',
+    params: query
+  })
+}

src/views/system/device/index.vue

@@ -47,7 +47,7 @@
             class="filter-item"
             type="primary"
             size="small"
-            @click="getDevTable"
+            @click="handleQuery"
           >查询 Query</el-button>
           <el-button type="primary" size="small" @click="resetQuery">重置 Reset</el-button>
         </el-form-item>
@@ -71,7 +71,7 @@
       >
         <el-table-column type="selection" width="55" />
         <el-table-column type="index" label="序号" width="50" />
-        <el-table-column align="center" prop="deviceNum">
+        <el-table-column align="center" prop="deviceCode">
           <template slot="header">
             <div>设备编号</div>
             <div>Equipment No</div>
@@ -88,6 +88,9 @@
             <div>设备类型</div>
             <div>Equipment Type</div>
           </template>
+          <template slot-scope="scope">
+            <span>{{scope.row.deviceType === 0 ? '生产设备' : '扫描设备'}}</span>
+          </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" align="center" prop="createDate" width="200">
           <template slot="header">
@@ -98,7 +101,7 @@
             <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="center" prop="operator">
+        <el-table-column align="center" prop="updateBy">
           <template slot="header">
             <div>操作人</div>
           </template>
@@ -141,6 +144,13 @@
         </el-table-column>
       </el-table>
     </div>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getDevTable"
+    />
     <!--    添加或修改设备信息对话框-->
     <el-dialog class="deviceDialog" title="设备信息" :visible.sync="open" width="60%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
@@ -213,6 +223,8 @@
 </template>
 
 <script>
+import { listDevice } from '@/api/system/device'
+
 export default {
   name: 'Index',
   data() {
@@ -221,25 +233,32 @@ export default {
       showSearch: true,
       // 查询参数
       queryParams: {
+        page: 1,
+        rows: 10,
         deviceName: undefined,
-        type: undefined,
+        deviceType: '2',
         deviceNum: undefined
       },
       // 查询数据字典
-      typeOptions: [],
-      // 显示弹出层标志
-      open: false,
-      // 表格数据
-      deviceList: [
+      typeOptions: [
+        {
+          dictLabel: '生产设备',
+          dictValue: '0'
+        },
+        {
+          dictLabel: '扫描设备',
+          dictValue: '1'
+        },
         {
-          deviceNum: '1111',
-          deviceName: 'test',
-          deviceType: '',
-          createDate: new Date(),
-          operator: '张三',
-          flag: '1'
+          dictLabel: '全部',
+          dictValue: '2'
         }
       ],
+      // 显示弹出层标志
+      open: false,
+      // 表格数据
+      deviceList: [],
+      total: 0,
       // 加载遮罩
       Loading: false,
       // 表单参数
@@ -258,10 +277,25 @@ export default {
       }
     }
   },
+  created() {
+    this.getDevTable()
+  },
   methods: {
     /** 查询设备表方法 **/
-    getDevTable() {},
-    // 重置方法
+    getDevTable() {
+      this.loading = true
+      listDevice(this.queryParams).then(response => {
+        this.deviceList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /** 查询按钮方法 **/
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getDevTable()
+    },
+    /** 重置方法 **/
     resetQuery() {
       this.queryParams.deviceName = undefined
       this.queryParams.type = undefined