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

NEZ-3354 fix：Asset attributes 元数据不同步问题

Browse Source
This commit is contained in:
zyh
2023-12-07 11:11:33 +08:00
parent dc814ce353
commit c1a86bca29
4 changed files with 119 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,12 +12,12 @@
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<div class="container__form"> <div class="container__form">
<el-form label-width="120px" :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules"> <el-form label-width="120px" :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
<el-form-item :label='$t("overall.name")' prop="name"> <el-form-item :label='$t("overall.name")' prop="name">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input> <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("overall.key")' prop="metaKey"> <el-form-item :label='$t("overall.key")' prop="metaKey">
<el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input> <el-input :disabled="!!(editAssetMeta.id)" placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("dashboard.dashboard.chartForm.group")' prop="groupId"> <el-form-item :label='$t("dashboard.dashboard.chartForm.group")' prop="groupId">
<el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" :popper-append-to-body="false"> <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" :popper-append-to-body="false">
@@ -336,9 +336,7 @@ export default {
t.disabled = false t.disabled = false
}) })
} else if (value == 1) { } else if (value == 1) {
if (this.editAssetMeta.type !== 'RADIO' && if (this.editAssetMeta.type !== 'RADIO' && this.editAssetMeta.type !== 'CHECKBOX' && this.editAssetMeta.type !== 'SELECT') {
this.editAssetMeta.type !== 'CHECKBOX' &&
this.editAssetMeta.type !== 'SELECT') {
flag = false flag = false
this.editAssetMeta.type = 'RADIO' this.editAssetMeta.type = 'RADIO'
} }

93
nezha-fronted/src/components/common/rightBox/software/softwareAssetBox.vue
View File

@@ -52,7 +52,7 @@
<!-- <el-form-item v-for="(value, key) in editSoftwareAsset.params" :label="key" :key="key">--> <!-- <el-form-item v-for="(value, key) in editSoftwareAsset.params" :label="key" :key="key">-->
<!-- <el-input maxlength="128" show-word-limit v-model="editSoftwareAsset.params[key]" size="small" type="text" @input="$forceUpdate()"></el-input>--> <!-- <el-input maxlength="128" show-word-limit v-model="editSoftwareAsset.params[key]" size="small" type="text" @input="$forceUpdate()"></el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item prop="paramObj"> <el-form-item prop="paramObj" v-my-loading="loading">
<div v-for="(label, i) in editSoftwareAsset.paramObj" :key="i" class="form__dotted-item form__dotted-item-required"> <div v-for="(label, i) in editSoftwareAsset.paramObj" :key="i" class="form__dotted-item form__dotted-item-required">
<el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[ { required: JSON.parse(label.param).required === '1', message: $t('validate.required'), trigger: 'blur' }]"> <el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[ { required: JSON.parse(label.param).required === '1', message: $t('validate.required'), trigger: 'blur' }]">
<template v-slot:label> <template v-slot:label>
@@ -155,7 +155,7 @@ import editRigthBox from '../../mixin/editRigthBox'
import { sysObjectIdInput } from '@/components/common/js/validate' import { sysObjectIdInput } from '@/components/common/js/validate'
import iconList from '@/components/common/js/iconList' import iconList from '@/components/common/js/iconList'
import { asset as assetConstants } from '@/components/common/js/constants' import { asset as assetConstants } from '@/components/common/js/constants'
import axios from 'axios'
export default { export default {
name: 'softwareAssetBox', name: 'softwareAssetBox',
components: { components: {
@@ -235,7 +235,8 @@ export default {
return row.dc ? row.dc.name : '' return row.dc ? row.dc.name : ''
} }
} }
] ],
loading: false
} }
}, },
watch: { watch: {
@@ -245,13 +246,7 @@ export default {
handler (n) { handler (n) {
this.isEdit = true this.isEdit = true
const editSoftwareAsset = JSON.parse(JSON.stringify(n)) const editSoftwareAsset = JSON.parse(JSON.stringify(n))
editSoftwareAsset.paramObj = []
editSoftwareAsset.assetId = '' editSoftwareAsset.assetId = ''
// if (editSoftwareAsset.params) {
// Object.keys(editSoftwareAsset.params).forEach(key => {
// editSoftwareAsset.paramObj.push(editSoftwareAsset.params[key])
// })
// }
this.editSoftwareAsset = editSoftwareAsset this.editSoftwareAsset = editSoftwareAsset
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset) this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
} }
@@ -293,15 +288,14 @@ export default {
const params = { const params = {
...this.editSoftwareAsset ...this.editSoftwareAsset
} }
params.params = {} params.params = {
connectorAttributeKeys: []
}
params.paramObj.forEach(item => { params.paramObj.forEach(item => {
if (item.type === 'CHECKBOX') { params.params.connectorAttributeKeys.push({
params.params[item.metaKey] = item.value key: item.metaKey,
} else if (item.type === 'DATETIME' && JSON.parse(item.param).interval) { value: item.value
params.params[item.metaKey] = item.value })
} else {
params.params[item.metaKey] = item.value[0]
}
}) })
params.icon = this.imageUrl params.icon = this.imageUrl
if (this.editSoftwareAsset.id) { if (this.editSoftwareAsset.id) {
@@ -356,21 +350,58 @@ export default {
return assetData return assetData
} }
}, },
renderParams () { async renderParams () {
this.editSoftwareAsset.paramObj = [] // 获取当前type的attributes key
this.loading = true
const findItem = this.softwareTypeArr.find(item => item.id == this.editSoftwareAsset.typeId) const findItem = this.softwareTypeArr.find(item => item.id == this.editSoftwareAsset.typeId)
if (findItem.params) { const connectorAttributeKeys = this.$lodash.get(findItem, 'params.connectorAttributeKeys', [])
Object.keys(findItem.params).forEach(key => { const requests = connectorAttributeKeys.map(key => {
if (findItem.params[key].type === 'CHECKBOX') { return this.$get('asset/field/meta', { key: key })
findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key] : findItem.params[key].value })
} else if (findItem.params[key].type === 'DATETIME' && JSON.parse(findItem.params[key].param).interval) { const paramObj = []
findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key] : findItem.params[key].value const res = await axios.all(requests)
} else { res.forEach(response => {
findItem.params[key].value = this.editSoftwareAsset.params[key] ? [this.editSoftwareAsset.params[key]] : findItem.params[key].value const data = this.$lodash.get(response, 'data.list.0')
} if (data) {
this.editSoftwareAsset.paramObj.push(findItem.params[key]) paramObj.push({ ...data, value: this.blankLabelValue(data), action: 0 })
}) }
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset) })
// 设置填写过的值
const keyValue = this.$lodash.get(this.editSoftwareAsset, 'params.connectorAttributeKeys', [])
paramObj.forEach(item => {
const findValue = keyValue.find(subItem => subItem.key == item.metaKey)?.value
findValue && (item.value = findValue)
})
this.$set(this.editSoftwareAsset, 'paramObj', paramObj)
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
this.loading = false
},
blankLabelValue (label) {
const defaultValue = JSON.parse(label.param).default || ''
if (label.type.toUpperCase() === this.assetConstants.labelTypeData.CHECKBOX) {
const arr = []
if (label.param && JSON.parse(label.param).items) {
JSON.parse(label.param).items.forEach(item => {
if (item.check) {
arr.push(item.name)
}
})
}
return arr
} else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.MULTITEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA) {
return [defaultValue]
} else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.RADIO || label.type.toUpperCase() === assetConstants.labelTypeData.SELECT) {
const arr = ['']
if (label.param && JSON.parse(label.param).items) {
JSON.parse(label.param).items.forEach(item => {
if (item.check) {
arr[0] = item.name
}
})
}
return arr
} else {
return [defaultValue]
} }
} }
} }

