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

NEZ-610 fix: cabinet列表页面bug

Browse Source
This commit is contained in:
@changcode
2021-05-11 16:46:16 +08:00
parent fcc83cc9a5
commit 291d361945
9 changed files with 59 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -35,7 +35,7 @@
</template>
</nz-bottom-data-list>
<transition name="right-box">
<cabinet-box v-if="rightBox.show" :current-dc="obj" :obj="object" ref="cabinetEditBox" @close="closeRightBox"></cabinet-box>
<cabinet-box v-if="rightBox.show" :current-dc="obj" :obj="object" ref="cabinetEditBox" v-has="'dc_add'" @close="closeRightBox"></cabinet-box>
</transition>
</div>
</template>

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -696,7 +696,7 @@ const en = {
assets: 'Assets',
remark: 'Description',
cabinets: 'Cabinets',
createDc: 'Nre data center',
createDc: 'New data center',
editDc: 'Edit data center',
editCabinet: 'Edit cabinet',
alert: 'Alert',

1
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -127,6 +127,7 @@ export default {
}
},
edit (u) {
console.info(u)
this.$get(`${this.url}/${u.id}`).then(response => {
if (response.code === 200) {
this.object = response.data

1
nezha-fronted/src/components/common/mixin/table.js
View File

@@ -26,6 +26,7 @@ export default {
tableOperation ([command, row, param]) {
switch (command) {
case 'edit': {
console.info(1, command, row)
this.$emit('edit', row)
break
}

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

@@ -50,7 +50,6 @@
</el-form>
</div>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button v-cancel="{obj:editDc,func:esc}" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
@@ -71,7 +70,9 @@ export default {
name: 'dcBox',
components: { latlngPicker },
props: {
dc: Object,
obj: {
type: Object
},
userData: Array
},
data () {
@@ -89,6 +90,9 @@ export default {
coordinateFlag: false
}
},
created() {
console.log(this.props)
},
methods: {
/* 关闭弹框 */
esc (refresh) {
@@ -98,17 +102,16 @@ export default {
clickOutside () {
this.esc(false)
},
/* 弹出选择area弹框 */
toSelectArea () {
this.$refs.selectArea.openBox(this.editDc.area)
},
// /* 弹出选择area弹框 */
// toSelectArea () {
// this.$refs.selectArea.openBox(this.editDc.area)
// },
/* 保存 */
save: function () {
save () {
if (this.prevent_opt.save) {
return
}
;
};
this.prevent_opt.save = true
this.$refs.dcForm.validate((valid) => {
if (valid) {
@@ -117,7 +120,8 @@ export default {
const attr = this.$refs.latlngPicker.getAttribute()
param.latitude = attr.latitude
param.longitude = attr.longitude
this.$put('idc', param).then(response => {
this.$put('/dc', param).then(response => {
console.log('修改')
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -137,7 +141,8 @@ export default {
if (!regNum.test(param.latitude)) {
param.latitude = null
}
this.$post('idc', param).then(response => {
this.$post('/dc', param).then(response => {
console.log('成功')
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -162,7 +167,7 @@ export default {
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('idc?ids=' + this.editDc.id).then(response => {
this.$delete('/dc' + this.editDc.id).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -198,13 +203,15 @@ export default {
},
mounted () {
// this.getAreaData();
// console.log(this.editDc)
},
watch: {
dc: {
obj: {
immediate: true,
deep: true,
handler (n, o) {
this.editDc = JSON.parse(JSON.stringify(n))
console.info(this.editDc)
this.$nextTick(() => {
this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
})

62
nezha-fronted/src/components/common/table/settings/cabinetTable.vue
View File

@@ -17,43 +17,19 @@
</el-table-column>
<el-table-column
:resizable="true"
v-for="(item, index) in tableTitle"
v-for="(item, index) in customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
>
:label="item.label">
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'assetStat'">
<el-popover
placement="top-start"
offset="-100"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
</div>
</el-popover>
</template >
<template v-else-if="item.prop == 'alertStat'">
<el-popover
placement="top-start"
offset="-128"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.alertStat.total + '，' + $t('alert.config.P1') + '：' + scope.row.alertStat.P1 + '，' + $t('alert.config.P2') + '：' + scope.row.alertStat.P2+ '，' + $t('alert.config.P3') + '：' + scope.row.alertStat.P3">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.alertStat.total}}</span>
<span class="dc-asset-state alert-level-P1">{{scope.row.alertStat.P1}}</span>
<span class="dc-asset-state alert-level-P2">{{scope.row.alertStat.P2}}</span>
<span class="dc-asset-state alert-level-P3">{{scope.row.alertStat.P3}}</span>
</div>
</el-popover>
</template >
<template v-if="item.prop === 'assetNum'">
<span style="cursor: pointer"><i class="nz-icon nz-icon-overview-project monitorColor"></i> <span>{{scope.row.assetNum ? scope.row.assetNum : 0}}</span></span>
</template>
<template v-else-if="item.prop === 'alertNum'">
<span style="cursor: pointer"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> <span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
<template v-else="scope.row[item.prop]">-</template>
</template>
</el-table-column>
<el-table-column
@@ -62,13 +38,13 @@
fixed="right">
<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="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
<button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
<el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -78,8 +54,10 @@
<script>
import table from '@/components/common/mixin/table'
import Template from "../../../page/config/template";
export default {
name: 'cabinet Table',
components: {Template},
mixins: [table],
data () {
return {
@@ -102,12 +80,12 @@ export default {
},
{
label: this.$t('config.dc.assets'),
prop: 'assetStat',
prop: 'assetNum',
show: true
},
{
label: this.$t('alert.alert'),
prop: 'alertStat',
prop: 'alertNum',
show: true
},
{
@@ -117,10 +95,18 @@ export default {
}
]
}
},
methods: {
}
}
</script>
<style scoped>
.colorEF7458{
color: #EF7458;
}
.color23BF9A{
color: #23BF9A;
}
</style>

7
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -116,11 +116,12 @@ export default {
}
},
methods: {
},
created() {
},
computed: {
}
}
</script>

76
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -37,12 +37,8 @@
</template>
</nz-data-list>
<transition name="right-box">
<dc-box v-if="rightBox.dc.show" :dc="object" :user-data="userData" @close="closeDcBox" @reload="getTableData"></dc-box>
<dc-box v-if="rightBox.show" :obj="object" :user-data="userData" @close="closeRightBox" @reload="getTableData"></dc-box>
</transition>
<transition name="right-box">
<traffic-setting-box v-if="rightBox.trafficSetting.show" ref="trafficBox" :dc="object" @close="closeTrafficBox"></traffic-setting-box>
</transition>
<span v-if="dcDataRefresh" style="display: none"></span>
</div>
</template>
<script>
@@ -77,10 +73,6 @@ export default {
longitude: undefined,
latitude: undefined
},
rightBox: {
dc: { show: false },
trafficSetting: { show: false }
},
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
@@ -111,66 +103,12 @@ export default {
]
},
regNum: /^[0-9]+.?[0-9]*/,
tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
userData: []
}
},
computed: {
dcDataRefresh () { // 通过vuex更新dc 需要该属性到页面 否则不被监听
if (this.$store.getters.getDcDataRefresh) {
this.getTableData()
}
return this.$store.getters.getDcDataRefresh
}
},
methods: {
assetStatClassName (param) {
if (param.column.label == this.$t('config.dc.assets')) {
return 'asset-state'
}
return ''
},
edit (u) {
this.dc = JSON.parse(JSON.stringify(u))
if (!this.regNum.test(this.dc.longitude)) {
this.dc.longitude = undefined
}
if (!this.regNum.test(this.dc.latitude)) {
this.dc.latitude = undefined
}
if (!this.dc.area) {
this.$set(this.dc, 'area', { id: '', name: '' })
}
this.rightBox.dc.show = true
},
detail (u) {
this.bottomBox.object = JSON.parse(JSON.stringify(u))
if (!this.bottomBox.object.area) {
this.$set(this.bottomBox.object, 'area', { id: '', name: '' })
}
this.bottomBox.targetTab = 'detail'
this.bottomBox.showSubList = true
},
add () {
this.object = this.newObject()
this.rightBox.dc.show = true
},
closeDcBox (refresh) {
this.rightBox.dc.show = false
if (refresh) {
this.delFlag = true
this.getTableData()
}
},
closeTrafficBox (refresh) {
this.rightBox.trafficSetting.show = false
if (refresh) {
this.delFlag = true
this.getTableData()
}
},
statusChange (idc) {
this.$put('dc', idc).then(response => {
statusChange (dc) {
this.$put(this.url, dc).then(response => {
if (response.code === 200) {
this.rightBox.show = false
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -192,16 +130,8 @@ export default {
},
regNumTest (val) { // 校验是否是数字
return this.regNum.test(val)
},
initEvent () {
bus.$on('dc-list-change', () => {
this.getTableData()
})
}
},
beforeDestroy () {
bus.$off('dc-list-change')
},
mounted () {
this.getUserData()
}

4
nezha-fronted/src/components/page/config/model.vue
View File

@@ -87,6 +87,10 @@ export default {
}
},
methods: {
},
created() {
},
computed: {
}