no message

src/api/deviceWithStatus.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function fetchList(query) {
     return request({
-        url: '/ncjtEntranceGuard/getDeviceIdentityPageList',
+        url: '/ncjtEntranceGuard/getDevicePageList',
         method: 'get',
         params: query
     })
@@ -32,10 +32,10 @@ export function deletePowers(data) {
     })
 }
 
-export function searchList(data) {
+export function searchList(query) {
     return request({
-        url: '/ncjtEntranceGuard/addDevice',
+        url: '/ncjtEntranceGuard/getDevicePageListByParams',
         method: 'post',
-        data
+        params: query
     })
 }

src/api/devicemanagement.js

@@ -18,24 +18,17 @@ export function createDevice(data) {
 
 export function updateDevice(data) {
   return request({
-    url: '/vue-element-admin/article/update',
+    url: '/ncjtEntranceGuard/updateDevice',
     method: 'post',
     data
   })
 }
 
-export function deletDevice(data) {
+export function deletDevice(query) {
   return request({
-    url: '/vue-element-admin/article/pv',
+    url: '/ncjtEntranceGuard/deleteDeviceById',
     method: 'get',
-    data
+    params: query
   })
 }
 
-export function fetchDevice(id) {
-  return request({
-    url: '/vue-element-admin/article/detail',
-    method: 'get',
-    params: { id }
-  })
-}

src/api/devicewithgroup.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function fetchList(query) {
     return request({
-        url: '/ncjtEntranceGuard/getDeviceGroupPageList',
+        url: '/ncjtEntranceGuard/getDevicePageList',
         method: 'get',
         params: query
     })
@@ -40,10 +40,10 @@ export function deleteGroups(data) {
     })
 }
 
-export function searchList(data) {
+export function searchList(query) {
     return request({
-        url: '/ncjtEntranceGuard/addDevice',
+        url: '/ncjtEntranceGuard/getDevicePageListByParams',
         method: 'post',
-        data
+        params: query
     })
 }

src/api/groupmanagement.js

@@ -18,7 +18,7 @@ export function createGroup(data) {
 
 export function deletGroup(query) {
   return request({
-    url: '/ncjtEntranceGuard/getUserByGroupId',
+    url: '/ncjtEntranceGuard/deleteGroupById',
     method: 'get',
     params: query
   })
@@ -26,7 +26,7 @@ export function deletGroup(query) {
 
 export function updateGroup(data) {
   return request({
-    url: '/vue-element-admin/article/update',
+    url: '/ncjtEntranceGuard/updateGroup',
     method: 'post',
     data
   })

src/api/index.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function fetchList(query) {
   return request({
-    url: '/ncjtEntranceGuard/getTrafficRecordViewPageList',
+    url: '/ncjtEntranceGuard/getDevicePageList',
     method: 'get',
     params: query
   })

src/api/userWithGroup.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function fetchUserList(query) {
     return request({
-        url: '/ncjtEntranceGuard/getUserGroupPageList',
+        url: '/ncjtEntranceGuard/getUserPageList',
         method: 'get',
         params: query
     })
@@ -40,10 +40,10 @@ export function deleteGroups(data) {
     })
 }
 
-export function searchList(data) {
+export function searchList(query) {
     return request({
-        url: '/ncjtEntranceGuard/addDevice',
+        url: '/ncjtEntranceGuard/getUserPageListByParams',
         method: 'post',
-        data
+        params: query
     })
 }

src/api/usermanagement.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/ncjtEntranceGuard/getUserPageList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function createUser(data) {
+  return request({
+    url: '/ncjtEntranceGuard/addUser',
+    method: 'post',
+    data
+  })
+}
+
+export function deletUser(query) {
+  return request({
+    url: '/ncjtEntranceGuard/deleteUserById',
+    method: 'get',
+    params: query
+  })
+}
+
+export function updateUser(data) {
+  return request({
+    url: '/ncjtEntranceGuard/updateUser',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -84,6 +84,19 @@ export const constantRoutes = [
     ]
   },
   {
+    path: '/groupManagement',
+    component: Layout,
+    redirect: '/groupManagement/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/groupManagement/index'),
+        name: 'groupManagement',
+        meta: { title: '分组管理', icon: '分组管理', noCache: true }
+      }
+    ]
+  },
+  {
     path: '/deviceManagement',
     component: Layout,
     children: [
@@ -96,15 +109,15 @@ export const constantRoutes = [
     ]
   },
   {
-    path: '/groupManagement',
+    path: '/userManagement',
     component: Layout,
-    redirect: '/groupManagement/index',
+    redirect: '/userManagement/index',
     children: [
       {
         path: 'index',
-        component: () => import('@/views/groupManagement/index'),
-        name: 'groupManagement',
-        meta: { title: '分组管理', icon: '分组管理', noCache: true }
+        component: () => import('@/views/userManagement/index'),
+        name: 'userManagement',
+        meta: { title: '用户管理', icon: 'table', noCache: true }
       }
     ]
   },
@@ -130,7 +143,7 @@ export const constantRoutes = [
         path: 'index',
         component: () => import('@/views/deviceWithStatus/index'),
         name: 'deviceWithStatus',
-        meta: { title: '设备添加身份权限', icon: 'tab', noCache: true }
+        meta: { title: '设备与身份绑定', icon: 'tab', noCache: true }
       }
     ]
   },

src/views/deviceManagement/index.vue

@@ -9,22 +9,9 @@
       <div class="head-info">设备管理</div>
     </div>
 
-    <!-- 开关按钮区域 -->
+    <!-- 添加按钮区域 -->
 
     <div class="switch">
-      所有设备
-      <div class="switch-sw">
-        <el-switch
-          v-model="value"
-          active-color="#3BAAFD"
-          inactive-color="#CCCCCC"
-          active-value="1"
-          inactive-value="0"
-          @change="changeMainSwitch"
-        >
-        </el-switch>
-      </div>
-
       <div class="switch-button">
         <el-row>
           <el-button type="primary" size="small" @click="handleCreate"
@@ -75,7 +62,7 @@
               inactive-color="#CCCCCC"
               :active-value="1"
               :inactive-value="0"
-              @change="changeSwitch(scope.row.status)"
+              @change="changeSwitch(scope.row)"
             >
             </el-switch>
           </template>
@@ -227,7 +214,6 @@ export default {
         page: 1, //当前在第几页//
         limit: 8, //一页几条//
       },
-      value: "1",
       dialogVisible: false,
       dialogStatus: "",
       textMap: {
@@ -273,7 +259,7 @@ export default {
     },
     handleDelete(row, index) {
       if (confirm("是否删除？")) {
-        deletDevice(this.list).then(() => {
+        deletDevice({ id: row.id }).then(() => {
           this.$notify({
             title: "删除成功",
             type: "success",
@@ -282,6 +268,7 @@ export default {
           this.list.splice(index, 1);
         });
       }
+      this.getList();
     },
     resetTemp() {
       this.temp = {
@@ -326,11 +313,12 @@ export default {
             this.$notify({
               title: "添加成功",
               type: "success",
-              duration: 2000,
+              duration: 1500,
             });
           });
         }
       });
+      this.getList();
     },
     updateData() {
       this.$refs["dataForm"].validate((valid) => {
@@ -343,25 +331,42 @@ export default {
             this.$notify({
               title: "编辑成功",
               type: "success",
-              duration: 2000,
+              duration: 1500,
             });
           });
         }
       });
     },
-    changeSwitch(status) {
-      console.log(status);
-      // this.list.status == 1 ? (this.list.status = 0) : (this.list.status = 1);
-      // console.log(this.list.status);
-    },
-    changeMainSwitch(value) {
-      console.log(value);
-      if (value == 0) {
-        if (confirm("确定关闭所有设备吗？")) {
-          alert("关闭所有设备");
-          // 执行关闭所有设备
-        } else {
-          this.value = "1";
+    changeSwitch(row) {
+      this.temp = Object.assign({}, row);
+      if (this.temp.status == 1) {
+        if (confirm("确定开启设备吗？")) {
+          updateDevice({ id: this.temp.id, status: this.temp.status }).then(
+            () => {
+              const index = this.list.findIndex((v) => v.id === this.temp.id);
+              this.list.splice(index, 1, this.temp);
+            }
+          );
+          this.$notify({
+            title: "开启成功",
+            type: "success",
+            duration: 1500,
+          });
+          this.value = 1;
+        }
+      } else {
+        if (confirm("确定关闭设备吗？")) {
+          updateDevice({ id: this.temp.id, status: this.temp.status }).then(
+            () => {
+              const index = this.list.findIndex((v) => v.id === this.temp.id);
+              this.list.splice(index, 1, this.temp);
+            }
+          );
+          this.$notify({
+            title: "关闭成功",
+            type: "success",
+            duration: 1500,
+          });
         }
       }
     },
@@ -405,14 +410,8 @@ export default {
     margin-left: 40px;
     font-size: 9px;
 
-    .switch-sw {
-      width: 45px;
-      margin-left: 19px;
-    }
-
     .switch-button {
       width: 50px;
-      margin-left: 103px;
 
       img {
         width: 10.5px;

src/views/deviceWithStatus/index.vue

@@ -6,26 +6,38 @@
       <div class="head-img">
         <img src="../../../public/images/img-1.png" />
       </div>
-      <div class="head-info">设备添加身份权限</div>
-      <div class="input">
+      <div class="head-info">设备与身份绑定</div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="form-head">
+      <span>序列号：</span>
+      <span class="input">
+        <el-input
+          v-model="listQuery.serialNumber"
+          placeholder="请输入序列号"
+          clearable
+          @clear="getList"
+          @keyup.enter.native="handleFilter"
+        >
+        </el-input>
+      </span>
+
+      <span>设备名称：</span>
+      <span class="input">
         <el-input
           v-model="listQuery.name"
-          size="small"
           placeholder="请输入设备名称"
           clearable
           @clear="getList"
           @keyup.enter.native="handleFilter"
         >
         </el-input>
-      </div>
+      </span>
 
-      <div class="input-serch">
-        <el-row>
-          <el-button size="small" type="primary" @click="handleFilter"
-            >搜索</el-button
-          >
-        </el-row>
-      </div>
+      <el-button type="primary" size="mini" class="button" @click="handleFilter"
+        >查询</el-button
+      >
     </div>
 
     <!-- 表格区域 -->
@@ -39,20 +51,20 @@
 
         <el-table-column label="名称" align="center" width="440px">
           <template slot-scope="{ row }">
-            <span>{{ row.deviceName }}</span>
+            <span>{{ row.name }}</span>
           </template>
         </el-table-column>
 
         <el-table-column label="操作" width="440px" align="center">
           <template slot-scope="{ row }">
             <el-button type="text" size="small" @click="checkPower(row)"
-              >查看当前权限</el-button
+              >查看当前身份</el-button
             >
             <el-button type="text" size="small" @click="bindPower(row)"
-              >添加权限</el-button
+              >添加身份</el-button
             >
             <el-button type="text" size="small" @click="unbindPower(row)"
-              >删除权限</el-button
+              >删除身份</el-button
             >
           </template>
         </el-table-column>
@@ -72,15 +84,15 @@
       </div>
     </div>
 
-    <!-- 查看权限弹窗区域 -->
+    <!-- 查看当前身份弹窗 -->
     <el-dialog
-      title="查看当前权限"
+      title="查看当前身份"
       :visible.sync="dialogCheckPowers"
       width="30%"
       center
     >
       <el-form>
-        <el-form-item label="已绑定权限：" class="switch-button-item">
+        <el-form-item label="已绑定身份：" class="switch-button-item">
           <span>
             <el-tag
               class="groupclass"
@@ -94,10 +106,10 @@
       </el-form>
     </el-dialog>
 
-    <!-- 添加权限弹窗区域 -->
+    <!-- 添加身份弹窗 -->
 
     <el-dialog
-      title="添加权限"
+      title="添加身份"
       :visible.sync="dialogBindPower"
       width="30%"
       center
@@ -110,7 +122,12 @@
           prop="groups"
         >
           <el-col :span="12">
-            <el-select v-model="temp.groups" multiple placeholder="请选择">
+            <el-select
+              v-model="temp.groups"
+              filterable
+              multiple
+              placeholder="请选择"
+            >
               <el-option
                 v-for="item in groupList"
                 :key="item.idIdentity"
@@ -129,9 +146,9 @@
       </span>
     </el-dialog>
 
-    <!-- 删除权限弹窗区域 -->
+    <!-- 删除身份弹窗 -->
     <el-dialog
-      title="解绑权限"
+      title="删除身份"
       :visible.sync="dialogUnbindPower"
       width="30%"
       center
@@ -175,10 +192,6 @@ export default {
     return {
       list: [],
       groupList: [
-        // { id: 1, value: "学生", label: "学生" },
-        // { id: 2, value: "老师", label: "老师" },
-        // { id: 3, value: "家长", label: "家长" },
-        // { id: 4, value: "临时人员", label: "临时人员" },
         { idIdentity: 0, identityName: "其它" },
         { idIdentity: 1, identityName: "学生" },
         { idIdentity: 4, identityName: "教职工" },
@@ -194,8 +207,9 @@ export default {
       total: 0, //数据的总数//
       listQuery: {
         page: 1, //当前在第几页//
-        limit: 100, //一页几条//
+        limit: 8, //一页几条//
         name: "",
+        serialNumber: "",
       },
       dialogBindPower: false,
       dialogUnbindPower: false,
@@ -231,7 +245,7 @@ export default {
     // },
     checkPower(row) {
       this.temp = Object.assign({}, row);
-      checkPowers({ deviceId: row.idDevice }).then((response) => {
+      checkPowers({ deviceId: row.id }).then((response) => {
         this.deviceWithPowerList = response.data;
       });
       this.dialogCheckPowers = true;
@@ -248,13 +262,13 @@ export default {
         if (valid) {
           const tempData = Object.assign({}, this.temp);
           bindPowers({
-            id: tempData.idDevice,
+            id: tempData.id,
             serialNumber: tempData.serialNumber,
             identities: tempData.groups,
           }).then(() => {
             this.dialogBindPower = false;
             this.$notify({
-              title: "添加权限成功",
+              title: "添加身份成功",
               type: "success",
               duration: 1500,
             });
@@ -264,20 +278,20 @@ export default {
     },
     unbindPower(row) {
       this.temp = Object.assign({}, row);
-      checkPowers({ deviceId: row.idDevice }).then((response) => {
+      checkPowers({ deviceId: row.id }).then((response) => {
         this.deviceWithPowerList = response.data;
       });
       this.dialogUnbindPower = true;
     },
     deletePower(row, index) {
-      if (confirm("确定删除权限吗？")) {
+      if (confirm("确定删除身份吗？")) {
         deletePowers({
-          id: this.temp.idDevice,
+          id: this.temp.id,
           serialNumber: this.temp.serialNumber,
           identities: [row.idIdentity],
         }).then(() => {
           this.$notify({
-            title: "删除权限成功",
+            title: "删除身份成功",
             type: "success",
             duration: 1500,
           });
@@ -287,9 +301,9 @@ export default {
     },
     handleFilter() {
       if (!this.listQuery.name) {
-        alert("请输入设备名称");
+        alert("请输入搜索条件");
       } else {
-        searchList({ name: this.listQuery.name }).then((response) => {
+        searchList(this.listQuery).then((response) => {
           this.list = response.data;
           this.total = response.total;
         });
@@ -335,6 +349,23 @@ export default {
     }
   }
 
+  .form-head {
+    margin: 0 40px;
+    width: 1504px;
+    line-height: 118px;
+    font-size: 9px;
+
+    .input {
+      display: inline-block;
+      margin-right: 30px;
+      width: 210px;
+    }
+
+    .button {
+      margin-left: 41px;
+    }
+  }
+
   .form {
     margin-left: 40px;
     width: 1380px;

src/views/devicewithGroup/index.vue

@@ -7,25 +7,37 @@
         <img src="../../../public/images/img-1.png" />
       </div>
       <div class="head-info">设备与组绑定</div>
-      <div class="input">
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="form-head">
+      <span>序列号：</span>
+      <span class="input">
+        <el-input
+          v-model="listQuery.serialNumber"
+          placeholder="请输入序列号"
+          clearable
+          @clear="getList"
+          @keyup.enter.native="handleFilter"
+        >
+        </el-input>
+      </span>
+
+      <span>设备名称：</span>
+      <span class="input">
         <el-input
           v-model="listQuery.name"
-          size="small"
           placeholder="请输入设备名称"
           clearable
           @clear="getList"
           @keyup.enter.native="handleFilter"
         >
         </el-input>
-      </div>
+      </span>
 
-      <div class="input-serch">
-        <el-row>
-          <el-button size="small" type="primary" @click="handleFilter"
-            >搜索</el-button
-          >
-        </el-row>
-      </div>
+      <el-button type="primary" size="mini" class="button" @click="handleFilter"
+        >查询</el-button
+      >
     </div>
 
     <!-- 表格区域 -->
@@ -39,7 +51,7 @@
 
         <el-table-column label="名称" align="center" width="440px">
           <template slot-scope="{ row }">
-            <span>{{ row.deviceName }}</span>
+            <span>{{ row.name }}</span>
           </template>
         </el-table-column>
 
@@ -185,15 +197,16 @@ export default {
       groupWithDeviceList: [],
       temp: {
         serialNumber: "",
-        deviceName: "",
+        name: "",
         groups: [],
         groupIds: [],
       },
       total: 0, //数据的总数//
       listQuery: {
         page: 1, //当前在第几页//
-        limit: 100, //一页几条//
+        limit: 8, //一页几条//
         name: "",
+        serialNumber: "",
       },
       dialogBindGroup: false,
       dialogUnbindGroup: false,
@@ -232,7 +245,7 @@ export default {
     },
     checkGroup(row) {
       this.temp = Object.assign({}, row);
-      checkGroups({ deviceId: row.idDevice }).then((response) => {
+      checkGroups({ deviceId: row.id }).then((response) => {
         this.groupWithDeviceList = response.data;
       });
       this.dialogCheckGroups = true;
@@ -249,7 +262,7 @@ export default {
         if (valid) {
           const tempData = Object.assign({}, this.temp);
           bindGroups({
-            id: tempData.idDevice,
+            id: tempData.id,
             serialNumber: tempData.serialNumber,
             groups: tempData.groups,
           }).then(() => {
@@ -265,7 +278,7 @@ export default {
     },
     unbindGroup(row) {
       this.temp = Object.assign({}, row);
-      checkGroups({ deviceId: row.idDevice }).then((response) => {
+      checkGroups({ deviceId: row.id }).then((response) => {
         this.groupWithDeviceList = response.data;
       });
       this.dialogUnbindGroup = true;
@@ -274,7 +287,7 @@ export default {
       console.log(row, index);
       if (confirm("确定解绑吗？")) {
         deleteGroups({
-          id: this.temp.idDevice,
+          id: this.temp.id,
           serialNumber: this.temp.serialNumber,
           groups: [row.idGroup],
         }).then(() => {
@@ -288,10 +301,10 @@ export default {
       }
     },
     handleFilter() {
-      if (!this.listQuery.name) {
-        alert("请输入设备名称");
+      if (!this.listQuery.name && !this.listQuery.serialNumber) {
+        alert("请输入搜索条件");
       } else {
-        searchList({ name: this.listQuery.name }).then((response) => {
+        searchList(this.listQuery).then((response) => {
           this.list = response.data;
           this.total = response.total;
         });
@@ -337,6 +350,23 @@ export default {
     }
   }
 
+  .form-head {
+    margin: 0 40px;
+    width: 1504px;
+    line-height: 118px;
+    font-size: 9px;
+
+    .input {
+      display: inline-block;
+      margin-right: 30px;
+      width: 210px;
+    }
+
+    .button {
+      margin-left: 41px;
+    }
+  }
+
   .form {
     margin-left: 40px;
     width: 1380px;

src/views/groupManagement/index.vue

@@ -43,7 +43,7 @@
 
         <el-table-column label="组类型" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.type }}</span>
+            <span>{{ typeNames[row.type] }}</span>
           </template>
         </el-table-column>
 
@@ -53,20 +53,6 @@
           </template>
         </el-table-column>
 
-        <!-- <el-table-column label="开关" align="center">
-          <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.status"
-              active-color="#3BAAFD"
-              inactive-color="#CCCCCC"
-              :active-value="1"
-              :inactive-value="0"
-              @change="changeSwitch(scope.row.status)"
-            >
-            </el-switch>
-          </template>
-        </el-table-column> -->
-
         <el-table-column label="操作" width="180px" align="center">
           <template slot-scope="{ row, $index }">
             <el-button type="text" size="small" @click="handleUpdate(row)"
@@ -137,22 +123,22 @@
 
         <el-form-item
           style="white-space: pre"
-          label="男 /女 宿 舍："
+          label="组   类    型："
           class="switch-button-item"
-          prop="gender"
+          prop="type"
         >
           <el-col :span="12">
             <el-select
-              v-model="temp.gender"
+              v-model="temp.type"
               size="mini"
               style="width: 100%"
-              placeholder="男/女"
+              placeholder="分组类型"
             >
               <el-option
-                v-for="item in sexs"
-                :key="item.value"
+                v-for="item in types"
+                :key="item.id"
                 :label="item.label"
-                :value="item.label"
+                :value="item.value"
               >
               </el-option>
             </el-select>
@@ -161,42 +147,42 @@
 
         <el-form-item
           style="white-space: pre"
-          label="组   类    型："
+          label="男 /女  宿  舍："
           class="switch-button-item"
-          prop="type"
+          prop="gender"
         >
           <el-col :span="12">
             <el-select
-              v-model="temp.type"
+              v-model="temp.gender"
               size="mini"
               style="width: 100%"
-              placeholder="分组类型"
+              placeholder="男/女"
             >
               <el-option
-                v-for="item in types"
+                v-for="item in sexs"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value"
+                :value="item.label"
               >
               </el-option>
             </el-select>
           </el-col>
         </el-form-item>
 
-        <!-- <el-form-item
-              style="white-space: pre"
-              label="IP  地 址："
-              class="switch-button-item"
-              prop="ipAddress"
-            >
-              <el-col :span="12">
-                <el-input
-                  v-model="temp.ipAddress"
-                  autocomplete="off"
-                  placeholder="请输入IP地址"
-                ></el-input>
-              </el-col>
-            </el-form-item> -->
+        <el-form-item
+          style="white-space: pre"
+          label="备  注  信  息："
+          class="switch-button-item"
+          prop="comment"
+        >
+          <el-col :span="12">
+            <el-input
+              v-model="temp.comment"
+              autocomplete="off"
+              placeholder="请输入备注信息"
+            ></el-input>
+          </el-col>
+        </el-form-item>
       </el-form>
 
       <span slot="footer">
@@ -225,6 +211,7 @@ export default {
   },
   data() {
     return {
+      typeNames: ["禁用", "学生宿舍", "教师宿舍", "教学楼", "大门", "行政楼"],
       list: [],
       total: 0, //数据的总数//
       listQuery: {
@@ -242,12 +229,12 @@ export default {
         },
       ],
       types: [
-        { id: "1", value: "0-禁用", label: "0-禁用" },
-        { id: "2", value: "1-学生宿舍", label: "1-学生宿舍" },
-        { id: "3", value: "2-教师宿舍", label: "2-教师宿舍" },
-        { id: "4", value: "3-教学楼", label: "3-教学楼" },
-        { id: "5", value: "4-大门", label: "4-大门" },
-        { id: "6", value: "5-行政楼", label: "5-行政楼" },
+        { id: "1", value: 0, label: "0-禁用" },
+        { id: "2", value: 1, label: "1-学生宿舍" },
+        { id: "3", value: 2, label: "2-教师宿舍" },
+        { id: "4", value: 3, label: "3-教学楼" },
+        { id: "5", value: 4, label: "4-大门" },
+        { id: "6", value: 5, label: "5-行政楼" },
       ],
       value: "1",
       dialogVisible: false,
@@ -280,13 +267,6 @@ export default {
             trigger: "change",
           },
         ],
-        gender: [
-          {
-            required: true,
-            message: "请选择男/女性别",
-            trigger: "change",
-          },
-        ],
         type: [
           {
             required: true,
@@ -313,11 +293,12 @@ export default {
           this.$notify({
             title: "删除成功",
             type: "success",
-            duration: 2000,
+            duration: 1500,
           });
           this.list.splice(index, 1);
         });
       }
+      this.getList();
     },
     resetTemp() {
       this.temp = {
@@ -350,14 +331,7 @@ export default {
       this.$refs["dataForm"].validate((valid) => {
         if (valid) {
           createGroup(this.temp).then(() => {
-            this.list.push({
-              serialNumber: this.temp.serialNumber,
-              name: this.temp.name,
-              manufacturer: this.temp.manufacturer,
-              model: this.temp.model,
-              ipAddress: this.temp.ipAddress,
-              status: this.temp.status,
-            });
+            this.list.push(this.temp);
             this.dialogVisible = false;
             this.$notify({
               title: "添加成功",
@@ -379,20 +353,12 @@ export default {
             this.$notify({
               title: "编辑成功",
               type: "success",
-              duration: 2000,
+              duration: 1500,
             });
           });
         }
       });
     },
-    changeSwitch(status) {
-      // console.log(status);
-      // this.list.status === 1 ? (this.list.status = 0) : (this.list.status = 1);
-      // console.log(this.list.status);
-    },
-    changeMainSwitch(value) {
-      console.log(value);
-    },
   },
 };
 </script>

src/views/index/index.vue

@@ -10,11 +10,11 @@
     <div class="user">
       条件：
       <div class="input">
-        <el-select v-model="value" size="mini" placeholder="请选择楼栋">
+        <el-select v-model="value" size="mini" placeholder="请选择设备">
           <el-option
             v-for="item in list"
             :key="item.id"
-            :label="item.deviceName"
+            :label="item.name"
             :value="item.deviceName"
           >
           </el-option>
@@ -64,7 +64,7 @@ export default {
       total: 0, //数据的总数//
       listQuery: {
         page: 1,
-        limit: 8,
+        limit: 999,
         cardNumber: "",
         deviceName: "",
         groupName: "",

src/views/userManagement/index.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="body">
+    <!-- 头部区域 -->
+    <div class="head">
+      <div class="head-img">
+        <img src="../../../public/images/img-1.png" />
+      </div>
+      <div class="head-info">用户管理</div>
+    </div>
+
+    <!-- 添加按钮 -->
+    <div class="switch">
+      所有用户
+      <div class="switch-button">
+        <el-row>
+          <el-button type="primary" size="small" @click="handleCreate"
+            ><img src="../../../public/images/img-3.png" />添加用户
+          </el-button>
+        </el-row>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="form">
+      <el-table :data="list">
+        <el-table-column label="姓名" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="卡号" width="300px" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.cardNumber }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="学校" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.college }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="专业" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.professor }}</span>
+          </template>
+        </el-table-column>
+
+        <!-- <el-table-column label="开关" align="center">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-color="#3BAAFD"
+              inactive-color="#CCCCCC"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeSwitch(scope.row.status)"
+            >
+            </el-switch>
+          </template>
+        </el-table-column> -->
+
+        <el-table-column label="操作" width="180px" align="center">
+          <template slot-scope="{ row, $index }">
+            <el-button type="text" size="small" @click="handleUpdate(row)"
+              >编辑</el-button
+            >
+
+            <el-button
+              @click="handleDelete(row, $index)"
+              type="text"
+              size="small"
+              class="button"
+              ><img src="../../../public/images/img-2.png" />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 底部分页区 -->
+      <div class="block">
+        <template>
+          <pagination
+            :total="total"
+            :page.sync="listQuery.page"
+            :limit.sync="listQuery.limit"
+            @pagination="getList"
+          />
+        </template>
+      </div>
+    </div>
+
+    <!-- 添加编辑按钮弹窗区域 -->
+    <el-dialog
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogVisible"
+      width="30%"
+      center
+    >
+      <el-form ref="dataForm" :model="temp" :rules="rules">
+        <el-form-item
+          style="white-space: pre"
+          label="姓名："
+          class="switch-button-item"
+          prop="name"
+        >
+          <el-col :span="12">
+            <el-input
+              v-model="temp.name"
+              autocomplete="off"
+              placeholder="请输入姓名"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item
+          style="white-space: pre"
+          label="卡号："
+          class="switch-button-item"
+          prop="cardNumber"
+        >
+          <el-col :span="12">
+            <el-input
+              v-model="temp.cardNumber"
+              autocomplete="off"
+              placeholder="请输入卡号"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+
+        <!-- <el-form-item
+          style="white-space: pre"
+          label="组   类    型："
+          class="switch-button-item"
+          prop="type"
+        >
+          <el-col :span="12">
+            <el-select
+              v-model="temp.type"
+              size="mini"
+              style="width: 100%"
+              placeholder="分组类型"
+            >
+              <el-option
+                v-for="item in types"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-form-item> -->
+
+        <el-form-item
+          style="white-space: pre"
+          label="学校："
+          class="switch-button-item"
+          prop="college"
+        >
+          <el-col :span="12">
+            <el-input
+              v-model="temp.college"
+              autocomplete="off"
+              placeholder="请输入学校"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item
+          style="white-space: pre"
+          label="专业："
+          class="switch-button-item"
+          prop="professor"
+        >
+          <el-col :span="12">
+            <el-input
+              v-model="temp.professor"
+              autocomplete="off"
+              placeholder="请输入专业"
+            ></el-input>
+          </el-col>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer">
+        <el-button
+          type="primary"
+          @click="dialogStatus === 'create' ? createData() : updateData()"
+          >确 定</el-button
+        >
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination";
+import {
+  fetchList,
+  createUser,
+  updateUser,
+  deletUser,
+} from "@/api/usermanagement";
+export default {
+  components: {
+    Pagination,
+  },
+  data() {
+    return {
+      list: [],
+      total: 0, //数据的总数//
+      listQuery: {
+        page: 1, //当前在第几页//
+        limit: 8, //一页几条//
+      },
+      sexs: [
+        {
+          value: "1",
+          label: "男",
+        },
+        {
+          value: "2",
+          label: "女",
+        },
+      ],
+      types: [
+        { id: "1", value: "0-禁用", label: "0-禁用" },
+        { id: "2", value: "1-学生宿舍", label: "1-学生宿舍" },
+        { id: "3", value: "2-教师宿舍", label: "2-教师宿舍" },
+        { id: "4", value: "3-教学楼", label: "3-教学楼" },
+        { id: "5", value: "4-大门", label: "4-大门" },
+        { id: "6", value: "5-行政楼", label: "5-行政楼" },
+      ],
+      value: "1",
+      dialogVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑用户",
+        create: "添加用户",
+      },
+      temp: {
+        id: "",
+        name: "",
+        cardNumber: "",
+        classname: "",
+        college: "",
+        type: "",
+        professor: "",
+      },
+      rules: {
+        cardNumber: [
+          {
+            required: true,
+            message: "请输入卡号",
+            trigger: "change",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "change",
+          },
+        ],
+        college: [
+          {
+            required: true,
+            message: "请输入学校",
+            trigger: "change",
+          },
+        ],
+        professor: [
+          {
+            required: true,
+            message: "请输入专业",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      fetchList(this.listQuery).then((response) => {
+        this.list = response.data;
+        this.total = response.total;
+      });
+    },
+    handleDelete(row, index) {
+      if (confirm("是否删除？")) {
+        deletUser({ id: row.id }).then(() => {
+          this.$notify({
+            title: "删除成功",
+            type: "success",
+            duration: 1500,
+          });
+          this.list.splice(index, 1);
+        });
+      }
+    },
+    resetTemp() {
+      this.temp = {
+        id: "",
+        name: "",
+        cardNumber: "",
+        classname: "",
+        college: "",
+        type: "",
+        professor: "",
+      };
+    },
+    handleCreate() {
+      this.resetTemp();
+      this.dialogStatus = "create";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].clearValidate();
+      });
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row);
+      this.dialogStatus = "update";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].clearValidate();
+      });
+    },
+    createData() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          createUser(this.temp).then(() => {
+            this.list.push(this.temp);
+            this.dialogVisible = false;
+            this.$notify({
+              title: "添加成功",
+              type: "success",
+              duration: 1500,
+            });
+          });
+        }
+      });
+      this.getList();
+    },
+    updateData() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp);
+          updateUser(tempData).then(() => {
+            const index = this.list.findIndex((v) => v.id === this.temp.id);
+            this.list.splice(index, 1, this.temp);
+            this.dialogVisible = false;
+            this.$notify({
+              title: "编辑成功",
+              type: "success",
+              duration: 1500,
+            });
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: 1551px;
+  margin: 29px 29px 0 31px;
+  .head {
+    display: flex;
+    width: 1380px;
+    height: 55px;
+    margin-left: 40px;
+    border-bottom: 1px solid #cccccc;
+
+    .head-img {
+      width: 30px;
+      height: 30px;
+
+      img {
+        width: 30px;
+      }
+    }
+
+    .head-info {
+      width: 95px;
+      height: 22px;
+      margin-top: 5px;
+      margin-left: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .switch {
+    display: flex;
+    width: 1380px;
+    line-height: 58px;
+    margin-left: 40px;
+    font-size: 9px;
+
+    .switch-sw {
+      width: 45px;
+      margin-left: 19px;
+    }
+
+    .switch-button {
+      width: 50px;
+      margin-left: 103px;
+
+      img {
+        width: 10.5px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .form {
+    margin-left: 40px;
+    width: 1380px;
+
+    .button-img {
+      img {
+        width: 53.5px;
+      }
+    }
+
+    .button-info {
+      margin-top: 39px;
+    }
+
+    .button {
+      color: red;
+    }
+
+    img {
+      width: 8.5px;
+      margin-right: 8px;
+    }
+
+    .block {
+      float: right;
+    }
+
+    .foot-button {
+      margin-top: 53px;
+    }
+  }
+  .switch-button-item {
+    width: 400px;
+    margin-left: 120px;
+    margin-top: 30px;
+  }
+}
+</style>

src/views/userWithGroup/index.vue

@@ -6,26 +6,38 @@
       <div class="head-img">
         <img src="../../../public/images/img-1.png" />
       </div>
-      <div class="head-info">人员与组绑定</div>
-      <div class="input">
+      <div class="head-info">用户与组绑定</div>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="form-head">
+      <span>姓名：</span>
+      <span class="input">
         <el-input
           v-model="listQuery.name"
-          size="small"
           placeholder="请输入姓名"
           clearable
           @clear="getUserList"
           @keyup.enter.native="handleFilter"
         >
         </el-input>
-      </div>
+      </span>
 
-      <div class="input-serch">
-        <el-row>
-          <el-button size="small" type="primary" @click="handleFilter"
-            >搜索</el-button
-          >
-        </el-row>
-      </div>
+      <span>卡号：</span>
+      <span class="input">
+        <el-input
+          v-model="listQuery.cardNumber"
+          placeholder="请输入卡号"
+          clearable
+          @clear="getUserList"
+          @keyup.enter.native="handleFilter"
+        >
+        </el-input>
+      </span>
+
+      <el-button type="primary" size="mini" class="button" @click="handleFilter"
+        >查询</el-button
+      >
     </div>
 
     <!-- 表格区域 -->
@@ -33,11 +45,11 @@
       <el-table :data="list">
         <el-table-column label="姓名" align="center" width="440px">
           <template slot-scope="{ row }">
-            <span>{{ row.userName }}</span>
+            <span>{{ row.name }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column label="身份证号码" align="center" width="440px">
+        <el-table-column label="卡号" align="center" width="440px">
           <template slot-scope="{ row }">
             <span>{{ row.cardNumber }}</span>
           </template>
@@ -195,6 +207,7 @@ export default {
         page: 1, //当前在第几页//
         limit: 8, //一页几条//
         name: "",
+        cardNumber: "",
       },
       dialogCheckGroups: false,
       dialogBindGroup: false,
@@ -216,7 +229,10 @@ export default {
   },
   methods: {
     getUserList() {
-      fetchUserList(this.listQuery).then((response) => {
+      fetchUserList({
+        page: this.listQuery.page,
+        limit: this.listQuery.limit,
+      }).then((response) => {
         this.list = response.data;
         this.total = response.total;
       });
@@ -230,7 +246,7 @@ export default {
     },
     checkGroup(row) {
       this.temp = Object.assign({}, row);
-      checkGroups({ userId: row.idUser }).then((response) => {
+      checkGroups({ userId: row.id }).then((response) => {
         this.groupWithDeviceList = response.data;
       });
       this.dialogCheckGroups = true;
@@ -247,7 +263,7 @@ export default {
         if (valid) {
           const tempData = Object.assign({}, this.temp);
           bindGroups({
-            id: tempData.idUser,
+            id: tempData.id,
             groups: tempData.groupsId,
           }).then(() => {
             this.dialogBindGroup = false;
@@ -262,7 +278,7 @@ export default {
     },
     unbindGroup(row) {
       this.temp = Object.assign({}, row);
-      checkGroups({ userId: row.idUser }).then((response) => {
+      checkGroups({ userId: row.id }).then((response) => {
         this.groupWithDeviceList = response.data;
       });
       this.dialogUnbindGroup = true;
@@ -271,7 +287,7 @@ export default {
       console.log(row, index);
       if (confirm("确定解绑吗？")) {
         deleteGroups({
-          id: this.temp.idUser,
+          id: this.temp.id,
           groups: [row.idGroup],
         }).then(() => {
           this.$notify({
@@ -284,10 +300,10 @@ export default {
       }
     },
     handleFilter() {
-      if (!this.listQuery.name) {
-        alert("请输入姓名");
+      if (!this.listQuery.name && !this.listQuery.cardNumber) {
+        alert("请输入搜索条件");
       } else {
-        searchList({ name: this.listQuery.name }).then((response) => {
+        searchList(this.listQuery).then((response) => {
           this.list = response.data;
           this.total = response.total;
         });
@@ -333,6 +349,23 @@ export default {
     }
   }
 
+  .form-head {
+    margin: 0 40px;
+    width: 1504px;
+    line-height: 118px;
+    font-size: 9px;
+
+    .input {
+      display: inline-block;
+      margin-right: 30px;
+      width: 210px;
+    }
+
+    .button {
+      margin-left: 41px;
+    }
+  }
+
   .form {
     margin-left: 40px;
     width: 1380px;