|
|
@@ -1,555 +1,16 @@
|
|
|
<template>
|
|
|
- <div class="account-home">
|
|
|
- <div class="account-header">
|
|
|
- <div class="status flex-wrap">
|
|
|
- <div class="manageTitle">账号管理</div>
|
|
|
- <div class="status1"><span class="icon" />在线</div>
|
|
|
- <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>
|
|
|
- </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">
|
|
|
- <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>
|
|
|
- <div v-is="['userlist_btn_del']" class="del" @click="deleteUser(account)">
|
|
|
- <i class="el-icon-close" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">{{ account.group }}</el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <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-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>
|
|
|
- </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>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <template v-if="pages > 1">
|
|
|
- <p v-if="loading" class="center">加载中...</p>
|
|
|
- <p v-if="noMore" class="center">没有更多数据了~</p>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <Dialog :flag="dialogVisible">
|
|
|
- <div class="del-dialog">
|
|
|
- <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" @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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Dialog>
|
|
|
+ <div>
|
|
|
+ <DataTable data-id="14" :rows="12" labelWidth="100px" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<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 DataTable from '@/components/Table'
|
|
|
export default {
|
|
|
- components: { Search, Dialog },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- pwdStruc: '',
|
|
|
- pwdLengthBegin: 0,
|
|
|
- pwdLengthEnd: 0,
|
|
|
- dialogVisible: false,
|
|
|
- accountArr: [],
|
|
|
- deleteUserId: '',
|
|
|
- deleteUserName: '',
|
|
|
- userId: '',
|
|
|
- GroupId: '',
|
|
|
- GroupUpid: '',
|
|
|
- searchInfo: '', // 搜索内容
|
|
|
- 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: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['systemSet']),
|
|
|
- noMore () {
|
|
|
- return this.PageIndex >= this.pages
|
|
|
- },
|
|
|
- disabled () {
|
|
|
- return this.loading || this.noMore
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 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
|
|
|
- if (!this.searchInfo) {
|
|
|
- this.accountList()
|
|
|
- } else {
|
|
|
- console.log(this.searchInfo)
|
|
|
- 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 () {
|
|
|
- this.PageIndex += 1
|
|
|
- this.accountList()
|
|
|
- },
|
|
|
- // 回到第一页
|
|
|
- pageInit () {
|
|
|
- this.PageIndex = 1
|
|
|
- this.accountArr = []
|
|
|
- this.accountList()
|
|
|
- },
|
|
|
- // 查询
|
|
|
- getSearchData (val) {
|
|
|
- this.searchInfo = val
|
|
|
- this.pageInit()
|
|
|
- },
|
|
|
-
|
|
|
- // 清除查询
|
|
|
- clearSearchData () {
|
|
|
- this.searchInfo = ''
|
|
|
- },
|
|
|
- // 修改状态
|
|
|
- async userActiveToggle ({ Flag, Status, UserId }) {
|
|
|
- Status = Flag ? 2 : 3
|
|
|
- try {
|
|
|
- const result = await ChangeUserStatus({
|
|
|
- Flag,
|
|
|
- Status,
|
|
|
- UserId
|
|
|
- })
|
|
|
- if (result.code === 0) {
|
|
|
- this.accountArr.forEach(account => {
|
|
|
- if (account.UserId === UserId) {
|
|
|
- account.Status = Status
|
|
|
- }
|
|
|
- })
|
|
|
- this.$message.success(result.message)
|
|
|
- } else {
|
|
|
- this.$message.error(result.$message)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('出错了', error)
|
|
|
- }
|
|
|
- },
|
|
|
- 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'
|
|
|
- // })
|
|
|
- },
|
|
|
- // 重置
|
|
|
- resetForm (formName) {
|
|
|
- this.$refs[formName].resetFields()
|
|
|
- this.editDialogVisible = false
|
|
|
- },
|
|
|
- // 获取列表
|
|
|
- async accountList () {
|
|
|
- try {
|
|
|
- this.loading = true
|
|
|
- const result = await GetAccountList({
|
|
|
- QueryName: this.searchInfo,
|
|
|
- PageIndex: this.PageIndex,
|
|
|
- PageSize: this.PageSize
|
|
|
- })
|
|
|
- if (result.code === 0) {
|
|
|
- this.loading = false
|
|
|
- const newDatas = result.returnData.records
|
|
|
- // console.log(newDatas[0])
|
|
|
- this.pages = result.returnData.pages
|
|
|
- newDatas.forEach(element => {
|
|
|
- this.accountArr.push(element)
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(result.message)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('出错了', error)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 删除接口
|
|
|
- async del () {
|
|
|
- const result = await delAccount({
|
|
|
- UserId: this.deleteUserId
|
|
|
- })
|
|
|
- if (result.code === 0) {
|
|
|
- this.dialogVisible = false
|
|
|
- this.$message.success(result.message)
|
|
|
- this.pageInit()
|
|
|
- } else if (result.code === -1) {
|
|
|
- this.$message.error('后端错误，稍后请重试')
|
|
|
- } else {
|
|
|
- this.$message.success(result.message)
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 账号权限
|
|
|
- authAccount (item) {
|
|
|
- this.roleId = item.userId
|
|
|
- this.$router.push({
|
|
|
- path: '/account/accountAuth',
|
|
|
- query: { userId: this.roleId }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'Account',
|
|
|
+ components: { DataTable },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.account-home {
|
|
|
- padding: 16px 32px 32px 32px;
|
|
|
- .account-header {
|
|
|
- margin-bottom: 30px;
|
|
|
- line-height: 32px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .btn-add {
|
|
|
- width: 120px;
|
|
|
- height: 48px;
|
|
|
- background: #f5f7fa;
|
|
|
- border: 1px solid #b4b7cb;
|
|
|
- box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #6f81bc;
|
|
|
- }
|
|
|
- .status {
|
|
|
- align-items: center;
|
|
|
- .icon {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- background: #2d67e3;
|
|
|
- border-radius: 2px;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 10px;
|
|
|
- position: relative;
|
|
|
- top: -2px;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .status2 {
|
|
|
- margin: 0 28px;
|
|
|
- .icon {
|
|
|
- background: #eb2f3b;
|
|
|
- }
|
|
|
- }
|
|
|
- .status3 {
|
|
|
- .icon {
|
|
|
- background: #afb4bf;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .content-box {
|
|
|
- height: calc(100vh - 256px);
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- @media only screen and (min-width: 1920px) {
|
|
|
- .el-col-xl-4-8 {
|
|
|
- width: 20%;
|
|
|
- }
|
|
|
- }
|
|
|
- .account-box {
|
|
|
- margin-bottom: 24px;
|
|
|
- .account-box-wrap {
|
|
|
- position: relative;
|
|
|
- padding: 24px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .headOffline {
|
|
|
- width: 100%;
|
|
|
- height: 4px;
|
|
|
- background: #f25555;
|
|
|
- box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .headOnline {
|
|
|
- background: #6f81bc;
|
|
|
- width: 100%;
|
|
|
- height: 4px;
|
|
|
- box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .headDisabled {
|
|
|
- background: #cfd6e2;
|
|
|
- width: 100%;
|
|
|
- height: 4px;
|
|
|
- box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .el-row {
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
- .flexLeft {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
-
|
|
|
- .del {
|
|
|
- cursor: pointer;
|
|
|
- i {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #606266;
|
|
|
- }
|
|
|
- }
|
|
|
- .nameBox {
|
|
|
- display: flex;
|
|
|
- .name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #303133;
|
|
|
- max-width: 120px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .loger {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- margin-left: 24px;
|
|
|
- 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-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 {
|
|
|
- margin-top: 14px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .used {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #2d67e3;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- color: #909399;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .del-dialog {
|
|
|
- .del-content {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #101611;
|
|
|
- .el-icon-error {
|
|
|
- vertical-align: sub;
|
|
|
- font-size: 26px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style>
|
|
|
+</style>
|
