提交

src/api/device/configuration.js

@@ -0,0 +1,2 @@
+// 开关机配置的接口
+import request from '@/utils/request'

src/api/device/deviceList.js

@@ -0,0 +1,29 @@
+// 设备列表的管理接口
+import request from '@/utils/request'
+
+export function ReqDeviceList(page, size) {
+    return request({
+        url: `api/device/list?page=${page}&size=${size}`,
+        method: 'get',
+    })
+}
+// &device_id=${device_id}
+
+
+// 编辑设备发起请求
+export function ReqDeviceEdit(parameter) {
+    return request({
+        url: '/api/device/save',
+        method: 'post',
+        data: parameter
+    })
+}
+
+// 根据id查询设备
+export function ReqQueryDevice(parameter) {
+    return request({
+        url: 'api/device/findById',
+        method: 'get',
+        data: parameter
+    })
+}

src/store/modules/device.js

@@ -0,0 +1,23 @@
+import { ReqDeviceList, ReqDeviceEdit } from '@/api/device/deviceList'
+const device = {
+    state: {
+        deviceList: []
+
+    },
+    mutations: {
+        GETDEVICELIST: (state, deviceList) => {
+            state.deviceList = deviceList
+        }
+    },
+    actions: {
+        //获取设备列表的信息
+        async getDeviceList({ commit }, { page, size }) {
+            let result = await ReqDeviceList(page, size)
+            if (result.code == 200) {
+                commit('GETDEVICELIST', result.data.content)
+            }
+        },
+    },
+}
+
+export default device

src/views/device/index.vue

@@ -15,31 +15,30 @@
               />
             </el-select>
           </div>
+           <!-- @keyup.enter.native="crud.toQuery" -->
           <div class="form_item">
             <span>设备ID：</span>
             <el-input
-              v-model="query.blurry"
+              v-model="query.device_id"
               clearable
               size="small"
               placeholder="请输入设备ID"
               style="width: 200px"
               class="filter-item" 
-              @keyup.enter.native="crud.toQuery"
+              @keyup.enter.native='queryDevice(query.device_id)'
             />
           </div>
           <div class="form_item">
             <span>设备名称：</span>
             <el-input
-              v-model="query.blurry"
+              v-model="query.name"
               clearable
               size="small"
               placeholder="请输入设备名称"
               style="width: 200px"
               class="filter-item"        
-              @keyup.enter.native="crud.toQuery"
             />
           </div>
-          <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
           <el-button class="table_add clear_btn" plain disabled>清空</el-button>
@@ -51,15 +50,20 @@
       <el-col>
         <el-table
           style="width: 100%;"
-          :data="tableData"
+          :data="deviceList"
           :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
         >
-          <el-table-column :selectable="checkboxT" type="selection" width="55" />
-          <el-table-column prop="id" label="设备ID" align="center" />
-          <el-table-column prop="account" label="设备账号" align="center" />
-          <el-table-column prop="name" label="设备名称" align="center" />
-          <el-table-column prop="orientation" label="设备方向" align="center" />
-          <el-table-column prop="organization" label="所属机构" align="center" />
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="device_id" label="设备ID" align="center" />
+          <el-table-column prop="device_account" label="设备账号" align="center" />
+          <el-table-column prop="device_name" label="设备名称" align="center" />
+          <el-table-column label="设备方向" align="center" >
+          <template slot-scope="{row}">
+              <div>{{row.device_direction ? '竖屏' : '横屏' }}</div>
+            </template>
+            </el-table-column>
+          <el-table-column prop="organ_name" label="所属机构" align="center"/> >
+           
           <el-table-column prop="isDel" label="设备状态" align="center">
             <template slot-scope="scope">
               <div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
@@ -70,20 +74,18 @@
               <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
             </template>
           </el-table-column>
-          <el-table-column prop="date" label="创建时间" align="center" width="160" />
+          <el-table-column prop="create_time" label="创建时间" align="center" width="160" />
           <el-table-column fixed="right" label="操作" align="center" width="120">
             <template slot-scope="scope">
               <el-button
                 type="primary"
                 class="edit_btn"
-                @click="editFormData(scope.$index, scope.row)"
+                @click="editFormData(scope.row)"
               >编辑</el-button>
               <el-button type="danger" class="record_btn" @click="recordData(scope.$index, scope.row)">记录</el-button>
             </template>
           </el-table-column>
         </el-table>
-        <!--分页组件-->
-        <pagination />
       </el-col>
     </el-row>
     <!-- 编辑设备 -->
@@ -187,60 +189,68 @@
 </template>
 
 <script>
-import crudUser from '@/api/system/user'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import pagination from '@crud/Pagination'
-const defaultForm = {
-  account: null,
-  name: null,
-  orientation: null
-}
+import { ReqDeviceEdit } from '@/api/device/deviceList.js'
+import {mapState} from 'vuex'
+import {parseTime} from '@/utils/index.js'
 export default {
   name: 'Device',
-  components: { rrOperation, pagination },
-  cruds() {
-    return CRUD({
-      title: '用户',
-      url: 'api/users',
-      crudMethod: { ...crudUser }
-    })
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {   
+      page:'1',
+      size:'3', 
+      // device_id:'',
       dialogTitle: '',
+      // 编辑的对话框
       addFromVisible: false,
       contentVisible: false,
       recordVisible: false,
-      tableData: [
-        {
-          id: 'XXXXXXXXX',
-          account: '13476289682',
-          name: 'GCXR2',
-          orientation: '竖屏',
-          organization: 'xx图书馆',
-          content: '',
-          date: '2021-09-14 16:35'
-        }
-      ],
+   
       stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
       deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
+      query:{
+        state:null,
+        name:null,
+        device_id:'',
+      },
+      form: {
+       account: null,
+       name: null,
+       orientation: null,
+       device_id:'',
+       orga_id:''
+     },
       rules: {
         name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
         orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
       }
     }
   },
-  computed: {},
   watch: {},
+  mounted(){
+     this.getDevice()
+  },
+  computed:{
+     ...mapState({
+       deviceList:(state)=>state.device.deviceList
+     })
+  },
   methods: {
+    // 获取设备列表的数据
+    getDevice(){  
+      const{page,size}=this
+      this.$store.dispatch('getDeviceList',{page,size}) 
+    },
     // 编辑
-    editFormData(index, row) {
-      this.dialogTitle = '编辑设备'
+    editFormData(row) {
       this.addFromVisible = true
-      this.form.account = row.account
-      this.form.name = row.name
+      this.form.account = row.device_account
+      this.form.name=row.device_name
+      this.form.orientation=row.device_direction ? '竖屏' : '横屏' 
+      this.form.device_id=row.device_id     
+      // console.log(id)
+      // ReqDeviceEdit(params).then(res => {
+      //   console.log(res)
+      // })
     },
     recordData(index, row) {
       this.recordVisible = true
@@ -250,15 +260,35 @@ export default {
       console.log(row)
       this.contentVisible = true
     },
+    // 修改设备信息并提交
     submitForm(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          alert('submit!')
+       const params = {
+        account:this.form.account,
+        device_name:this.form.name,
+        device_direction:this.form.orientation, 
+        device_id:this.form.device_id
+      }
+      // console.log(account,device_name,device_direction)
+      console.log(params)
+      ReqDeviceEdit(params).then(res => {
+        console.log(res)
+      })
         } else { 
           console.log('error submit!!')
           return false
         }
       })
+    },
+    // 查询设备
+    queryDevice(id){
+      const params={
+        device_id:id
+      }
+      ReqQueryDevice(params).then(res=>{
+        console.log(res)
+      })
     }
   }
 }