登录，用户列表

src/components/common/Header.vue

@@ -11,26 +11,21 @@
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" trigger="click" @command="handleCommand">
           <span class="el-dropdown-link">
-            {{ username }}
+            {{ userName }}
             <i class="el-icon-caret-bottom"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <!-- <el-dropdown-item command="noticeShow">公告</el-dropdown-item>
-            <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item> -->
+            <!-- <el-dropdown-item command="noticeShow">公告</el-dropdown-item> -->
+            <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
             <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
-    <password-dialog
-      :dialogFormPsd="dialogFormPsd"
-      @psdDialogClose="psdDialogClose"
-    ></password-dialog>
+    <password-dialog ref="passwordref"  ></password-dialog>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
-import updateElementUiTheme from "update-element-ui-theme";
 import vSidebar from "./Sidebar.vue";
 import passwordDialog from "@/views/components/passwordDialog.vue";
 export default {
@@ -40,16 +35,9 @@ export default {
   },
   data() {
     return {
-      dialogFormPsd: false,
+      userName: localStorage.getItem('userName')
     };
   },
-  computed: {
-    ...mapState(["username"]),
-    username() {
-      let name = localStorage.getItem("username");
-      return name;
-    },
-  },
   methods: {
     // 用户名下拉菜单选择事件
     handleCommand(command) {
@@ -58,23 +46,14 @@ export default {
           console.log(command);
           break;
         case "changePwd": //修改密码
-          console.log(command);
-          this.dialogFormPsd = true;
+          this.$refs.passwordref.display()
           break;
         case "loginout": //退出登录
+          this.$message.success("退出成功");
           this.$store.commit("REMOVE_INFO");
-          this.$router.push("/login");
+          this.$router.push("/");
           break;
       }
-      // if (command == "loginout") {
-      //   localStorage.removeItem("ms_username");
-      //   this.$router.push("/login");
-      // }
-    },
-
-    //psdDialogClose 修改密码弹窗关闭
-    psdDialogClose() {
-      this.dialogFormPsd = false;
     },
   },
   created() {},

src/components/common/Sidebar.vue

@@ -114,17 +114,17 @@ export default {
             // },
           ],
         },
-        // {
-        //   icon: "el-icon-monitor",
-        //   index: "/system",
-        //   title: "系统管理",
-        //   subs: [
-        //     {
-        //       index: "/userManagement",
-        //       title: "用户管理",
-        //     },
-        //   ],
-        // },
+        {
+          icon: "el-icon-monitor",
+          index: "/system",
+          title: "系统管理",
+          subs: [
+            {
+              index: "/userManagement",
+              title: "用户管理",
+            },
+          ],
+        },
       ],
     };
   },

src/main.js

