gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 侧滑动画优化；代码重构：account侧滑框

Browse Source
This commit is contained in:
chenjinsong
2020-07-14 14:40:55 +08:00
parent 1e3711eb26
commit 86c8598860
3 changed files with 201 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -858,175 +858,26 @@ li{
transform-origin: right;
}
}
@keyframes unfold-200 {
0%{
visibility: hidden;
opacity: 0;
max-height: 0;
}
25%{
opacity: 0;
max-height: 50px;
}
50%{
opacity: 0;
max-height: 100px;
}
75%{
opacity: 0.4;
max-height: 150px;
}
100% {
visibility: visible;
opacity: 1;
max-height: 200px;
}
}
@keyframes fold-200 {
0% {
opacity: 1;
max-height: 200px;
visibility: visible;
}
25%{
opacity: 0.4;
max-height: 150px;
}
50%{
opacity: 0;
max-height: 100px;
}
75%{
opacity: 0;
max-height: 50px;
}
100% {
visibility: hidden;
opacity: 0;
max-height: 0;
}
}
@keyframes unfold-500 {
0%{
visibility: hidden;
opacity: 0;
max-height: 0;
}
25%{
opacity: 0;
max-height: 100px;
}
50%{
opacity: 0;
max-height: 200px;
}
66%{
opacity: 0.2;
max-height: 300px;
}
83%{
opacity: 0.5;
max-height: 400px;
}
100% {
visibility: visible;
opacity: 1;
max-height: 500px;
}
}
@keyframes unfold-600 {
0%{
visibility: hidden;
opacity: 0;
max-height: 0;
}
25%{
opacity: 0;
max-height: 120px;
}
50%{
opacity: 0;
max-height: 240px;
}
66%{
opacity: 0.2;
max-height: 360px;
}
83%{
opacity: 0.5;
max-height: 480px;
}
100% {
visibility: visible;
opacity: 1;
max-height: 600px;
}
}
@keyframes fold-500 {
0% {
opacity: 1;
max-height: 500px;
visibility: visible;
}
16% {
opacity: 0.5;
max-height: 400px;
}
33%{
opacity: 0.2;
max-height: 300px;
}
50%{
opacity: 0;
max-height: 200px;
}
75%{
opacity: 0;
max-height: 100px;
}
100% {
visibility: hidden;
opacity: 0;
max-height: 0;
}
}
@keyframes fold-600 {
0% {
opacity: 1;
max-height: 600px;
visibility: visible;
}
16% {
opacity: 0.5;
max-height: 480px;
}
33%{
opacity: 0.2;
max-height: 360px;
}
50%{
opacity: 0;
max-height: 240px;
}
75%{
opacity: 0;
max-height: 120px;
}
100% {
visibility: hidden;
opacity: 0;
max-height: 0;
}
}
.right-box-enter-active{
/*.right-box-enter-active{
transition: transform 0.4s;
}
.right-box-leave-active {
transition: transform 0.4s;
}
.right-box-enter,.right-box-leave-to {
.right-box-enter, .right-box-leave-to {
transform: translateX(100%);
}*/
.right-box-enter-active, .right-box-leave-active {
transform: scaleX(1);
opacity: 1;
transition: transform .5s
cubic-bezier(.23, 1, .32, 1), opacity .5s
cubic-bezier(.23, 1, .32, 1);
transform-origin: right center;
}
.right-box-enter, .right-box-leave-active {
opacity: 0;
transform: scaleX(0);
}
.right-box-580-enter-active{
transition: transform 0.4s;

164
nezha-fronted/src/components/common/rightBox/accountBox.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<div class="right-box right-box-account" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="editUser.userId" @click="del()"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light"
id="account-edit-del">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editUser.userId ? ($t("config.account.editAccount") + " ID：" + editUser.userId) : $t("config.account.createAccount")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="editUser" label-position="top" :rules="rules" ref="accountForm">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input autocomplete="new-password" type="text" placeholder=""
v-model="editUser.username" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
<!--password-->
<el-form-item :label="$t('config.account.password')" prop="password" v-if="!editUser.userId">
<el-input autocomplete="new-password" type="password" placeholder="" v-model="editUser.password"
maxlength="16" show-word-limit size="small"></el-input>
</el-form-item>
<!--email-->
<el-form-item label="E-mail" prop="email">
<el-input type="text" placeholder="" v-model="editUser.email" size="small"></el-input>
</el-form-item>
<!--enable-->
<el-form-item :label="$t('config.account.enable')">
<el-switch v-model="editUser.status" active-color="#ee9d3f" :disabled="isCurrentUser(editUser.username)" active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item :label="$t('config.account.createTime')" v-if="editUser.userId">
<div class="right-box-form-content-txt">{{editUser.createTime}}</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="account-esc"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="account-save"
class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
export default {
name: "accountBox",
props: {
user: Object
},
computed: {
isCurrentUser() {
return function(username) {
return localStorage.getItem('nz-username') == username;
}
}
},
data() {
return {
rightBox: {
title: '',
},
rules: { //表单校验规则
username: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
password: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
email: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
{type: 'email', message: this.$t('validate.email')}
]
},
editUser: {}
}
},
methods: {
clickos() {
this.esc(false);
},
/*关闭弹框*/
esc(refresh) {
this.$emit("close", refresh);
},
/*保存*/
save() {
this.$refs.accountForm.validate((valid) => {
if (valid) {
if (this.editUser.userId) {
this.$put('sys/user/update', this.editUser).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
this.esc(false);
}
});
} else {
this.$post('sys/user/save', this.editUser).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
this.esc(false);
}
});
}
} else {
return false;
}
})
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/user/delete?userIds=" + this.editUser.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
});
},
},
watch: {
user: {
immediate: true,
deep: true,
handler(n) {
this.editUser = JSON.parse(JSON.stringify(n));
}
}
},
mounted() {
}
}
</script>