82
nezha-fronted/src/components/common/rightBox/software/softwareTypeBox.vue
View File

@@ -44,7 +44,8 @@
<div class="form__sub-title" > <div class="form__sub-title" >
<span>{{$t('softwareType.params')}}</span> <span>{{$t('softwareType.params')}}</span>
</div> </div>
<el-form-item prop="paramObj"> <!-- 此处属性只展示不可修改 -->
<el-form-item prop="paramObj" v-my-loading="loading">
<div v-for="(label, i) in editSoftwareType.paramObj" :key="i" class="form__dotted-item form__dotted-item-required"> <div v-for="(label, i) in editSoftwareType.paramObj" :key="i" class="form__dotted-item form__dotted-item-required">
<el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[]"> <el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[]">
<template v-slot:label> <template v-slot:label>
@@ -56,56 +57,59 @@
</div> </div>
</template> </template>
<template v-if="label.action !== 1"> <template v-if="label.action !== 1">
<!-- TEXT -->
<template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT"> <template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT">
<el-input v-model="label.value[0]" size="small"/> <el-input disabled v-model="label.value[0]" size="small"/>
</template> </template>
<!-- PASSWORD -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.PASSWORD"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.PASSWORD">
<el-input v-model="label.value[0]" type="password" size="small"/> <el-input disabled v-model="label.value[0]" type="password" size="small"/>
</template>
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.MULTITEXT">
<div v-for="(value, i) in label.value" :key="i" class="label__multi-text">
<el-input v-model="label.value[i]" size="small"/>
<span @click="addMultiTextRow(label)" style="margin: 0 5px" :title="$t('tip.add')"><i class="nz-icon nz-icon-plus"></i></span>
<span @click="removeMultiTextRow(label, i)" :title="$t('overall.delete')"><i class="nz-icon nz-icon-minus"></i></span>
</div>
</template> </template>
<!-- TEXTAREA -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA">
<el-input v-model="label.value[0]" :maxlength="4096" show-word-limit size="small" :rows="2" type="textarea"/> <el-input disabled v-model="label.value[0]" :maxlength="4096" show-word-limit size="small" :rows="2" type="textarea"/>
</template> </template>
<!-- RADIO -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO">
<el-radio-group v-model="label.value[0]"> <el-radio-group disabled v-model="label.value[0]">
<el-radio v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name">{{item.name}}</el-radio> <el-radio v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name">{{item.name}}</el-radio>
</el-radio-group> </el-radio-group>
</template> </template>
<!-- CHECKBOX -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX">
<el-checkbox-group v-model="label.value"> <el-checkbox-group disabled v-model="label.value">
<el-checkbox v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-checkbox> <el-checkbox v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</template> </template>
<!-- SELECT -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
<el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small"> <el-select disabled v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small">
<el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option> <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
</el-select> </el-select>
</template> </template>
<!-- INTEGER -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.INTEGER"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.INTEGER">
<el-input v-model="label.value[0]" oninput="value=value.replace(/[^\d]/g,'')" size="small"></el-input> <el-input disabled v-model="label.value[0]" oninput="value=value.replace(/[^\d]/g,'')" size="small"></el-input>
</template> </template>
<!-- DOUBLE -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DOUBLE"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DOUBLE">
<el-input-number v-model="label.value[0]" :controls="false" size="small" :precision="JSON.parse(label.param).decimals" style="width: 100%;text-align: left" :max="10000000000000000000" :min="-10000000000000000000"></el-input-number> <el-input-number disabled v-model="label.value[0]" :controls="false" size="small" :precision="JSON.parse(label.param).decimals" style="width: 100%;text-align: left" :max="10000000000000000000" :min="-10000000000000000000"></el-input-number>
</template> </template>
<!-- DATETIME -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DATETIME"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DATETIME">
<template v-if="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.time"> <template v-if="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.time">
<div v-if="JSON.parse(label.param).interval" style="display: flex; justify-content: space-between"> <div v-if="JSON.parse(label.param).interval" style="display: flex; justify-content: space-between">
<el-time-select v-model="label.value[0]" size="small"></el-time-select> <el-time-select disabled v-model="label.value[0]" size="small"></el-time-select>
<el-time-select v-model="label.value[1]" size="small"></el-time-select> <el-time-select disabled v-model="label.value[1]" size="small"></el-time-select>
</div> </div>
<template v-else> <template v-else>
<el-time-select v-model="label.value[0]" size="small" style="width: 100%"></el-time-select> <el-time-select disabled v-model="label.value[0]" size="small" style="width: 100%"></el-time-select>
</template> </template>
</template> </template>
<template v-else> <template v-else>
<template v-if="JSON.parse(label.param).interval"> <template v-if="JSON.parse(label.param).interval">
<my-date-picker <my-date-picker
disabled
id="asset-box-input-purchase-date" id="asset-box-input-purchase-date"
v-model="label.value" v-model="label.value"
:type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'daterange' : 'datetimerange'" :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'daterange' : 'datetimerange'"
@@ -118,6 +122,7 @@
</template> </template>
<template v-else> <template v-else>
<my-date-picker <my-date-picker
disabled
id="asset-box-input-parchase-date" id="asset-box-input-parchase-date"
v-model="label.value[0]" v-model="label.value[0]"
:type="JSON.parse(label.param).subType" :type="JSON.parse(label.param).subType"
@@ -130,8 +135,9 @@
</template> </template>
</template> </template>
</template> </template>
<!-- EMAIL -->
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL"> <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL">
<el-input v-model="label.value[0]" size="small"/> <el-input disabled v-model="label.value[0]" size="small"/>
</template> </template>
</template> </template>
</el-form-item> </el-form-item>
@@ -171,7 +177,7 @@ import editRigthBox from '../../mixin/editRigthBox'
import { sysObjectIdInput } from '@/components/common/js/validate' import { sysObjectIdInput } from '@/components/common/js/validate'
import iconList from '@/components/common/js/iconList' import iconList from '@/components/common/js/iconList'
import { asset as assetConstants } from '@/components/common/js/constants' import { asset as assetConstants } from '@/components/common/js/constants'
import axios from 'axios'
export default { export default {
name: 'softwareTypeBox', name: 'softwareTypeBox',
components: { components: {
@@ -252,7 +258,8 @@ export default {
}) })
} }
} }
} },
loading: false
} }
}, },
watch: { watch: {
@@ -263,13 +270,8 @@ export default {
this.isEdit = true this.isEdit = true
const editSoftwareType = JSON.parse(JSON.stringify(n)) const editSoftwareType = JSON.parse(JSON.stringify(n))
this.imageUrl = editSoftwareType.icon this.imageUrl = editSoftwareType.icon
editSoftwareType.paramObj = []
if (editSoftwareType.params) {
Object.keys(editSoftwareType.params).forEach(key => {
editSoftwareType.paramObj.push(editSoftwareType.params[key])
})
}
this.editSoftwareType = editSoftwareType this.editSoftwareType = editSoftwareType
this.renderParams()
} }
} }
}, },
@@ -279,6 +281,24 @@ export default {
this.getFieldGroupData() this.getFieldGroupData()
}, },
methods: { methods: {
// 根据key 请求Asset attributes
async renderParams () {
this.loading = true
const connectorAttributeKeys = this.$lodash.get(this.editSoftwareType, 'params.connectorAttributeKeys', [])
const requests = connectorAttributeKeys.map(key => {
return this.$get('asset/field/meta', { key: key })
})
const paramObj = []
const res = await axios.all(requests)
res.forEach(response => {
const data = this.$lodash.get(response, 'data.list.0')
if (data) {
paramObj.push({ ...data, value: this.blankLabelValue(data), action: 0 })
}
})
this.$set(this.editSoftwareType, 'paramObj', paramObj)
this.loading = false
},
clickOutside () { clickOutside () {
this.esc(false) this.esc(false)
}, },
@@ -313,9 +333,11 @@ export default {
...this.editSoftwareType ...this.editSoftwareType
} }
params.icon = this.imageUrl params.icon = this.imageUrl
params.params = {} params.params = {
connectorAttributeKeys: []
}
params.paramObj.forEach(item => { params.paramObj.forEach(item => {
params.params[item.metaKey] = item params.params.connectorAttributeKeys.push(item.metaKey)
}) })
if (this.editSoftwareType.id) { if (this.editSoftwareType.id) {
this.$put(this.url, params).then(res => { this.$put(this.url, params).then(res => {

4
nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
View File

@@ -66,7 +66,7 @@
</div> </div>
<div v-else-if=" item.prop === 'type' "> <div v-else-if=" item.prop === 'type' ">
<div v-if="scope.row[item.prop].toUpperCase() == 'TEXT'"><i class="nz-icon nz-icon-text"></i>&nbsp;&nbsp;{{typeData[0].name}}</div> <div v-if="scope.row[item.prop].toUpperCase() == 'TEXT'"><i class="nz-icon nz-icon-text"></i>&nbsp;&nbsp;{{typeData[0].name}}</div>
<div v-else-if="scope.row[item.prop].toUpperCase() == 'MULTITEXT'"><i class="nz-icon nz-icon-multitext"></i>&nbsp;&nbsp;{{typeData[1].name}}</div> <!-- <div v-else-if="scope.row[item.prop].toUpperCase() == 'MULTITEXT'"><i class="nz-icon nz-icon-multitext"></i>&nbsp;&nbsp;{{typeData[1].name}}</div> -->
<div v-else-if="scope.row[item.prop].toUpperCase() == 'TEXTAREA'"><i class="nz-icon nz-icon-textarea"></i>&nbsp;&nbsp;{{typeData[1].name}}</div> <div v-else-if="scope.row[item.prop].toUpperCase() == 'TEXTAREA'"><i class="nz-icon nz-icon-textarea"></i>&nbsp;&nbsp;{{typeData[1].name}}</div>
<div v-else-if="scope.row[item.prop].toUpperCase() == 'RADIO'"><i class="nz-icon nz-icon-radio"></i>&nbsp;&nbsp;{{typeData[2].name}}</div> <div v-else-if="scope.row[item.prop].toUpperCase() == 'RADIO'"><i class="nz-icon nz-icon-radio"></i>&nbsp;&nbsp;{{typeData[2].name}}</div>
<div v-else-if="scope.row[item.prop].toUpperCase() == 'CHECKBOX'"><i class="nz-icon nz-icon-checkbox"></i>&nbsp;&nbsp;{{typeData[3].name}}</div> <div v-else-if="scope.row[item.prop].toUpperCase() == 'CHECKBOX'"><i class="nz-icon nz-icon-checkbox"></i>&nbsp;&nbsp;{{typeData[3].name}}</div>
@@ -245,7 +245,7 @@ export default {
value: 'EMAIL', value: 'EMAIL',
name: this.$t('config.assetLabel.email') name: this.$t('config.assetLabel.email')
} }
], ]
} }
}, },
methods: { methods: {