监控管理绑定摄像头

src/views/storeManage/listenManage/module/bindCamera.vue

@@ -18,7 +18,7 @@
             </el-select>
           </p>
         </div>
-        <el-table ref="table" :data="tableData" style="width: 100%;" height="calc(100vh - 556px)" @row-click="clickRowHandler">
+        <el-table ref="table" v-loading="loading" :data="tableData" style="width: 100%;" height="calc(100vh - 556px)" @row-click="clickRowHandler">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column type="index" label="序号" width="80" align="center" />
           <el-table-column prop="storeroomId.name" label="所属区域" min-width="150" align="center" />
@@ -26,7 +26,7 @@
           <el-table-column prop="deviceName" label="设备名称" align="center" min-width="150" />
         </el-table>
         <!-- 分页器 -->
-        <pagination />
+        <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" />
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="handleSave">保存</el-button>
         </div>
@@ -37,23 +37,9 @@
 </template>
 
 <script>
-// import data1 from './data1'
 // import { getAllDevice } from '@/api/storeManage/listenManage'
 import { getDeviceList } from '@/api/storeManage/deviceManage/device'
-
-import pagination from '@crud/Pagination'
-import CRUD, { presenter } from '@crud/crud'
-
 export default {
-  components: { pagination },
-  mixins: [presenter()],
-  cruds() {
-    return CRUD({
-      url: 'api/alarmlog/',
-      sort: ['state'],
-      optShow: {}
-    })
-  },
   data() {
     return {
       tableData: [],
@@ -65,12 +51,15 @@ export default {
         { value: 1, label: '事件触发前后10秒' },
         { value: 2, label: '事件触发前后20秒' },
         { value: 3, label: '事件触发前后30秒' }
-      ]
+      ],
+      page: {
+        size: 10,
+        total: 0,
+        page: 1
+      },
+      loading: false
     }
   },
-  // created() {
-  //   this.tableData = data1.rows
-  // },
   methods: {
     handleSave() {
       this.bindVisible = false
@@ -93,9 +82,27 @@ export default {
       })
     },
     getAllCamera() {
-      getDeviceList({ deviceTypeId: '7305DE3D273B0CAC079538' }).then((values) => {
-        this.tableData.splice(0, this.tableData.length, ...values.content)
+      this.loading = true
+      getDeviceList({ deviceTypeId: '7305DE3D273B0CAC079538' }).then((data) => {
+        this.loading = false
+        this.page.total = data.totalElements !== null ? data.totalElements : data.length
+        if (this.page.total > 0) {
+          this.tableData.splice(0, this.tableData.length, ...data.content)
+        } else {
+          this.tableData.splice(0, this.tableData.length)
+        }
       })
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      this.page.page = e
+      this.getAllCamera()
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      this.page.size = e
+      this.page.page = 1
+      this.getAllCamera()
     }
   }
 }