用户管理及登录逻辑完成

src/api/user.js

@@ -8,12 +8,8 @@ export function login(data) {
   })
 }
 
-export function getInfo(token) {
-  return request({
-    url: '/user/info',
-    method: 'get',
-    params: { token }
-  })
+export function getInfo() {
+  return request.post('/user/selectUserBaseInfo', ...arguments)
 }
 
 export function logout() {

src/main.js

@@ -10,7 +10,6 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 import performLoader from '@/utils/global_main_loader.js'
-import { Loading } from 'element-ui'
 
 Vue.use(ElementUI, { locale })
 performLoader(Vue) // 所有的第三方插件性质的东西都放到这里面了
@@ -23,8 +22,8 @@ function dispatchWithPromise(path) {
 }
 
 const beforeEnterApp = () => {
-  // const loading = Loading.service({ fullscreen: true, text: '拼命加载中' })
   dispatchWithPromise('depart/getDepart')
+  dispatchWithPromise('user/getInfo')
 }
 
 beforeEnterApp()

src/store/getters.js

@@ -2,7 +2,5 @@ const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name
 }
 export default getters

src/store/modules/depart.js

@@ -32,6 +32,9 @@ const getters = {
   departMap(state) {
     return state.departMap
   },
+  departList(state) {
+    return state.departList
+  },
 }
 
 function handleDepart(list) {

src/store/modules/user.js

@@ -5,9 +5,7 @@ import { resetRouter } from '@/router'
 const getDefaultState = () => {
   return {
     token: getToken(),
-    name: getUserName(),
-    avatar: '',
-    userId: getUserId()
+    userBaseInfo: {}
   }
 }
 
@@ -20,15 +18,9 @@ const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
-  SET_NAME: (state, name) => {
-    state.name = name
+  SET_BASEINFO: (state, data) => {
+    state.userBaseInfo = data
   },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
-  },
-  SET_USERID: (state, userId) => {
-    state.userId = userId
-  }
 }
 
 const actions = {
@@ -49,23 +41,10 @@ const actions = {
   },
 
   // get user info
-  getInfo({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
-
-        if (!data) {
-          return reject('Verification failed, please Login again.')
-        }
-
-        const { name, avatar } = data
-
-        // commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
+  getInfo({ commit }) {
+    getInfo({type: 0}).then(res => {
+      if (!res) return
+      commit('SET_BASEINFO', res)
     })
   },
 
@@ -77,8 +56,7 @@ const actions = {
       removeUserId() // must remove  token  first
       resetRouter()
       commit("SET_TOKEN", "")
-      commit("SET_NAME", "")
-      commit("SET_USERID", "")
+      commit("SET_BASEINFO", {})
       commit('RESET_STATE')
       resolve()
     })
@@ -96,10 +74,20 @@ const actions = {
   }
 }
 
+const getters = {
+  token(state) {
+    return state.token
+  },
+  userBaseInfo(state) {
+    return state.userBaseInfo
+  },
+}
+
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
+  actions,
+  getters
 }
 

src/utils/auth.js

 import Cookies from 'js-cookie'
 
 const TokenKey = 'token'
-const userName = 'name'
-const userId = 'id'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -15,27 +13,3 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
-
-export function getUserName() {
-  return Cookies.get(userName)
-}
-
-export function setUserName(name) {
-  return Cookies.set(userName, name)
-}
-
-export function removeUserName() {
-  return Cookies.remove(userName)
-}
-
-export function getUserId() {
-  return Cookies.get(userId)
-}
-
-export function setUserId(id) {
-  return Cookies.set(userId, id)
-}
-
-export function removeUserId() {
-  return Cookies.remove(userId)
-}
\ No newline at end of file

src/views/login/index.vue

@@ -71,7 +71,7 @@
 
 <script>
 import { login } from "@/api/user"
-import { setToken, setUserName, setUserId } from "@/utils/auth"
+import { setToken } from "@/utils/auth"
 
 export default {
   name: "Login",
@@ -125,7 +125,7 @@ export default {
         username,
         password
       } = this.loginForm
-      let { userName, token, userId } = await login({
+      let { token } = await login({
         userName: username,
         password: password,
       }, {
@@ -133,11 +133,7 @@ export default {
       })
       if (!token) return
       this.$store.commit("user/SET_TOKEN", token)
-      this.$store.commit("user/SET_NAME", userName)
-      this.$store.commit("user/SET_USERID", userId)
       setToken(token)
-      setUserName(userName)
-      setUserId(userId)
       this.$router.push({ path: "/" })
       // setTimeout(() => {
       //   location.reload()

src/views/user/api.js

@@ -5,6 +5,8 @@ const path = {
   create: 'user/saveUser',
   updatePwd: 'user/updatePwd',
   updateInfo: 'user/updateUserBaseInfo',
+  exportLog: 'sysLog/exportLog',
+  logList: 'sysLog/selectLogPage',
 }
 
 export function list() {
@@ -23,3 +25,11 @@ export function updateInfo() {
   return request.post(path.updateInfo, ...arguments)
 }
 
+export function exportLog() {
+  return request.post(path.exportLog, ...arguments)
+}
+
+export function logList() {
+  return request.post(path.logList, ...arguments)
+}
+

src/views/user/const.js

+export function formInit(data = {}) {
+  return {
+    originName: '',
+    realName: '',
+    userName: '',
+    deptId: '',
+    password: '123456',
+    phone: '',
+    email: '',
+    userId: '',
+    ...data
+  }
+}
+export function formInitPwd(data = {}) {
+  return {
+    userName: '',
+    originPwd: '',
+    password: '',
+    sureNewPwd: '',
+    userId: '',
+    ...data
+  }
+}
+
+export const rules = {
+  userName: { required: true, message: '请输入用户名', trigger: 'blur' },
+  deptId: { required: true, message: '请选择所在部门', trigger: 'blur' }
+}

src/views/user/updateUser/components/baseInfo.vue

@@ -2,14 +2,21 @@
   <div>
     <div class="title">修改基本信息</div>
     <el-form ref="form" :model="form" label-width="100px" :rules="rules">
-      <el-form-item label="用户名:" prop="name">
-        <el-input v-model="form.name" />
+      <el-form-item label="用户名:" prop="userName">
+        <el-input v-model="form.userName" />
       </el-form-item>
-      <el-form-item label="所在部门:" prop="depart">
-        <el-input v-model="form.depart" />
+      <el-form-item label="所在部门:" prop="deptId">
+        <el-select v-model="form.deptId" style="width:100%" placeholder="请选择">
+          <el-option
+            v-for="item in departList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="电话号码:">
-        <el-input v-model="form.tel" />
+        <el-input v-model="form.phone" />
       </el-form-item>
       <el-form-item label="邮箱:">
         <el-input v-model="form.email" />
@@ -22,26 +29,33 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { rules } from '../../const'
+import { updateInfo } from '../../api'
 export default {
   data() {
+    let { deptId, email, phone, userId, userName } = this.$store.state.user.userBaseInfo
     return {
       form: {
-        name: 'admin',
-        depart: '',
-        tel: '',
-        email: ''
+        deptId: deptId,
+        email: email,
+        phone:  phone,
+        userId: userId,
+        userName: userName
       },
-      rules: {
-        name: { required: true, message: '请输入用户名', trigger: 'blur' },
-        depart: { required: true, message: '请输入所在部门', trigger: 'blur' }
-      }
+      rules
     }
   },
+  computed: {
+    ...mapGetters('depart', ['departList']),
+  },
   methods: {
     confirm() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          // alert('submit!');
+          updateInfo(this.form).then(res => {
+            this.$message.success('操作成功')
+          })
         } else {
           console.log('error submit!!')
           return false

src/views/user/updateUser/components/password.vue

@@ -2,17 +2,17 @@
   <div>
     <div class="title">修改密码</div>
     <el-form ref="form" :model="form" label-width="100px" :rules="rules">
-      <el-form-item label="用户名:" prop="name">
-        <el-input v-model="form.name" />
+      <el-form-item label="用户名:" prop="userName">
+        <el-input v-model="form.userName" />
       </el-form-item>
       <el-form-item label="原密码:" prop="originPwd">
-        <el-input v-model="form.originPwd" />
+        <el-input type="password" v-model="form.originPwd" />
       </el-form-item>
       <el-form-item label="新密码:" prop="password">
-        <el-input v-model="form.password" />
+        <el-input type="password" v-model="form.password" />
       </el-form-item>
       <el-form-item label="确认新密码:" prop="sureNewPwd">
-        <el-input v-model="form.sureNewPwd" />
+        <el-input type="password" v-model="form.sureNewPwd" />
       </el-form-item>
     </el-form>
     <div class="btn">
@@ -28,25 +28,26 @@ export default {
     var validatePass2 = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请再次输入新密码'))
-      } else if (value !== this.form.newPass) {
+      } else if (value !== this.form.password) {
         callback(new Error('两次输入密码不一致!'))
       } else {
         callback()
       }
     }
+    let { userId, userName } = this.$store.state.user.userBaseInfo
     return {
       form: {
-        name: this.$store.getters.name,
+        userName: userName,
         originPwd: '',
         password: '',
         sureNewPwd: '',
-        userId: this.$store.getters
+        userId: userId
       },
       rules: {
-        name: { required: true, message: '请输入用户名', trigger: 'blur' },
-        oldPass: { required: true, message: '请输入原密码', trigger: 'blur' },
-        newPass: { required: true, message: '请输入新密码', trigger: 'blur' },
-        confirmPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+        userName: { required: true, message: '请输入用户名', trigger: 'blur' },
+        originPwd: { required: true, message: '请输入原密码', trigger: 'blur' },
+        password: { required: true, message: '请输入新密码', trigger: 'blur' },
+        sureNewPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
       }
     }
   },
@@ -55,7 +56,7 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           updatePwd(this.form).then(res => {
-            console.log(res, 111);
+            this.$message.success('操作成功')
           })
         } else {
           console.log('error submit!!')

src/views/user/userList/components/editInfo.vue

+<template>
+  <el-dialog
+    :title="editText"
+    :visible.sync="visible"
+    @close="cancel"
+    width="700px"
+    :close-on-click-modal="false"
+  >
+   <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+      <el-form-item label="用户名:" prop="userName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="真实姓名:" prop="realName">
+        <el-input v-model="form.realName" />
+      </el-form-item>
+      <el-form-item label="所在部门:" prop="deptId">
+        <el-select v-model="form.deptId" style="width:100%" placeholder="请选择">
+          <el-option
+            v-for="item in departList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电话号码:">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+      <el-form-item label="邮箱:">
+        <el-input v-model="form.email" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confrim">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { formInit, rules } from '../../const'
+import { updateInfo, create } from '../../api'
+import { mapGetters } from 'vuex'
+
+
+export default {
+  name: 'edit',
+  data() {
+    return {
+      rules,
+      form: formInit(),
+      visible: false
+    }
+  },
+  props: {
+    flag: {
+      type: Number,
+      default: 1
+    },
+    curInfo: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  watch: {
+    flag: {
+      immediate: true,
+      handler(newV) {
+        this.visible = !!newV
+        this.form = formInit(this.curInfo)
+      },
+    },
+  },
+  computed: {
+    ...mapGetters('depart', ['departList']),
+    editText() {
+      return `${this.flag === 1 ? '新增' : '编辑'}基本信息`
+    }
+  },
+  methods: {
+    cancel() {
+      this.form = formInit()
+      this.$emit('reset')
+    },
+    confrim() {
+      let apiMap = {
+        1: create,
+        2: updateInfo,
+      }
+      let api = apiMap[this.flag]
+      this.$refs['form'].validate(valid => {
+        let params = {
+          ...this.form
+        }
+        if (valid) {
+          api(params).then(() => {
+            this.$message.success('操作成功')
+            this.$emit('reset', true)
+          })
+        }
+      })
+    }
+  }
+  
+}
+</script>

src/views/user/userList/components/editPwd.vue

+<template>
+  <el-dialog
+    title="修改密码"
+    :visible.sync="visible"
+    @close="cancel"
+    width="700px"
+    :close-on-click-modal="false"
+  >
+    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
+      <el-form-item label="用户名:" prop="userName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="原密码:" prop="originPwd">
+        <el-input type="password" v-model="form.originPwd" />
+      </el-form-item>
+      <el-form-item label="新密码:" prop="password">
+        <el-input type="password" v-model="form.password" />
+      </el-form-item>
+      <el-form-item label="确认新密码:" prop="sureNewPwd">
+        <el-input type="password" v-model="form.sureNewPwd" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confrim">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { formInitPwd } from '../../const'
+import { updatePwd } from '../../api'
+
+export default {
+  name: 'editPwd',
+  data() {
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入新密码'))
+      } else if (value !== this.form.password) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      rules: {
+        userName: { required: true, message: '请输入用户名', trigger: 'blur' },
+        originPwd: { required: true, message: '请输入原密码', trigger: 'blur' },
+        password: { required: true, message: '请输入新密码', trigger: 'blur' },
+        sureNewPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+      },
+      form: formInitPwd(),
+      visible: false
+    }
+  },
+  props: {
+    flag1: {
+      type: Number,
+      default: 0
+    },
+    curInfo: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  watch: {
+    flag1: {
+      immediate: true,
+      handler(newV) {
+        this.visible = !!newV
+        this.form = formInitPwd(this.curInfo)
+      },
+    },
+  },
+  computed: {
+  },
+  methods: {
+    cancel() {
+      this.form = formInitPwd()
+      this.$emit('reset')
+    },
+    confrim() {
+      this.$refs['form'].validate(valid => {
+        let params = {
+          ...this.form
+        }
+        if (valid) {
+          updatePwd(params).then(() => {
+            this.$message.success('操作成功')
+            this.$emit('reset', true)
+          })
+        }
+      })
+    }
+  }
+  
+}
+</script>

src/views/user/userList/index.vue

@@ -3,7 +3,7 @@
     <div class="leakage-top">
       <div style="color: #666666"></div>
       <div class="operate-btn">
-        <el-button type="primary">添加新用户</el-button>
+        <el-button type="primary" @click="addUser">添加新用户</el-button>
       </div>
     </div>
     <el-table
@@ -27,7 +27,7 @@
       />
       <el-table-column prop="userName" label="用户名" align="center" />
       <el-table-column prop="realName" label="真实姓名" align="center" />
-      <el-table-column prop="deptId" label="用户部门" align="center" />
+      <el-table-column prop="deptName" label="用户部门" align="center" />
       <el-table-column prop="phone" label="电话号码" align="center" />
       <el-table-column prop="email" label="邮箱" align="center" />
       <el-table-column label="操作" align="center">
@@ -44,11 +44,17 @@
       class="pagination"
       @pagination="handlePageChange"
     />
+    <edit @reset="reset" :cur-info="curInfo" :flag="flag"></edit>
+    <ediPwd @reset="reset" :cur-info="curInfo" :flag1="flag1"></ediPwd>
+
   </div>
 </template>
 
 <script>
-import { list, create, updatePwd, updateInfo } from '../api'
+import { list } from '../api'
+import edit from './components/editInfo.vue'
+import ediPwd from './components/editPwd.vue'
+
 export default {
   data() {
     return {
@@ -58,9 +64,16 @@ export default {
       },
       tableData: [],
       total: 5,
-      loading: false
+      loading: false,
+      curInfo: {},
+      flag: 0,
+      flag1: 0
     }
   },
+  components: {
+    edit,
+    ediPwd
+  },
   methods: {
     tableRowClassName({ row, rowIndex }) {
       return rowIndex % 2 === 0 ? '' : 'single-row'
@@ -81,6 +94,25 @@ export default {
         this.total = res.total
       })
     },
+    addUser() {
+      this.curInfo = {}
+      this.flag = 1
+    },
+    toEditInfo(row) {
+      this.curInfo = row
+      this.flag = 2
+    },
+    toEditPwd(row) {
+      this.curInfo = row
+      this.flag1 = 3
+    },
+    reset(needRefresh) {
+      this.flag = 0
+      this.flag1 = 0
+      if(needRefresh) {
+        this.getTableData()
+      }
+    }
   },
   mounted() {
     this.getTableData()

src/views/user/userLog/index.vue

@@ -4,142 +4,85 @@
     <div class="leakage-top">
       <div style="color: #666666"></div>
       <div class="operate-btn">
-        <!-- <el-button
-          :type="multipleSelection.length ? 'primary' : 'info'"
-          :disabled="!multipleSelection.length"
-          >删除</el-button
-        > -->
-        <el-button type="primary">刷新</el-button>
+        <el-button type="primary" @click="getTableData">刷新</el-button>
         <el-button type="primary">查询</el-button>
-        <el-button type="primary">导出</el-button>
+        <el-button type="primary" @click="exportLog">导出</el-button>
       </div>
     </div>
     <el-table
-      :data="tableData2"
-        style="width: 100%"
-          class="statistics-table"
-         :row-class-name="tableRowClassName"
-           :row-style="{ height: '50px' }"
+      :data="tableData"
+      style="width: 100%"
+      class="statistics-table"
+      :row-class-name="tableRowClassName"
+      :row-style="{ height: '50px' }"
       :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
-      @selection-change="handleSelectionChange"
     >
-      <el-table-column prop="name" label="用户名" align="center" />
-      <el-table-column prop="operatingClass" label="操作类别" align="center" />
-      <el-table-column prop="operatingObject" label="操作对象" align="center" />
+      <el-table-column prop="userName" label="用户名" align="center" />
+      <el-table-column prop="operateTypeValue" label="操作类别" align="center" />
+      <el-table-column prop="operateObj" label="操作对象" align="center" />
       <el-table-column prop="objectName" label="对象名称" align="center" />
       <el-table-column
-        prop="operatingContent"
+        prop="operateContent"
         label="操作内容"
         align="center"
       />
-      <el-table-column prop="operatingeRsult" label="操作结果" align="center" />
-      <el-table-column prop="operatingDate" label="操作时间" align="center" />
+      <el-table-column prop="operateResultValue" label="操作结果" align="center" />
+      <el-table-column prop="creationTime" label="操作时间" align="center" />
     </el-table>
-    <pagination
-      :limit="searchForm.pageSize"
-      :page="searchForm.pageNum"
+    <Pagination
+      :limit="params.pageSize"
+      :page="params.pageNum"
       :total="total"
       class="pagination"
       @pagination="handlePageChange"
     />
   </div>
+
 </template>
 <script>
-import Pagination from "@/components/Pagination";
+import { exportLog, logList } from '../api'
+
 export default {
-  props: [],
-  components: {
-    Pagination,
-  },
   data() {
     return {
-          multipleSelection: [],
-      searchForm: {
+      params: {
         pageNum: 1,
         pageSize: 10,
       },
       total: 10,
-tableData2:[],
-      tableData: [
-        {
-          name: "admin",
-          operatingClass: "修改",
-          operatingObject: "FSU",
-          objectName: "FSU_193.168.1.20",
-          operatingContent: "修改FSU现场管理单位",
-          operatingeRsult: "成功",
-          operatingDate: "2022/12/18 11:59:42",
-        },
-        {
-          name: "admin",
-          operatingClass: "告警确认",
-          operatingObject: "故障定位设备",
-          objectName: "故障定位单位_12",
-          operatingContent: "确认连接告警",
-          operatingeRsult: "失败",
-          operatingDate: "2022/12/18 12:24:15",
-        },
-        {
-          name: "admin",
-          operatingClass: "修改",
-          operatingObject: "FSU",
-          objectName: "FSU_193.168.1.20",
-          operatingContent: "修改FSU现场管理单位",
-          operatingeRsult: "成功",
-          operatingDate: "2022/12/18 11:59:42",
-        },
-        {
-          name: "admin",
-          operatingClass: "告警确认",
-          operatingObject: "故障定位设备",
-          objectName: "故障定位单位_12",
-          operatingContent: "确认连接告警",
-          operatingeRsult: "失败",
-          operatingDate: "2022/12/18 12:24:15",
-        },
-        {
-          name: "admin",
-          operatingClass: "修改",
-          operatingObject: "FSU",
-          objectName: "FSU_193.168.1.20",
-          operatingContent: "修改FSU现场管理单位",
-          operatingeRsult: "成功",
-          operatingDate: "2022/12/18 11:59:42",
-        },
-        {
-          name: "admin",
-          operatingClass: "告警确认",
-          operatingObject: "故障定位设备",
-          objectName: "故障定位单位_12",
-          operatingContent: "确认连接告警",
-          operatingeRsult: "失败",
-          operatingDate: "2022/12/18 12:24:15",
-        },
-      ],
+      tableData: [],
     };
   },
   computed: {},
   methods: {
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
     handlePageChange(pageData) {
-      this.searchForm.pageSize = pageData.size;
-      this.searchForm.pageNum = pageData.page;
-       this.getTableData()
+      this.params.pageSize = pageData.size;
+      this.params.pageNum = pageData.page;
+      this.getTableData()
     },
-      getTableData() {
-      this.tableData2 = this.tableData.slice(( this.searchForm.pageNum - 1) * this.searchForm.pageSize,
-         this.searchForm.pageNum * this.searchForm.pageSize
-      );
-      this.total = this.tableData.length
-  
+    getTableData() {
+      let params = {
+        current: this.params.pageNum,
+        size: this.params.pageSize
+      }
+      logList(params).then(res => {
+        let list = res.records || []
+        this.tableData = list
+        this.total = res.total
+      })
     },
-      tableRowClassName({ row, rowIndex }) {
+    tableRowClassName({ row, rowIndex }) {
       return rowIndex % 2 === 0 ? '' : 'single-row'
     },
+    exportLog() {
+      let params = {
+        current: this.params.pageNum,
+        size: this.params.pageSize
+      }
+      exportLog(params).then(res => {})
+    }
   },
-  mounted() { this.getTableData()},
+  mounted() { this.getTableData() },
 };
 </script>
 <style lang="scss" scoped>