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

NEZ-351 perf: 滑框重构完成(alertmsg预览还有小bug)

Browse Source
This commit is contained in:
chenjinsong
2020-07-30 18:37:04 +08:00
parent b2472d9f12
commit bcdc152d5d
19 changed files with 845 additions and 1179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -1,46 +1,38 @@
<template>
<transition name="right-box">
<div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<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 && project.buildIn != 1" id="project-edit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<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--标题-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="project" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
<el-form-item :label='$t("project.project.projectName")' prop="name">
<el-input v-if="rightBox.isEdit" size="mini" maxlength="64" show-word-limit v-model="project.name"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.name}}</div>
</el-form-item>
<el-form-item :label='$t("project.project.description")'>
<el-input v-if="rightBox.isEdit" size="mini" type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.remark}}</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="project-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="project-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 class="right-box right-box-project" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="!project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<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>
</transition>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + " ID：" + editProject.id : $t("overall.createProject")}}</div>
<!-- end--标题-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editProject" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
<el-form-item :label='$t("project.project.projectName")' prop="name">
<el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name"></el-input>
</el-form-item>
<el-form-item :label='$t("project.project.description")'>
<el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="project-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="project-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>
import {noSpecialChar} from '../../common/js/validate';
@@ -57,6 +49,7 @@
isCreate: false,
isEdit:false
},
editProject: {},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -66,42 +59,36 @@
}
},
methods: {
show(show,isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit=isEdit;
},
clickos() {
this.esc();
clickOutside() {
this.esc(false);
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
esc(refresh) {
this.$emit("close", refresh);
},
/*保存*/
save() {
this.$refs['projectForm'].validate((valid) => {
if (valid) {
if (this.project.id) {
this.$put('project', this.project).then(response => {
if (this.editProject.id) {
this.$put('project', this.editProject).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$store.commit('projectListChange');
this.$store.commit('setProject', this.project);
this.$emit('reload');
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('project', this.project).then(response => {
this.$post('project', this.editProject).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('projectListChange');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -113,14 +100,6 @@
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.project.editProject") + " ID：" + this.project.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
@@ -128,11 +107,11 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("project?ids=" + this.project.id).then(response => {
this.$delete("project?ids=" + this.editProject.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$store.commit('projectListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -144,11 +123,7 @@
project: {
immediate: true,
handler(n, o) {
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("project.project.editProject") + " ID：" + n.id : this.$t("project.project.project") + " ID：" + n.id;
} else {
this.rightBox.title = this.$t("project.project.createProject");
}
this.editProject = JSON.parse(JSON.stringify(n));
}
}
}