177
nezha-fronted/src/components/page/config/account.vue
View File

@@ -118,71 +118,7 @@
</div>
</left-menu>
<transition name="right-box">
<div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="user.userId != '' && rightBox.isEdit" @click="del(user)"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
id="account-edit-del">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
id="account-edit-edit">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="user" label-position="top" :rules="rules" ref="accountForm">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input autocomplete="new-password" v-if="rightBox.isEdit" type="text" placeholder=""
v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
</el-form-item>
<!--password-->
<el-form-item :label="$t('config.account.password')" prop="password" v-if="rightBox.isEdit &&!user.userId">
<el-input autocomplete="new-password" type="password" placeholder="" v-model="user.password"
maxlength="16" show-word-limit size="small"></el-input>
</el-form-item>
<!--email-->
<el-form-item label="E-mail" prop="email">
<el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.email" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
</el-form-item>
<!--enable-->
<el-form-item :label="$t('config.account.enable')">
<el-switch v-model="user.status" active-color="#ee9d3f" :disabled="!rightBox.isEdit || isCurrentUser(user.username)" active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
<div class="right-box-form-content-txt">{{user.createTime}}</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="account-esc"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save"
class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
<account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
</transition>
<!-- 自定义table列 -->
<element-set
@@ -195,12 +131,15 @@
</div>
</template>
<script>
var vm;
import bus from '../../../libs/bus';
import accountBox from '../../common/rightBox/accountBox';
export default {
name: "account",
components: {
'account-box': accountBox
},
data() {
vm = this;
return {
loading: false,
//底部上滑框相关
@@ -208,7 +147,7 @@
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
showElementSet: false, //控制自定义列弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true, //二级列表拖动时，用于控制主列表内容展示
@@ -223,10 +162,8 @@
showTopBtn: false, //是否显示回到顶部按钮
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
user: {
blankUser: {
userId: '',
username: '',
email: '',
@@ -276,44 +213,7 @@
],
tablelable: [], //实际显示的列
dropCol: [], //用于element-set组件显示
rules: { //表单校验规则
username: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
password: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
email: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
{type: 'email', message: this.$t('validate.email')}
]
},
tableData: [],
receiverData: [{
id: '1',
name: 'group1',
description: '小组1desc'
}, {
id: '2',
name: 'group2',
description: '小组2desc'
}, {
id: '3',
name: '小组3',
description: '小组3desc'
}, {
id: '4',
name: '小组4',
description: '小组4desc'
}, {
id: '5',
name: '小组啊小组5',
description: '小组5desc'
}, {
id: '6',
name: '小组6',
description: '小组6desc'
}],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
@@ -330,14 +230,17 @@
methods: {
// 全屏
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
jumpTo(data, id) {
@@ -388,38 +291,21 @@
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
clickos() {
this.rightBox.show = false;
},
edit: function (u) {
this.user = Object.assign({}, u);
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.editAccount") + " ID：" + u.userId;
edit(u) {
this.user = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
},
del: function (u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.getTableData();
} else {
this.$message.error(response.msg);
}
});
});
},
detail: function (u) {
this.user = Object.assign({}, u);
/*this.rightBox.isEdit = false;
this.rightBox.title = this.$t("config.account.account") + " ID：" + u.userId;
this.rightBox.show = true;*/
detail(u) {
this.user = JSON.parse(JSON.stringify(u));
this.targetTab = "detail";
this.showSubList = true;
},
@@ -438,10 +324,8 @@
}
})
},
toAdd: function () {
toAdd() {
this.cleanUser();
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.account.createAccount");
this.rightBox.show = true;
},
tabSave: function () {
@@ -535,23 +419,9 @@
this.blurEditReceiver();
//TODO 请求后台，删除用户组
},
initReceiverData: function () {
for (let i = 0; i < this.receiverData.length; i++) {
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
this.$set(this.receiverData[i], 'isEdit', false);
}
},
esc: function () {
this.rightBox.show = false;
},
updateReceiverName: function (item) {
//TODO 请求接口改名
let code = 200;
//this.$set(item, 'errorMessage', 'err');
item.errorMessage = '';
item.oldName = item.name;
return code;
},
cleanUser: function () {
this.user = {
userId: '',
@@ -572,7 +442,7 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
},
search: function (searchObj) {
search(searchObj) {
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -609,7 +479,6 @@
}
this.getTableData();
this.initReceiverData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");