@@ -68,7 +68,7 @@ Vue.directive("debounce", {
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 视频监控可视化平台`;
-  const role = localStorage.getItem("username");
+  const role = localStorage.getItem("userName");
   const token = localStorage.getItem("token");
   if (!role && to.path !== "/login") {
     next("/login");
@@ -76,7 +76,8 @@ router.beforeEach((to, from, next) => {
     console.log(to.meta.permission);
     console.log(role);
     // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
-    role === "xytest" ? next() : next("/403");
+    // role === "xytest" ? next() : next("/403");
+    next()
   } else {
     next();
   }

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
-    redirect: "/realTimeMonitor",
+    redirect: "/login",
   },
   {
     path: "/",

src/store/index.js

@@ -7,13 +7,16 @@ export default new Vuex.Store({
   state: {
     //用户登录token 存储
     token: "",
-    username: "",
+    userName: "",
+    userid:'',
     channelid: "",
     termid: "",
   },
 
   getters: {
     channelid: (state) => state.channelid,
+    token: (state) => state.token,
+    userName: (state) => state.userName,
   },
   mutations: {
     //保存通道id
@@ -32,14 +35,13 @@ export default new Vuex.Store({
     },
     SET_TOKEN(state, token) {
       state.token = token;
-      localStorage.setItem("token", token);
-      console.log(state);
-      console.log("store、localstorage保存token成功！");
+      localStorage.setItem("token", state.token);
     },
-    SET_USERINFO(state, username) {
-      state.username = username;
-      localStorage.setItem("username", username);
-      console.log("store、localstorage保存userinfo成功！");
+    SET_USERINFO(state, val) {
+      state.userName = val.userName;
+      state.userid = val.id
+      localStorage.setItem("userName", state.userName);
+      localStorage.setItem("userid", state.userid);
     },
     //退出清除locastorge
     REMOVE_INFO(state) {

src/utils/api/index.js

@@ -468,3 +468,40 @@ export function selectPhotoTimeJoggle(data) {
     data,
   });
 }
+
+//用户管理
+//用户列表查询
+export function getUserList(data) {
+  return request({
+    url: "/api/userList",
+    method: "post",
+    data,
+  });
+}
+//新增用户
+export function addUserApi(data) {
+  return request({
+    url: "/api/addUser",
+    method: "post",
+    data,
+  });
+}
+//修改用户
+export function updateUserApi(data) {
+  return request({
+    url: "/api/updateUser",
+    method: "post",
+    data,
+  });
+}
+//删除用户
+export function delUserApi(data) {
+  return request({
+    url: "/api/deleteUser",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/utils/request.js

@@ -6,18 +6,15 @@ const service = axios.create({
   // baseURL: '',
   // timeout: 5000
   baseURL: "api", //把原来的项目地址，改成api，解决跨域问题
-  timeout: 30000,
+  timeout: 30000
 });
 
-service.interceptors.request.use(
-  (config) => {
-    return config;
-  },
-  (error) => {
-    console.log(error);
-    return Promise.reject();
+service.interceptors.request.use((config) => {
+  if(localStorage.getItem('token')){
+    config.headers.sessionId = localStorage.getItem('token')
   }
-);
+  return config;
+});
 
 service.interceptors.response.use(
   (response) => {

src/views/Login.vue

@@ -18,8 +18,8 @@
           class="ms-content"
           size="medium"
         >
-          <el-form-item prop="username">
-            <el-input v-model="userInfo.username" placeholder="用户名">
+          <el-form-item prop="userName">
+            <el-input v-model="userInfo.userName" placeholder="用户名">
               <el-button slot="prepend" icon="el-icon-user"></el-button>
             </el-input>
           </el-form-item>
@@ -70,15 +70,18 @@ export default {
   data: function () {
     return {
       userInfo: {
-        username: "xytest",
-        password: "111121",
+        userName: "",
+        password: "",
         //verificationCode: "",
       },
       rules: {
-        username: [
+        userName: [
           { required: true, message: "请输入用户名", trigger: "blur" },
         ],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, max: 8, message: '请输入6-8位字符', trigger: 'blur' }
+        ],
         // verificationCode: [
         //   { required: true, message: "验证码不能为空", trigger: "blur" },
         // ],
@@ -93,14 +96,19 @@ export default {
     submitForm() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          console.log(valid);
-          //console.log(this.userInfo.verificationCode);
-          //this.userInfo.password = this.$md5(this.userInfo.password); //密码加密
-          this.token = this.$md5(this.userInfo.password); //获取token
-          this.$store.commit("SET_TOKEN", this.token); //将token保存在vuex中
-          this.$store.commit("SET_USERINFO", this.userInfo.username); //将用户信息保存在vuex中
-          this.$router.push("/");
-          this.$message.success("登录成功");
+          // this.userInfo.password = this.$md5(this.userInfo.password); //密码加密
+          loginJoggle(this.userInfo)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
+                this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
+                this.$message.success("登录成功");
+                this.$router.push("/realTimeMonitor");
+              } else {
+                this.$message.error(res.msg);
+              }
+            })
+            .catch((err) => {});
         } else {
           this.$message.error("请输入账号和密码");
           console.log("error submit!!");

src/views/components/passwordDialog.vue

@@ -2,46 +2,82 @@
   <el-dialog
     class="psdDialog"
     title="修改密码"
-    :visible.sync="dialogFormPsd"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
     width="420px"
   >
-    <el-form :model="psdForm" label-position="left" label-width="80px">
-      <el-form-item label="登录账号:">
-        <el-input v-model="psdForm.name" autocomplete="off"></el-input>
+    <el-form :model="psdForm" :rules="rules" ref="formInfo" label-position="left" label-width="80px">
+      <el-form-item label="用户名:">
+        <el-input v-model="psdForm.userName" autocomplete="off" :disabled="true"></el-input>
       </el-form-item>
-      <el-form-item label="原密码:">
+      <!-- <el-form-item label="原密码:">
         <el-input v-model="psdForm.originalPsd" autocomplete="off"></el-input>
       </el-form-item>
       <el-form-item label="新密码:">
         <el-input v-model="psdForm.newPsd" autocomplete="off"></el-input>
-      </el-form-item>
-      <el-form-item label="确认密码:">
-        <el-input v-model="psdForm.confirmPsd" autocomplete="off"></el-input>
+      </el-form-item> -->
+      <el-form-item label="密码:">
+        <el-input v-model="psdForm.password" autocomplete="off"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="closeDialog">取 消</el-button>
-      <el-button type="primary" @click="closeDialog">确 定</el-button>
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
+import { updateUserApi } from "@/utils/api/index";
 export default {
-  props: ["dialogFormPsd"],
-
   data() {
     return {
+      isShow:false,
       psdForm: {
-        name: "",
+        userName: localStorage.getItem('userName'),
         originalPsd: "",
         newPsd: "",
-        confirmPsd: "",
+        password: "",
+      },
+      rules: {
+        userName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, max: 8, message: '请输入6-8位字符', trigger: 'blur' }
+        ],
       },
     };
   },
   methods: {
-    closeDialog() {
-      this.$emit("psdDialogClose");
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          this.$set(this.psdForm,'userId',localStorage.getItem('userid'))
+          updateUserApi(this.psdForm)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message.success("修改成功,请重新登录");
+                this.isShow = false
+                this.$store.commit("REMOVE_INFO");
+                this.$router.push("/");
+              } else {
+                this.$message.error(res.msg);
+              }
+            })
+            .catch((err) => {});
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
     },
   },
 };

src/views/management/userEquipment/lineInformation/components/addTowerDialog.vue

@@ -5,6 +5,7 @@
     :visible.sync="isShow"
     :close-on-click-modal="false"
     width="420px"
+    @close="handleclose"
   >
     <el-form
       label-position="left"
@@ -76,12 +77,13 @@ export default {
             ],
           })
             .then((res) => {
-              this.isShow = false;
-              this.$message({
-                showClose: true,
-                message: "添加成功",
-                type: "success",
-              });
+              if (res.code == 200) {
+                this.$message.success("修改成功");
+                this.$parent.lineList();
+                this.isShow = false;
+              } else {
+                this.$message.error(res.msg);
+              }
             })
             .catch((err) => {
               this.$message({
@@ -102,6 +104,9 @@ export default {
     hide() {
       this.isShow = false;
     },
+    handleclose() {
+      this.$parent.lineList();
+    },
   },
 
   created() {},

src/views/system/components/addUser.vue

@@ -11,7 +11,7 @@
       label-position="left"
       ref="formInfo"
       label-width="100px"
-      :rules="rules"
+      :rules=" title=='新增' ? rules : xgrules"
       :model="formdata"
     >
       <el-form-item label="用户名：" prop="userName">
@@ -46,7 +46,7 @@
   </el-dialog>
 </template>
 <script>
-import { addChannelapi, updateChannelapi } from "@/utils/api/index";
+import { addUserApi, updateUserApi } from "@/utils/api/index";
 export default {
   props: {
     title: String,
@@ -70,7 +70,16 @@ export default {
           { required: true, message: "请输入用户名", trigger: "blur" },
         ],
         role: [{ required: true, message: "请选择角色", trigger: "blur" }],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, max: 8, message: '请输入6-8位字符', trigger: 'blur' }
+        ],
+      },
+      xgrules: {
+        userName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+        role: [{ required: true, message: "请选择角色", trigger: "blur" }]
       },
     };
   },
@@ -88,9 +97,7 @@ export default {
       this.$refs.formInfo.validate((valid) => {
         if (valid) {
           if (this.title == "新增") {
-            let formArr = [];
-            formArr.push(this.formdata);
-            addChannelapi({ list: formArr })
+            addUserApi(this.formdata)
               .then((res) => {
                 if (res.code == 200) {
                   this.$message({
@@ -98,7 +105,6 @@ export default {
                     message: "添加成功",
                     type: "success",
                   });
-                  this.$parent.deviceList();
                   this.isShow = false;
                 } else {
                   this.$message.error(res.msg);
@@ -106,11 +112,10 @@ export default {
               })
               .catch((err) => {});
           } else {
-            updateChannelapi(this.formdata)
+            updateUserApi(this.formdata)
               .then((res) => {
                 if (res.code == 200) {
                   this.$message.success("修改成功");
-                  this.$parent.deviceList();
                   this.isShow = false;
                 } else {
                   this.$message.error(res.msg);

src/views/system/userManagement.vue

@@ -22,21 +22,13 @@
         >
           <!-- <el-table-column type="index" width="55"> </el-table-column>
           <el-table-column type="selection" width="55"> </el-table-column> -->
-          <el-table-column
-            label="用户名"
-            show-overflow-tooltip
-            prop="userName"
-          ></el-table-column>
-          <el-table-column
-            label="角色"
-            show-overflow-tooltip
-            prop="role"
-          ></el-table-column>
-          <el-table-column
-            label="创建时间"
-            show-overflow-tooltip
-            prop="createTime"
-          ></el-table-column>
+          <el-table-column label="用户名" show-overflow-tooltip prop="userName" ></el-table-column>
+          <el-table-column label="角色" show-overflow-tooltip prop="role" >
+            <template slot-scope="scope">{{ scope.row.role == 1 ? '管理员' : '用户' }}</template>
+          </el-table-column>
+          <el-table-column label="创建时间" show-overflow-tooltip prop="createTime" >
+            <template slot-scope="scope">{{ $moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss") }}</template>
+          </el-table-column>
           <el-table-column fixed="right" label="操作" width="200">
             <template slot-scope="scope">
               <el-button
@@ -60,13 +52,13 @@
         </div>
       </div>
     </div>
-    <!-- 新增时间表 -->
+    <!-- 新增 -->
     <addUser :title="title" ref="adduserref"></addUser>
   </div>
 </template>
 <script>
 import addUser from "./components/addUser.vue";
-import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
+import { getUserList, delUserApi } from "@/utils/api/index";
 
 export default {
   components: {
@@ -88,7 +80,7 @@ export default {
   methods: {
     //获取线路列表数据
     deviceList() {
-      getChannelListapi({
+      getUserList({
         pageindex: this.page,
         pagesize: this.pageSize,
       })
@@ -123,20 +115,20 @@ export default {
 
     //删除数据
     handleDelete(data) {
-      let deleteArr = [];
-      deleteArr.push({
-        id: data.id,
-      });
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-          deleteChannelapi({ list: deleteArr }).then((res) => {
-            this.deviceList(); //刷新
+          delUserApi({ uid: data.userId }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.deviceList(); //刷新
+            } else {
+              this.$message.error(res.msg);
+            }
           });
-          this.$message({ type: "success", message: "删除成功!" });
         })
         .catch(() => {
           this.$message({ type: "info", message: "已取消删除" });