|
|
@@ -7,24 +7,53 @@
|
|
|
<div class="status2"><span class="icon" />离线</div>
|
|
|
<div class="status3"><span class="icon" />禁用</div>
|
|
|
</div>
|
|
|
- <Search :is-slot="true" :is-title="false" @getSearchData="getSearchData" @clearSearchData="clearSearchData">
|
|
|
- <el-button v-is="['userlist_btn_add']" class="btnAdd" @click="addAccount">新增</el-button>
|
|
|
+ <Search
|
|
|
+ :is-slot="true"
|
|
|
+ :is-title="false"
|
|
|
+ @getSearchData="getSearchData"
|
|
|
+ @clearSearchData="clearSearchData"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-is="['userlist_btn_add']"
|
|
|
+ class="btnAdd"
|
|
|
+ @click="addAccount"
|
|
|
+ >新增</el-button>
|
|
|
</Search>
|
|
|
</div>
|
|
|
<div class="content-box scrollbar">
|
|
|
<template v-if="accountArr.length">
|
|
|
- <el-row v-infinite-scroll="load" :infinite-scroll-disabled="disabled" :infinite-scroll-distance="20" :gutter="24">
|
|
|
- <el-col v-for="account in accountArr" :key="account.UserId" :xs="24" :sm="12" :md="8" :lg="4" class="account-box">
|
|
|
+ <el-row
|
|
|
+ v-infinite-scroll="load"
|
|
|
+ :infinite-scroll-disabled="disabled"
|
|
|
+ :infinite-scroll-distance="20"
|
|
|
+ :gutter="24"
|
|
|
+ >
|
|
|
+ <el-col
|
|
|
+ v-for="account in accountArr"
|
|
|
+ :key="account.UserId"
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :md="8"
|
|
|
+ :lg="4"
|
|
|
+ class="account-box"
|
|
|
+ >
|
|
|
<div class="account-box-wrap">
|
|
|
<div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
|
|
|
<div>
|
|
|
<div class="nameBox flex">
|
|
|
<div class="flex-wrap">
|
|
|
<div class="name">{{ account.UserName }}</div>
|
|
|
- <div v-is="['userlist_btn_update']" class="loger" @click="toEdit(account.UserId)" />
|
|
|
- <div @click="authAccount(account)" class="loger cap-auth"></div>
|
|
|
+ <div
|
|
|
+ v-is="['userlist_btn_update']"
|
|
|
+ class="loger"
|
|
|
+ @click="toEdit(account.UserId)"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div v-is="['userlist_btn_del']" class="del" @click="deleteUser(account)">
|
|
|
+ <div
|
|
|
+ v-is="['userlist_btn_del']"
|
|
|
+ class="del"
|
|
|
+ @click="deleteUser(account)"
|
|
|
+ >
|
|
|
<i class="el-icon-close" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -33,20 +62,40 @@
|
|
|
<el-col :span="24">{{ account.group }}</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <el-row class="content">
|
|
|
+ <!-- <el-row class="content">
|
|
|
<el-col :span="12">登录次数：<span>{{ account.LoginCount }}</span></el-col>
|
|
|
- <el-col :span="12" class="flexLeft">异常登录：<span>{{ account.ExceptionCount }}</span></el-col>
|
|
|
- </el-row>
|
|
|
+ <el-col
|
|
|
+ :span="12"
|
|
|
+ class="flexLeft"
|
|
|
+ >异常登录：<span>{{ account.ExceptionCount }}</span></el-col>
|
|
|
+ </el-row> -->
|
|
|
<el-row class="content">
|
|
|
<el-col :span="24">权限项数：<span>{{ account.AuthCount }}</span></el-col>
|
|
|
</el-row>
|
|
|
<el-row class="content">
|
|
|
<el-col :span="12">
|
|
|
- 状态：<span v-if="account.Status == 1 || account.Status == 2" class="used">启用</span>
|
|
|
- <span v-else-if="account.Status == 3" class="unUsed">停用</span>
|
|
|
+ 状态：<span
|
|
|
+ v-if="account.Status == 1 || account.Status == 2"
|
|
|
+ class="used"
|
|
|
+ >启用</span>
|
|
|
+ <span
|
|
|
+ v-else-if="account.Status == 3"
|
|
|
+ class="unUsed"
|
|
|
+ >停用</span>
|
|
|
</el-col>
|
|
|
- <el-col v-is="['userlist_btn_status_change']" :span="12" class="flexLeft">
|
|
|
- <el-switch v-model="account.Flag" :active-value="true" :inactive-value="false" active-color="#2D67E3" inactive-color="#CFD6E2" @change="userActiveToggle(account)" />
|
|
|
+ <el-col
|
|
|
+ v-is="['userlist_btn_status_change']"
|
|
|
+ :span="12"
|
|
|
+ class="flexLeft"
|
|
|
+ >
|
|
|
+ <el-switch
|
|
|
+ v-model="account.Flag"
|
|
|
+ :active-value="true"
|
|
|
+ :inactive-value="false"
|
|
|
+ active-color="#2D67E3"
|
|
|
+ inactive-color="#CFD6E2"
|
|
|
+ @change="userActiveToggle(account)"
|
|
|
+ />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -54,8 +103,14 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<template v-if="pages > 1">
|
|
|
- <p v-if="loading" class="center">加载中...</p>
|
|
|
- <p v-if="noMore" class="center">没有更多数据了~</p>
|
|
|
+ <p
|
|
|
+ v-if="loading"
|
|
|
+ class="center"
|
|
|
+ >加载中...</p>
|
|
|
+ <p
|
|
|
+ v-if="noMore"
|
|
|
+ class="center"
|
|
|
+ >没有更多数据了~</p>
|
|
|
</template>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -64,39 +119,17 @@
|
|
|
<div class="title del-title">删除账号</div>
|
|
|
<div class="content del-content"><i class="el-icon-error error r10" />你确定要删除<span class="error l10">{{ deleteUserName }}</span>？</div>
|
|
|
<div class="foot Delfoot right t30">
|
|
|
- <el-button size="medium" type="danger" class="r24" @click="del()">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ type="danger"
|
|
|
+ class="r24"
|
|
|
+ @click="del()"
|
|
|
+ >删除</el-button>
|
|
|
|
|
|
- <el-button size="medium" @click="dialogVisible = false">取消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Dialog>
|
|
|
- <!--新增/编辑-->
|
|
|
- <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
|
|
|
- <div class="airportInfoDialog dialog-public-background">
|
|
|
- <div class="title">{{ editDialogTitle }}</div>
|
|
|
- <div class="content">
|
|
|
- <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
|
|
|
- <el-form-item label="账号名称" prop="UserName">
|
|
|
- <el-input v-model="ruleForm.UserName" size="medium" placeholder="请输入账号名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="账号密码" prop="UserPwd">
|
|
|
- <div class="flex-wrap">
|
|
|
- <el-input v-model="ruleForm.UserPwd" class="r25" disabled size="medium" placeholder="请输入密码" />
|
|
|
- <el-button size="medium" @click="resetPwd" style="position: relative;top: 4px;" class="r26" type="primary">重置密码</el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="账号描述" prop="UserDesc">
|
|
|
- <el-input v-model="ruleForm.UserDesc" size="medium" type="textarea" :rows="3" placeholder="请输入角色描述" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否启用" prop="Status">
|
|
|
- <el-radio v-model="ruleForm.Status" :label="1">是</el-radio>
|
|
|
- <el-radio v-model="ruleForm.Status" :label="2">否</el-radio>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="foot center t30">
|
|
|
- <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
|
|
|
- <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ size="medium"
|
|
|
+ @click="dialogVisible = false"
|
|
|
+ >取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog>
|
|
|
@@ -106,16 +139,11 @@
|
|
|
<script>
|
|
|
import Search from '@/layout/components/Search'
|
|
|
import Dialog from '@/layout/components/Dialog'
|
|
|
-import { GetAccountList, ChangeUserStatus, delAccount, getAccountDetails, editAccount, addAccount } from '@/api/Account'
|
|
|
-import { pwdProduce } from '@/utils/validate'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
+import { GetAccountList, ChangeUserStatus, delAccount } from '@/api/Account'
|
|
|
export default {
|
|
|
components: { Search, Dialog },
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- pwdStruc: '',
|
|
|
- pwdLengthBegin: 0,
|
|
|
- pwdLengthEnd: 0,
|
|
|
dialogVisible: false,
|
|
|
accountArr: [],
|
|
|
deleteUserId: '',
|
|
|
@@ -127,58 +155,23 @@ export default {
|
|
|
PageIndex: 1,
|
|
|
PageSize: 20,
|
|
|
pages: null,
|
|
|
- loading: false,
|
|
|
- editDialogVisible: false,
|
|
|
- editDialogTitle: '新增账号',
|
|
|
- editType: 'add',
|
|
|
- ruleForm: {
|
|
|
- // 协议信息表单
|
|
|
- UserName: "",
|
|
|
- Status: "",
|
|
|
- UserDesc: "",
|
|
|
- UserPwd: "",
|
|
|
- AuthList: [],
|
|
|
- GroupList: [],
|
|
|
- RoleList: [],
|
|
|
- TacList: [],
|
|
|
- },
|
|
|
- rules: {
|
|
|
- // 协议信息表单验证
|
|
|
- UserName: [
|
|
|
- { required: true, message: "请输入账号名称", trigger: "blur" },
|
|
|
- ],
|
|
|
- },
|
|
|
- ruleFormObj: {},
|
|
|
- roleId: ''
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['systemSet']),
|
|
|
- noMore () {
|
|
|
+ noMore() {
|
|
|
return this.PageIndex >= this.pages
|
|
|
},
|
|
|
- disabled () {
|
|
|
+ disabled() {
|
|
|
return this.loading || this.noMore
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- searchInfo (val) {
|
|
|
+ searchInfo(val) {
|
|
|
val.length === 0 && this.pageInit()
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
- // 获取系统配置
|
|
|
- let obj
|
|
|
- if (typeof this.systemSet === 'string') {
|
|
|
- obj = JSON.parse(this.systemSet)
|
|
|
- } else {
|
|
|
- obj = this.systemSet
|
|
|
- }
|
|
|
- // console.log(obj)
|
|
|
- const { PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
|
|
|
- this.pwdStruc = PwdStruc
|
|
|
- this.pwdLengthBegin = PwdLengthBegin
|
|
|
- this.pwdLengthEnd = PwdLengthEnd
|
|
|
+ created() {
|
|
|
if (!this.searchInfo) {
|
|
|
this.accountList()
|
|
|
} else {
|
|
|
@@ -186,96 +179,30 @@ export default {
|
|
|
this.accountList()
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.resetPwd()
|
|
|
- },
|
|
|
methods: {
|
|
|
- // 随机生成密码
|
|
|
- resetPwd () {
|
|
|
- this.ruleForm.UserPwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
|
|
|
- },
|
|
|
- // 编辑账号
|
|
|
- async saveEditAccount () {
|
|
|
- try {
|
|
|
- const res = await editAccount(this.ruleForm)
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message.success(res.message)
|
|
|
- this.resetForm('ruleForm')
|
|
|
- this.pageInit()
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('出错了', error)
|
|
|
- }
|
|
|
- },
|
|
|
- // 新增账号
|
|
|
- async saveAddAccount () {
|
|
|
- try {
|
|
|
- const res = await addAccount(this.ruleForm)
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message.success(res.message)
|
|
|
- this.resetForm('ruleForm')
|
|
|
- this.pageInit()
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('出错了', error)
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取当前账号信息
|
|
|
- async getAccountInfo () {
|
|
|
- const res = await getAccountDetails({
|
|
|
- UserId: this.roleId
|
|
|
- })
|
|
|
- if (res.code == 0) {
|
|
|
- const { Status, UserDesc, UserName, UserPwd } = res.returnData
|
|
|
- this.ruleForm.Status = Status
|
|
|
- this.ruleForm.UserDesc = UserDesc
|
|
|
- this.ruleForm.UserName = UserName
|
|
|
- this.ruleForm.UserPwd = UserPwd
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- },
|
|
|
- // 新增/编辑-确认
|
|
|
- submitClickHandler () {
|
|
|
- this.$refs["ruleForm"].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.editType == 'add') {
|
|
|
- this.saveAddAccount()
|
|
|
- } else {
|
|
|
- this.saveEditAccount()
|
|
|
- }
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
// 滚动加载
|
|
|
- load () {
|
|
|
+ load() {
|
|
|
this.PageIndex += 1
|
|
|
this.accountList()
|
|
|
},
|
|
|
// 回到第一页
|
|
|
- pageInit () {
|
|
|
+ pageInit() {
|
|
|
this.PageIndex = 1
|
|
|
this.accountArr = []
|
|
|
this.accountList()
|
|
|
},
|
|
|
// 查询
|
|
|
- getSearchData (val) {
|
|
|
+ getSearchData(val) {
|
|
|
this.searchInfo = val
|
|
|
this.pageInit()
|
|
|
},
|
|
|
|
|
|
// 清除查询
|
|
|
- clearSearchData () {
|
|
|
+ clearSearchData() {
|
|
|
this.searchInfo = ''
|
|
|
},
|
|
|
// 修改状态
|
|
|
- async userActiveToggle ({ Flag, Status, UserId }) {
|
|
|
+ async userActiveToggle({ Flag, Status, UserId }) {
|
|
|
Status = Flag ? 2 : 3
|
|
|
try {
|
|
|
const result = await ChangeUserStatus({
|
|
|
@@ -297,33 +224,25 @@ export default {
|
|
|
console.log('出错了', error)
|
|
|
}
|
|
|
},
|
|
|
- deleteUser (user) {
|
|
|
+ deleteUser(user) {
|
|
|
this.dialogVisible = true
|
|
|
this.deleteUserId = user.UserId
|
|
|
this.deleteUserName = user.UserName
|
|
|
},
|
|
|
- toEdit (userId) {
|
|
|
- this.editDialogVisible = true
|
|
|
- this.editType = 'edit'
|
|
|
- this.editDialogTitle = '编辑账号'
|
|
|
- this.roleId = userId
|
|
|
- this.getAccountInfo()
|
|
|
- },
|
|
|
- addAccount () {
|
|
|
- this.editDialogTitle = '新增账号'
|
|
|
- this.editDialogVisible = true
|
|
|
- this.editType = 'add'
|
|
|
- // this.$router.push({
|
|
|
- // path: '/account/accountAdd'
|
|
|
- // })
|
|
|
+ toEdit(userId) {
|
|
|
+ this.userId = userId
|
|
|
+ this.$router.push({
|
|
|
+ path: '/account/accountEdit',
|
|
|
+ query: { userId: this.userId }
|
|
|
+ })
|
|
|
},
|
|
|
- // 重置
|
|
|
- resetForm (formName) {
|
|
|
- this.$refs[formName].resetFields()
|
|
|
- this.editDialogVisible = false
|
|
|
+ addAccount() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/account/accountAdd'
|
|
|
+ })
|
|
|
},
|
|
|
// 获取列表
|
|
|
- async accountList () {
|
|
|
+ async accountList() {
|
|
|
try {
|
|
|
this.loading = true
|
|
|
const result = await GetAccountList({
|
|
|
@@ -348,7 +267,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 删除接口
|
|
|
- async del () {
|
|
|
+ async del() {
|
|
|
const result = await delAccount({
|
|
|
UserId: this.deleteUserId
|
|
|
})
|
|
|
@@ -361,15 +280,6 @@ export default {
|
|
|
} else {
|
|
|
this.$message.success(result.message)
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
- // 账号权限
|
|
|
- authAccount (item) {
|
|
|
- this.roleId = item.userId
|
|
|
- this.$router.push({
|
|
|
- path: '/account/accountAuth',
|
|
|
- query: { userId: this.roleId }
|
|
|
- })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -505,22 +415,14 @@ export default {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
margin-left: 24px;
|
|
|
- background: url("../../../assets/status/ic_edit_default.png")
|
|
|
- no-repeat;
|
|
|
+ background: url('../../../assets/status/ic_edit_default.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.loger:hover {
|
|
|
- background: url("../../../assets/status/ic_edit_hovar.png") no-repeat;
|
|
|
+ background: url('../../../assets/status/ic_edit_hovar.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
- .cap-auth {
|
|
|
- margin-left: 12px;
|
|
|
- background-image: url("../../../assets/status/ic_edit_authorization.png");
|
|
|
- &:hover {
|
|
|
- background-image: url("../../../assets/status/ic_edit_authorization_hover.png");
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.content {
|
