# up device_id search

src/views/counter/device.vue

@@ -1,8 +1,23 @@
 <template>
   <div class="app-container">
-    <p class="warn-content">
-      无线智能设备信息表
-    </p>
+    <el-form :inline="true" :model="DeviceSearchForm" @submit.native.prevent>
+      <el-form-item
+        prop="device_id"
+      >
+        <el-input
+          size="mini"
+          type="text"
+          v-model="DeviceSearchForm.device_id"
+          style="width: 10rem"
+          auto-complete="off"
+          @keyup.enter.native="onSubmit"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
+        <el-button size="mini" @click="resetSearch">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       v-loading="listLoading"
       :data="deviceList"
@@ -65,24 +80,29 @@ export default {
   data() {
     return {
       deviceList: [],
-      listLoading: true
+      listLoading: true,
+      DeviceSearchForm: {
+        device_id: null,
+        status: null
+      }
     }
   },
   methods: {
-    getDevices() {
-      fetchDeviceList().then(response => {
+    getDevices(params) {
+      fetchDeviceList(params).then(response => {
         this.deviceList = response.data.results
         console.log(this.deviceList)
         this.listLoading = false
       })
+    },
+    onSubmit() {
+      const device_id = this.DeviceSearchForm.device_id
+      this.getDevices({ device_id })
+    },
+    resetSearch() {
+      this.DeviceSearchForm.device_id = ''
+      this.getDevices()
     }
-    // handleStatusStyle({ row, column, rowIndex, columnIndex }) {
-    //   if (rowIndex === 1 && columnIndex === 1) {
-    //     return 'color: #67C23A'
-    //   } else {
-    //     return ''
-    //   }
-    // }
   },
   created() {
     this.getDevices()
@@ -94,10 +114,6 @@ export default {
 </script>
 
 <style lang="scss">
-  .device-online {
-    color: #67C23A
-  }
-  .device-offline {
-    color: #F56C6C
+  .search-input {
   }
 </style>