feat: 完整的config-account页面
1.对页面文字进行国际化处理 2.完整的交互、展示，但不包括左侧菜单
This commit is contained in:
chenjinsong
@@ -11,7 +11,7 @@ module.exports = {
|
|||||||
assetsPublicPath: '/',
|
assetsPublicPath: '/',
|
||||||
proxyTable: {
|
proxyTable: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:8088/nz-admin', //设置调用接口域名和端口号别忘了加http
|
target: 'http://192.168.40.247:8080/nz-admin', //设置调用接口域名和端口号别忘了加http
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
|
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
|
||||||
|
|||||||
@@ -36,26 +36,26 @@ html {
|
|||||||
.config-receiver-dropdown {
|
.config-receiver-dropdown {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__btn {
|
.config-receiver-dropdown-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
float: right;
|
float: right;
|
||||||
color: #60BEFF;
|
color: #60BEFF;
|
||||||
font-size: 13px
|
font-size: 13px
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__btn:hover {
|
.config-receiver-dropdown-btn:hover {
|
||||||
color: #409EFF;
|
color: #409EFF;
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__btn_delete {
|
.config-receiver-dropdown-btn-delete {
|
||||||
color: #F98D9A;
|
color: #F98D9A;
|
||||||
font-size: 13px
|
font-size: 13px
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__btn_delete:hover {
|
.config-receiver-dropdown-btn-delete:hover {
|
||||||
color: #D96D7A;
|
color: #D96D7A;
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown.is-multiple .el-select-dropdown__item.selected::after {
|
.config-receiver-dropdown.is-multiple .el-select-dropdown__item.selected::after {
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__error-message {
|
.config-receiver-dropdown-error-message {
|
||||||
color: #F98D9A;
|
color: #F98D9A;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export default {
|
|||||||
|
|
||||||
.content-box {
|
.content-box {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 300px;
|
left: 370px;
|
||||||
right: 30px;
|
right: 30px;
|
||||||
top: 60px;
|
top: 60px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|||||||
@@ -3,7 +3,14 @@ const cn = {
|
|||||||
overall:{
|
overall:{
|
||||||
dashboard:'仪表盘',
|
dashboard:'仪表盘',
|
||||||
project:'工程',
|
project:'工程',
|
||||||
asset:'资产'
|
asset:'资产',
|
||||||
|
create: '新增',
|
||||||
|
edit: '修改',
|
||||||
|
delete: '删除',
|
||||||
|
esc: '取消',
|
||||||
|
cancel: '取消',
|
||||||
|
save: '保存',
|
||||||
|
search: '搜索'
|
||||||
},
|
},
|
||||||
asset:{
|
asset:{
|
||||||
tableTitle:[
|
tableTitle:[
|
||||||
@@ -85,6 +92,23 @@ const cn = {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
config: {
|
||||||
|
account: {
|
||||||
|
//列表表头
|
||||||
|
account: "用户",
|
||||||
|
language: "语言",
|
||||||
|
receiver: "用户组",
|
||||||
|
createTime: "创建时间",
|
||||||
|
enable: "可用",
|
||||||
|
option: "操作",
|
||||||
|
|
||||||
|
//侧滑框
|
||||||
|
accountId: "用户ID",
|
||||||
|
createAccount: "新增用户",
|
||||||
|
editAccount: "修改用户",
|
||||||
|
notCurrentlySupport: '暂不支持'
|
||||||
|
}
|
||||||
|
},
|
||||||
...zhLocale
|
...zhLocale
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,14 @@ const en = {
|
|||||||
overall:{
|
overall:{
|
||||||
dashboard:'dashboard',
|
dashboard:'dashboard',
|
||||||
project:'project',
|
project:'project',
|
||||||
asset:'asset'
|
asset:'asset',
|
||||||
|
create: 'Create',
|
||||||
|
edit: 'Edit',
|
||||||
|
delete: 'Delete',
|
||||||
|
esc: 'Esc',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
save: 'Save',
|
||||||
|
search: 'Search'
|
||||||
},
|
},
|
||||||
asset:{
|
asset:{
|
||||||
tableTitle:[
|
tableTitle:[
|
||||||
@@ -85,6 +92,23 @@ const en = {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
config: {
|
||||||
|
account: {
|
||||||
|
//列表表头
|
||||||
|
account: "Account",
|
||||||
|
language: "Language",
|
||||||
|
receiver: "Receiver",
|
||||||
|
createTime: "Create Time",
|
||||||
|
enable: "Enable",
|
||||||
|
option: "Option",
|
||||||
|
|
||||||
|
//侧滑框
|
||||||
|
accountId: "Accound ID",
|
||||||
|
createAccount: "Create Account",
|
||||||
|
editAccount: "Edit Account",
|
||||||
|
notCurrentlySupport: 'Not currently supported'
|
||||||
|
}
|
||||||
|
},
|
||||||
...enLocale
|
...enLocale
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,9 +3,30 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.account-list {
|
.account-list {
|
||||||
|
height: calc(100% - 51px);
|
||||||
|
}
|
||||||
|
.account-list-option {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.account-list-option .el-icon-delete {
|
||||||
|
color: #F98D9A;
|
||||||
|
}
|
||||||
|
.account-list-option .el-icon-delete:hover {
|
||||||
|
color: #D96D7A;
|
||||||
|
}
|
||||||
|
.account-list-option .el-icon-view {
|
||||||
|
color: #60BEFF;
|
||||||
|
}
|
||||||
|
.account-list-option .el-icon-view:hover {
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
.account-list-search {
|
||||||
|
float: right;
|
||||||
|
width: 220px;
|
||||||
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* begin--右侧弹框*/
|
/* begin--右侧弹框*/
|
||||||
.right-box {
|
.right-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -17,15 +38,15 @@
|
|||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
.right-box_account {
|
.right-box-account {
|
||||||
width: 550px;
|
width: 550px;
|
||||||
height: calc(100% - 60px);
|
height: calc(100% - 61px);
|
||||||
}
|
}
|
||||||
/* begin--右侧弹框--顶部按钮*/
|
/* begin--右侧弹框--顶部按钮*/
|
||||||
.right-box__top-btns {
|
.right-box-top-btns {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.right-box__top-btn {
|
.right-box-top-btn {
|
||||||
border-radius: 0 0 9px 9px;
|
border-radius: 0 0 9px 9px;
|
||||||
float: right;
|
float: right;
|
||||||
color: #656565;
|
color: #656565;
|
||||||
@@ -37,7 +58,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
.right-box__top-btn_full {
|
.right-box-top-btn-full {
|
||||||
background-color: #656565;
|
background-color: #656565;
|
||||||
border: 1px solid #656565;
|
border: 1px solid #656565;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@@ -46,37 +67,37 @@
|
|||||||
/* end--右侧弹框--顶部按钮*/
|
/* end--右侧弹框--顶部按钮*/
|
||||||
|
|
||||||
/* begin--右侧弹框--内容*/
|
/* begin--右侧弹框--内容*/
|
||||||
.right-box__title {
|
.right-box-title {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.right-box__form {
|
.right-box-form {
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
}
|
}
|
||||||
.right-box__form-row {
|
.right-box-form-row {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
.right-box__form-label {
|
.right-box-form-label {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.right-box__form-content {
|
.right-box-form-content {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.right-box__form-content-txt {
|
.right-box-form-content-txt {
|
||||||
padding-left: 11px;
|
padding-left: 11px;
|
||||||
}
|
}
|
||||||
.right-box__form-content .el-select {
|
.right-box-form-content .el-select {
|
||||||
width: calc(100% - 37px);
|
width: calc(100% - 38px);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.el-select__add-btn {
|
.el-select-add-btn {
|
||||||
width: 32px;
|
width: 33px;
|
||||||
height: 32px;
|
height: 33px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -85,14 +106,14 @@
|
|||||||
color: #C7C9CE;
|
color: #C7C9CE;
|
||||||
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
||||||
}
|
}
|
||||||
.el-select__add-btn:hover {
|
.el-select-add-btn:hover {
|
||||||
border: 1px solid #C0C4CC;
|
border: 1px solid #C0C4CC;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
/* end--右侧弹框--内容*/
|
/* end--右侧弹框--内容*/
|
||||||
|
|
||||||
/* begin--右侧弹框--底部按钮*/
|
/* begin--右侧弹框--底部按钮*/
|
||||||
.right-box__bottom-btns {
|
.right-box-bottom-btns {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -100,13 +121,13 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.right-box__bottom-btn:first-of-type {
|
.right-box-bottom-btn:first-of-type {
|
||||||
border-bottom-left-radius: 8px;
|
border-bottom-left-radius: 8px;
|
||||||
}
|
}
|
||||||
.right-box__bottom-btn:last-of-type{
|
.right-box-bottom-btn:last-of-type{
|
||||||
border-bottom-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
||||||
}
|
}
|
||||||
.right-box__bottom-btn {
|
.right-box-bottom-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #656565;
|
background-color: #656565;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -115,15 +136,15 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.config-receiver-dropdown__label_input {
|
.config-receiver-dropdown-label-input {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.right-box__bottom-btn_cancel {
|
.right-box-bottom-btn-cancel {
|
||||||
background-color: #DADADA;
|
background-color: #DADADA;
|
||||||
color: #656565;
|
color: #656565;
|
||||||
}
|
}
|
||||||
.right-box__bottom-btn_50 {
|
.right-box-bottom-btn-50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
/* end--右侧弹框--底部按钮*/
|
/* end--右侧弹框--底部按钮*/
|
||||||
@@ -149,69 +170,86 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="account">
|
<div class="account">
|
||||||
<div class="account-list">
|
<div class="account-list">
|
||||||
<button @click="add">add button</button>
|
<el-input
|
||||||
|
class="account-list-search"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$t('overall.search')"
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
<el-table
|
<el-table
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
border
|
border
|
||||||
style="width: 100%">
|
height="calc(100% - 65px)"
|
||||||
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-for="(item, index) in tableTitle"
|
v-for="(item, index) in tableTitle"
|
||||||
v-if="item.show"
|
v-if="item.show"
|
||||||
:width="item.width"
|
:width="item.width"
|
||||||
:key="`col_${index}`"
|
:key="`col-${index}`"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope" :column="item">
|
<template slot-scope="scope" :column="item">
|
||||||
<div v-if="item.prop == 'option'">
|
<div v-if="item.prop == 'option'" class="account-list-options">
|
||||||
<a @click="del(scope.row)">Delete</a>
|
<span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span>
|
||||||
<a @click="detail(scope.row)">Detail</a>
|
<span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
|
||||||
<a @click="edit(scope.row)">Edit</a>
|
<span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="item.prop == 'lang'">
|
<span v-else-if="item.prop == 'lang'">
|
||||||
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
||||||
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
||||||
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
||||||
</span>
|
</span>
|
||||||
|
<span v-else-if="item.prop == 'receiver'">
|
||||||
|
<template v-for="rec in scope.row[item.prop]">{{rec.name}} </template>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop == 'status'">
|
||||||
|
<el-switch
|
||||||
|
v-model="scope.row[item.prop]"
|
||||||
|
active-value="1"
|
||||||
|
inactive-value="0">
|
||||||
|
</el-switch>
|
||||||
|
</span>
|
||||||
<span v-else>{{scope.row[item.prop]}}</span>
|
<span v-else>{{scope.row[item.prop]}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
<div class="right-box right-box_account" v-if="rightBox.show">
|
<div class="right-box right-box-account" v-if="rightBox.show">
|
||||||
<!-- begin--顶部按钮-->
|
<!-- begin--顶部按钮-->
|
||||||
<div class="right-box__top-btns">
|
<div class="right-box-top-btns">
|
||||||
<div class="right-box__top-btn right-box__top-btn_full" @click="esc">
|
<div class="right-box-top-btn right-box-top-btn-full" @click="esc(user.userId)">
|
||||||
<div class="right-box__btn-icon">
|
<div class="right-box-btn-icon">
|
||||||
<i class="el-icon-close"></i>
|
<i class="el-icon-close"></i>
|
||||||
</div>
|
</div>
|
||||||
<span>Esc</span>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__top-btn right-box__top-btn_full" @click="saveOrToEdit">
|
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
|
||||||
<div class="right-box__btn-icon">
|
<div class="right-box-btn-icon">
|
||||||
<i class="el-icon-edit-outline"></i>
|
<i class="el-icon-edit-outline"></i>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="rightBox.isEdit">Save</span>
|
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
|
||||||
<span v-else>Edit</span>
|
<span v-else>{{$t('overall.edit')}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__top-btn" v-if="rightBox.isEdit && user.userId != ''">
|
<div class="right-box-top-btn" v-if="rightBox.isEdit && user.userId != ''">
|
||||||
<div class="right-box__btn-icon">
|
<div class="right-box-btn-icon">
|
||||||
<i class="el-icon-delete"></i>
|
<i class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
<span>Delete</span>
|
<span>{{$t('overall.delete')}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- end--顶部按钮-->
|
<!-- end--顶部按钮-->
|
||||||
|
|
||||||
<!-- begin--标题-->
|
<!-- begin--标题-->
|
||||||
<div class="right-box__title">{{rightBox.title}}</div>
|
<div class="right-box-title">{{rightBox.title}}</div>
|
||||||
<!-- end--标题-->
|
<!-- end--标题-->
|
||||||
|
|
||||||
<!-- begin--表单-->
|
<!-- begin--表单-->
|
||||||
<div class="right-box__form">
|
<div class="right-box-form">
|
||||||
<div class="right-box__form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box__form-label">Account</div>
|
<div class="right-box-form-label">{{$t('config.account.account')}}</div>
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-content">
|
||||||
<el-input
|
<el-input
|
||||||
v-if="rightBox.isEdit"
|
v-if="rightBox.isEdit"
|
||||||
type="text"
|
type="text"
|
||||||
@@ -221,12 +259,12 @@
|
|||||||
show-word-limit
|
show-word-limit
|
||||||
size="small"
|
size="small"
|
||||||
></el-input>
|
></el-input>
|
||||||
<div v-if="!rightBox.isEdit" class="right-box__form-content-txt">{{user.username}}</div>
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box__form-label">E-mail</div>
|
<div class="right-box-form-label">E-mail</div>
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-content">
|
||||||
<el-input
|
<el-input
|
||||||
type="text"
|
type="text"
|
||||||
v-if="rightBox.isEdit"
|
v-if="rightBox.isEdit"
|
||||||
@@ -234,51 +272,54 @@
|
|||||||
v-model="user.email"
|
v-model="user.email"
|
||||||
size="small"
|
size="small"
|
||||||
></el-input>
|
></el-input>
|
||||||
<div v-if="!rightBox.isEdit" class="right-box__form-content-txt">{{user.email}}</div>
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box__form-label">Receiver</div>
|
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-content">
|
||||||
<el-select popper-class="config-receiver-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
<el-select value-key="id" popper-class="config-receiver-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||||
<el-option
|
<el-option
|
||||||
@click.native="blurEditReceiver()"
|
@click.native="blurEditReceiver()"
|
||||||
v-for="item in receiverData"
|
v-for="item in receiverData"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.id">
|
:value="item">
|
||||||
<span class="config-receiver-dropdown__label_txt" v-if="!item.isEdit">{{item.name}}</span>
|
<span class="config-receiver-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
|
||||||
<span class="config-receiver-dropdown__label_input" v-if="item.isEdit" @click.stop="stopFun">
|
<span class="config-receiver-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
|
||||||
<el-input
|
<el-input
|
||||||
type="text"
|
type="text"
|
||||||
v-model="item.name"
|
v-model="item.name"
|
||||||
size="mini"
|
size="mini"
|
||||||
></el-input>
|
></el-input>
|
||||||
</span>
|
</span>
|
||||||
<span class="config-receiver-dropdown__error-message">{{item.errorMessage}}</span>
|
<span class="config-receiver-dropdown-error-message">{{item.errorMessage}}</span>
|
||||||
<span class="config-receiver-dropdown__btn" @click.stop="toEditReceiver(item)">
|
<span class="config-receiver-dropdown-btn" @click.stop="toEditReceiver(item)">
|
||||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="config-receiver-dropdown__btn config-receiver-dropdown__btn_delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
|
<span class="config-receiver-dropdown-btn config-receiver-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="el-select__add-btn" v-if="rightBox.isEdit">
|
<div class="el-select-add-btn" v-if="rightBox.isEdit">
|
||||||
<span class="el-icon-plus"></span>
|
<span class="el-icon-plus"></span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">
|
||||||
|
<template v-for="rec in user.receiver">{{rec.name}}</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__form-row">
|
</div>
|
||||||
<div class="right-box__form-label">Language</div>
|
<div class="right-box-form-row">
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-label">{{$t('config.account.language')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
|
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
|
||||||
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
|
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
|
||||||
<el-radio v-model="user.lang" label="ru" disabled>русский（暂不支持）</el-radio>
|
<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box__form-label">Enable</div>
|
<div class="right-box-form-label">{{$t('config.account.enable')}}</div>
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-content">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="user.status"
|
v-model="user.status"
|
||||||
:disabled="!rightBox.isEdit"
|
:disabled="!rightBox.isEdit"
|
||||||
@@ -287,18 +328,18 @@
|
|||||||
</el-switch>
|
</el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box__form-row" v-if="!rightBox.isEdit">
|
<div class="right-box-form-row" v-if="!rightBox.isEdit">
|
||||||
<div class="right-box__form-label">Create Time</div>
|
<div class="right-box-form-label">{{$t('config.account.createTime')}}</div>
|
||||||
<div class="right-box__form-content">
|
<div class="right-box-form-content">
|
||||||
<div class="right-box__form-content-txt">{{user.createTime}}</div>
|
<div class="right-box-form-content-txt">{{user.createTime}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- end--表单-->
|
<!-- end--表单-->
|
||||||
|
|
||||||
<!-- begin--底部按钮-->
|
<!-- begin--底部按钮-->
|
||||||
<div class="right-box__bottom-btns">
|
<div class="right-box-bottom-btns">
|
||||||
<div @click="esc" :class="{'right-box__bottom-btn_50': rightBox.isEdit}" class="right-box__bottom-btn right-box__bottom-btn_cancel">Cancel</div><div v-if="rightBox.isEdit" class="right-box__bottom-btn right-box__bottom-btn_50">{{user.userId == '' ? 'Create' : 'Save'}}</div>
|
<div @click="esc(user.userId)" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- end--底部按钮-->
|
<!-- end--底部按钮-->
|
||||||
|
|
||||||
@@ -326,6 +367,11 @@ export default {
|
|||||||
receiver: [],
|
receiver: [],
|
||||||
lang: ''
|
lang: ''
|
||||||
},
|
},
|
||||||
|
pageObj: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total:13
|
||||||
|
},
|
||||||
tableTitle: [
|
tableTitle: [
|
||||||
{
|
{
|
||||||
label: 'ID',
|
label: 'ID',
|
||||||
@@ -333,37 +379,37 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
width: 80
|
width: 80
|
||||||
}, {
|
}, {
|
||||||
label: 'Account',
|
label: this.$t("config.account.account"),
|
||||||
prop: 'username',
|
prop: 'username',
|
||||||
show: true,
|
show: true,
|
||||||
width: 250
|
width: 240
|
||||||
}, {
|
}, {
|
||||||
label: 'E-mail',
|
label: 'E-mail',
|
||||||
prop: 'email',
|
prop: 'email',
|
||||||
show: true,
|
show: true,
|
||||||
width: 250
|
width: 240
|
||||||
}, {
|
}, {
|
||||||
label: 'Language',
|
label: this.$t("config.account.language"),
|
||||||
prop: 'lang',
|
prop: 'lang',
|
||||||
show: true,
|
show: true,
|
||||||
width: 200
|
width: 200
|
||||||
}, {
|
}, {
|
||||||
label: 'Receiver',
|
label: this.$t('config.account.receiver'),
|
||||||
prop: 'receiver',
|
prop: 'receiver',
|
||||||
show: true,
|
show: true,
|
||||||
width: 250
|
width: 240
|
||||||
}, {
|
}, {
|
||||||
label: 'Create Time',
|
label: this.$t('config.account.createTime'),
|
||||||
prop: 'createTime',
|
prop: 'createTime',
|
||||||
show: true,
|
show: true,
|
||||||
width: 250
|
width: 240
|
||||||
}, {
|
}, {
|
||||||
label: 'Enable',
|
label: this.$t('config.account.enable'),
|
||||||
prop: 'status',
|
prop: 'status',
|
||||||
show: true,
|
show: true,
|
||||||
width: 100
|
width: 100
|
||||||
}, {
|
}, {
|
||||||
label: 'Option',
|
label: this.$t('config.account.option'),
|
||||||
prop: 'option',
|
prop: 'option',
|
||||||
show: true,
|
show: true,
|
||||||
}
|
}
|
||||||
@@ -373,7 +419,13 @@ export default {
|
|||||||
username: '王小虎1',
|
username: '王小虎1',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A01',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -381,7 +433,13 @@ export default {
|
|||||||
username: '王小虎2',
|
username: '王小虎2',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A02',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '0'
|
status: '0'
|
||||||
}, {
|
}, {
|
||||||
@@ -389,7 +447,13 @@ export default {
|
|||||||
username: '王小虎3',
|
username: '王小虎3',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A03',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -397,7 +461,13 @@ export default {
|
|||||||
username: '王小虎4',
|
username: '王小虎4',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'zh',
|
lang: 'zh',
|
||||||
receiver: 'A04',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -405,7 +475,13 @@ export default {
|
|||||||
username: '王小虎5',
|
username: '王小虎5',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A05',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -413,7 +489,13 @@ export default {
|
|||||||
username: '王小虎6',
|
username: '王小虎6',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A06',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -421,7 +503,13 @@ export default {
|
|||||||
username: '王小虎7',
|
username: '王小虎7',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A07',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -429,7 +517,17 @@ export default {
|
|||||||
username: '王小虎8',
|
username: '王小虎8',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A08',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}, {
|
||||||
|
id: '5',
|
||||||
|
isEdit: false,
|
||||||
|
name: '小组啊小组5'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -437,7 +535,13 @@ export default {
|
|||||||
username: '王小虎9',
|
username: '王小虎9',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A09',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -445,7 +549,13 @@ export default {
|
|||||||
username: '王小虎',
|
username: '王小虎',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A01',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -453,7 +563,69 @@ export default {
|
|||||||
username: '王小虎',
|
username: '王小虎',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A01',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
|
createTime: '2019-11-28 21:39:05',
|
||||||
|
status: '1'
|
||||||
|
}, {
|
||||||
|
id: '223',
|
||||||
|
username: '王小虎',
|
||||||
|
email: 'c92c@qq.com',
|
||||||
|
lang: 'en',
|
||||||
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
|
createTime: '2019-11-28 21:39:05',
|
||||||
|
status: '1'
|
||||||
|
}, {
|
||||||
|
id: '224',
|
||||||
|
username: '王小虎',
|
||||||
|
email: 'c92c@qq.com',
|
||||||
|
lang: 'en',
|
||||||
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
|
createTime: '2019-11-28 21:39:05',
|
||||||
|
status: '1'
|
||||||
|
}, {
|
||||||
|
id: '226',
|
||||||
|
username: '王小虎',
|
||||||
|
email: 'c92c@qq.com',
|
||||||
|
lang: 'en',
|
||||||
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
|
createTime: '2019-11-28 21:39:05',
|
||||||
|
status: '1'
|
||||||
|
}, {
|
||||||
|
id: '225',
|
||||||
|
username: '王小虎',
|
||||||
|
email: 'c92c@qq.com',
|
||||||
|
lang: 'en',
|
||||||
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -461,7 +633,13 @@ export default {
|
|||||||
username: '王小虎',
|
username: '王小虎',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A01',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}, {
|
}, {
|
||||||
@@ -469,19 +647,28 @@ export default {
|
|||||||
username: '王小虎',
|
username: '王小虎',
|
||||||
email: 'c92c@qq.com',
|
email: 'c92c@qq.com',
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
receiver: 'A01',
|
receiver: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2'
|
||||||
|
}, {
|
||||||
|
id: '3',
|
||||||
|
name: '小组3'
|
||||||
|
}],
|
||||||
createTime: '2019-11-28 21:39:05',
|
createTime: '2019-11-28 21:39:05',
|
||||||
status: '1'
|
status: '1'
|
||||||
}],
|
}],
|
||||||
receiverData: [{
|
receiverData: [{
|
||||||
id: '1',
|
id: '1',
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
name: '小组1',
|
name: 'group1',
|
||||||
description: '小组1desc'
|
description: '小组1desc'
|
||||||
}, {
|
}, {
|
||||||
id: '2',
|
id: '2',
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
name: '小组啊小组的小组2',
|
name: 'group2',
|
||||||
description: '小组2desc'
|
description: '小组2desc'
|
||||||
}, {
|
}, {
|
||||||
id: '3',
|
id: '3',
|
||||||
@@ -508,29 +695,29 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
edit: function(u) {
|
edit: function(u) {
|
||||||
this.user = u;
|
this.user = Object.assign({}, u);
|
||||||
this.rightBox.isEdit = true;
|
this.rightBox.isEdit = true;
|
||||||
this.rightBox.title = "Edit Account ID：" + u.id;
|
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + u.id;
|
||||||
this.rightBox.show = true;
|
this.rightBox.show = true;
|
||||||
},
|
},
|
||||||
del: function(u) {
|
del: function(u) {
|
||||||
},
|
},
|
||||||
detail: function(u) {
|
detail: function(u) {
|
||||||
this.user = u;
|
this.user = Object.assign({}, u);
|
||||||
this.rightBox.isEdit = false;
|
this.rightBox.isEdit = false;
|
||||||
this.rightBox.title = "Account ID：" + u.id;
|
this.rightBox.title = this.$t("config.account.account") + " ID：" + u.id;
|
||||||
this.rightBox.show = true;
|
this.rightBox.show = true;
|
||||||
},
|
},
|
||||||
add: function() {
|
add: function() {
|
||||||
this.cleanUser();
|
this.cleanUser();
|
||||||
this.rightBox.isEdit = true;
|
this.rightBox.isEdit = true;
|
||||||
this.rightBox.title = "Create Account";
|
this.rightBox.title = this.$t("config.account.createAccount");
|
||||||
this.rightBox.show = true;
|
this.rightBox.show = true;
|
||||||
},
|
},
|
||||||
saveOrToEdit: function() {
|
saveOrToEdit: function() {
|
||||||
if (!this.rightBox.isEdit) {
|
if (!this.rightBox.isEdit) {
|
||||||
this.rightBox.isEdit = true;
|
this.rightBox.isEdit = true;
|
||||||
this.rightBox.title = "Edit Account ID：" + this.user.id;
|
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + this.user.id;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toEditReceiver: function(item) {
|
toEditReceiver: function(item) {
|
||||||
@@ -590,8 +777,12 @@ export default {
|
|||||||
email: '',
|
email: '',
|
||||||
status: '1',
|
status: '1',
|
||||||
createTime: '',
|
createTime: '',
|
||||||
|
receiver: [],
|
||||||
lang: 'en'
|
lang: 'en'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
getUserById: function(userId) {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import qs from 'qs' //引入数据格式化
|
import qs from 'qs' //引入数据格式化
|
||||||
|
axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
|
||||||
axios.interceptors.request.use(config => {
|
axios.interceptors.request.use(config => {
|
||||||
config.headers = {
|
config.headers = {
|
||||||
"Content-Type": 'application/x-www-form-urlencoded',
|
"Content-Type": 'application/x-www-form-urlencoded',
|
||||||
@@ -31,6 +31,7 @@ export function post(url, params) {
|
|||||||
axios.post(url, params).then(response => {
|
axios.post(url, params).then(response => {
|
||||||
resolve(response.data)
|
resolve(response.data)
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
console.info(err)
|
||||||
reject(err.response.data)
|
reject(err.response.data)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user