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

NEZ-2816 feat：页面权限添加 国际化调整 以及编辑框的完善

Browse Source
This commit is contained in:
zhangyu
2023-05-15 14:26:56 +08:00
parent 41405e8617
commit c1f00b2f1f
4 changed files with 176 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
nezha-fronted/src/assets/css/components/common/rightBox/asset/assetDiscoveryBox.scss
View File

@@ -2,7 +2,7 @@
.schedule-type {
.el-radio-group {
width: 100%;
.el-radio-button--medium {
.el-radio-button--small {
width: 25%;
.el-radio-button__inner {
display: inline-block;
@@ -11,8 +11,57 @@
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner{
background: unset !important;
color: $--color-warning;
color: $--color-warning !important;
}
}
}
//.el-form-item__content .el-checkbox-button.line-feed {
//
//}
//.el-form-item__content .el-checkbox-button.line-feed .el-checkbox-button__inner{
// //border-top: 0;
// margin-top: -2px;
//}
.months-box {
width: 100%;
height: 176px;
//border-bottom:1px solid #ddd;
//border-right:1px solid #ddd;
position: relative;
.right-border {
height: 176px;
border-right: 1px solid #ddd;
position: absolute;
top: 0;
right: 0;
}
.bottom-border {
width: 100%;
border-bottom: 1px solid #ddd;
position: absolute;
bottom: 1px;
left: 0;
}
}
.days-item {
width: calc(100% / 7 + 1px) !important;
text-align: center;
float: left;
border:1px solid #ddd;
height: 36px;box-sizing: border-box;
line-height: 36px;
margin-left: -1px;
margin-top: -1px;
cursor: pointer;
transition: all .5s;
}
.days-item-1,.days-item-8,.days-item-15,.days-item-22,.days-item-29 {
//margin-left: 0;
}
.days-item.is-checked{
z-index: 1;
background: $--color-warning;
border-color: $--border-select-color;
color: $--color-white;
}
}

124
nezha-fronted/src/components/common/rightBox/asset/assetDiscoveryBox.vue
View File

@@ -2,7 +2,7 @@
<div v-clickoutside="{obj:editAssetDiscovery,func:clickOutside}" class="right-box right-box-prom asset-discovery-right-box">
<!-- begin--标题-->
<div class="right-box__header">
<div class="header__title">{{editAssetDiscovery.id ? ($t("config.agent.editProm")) : $t("overall.createPrometheusServer")}}</div>
<div class="header__title">{{editAssetDiscovery.id ? ($t("asset.discoveryAdd")) : $t("asset.discoveryEdit")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editAssetDiscovery, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
</div>
@@ -11,7 +11,7 @@
<!-- begin--表单-->
<div class="right-box__container">
<div class="container__form">
<el-form ref="agentForm" :model="editAssetDiscovery" :rules="rules" label-position = "top" label-width="120px">
<el-form ref="assetDiscoveryForm" :model="editAssetDiscovery" :rules="rules" label-position = "top" label-width="120px">
<!-- name-->
<el-form-item :label='$t("overall.name")' prop="name">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.name" size="small" id="asset-discovery-box-input-name"></el-input>
@@ -39,24 +39,56 @@
<!-- schedule.type-->
<el-form-item :label='$t("alert.config.schedEnable")' prop="schedule.type" class="schedule-type">
<!-- <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.type" size="small" id="asset-discovery-box-input-type"></el-input>-->
<el-radio-group v-model="editAssetDiscovery.schedule.type" size="medium">
<el-radio-button :label="1">One time only</el-radio-button>
<el-radio-button :label="2">Daily</el-radio-button>
<el-radio-button :label="3">Weekly</el-radio-button>
<el-radio-button :label="4">Monthly</el-radio-button>
<el-radio-group v-model="editAssetDiscovery.schedule.type" size="small" @change="changeType">
<el-radio-button :label="1">{{$t('backup.only')}}</el-radio-button>
<el-radio-button :label="2">{{$t('backup.Daily')}}</el-radio-button>
<el-radio-button :label="3">{{$t('backup.Weekly')}}</el-radio-button>
<el-radio-button :label="4">{{$t('backup.Monthly')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- schedule.stime -->
<el-form-item :label='$t(" Start at")' prop="schedule.stime">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.stime" size="small" id="asset-discovery-box-input-stime"></el-input>
<el-form-item :label='$t("asset.discoveryStartAt")' prop="schedule.stime">
<my-date-picker
v-model="editAssetDiscovery.schedule.stime"
type="datetime"
style="width: 100%"
size="small"
placeholder="Start time"
:value-format="timeFormatStrToDatePickFormat()"
:format="timeFormatStrToDatePickFormat()"
>
</my-date-picker>
</el-form-item>
<!-- schedule.repeat -->
<el-form-item :label='$t("Repeat every")' prop="schedule.repeat">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.repeat" size="small" id="asset-discovery-box-input-repeat"></el-input>
<el-form-item :label='$t("asset.discoveryRepeatEvery")' prop="schedule.repeat" v-if="editAssetDiscovery.schedule.type === 2 || editAssetDiscovery.schedule.type === 3">
<el-input placeholder="" v-model.number="editAssetDiscovery.schedule.repeat" size="small" id="asset-discovery-box-input-repeat">
<template slot="append">{{editAssetDiscovery.schedule.type === 2? $t('backup.day') : $t('el.datepicker.week')}}</template>
</el-input>
</el-form-item>
<!-- schedule.nums -->
<el-form-item :label='$t("nums")' prop="schedule.nums">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetDiscovery.schedule.nums" size="small" id="asset-discovery-box-input-nums"></el-input>
<el-form-item :label='$t("backup.WeekOn")' prop="schedule.nums" v-if="editAssetDiscovery.schedule.type === 3">
<el-checkbox-group v-model="editAssetDiscovery.schedule.nums" size="medium" @change="clearNumsError()">
<el-checkbox-button v-for="num in weeks" :label="num" :key="num">{{weekStr[num]}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item :label='$t("backup.DayOfMonth")' prop="schedule.nums" v-if="editAssetDiscovery.schedule.type === 4">
<div class="months-box">
<div
@click="checkItem(num)"
v-for="num in months"
:label="num"
:key="num"
class='days-item'
:class="{
'is-checked': editAssetDiscovery.schedule.nums.indexOf(num) !== -1,
'line-feed': num > 7
}"
>
{{num < 32 ? num : $t('asset.discoveryLast')}}
</div>
<div class="right-border"></div>
<div class="bottom-border"></div>
</div>
</el-form-item>
<!--remark-->
<el-form-item :label="$t('overall.remark')">
@@ -81,7 +113,7 @@
</div>
</template>
<script>
import { noSpecialChar } from '@/components/common/js/validate'
import { noSpecialChar, arrLength } from '@/components/common/js/validate'
import editRigthBox from '@/components/common/mixin/editRigthBox'
export default {
name: 'agentBox',
@@ -112,11 +144,23 @@ export default {
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
'schedule.nums': [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ validator: noSpecialChar, trigger: 'blur' }
]
},
editAssetDiscovery: {},
credentialData: []
credentialData: [],
weeks: 7,
weekStr: [
this.$t('week.Mon'),
this.$t('week.Tue'),
this.$t('week.Wed'),
this.$t('week.Thu'),
this.$t('week.Fri'),
this.$t('week.Sat'),
this.$t('week.Sun')
],
months: 32
}
},
created () {
@@ -137,13 +181,49 @@ export default {
clickOutside () {
this.esc(false)
},
clearNumsError () {
this.$refs.assetDiscoveryForm.clearValidate('schedule.nums')
},
checkItem (num) {
this.$refs.assetDiscoveryForm.clearValidate('schedule.nums')
if (this.editAssetDiscovery.schedule.nums.indexOf(num) !== -1) {
this.editAssetDiscovery.schedule.nums = this.editAssetDiscovery.schedule.nums.filter(item => item != num)
} else {
this.editAssetDiscovery.schedule.nums.push(num)
}
},
changeType () {
this.$refs.assetDiscoveryForm.clearValidate('schedule.nums')
this.$refs.assetDiscoveryForm.clearValidate('schedule.repeat')
switch (this.editAssetDiscovery.schedule.type) {
case 1:
this.editAssetDiscovery.schedule.repeat = ''
this.editAssetDiscovery.schedule.nums = []
break
case 2:
this.editAssetDiscovery.schedule.repeat = 1
this.editAssetDiscovery.schedule.nums = []
break
case 3:
this.editAssetDiscovery.schedule.repeat = 1
this.editAssetDiscovery.schedule.nums = []
break
case 4:
this.editAssetDiscovery.schedule.repeat = ''
this.editAssetDiscovery.schedule.nums = []
break
}
},
/* 保存 */
save () {
this.$refs.agentForm.validate(valid => {
this.$refs.assetDiscoveryForm.validate(valid => {
if (valid) {
this.prevent_opt.save = true
console.log(this.editAssetDiscovery)
const params = this.$loadsh.cloneDeep(this.editAssetDiscovery)
params.schedule.stime = this.momentStrToTimestamp(params.schedule.stime)
if (this.editAssetDiscovery.id) {
this.$put('/tool/discovery', this.editAssetDiscovery).then(response => {
this.$put('/tool/discovery', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
@@ -153,7 +233,7 @@ export default {
this.prevent_opt.save = false
})
} else {
this.$post('/tool/discovery', this.editAssetDiscovery).then(response => {
this.$post('/tool/discovery', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
@@ -173,7 +253,11 @@ export default {
assetDiscovery: {
immediate: true,
handler (n) {
this.editAssetDiscovery = this.$loadsh.cloneDeep(n)
const editAssetDiscovery = this.$loadsh.cloneDeep(n)
if (editAssetDiscovery.schedule && editAssetDiscovery.schedule.stime) {
editAssetDiscovery.schedule.stime = this.momentTz(editAssetDiscovery.schedule.stime)
}
this.editAssetDiscovery = this.$loadsh.cloneDeep(editAssetDiscovery)
}
}
}

19
nezha-fronted/src/components/common/table/asset/assetDiscoveryTable.vue
View File

@@ -66,15 +66,16 @@
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<!-- <button class="table-operation-item" @click.stop><i class="nz-icon nz-icon-view1"></i></button>-->
<button class="table-operation-item" @click="$emit('showBottomBox', 'assetDiscoveryTab', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_label_edit','asset_label_delete']" trigger="click" @command="tableOperation">
<button class="table-operation-item" v-has="['asset_discovery_view']" @click="$emit('showBottomBox', 'assetDiscoveryTab', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" v-has="['asset_discovery_edit','asset_label_delete']" trigger="click" @command="tableOperation">
<div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
<i class="nz-icon nz-icon-more3"></i>
</div>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<el-dropdown-item v-has="'asset_label_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_discovery_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<!-- <el-dropdown-item v-has="'asset_label_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>-->
<el-dropdown-item v-has="'asset_label_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_discovery_del'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item v-has="'asset_discovery_edit'" :command="['force', scope.row]"><i class="nz-icon nz-icon-a-Diagnosisresult"></i><span class="operation-dropdown-text">{{$t('asset.discoveryForce')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -220,15 +221,15 @@ export default {
statusToStr (status) {
switch (status) {
case '1' :
return 'Saving'
return this.$t('asset.discoverySaving')
case '2' :
return 'Running'
return this.$t('asset.discoveryRunning')
case '3' :
return 'Scheduled'
return this.$t('asset.discoveryScheduled')
case '4' :
return 'Failed'
return this.$t('asset.discoveryFailed')
case '5' :
return 'Finished'
return this.$t('asset.discoveryFinished')
}
}
}

18
nezha-fronted/src/components/page/asset/assetDiscovery.vue
View File

@@ -10,7 +10,7 @@
@search="search"
>
<template v-slot:top-tool-right>
<button id="meta-add-meta" v-has="'asset_label_add'" :title="$t('overall.createLabel')" class="top-tool-btn margin-r-10"
<button id="meta-add-meta" v-has="'asset_discovery_edit'" :title="$t('overall.createLabel')" class="top-tool-btn margin-r-10"
type="button" @click="add">
<i class="nz-icon nz-icon-create-square"></i>
</button>
@@ -21,15 +21,15 @@
:params="searchLabel"
:params2="searchCheckBox"
:permissions="{
import: 'asset_add',
export: 'asset_edit'
import: 'asset_discovery_edit',
export: 'asset_discovery_view'
}"
class="top-tool-export margin-l-10 margin-r-10"
export-file-name="asset"
export-url="/asset/asset/export"
import-url="/asset/asset/import"
@afterImport="getTableData"
v-has="['asset_add','asset_edit','asset_delete']"
v-has="['asset_discovery_view','asset_discovery_edit','asset_discovery_el']"
>
<template v-slot:before>
<div>
@@ -43,7 +43,7 @@
:type="'link'"
:title="$t('overall.batchDel')"
id="asset-list-batch-delete"
v-has="'asset_delete'"
v-has="'asset_discovery_del'"
:api="url"
:delete-objs="batchDeleteObjs"
@after="getTableData"
@@ -66,6 +66,7 @@
@del="del"
@edit="edit"
@copy="copy"
@force="force"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@@ -154,9 +155,9 @@ export default {
snmpCredentialIds: '',
schedule: {
type: 1,
stime: '2021-01-10 10:10:10',
stime: '',
repeat: 1,
nums: [1, 2, 3, 4, 5, 6, 7]
nums: []
}
},
blankMetaGroup: {
@@ -194,6 +195,9 @@ export default {
}
this.rightBox.metaShow = true
},
force (item) {
console.log(item)
},
closeRightBox (refresh) {
this.rightBox.show = false
if (refresh) {