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

perf:侧滑新增/编辑页面label 和输入框统一为左右分布、右对齐

Browse Source
This commit is contained in:
wangwenrui
2020-06-04 15:09:19 +08:00
parent f400b01146
commit 63a66268a2
12 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -426,6 +426,9 @@
this.$put('/model/syncChart',param).then(response=>{ this.$put('/model/syncChart',param).then(response=>{
if(response.code == 200){ if(response.code == 200){
this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")});
if(this.from == 'asset'){
this.Refresh();
}
}else{ }else{
console.error(response.msg) console.error(response.msg)
this.$message.error(response.msg) this.$message.error(response.msg)

2
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -12,7 +12,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" label-position="top" ref="addEndpointForm" :model="endpointForm" :rules="rules"> <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpointForm" :model="endpointForm" :rules="rules">
<!--project--> <!--project-->
<el-form-item :label='$t("project.project.project")' prop="projectId"> <el-form-item :label='$t("project.project.project")' prop="projectId">
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small"> <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">

2
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -21,7 +21,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="alertRule" label-position="top" :rules="rules" ref="alertRuleForm"> <el-form class="right-box-form right-box-form-left" :model="alertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
<!--alertName--> <!--alertName-->
<el-form-item :label='$t("alert.config.name")' prop="alertName"> <el-form-item :label='$t("alert.config.name")' prop="alertName">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="alertRule.alertName" size="small"></el-input> <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="alertRule.alertName" size="small"></el-input>

2
nezha-fronted/src/components/common/rightBox/cabinetBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="cabinet" ref="cabinetForm" :rules="rules"> <el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="cabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name"> <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
<el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/> <el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div> <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div>

2
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="currentDc" label-position="top" :rules="rules" ref="dcForm"> <el-form class="right-box-form right-box-form-left" label-width="120px" :model="currentDc" label-position="right" :rules="rules" ref="dcForm">
<el-form-item :label='$t("overall.name")' prop="name"> <el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentDc.name" size="small"></el-input> <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentDc.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentDc.name}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentDc.name}}</div>

6
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="endpoint" label-position="top" :rules="rules" ref="endPointForm"> <el-form class="right-box-form right-box-form-left" :model="endpoint" label-position="right" label-width="120px" :rules="rules" ref="endPointForm">
<!--project--> <!--project-->
<el-form-item :label="$t('project.project.project')" prop="project.id"> <el-form-item :label="$t('project.project.project')" prop="project.id">
<el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.projectId" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.projectId" placeholder="" v-if="rightBox.isEdit" size="small">
@@ -137,7 +137,8 @@
<el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'"> <el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
<template slot="label"> <template slot="label">
<span>{{$t('project.endpoint.param')}}</span> <span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns" v-if="rightBox.isEdit"> </template>
<div v-if="rightBox.isEdit" style="text-align: right">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button> <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light"> <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span><i class="el-icon-delete"></i></span> <span><i class="el-icon-delete"></i></span>
@@ -146,7 +147,6 @@
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span> <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
</button> </button>
</div> </div>
</template>
<div v-if="rightBox.isEdit" class="param-box param-box-module"> <div v-if="rightBox.isEdit" class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%"> <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in endpoint.paramObj"> <div class="param-box-row" v-for="(item, index) in endpoint.paramObj">

4
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="currentMib" label-position="top" :rules="rules" ref="mibForm"> <el-form class="right-box-form right-box-form-left" :model="currentMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
<!--mib名称--> <!--mib名称-->
<!--<el-form-item :label='$t("overall.name")' prop="name"> <!--<el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input> <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input>
@@ -54,7 +54,7 @@
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input> <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.mib.mibFile')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}"> <el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}">
<el-upload drag v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row"> <el-upload drag v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
<div slot="tip" class="el-upload__tip" > <div slot="tip" class="el-upload__tip" >
<!-- <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span> <!-- <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>

8
nezha-fronted/src/components/common/rightBox/modelBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="currentModel" label-position="top" :rules="rules" ref="modelForm"> <el-form class="right-box-form right-box-form-left" :model="currentModel" label-position="right" label-width="120px" :rules="rules" ref="modelForm">
<!--model名称--> <!--model名称-->
<el-form-item :label='$t("overall.name")' prop="name"> <el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentModel.name" size="small"></el-input> <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentModel.name" size="small"></el-input>
@@ -69,9 +69,9 @@
</div> </div>
</template> </template>
</el-autocomplete> </el-autocomplete>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize"> </el-form-item>
<el-input v-model.number="currentModel.uSize" :max="47" size="small"></el-input> <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
</el-form-item> <el-input v-model.number="currentModel.uSize" :max="47" size="small"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>

2
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -20,7 +20,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar"> <el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form" :model="currentModule" label-position="top" :rules="rules" ref="moduleForm"> <el-form class="right-box-form right-box-form-left" :model="currentModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
<el-form-item :label='$t("project.project.project")' prop="project"> <el-form-item :label='$t("project.project.project")' prop="project">
<el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small"> <el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
<el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option> <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>

2
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -16,7 +16,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="panel" label-position="top" ref="panelForm"> <el-form class="right-box-form right-box-form-left" label-width="120px" :model="panel" label-position="right" ref="panelForm">
<el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}"> <el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input> <el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input>
</el-form-item> </el-form-item>

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

@@ -18,7 +18,7 @@
<div class="right-box-title">{{rightBox.title}}</div> <div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题--> <!-- end--标题-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="project" label-position="top" :rules="rules" ref="projectForm"> <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-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> <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> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.name}}</div>

2
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -120,7 +120,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules" <el-form class="right-box-form right-box-form-left" :model="promServer" label-position="right" label-width="120px" :rules="rules"
ref="promServerForm"> ref="promServerForm">
<!--DC start--> <!--DC start-->
<el-form-item :label="$t('config.dc.dc')" prop="idc.name"> <el-form-item :label="$t('config.dc.dc')" prop="idc.name">