Skip to content

W
web-monitor
Commit 2bfd0d5b authored by yanzhongrong's avatar yanzhongrong
Browse files
Options

用户管理及登录逻辑完成

parent 189ec294
Show whitespace changes
Inline Side-by-side
Showing with 391 additions and 204 deletions
src/api/user.js
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -32,6 +32,9 @@ const getters = {
departMap(state) {
return state.departMap
},
departList(state) {
return state.departList
},
}
function handleDepart(list) {
......
src/store/modules/user.js
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
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
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -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 0 → 100644
View file @ 2bfd0d5b
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
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -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 0 → 100644
View file @ 2bfd0d5b
<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 0 → 100644
View file @ 2bfd0d5b
<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
View file @ 2bfd0d5b
......@@ -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
View file @ 2bfd0d5b
......@@ -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"
: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.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
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 }) {
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment