398 lines
17 KiB
Vue
398 lines
17 KiB
Vue
<template>
|
|
<div v-clickoutside="{obj: editSoftwareAsset,oldData:oldData, func: esc}" class="right-box right-box-editSoftwareAsset right-box-edit-endpoint ">
|
|
<div class="right-box__header">
|
|
<div class="header__title">{{editSoftwareAsset.id ? $t('softwareAsset.edit') : $t('softwareAsset.create')}}</div>
|
|
<div class="header__operation">
|
|
<span v-cancel="{obj: editSoftwareAsset, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
|
|
</div>
|
|
</div>
|
|
<div class="right-box__container">
|
|
<div class="container__form">
|
|
<el-form ref="modelForm" :model="editSoftwareAsset" :rules="rules" label-position="top" label-width="120px">
|
|
<!--name-->
|
|
<el-form-item :label="$t('config.model.name')" prop="name">
|
|
<el-input maxlength="128" show-word-limit v-model="editSoftwareAsset.name" size="small" type="text"></el-input>
|
|
</el-form-item>
|
|
<!--type-->
|
|
<el-form-item :label="$t('softwareType.text')" prop="typeId" class="select-warp">
|
|
<!-- <el-input maxlength="128" show-word-limit v-model="editSoftwareAsset.type" size="small" type="text"></el-input>-->
|
|
<el-select v-model="editSoftwareAsset.typeId" size="small" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" @change="renderParams">
|
|
<el-option v-for="item in softwareTypeArr" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label='$t("asset.asset")' label-width="125px" prop="assetId" v-if="!disabled">
|
|
<v-selectpage
|
|
:data="assetList"
|
|
:tb-columns="columns"
|
|
:params="{
|
|
varType: 2, dashboardId: 0,
|
|
returnChildren:0,groupId:0,
|
|
}"
|
|
:multiple="false"
|
|
:language="language"
|
|
title="ChartSearch"
|
|
key-field="id"
|
|
show-field="name"
|
|
:width="626"
|
|
v-model="editSoftwareAsset.assetId"
|
|
class="form-control"
|
|
ref="sp"
|
|
:result-format="resultFormat"
|
|
></v-selectpage>
|
|
</el-form-item>
|
|
<!--project-->
|
|
<el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
|
|
<el-select id="add-endpoint-project" v-model="editSoftwareAsset.projectId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
|
<el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!--remark-->
|
|
<el-form-item :label="$t('overall.remark')" prop="remark">
|
|
<el-input maxlength="256" show-word-limit v-model="editSoftwareAsset.remark" size="small" :rows="2" type="textarea"></el-input>
|
|
</el-form-item>
|
|
<!--params-->
|
|
<div class="form__sub-title" >
|
|
<span>{{$t('softwareAsset.Connector')}}</span>
|
|
</div>
|
|
<!-- <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-form-item>-->
|
|
<el-form-item prop="paramObj">
|
|
<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' }]">
|
|
<template v-slot:label>
|
|
<div class="form__labels-label">
|
|
<span>{{label.name}}</span>
|
|
</div>
|
|
</template>
|
|
<template v-if="label.action !== 1">
|
|
<template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT">
|
|
<el-input v-model="label.value[0]" size="small"/>
|
|
</template>
|
|
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.PASSWORD">
|
|
<el-input v-model="label.value[0]" type="password" size="small"/>
|
|
</template>
|
|
<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"/>
|
|
</template>
|
|
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO">
|
|
<el-radio-group 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-group>
|
|
</template>
|
|
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX">
|
|
<el-checkbox-group 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-group>
|
|
</template>
|
|
<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-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
|
|
</el-select>
|
|
</template>
|
|
<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>
|
|
</template>
|
|
<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>
|
|
</template>
|
|
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DATETIME">
|
|
<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">
|
|
<el-time-select v-model="label.value[0]" size="small"></el-time-select>
|
|
<el-time-select v-model="label.value[1]" size="small"></el-time-select>
|
|
</div>
|
|
<template v-else>
|
|
<el-time-select v-model="label.value[0]" size="small" style="width: 100%"></el-time-select>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="JSON.parse(label.param).interval">
|
|
<my-date-picker
|
|
id="asset-box-input-purchase-date"
|
|
v-model="label.value"
|
|
:type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'daterange' : 'datetimerange'"
|
|
placeholder=""
|
|
popper-class="right-box-select-top"
|
|
size="small"
|
|
:format="timeFormatStrToDatePickFormat(timeFormatMain,JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date)"
|
|
style="width: 100%">
|
|
</my-date-picker>
|
|
</template>
|
|
<template v-else>
|
|
<my-date-picker
|
|
id="asset-box-input-parchase-date"
|
|
v-model="label.value[0]"
|
|
:type="JSON.parse(label.param).subType"
|
|
placeholder=""
|
|
popper-class="right-box-select-top"
|
|
size="small"
|
|
style="width: 100%"
|
|
:format="timeFormatStrToDatePickFormat(timeFormatMain, JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date)">
|
|
</my-date-picker>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL">
|
|
<el-input v-model="label.value[0]" size="small"/>
|
|
</template>
|
|
</template>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="right-box__footer">
|
|
<button id="asset-edit-cancel" v-cancel="{obj: editSoftwareAsset, func: esc}" class="footer__btn footer__btn--light">
|
|
<span>{{$t('overall.cancel')}}</span>
|
|
</button>
|
|
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
|
|
<span>{{$t('overall.save')}}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { host, port } from '@/components/common/js/validate'
|
|
import editRigthBox from '../../mixin/editRigthBox'
|
|
import { sysObjectIdInput } from '@/components/common/js/validate'
|
|
import iconList from '@/components/common/js/iconList'
|
|
import { asset as assetConstants } from '@/components/common/js/constants'
|
|
|
|
export default {
|
|
name: 'softwareAssetBox',
|
|
components: {
|
|
},
|
|
props: {
|
|
obj: {
|
|
type: Object
|
|
}
|
|
},
|
|
computed: {
|
|
isCurrentUser () {
|
|
return function (username) {
|
|
return localStorage.getItem('nz-username') == username
|
|
}
|
|
},
|
|
language () { return this.$store.getters.getLanguage }
|
|
},
|
|
mixins: [editRigthBox],
|
|
data () {
|
|
const vm = this
|
|
return {
|
|
assetConstants,
|
|
disabled: false,
|
|
oldData: {},
|
|
editSoftwareAsset: {
|
|
id: '',
|
|
name: '',
|
|
typeId: '',
|
|
assetId: '',
|
|
projectId: '',
|
|
params: {},
|
|
remark: ''
|
|
},
|
|
DashboardSearchShowparamObj: [ // DashboardSearch 下拉搜索表头
|
|
{ title: 'ID', data: 'id' },
|
|
{ title: this.$t('overall.name'), data: 'name', key: 'name' },
|
|
{ title: this.$t('overall.remark'), data: 'remark', key: 'remark' }
|
|
],
|
|
url: '/asset/software',
|
|
roles: [],
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
typeId: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
|
]
|
|
},
|
|
projectList: [],
|
|
softwareTypeArr: [],
|
|
assetList: [],
|
|
columns: [
|
|
{ title: 'ID', data: 'id' },
|
|
{
|
|
title: this.$t('overall.name'),
|
|
data: function (row) {
|
|
if (row.name.length > 15) {
|
|
return row.name.substring(0, 12) + '...'
|
|
}
|
|
return row.name
|
|
}
|
|
},
|
|
{ title: this.$t('asset.manageIp'), data: 'manageIp' },
|
|
{
|
|
title: this.$t('overall.type'),
|
|
data: (row) => {
|
|
return row.type ? row.type.name : ''
|
|
}
|
|
},
|
|
{
|
|
title: this.$t('asset.model'),
|
|
data: (row) => {
|
|
return row.model ? row.model.name : ''
|
|
}
|
|
},
|
|
{
|
|
title: this.$t('overall.dc'),
|
|
data: (row) => {
|
|
return row.dc ? row.dc.name : ''
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
obj: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler (n) {
|
|
this.isEdit = true
|
|
const editSoftwareAsset = JSON.parse(JSON.stringify(n))
|
|
editSoftwareAsset.paramObj = []
|
|
if (editSoftwareAsset.projectId === -1) {
|
|
editSoftwareAsset.projectId = ''
|
|
}
|
|
editSoftwareAsset.assetId = ''
|
|
// if (editSoftwareAsset.params) {
|
|
// Object.keys(editSoftwareAsset.params).forEach(key => {
|
|
// editSoftwareAsset.paramObj.push(editSoftwareAsset.params[key])
|
|
// })
|
|
// }
|
|
this.editSoftwareAsset = editSoftwareAsset
|
|
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.getProjectList()
|
|
this.getAsset()
|
|
this.getSoftwareTypeList()
|
|
},
|
|
mounted () {
|
|
setTimeout(() => {
|
|
if (this.obj.assetId && this.obj.assetId !== -1) {
|
|
this.editSoftwareAsset.assetId = this.obj.assetId + ''
|
|
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
|
|
}
|
|
}, 500)
|
|
},
|
|
methods: {
|
|
clickOutside () {
|
|
this.esc(false)
|
|
},
|
|
iconActive (subItem) {
|
|
if (this.editSoftwareAsset.icon === subItem.value) {
|
|
this.editSoftwareAsset.icon = undefined
|
|
this.$set(this.editSoftwareAsset, 'icon', '')
|
|
} else {
|
|
this.editSoftwareAsset.icon = subItem.value
|
|
this.$set(this.editSoftwareAsset, 'icon', subItem.value)
|
|
}
|
|
},
|
|
/* 关闭弹框 */
|
|
esc (refresh) {
|
|
this.prevent_opt.save = false
|
|
this.$emit('close', refresh)
|
|
},
|
|
save () {
|
|
this.$refs.modelForm.validate((valid) => {
|
|
if (valid) {
|
|
const params = {
|
|
...this.editSoftwareAsset
|
|
}
|
|
params.params = {}
|
|
params.paramObj.forEach(item => {
|
|
if (item.type === 'CHECKBOX') {
|
|
params.params[item.name] = item.value
|
|
} else if (item.type === 'DATETIME' && JSON.parse(item.param).interval) {
|
|
params.params[item.name] = item.value
|
|
} else {
|
|
params.params[item.name] = item.value[0]
|
|
}
|
|
})
|
|
params.icon = this.imageUrl
|
|
if (this.editSoftwareAsset.id) {
|
|
this.$put(this.url, params).then(res => {
|
|
this.prevent_opt.save = false
|
|
if (res.code === 200) {
|
|
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
this.esc(true)
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
} else {
|
|
this.$post(this.url, params).then(res => {
|
|
this.prevent_opt.save = false
|
|
if (res.code === 200) {
|
|
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
this.esc(true)
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
this.prevent_opt.save = false
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
/* 获取project列表 */
|
|
getProjectList () {
|
|
this.$get('monitor/project', { pageSize: -1, pageNo: 1 }).then(response => {
|
|
if (response.code === 200) {
|
|
this.projectList = response.data.list
|
|
}
|
|
})
|
|
},
|
|
/* 获取asset列表 */
|
|
getAsset () {
|
|
this.$get('asset/asset', { pageSize: -1 }).then(res => {
|
|
this.assetList = res.data.list
|
|
})
|
|
},
|
|
/* 获取softwareType列表 */
|
|
getSoftwareTypeList () {
|
|
this.$get('asset/software/type', { pageSize: -1, pageNo: 1 }).then(response => {
|
|
if (response.code === 200) {
|
|
this.softwareTypeArr = response.data.list
|
|
if (this.editSoftwareAsset.typeId) {
|
|
this.renderParams()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
resultFormat (resp) {
|
|
if (resp && resp.data) {
|
|
const assetData = {}
|
|
assetData.list = resp.data.list
|
|
assetData.totalRow = resp.data.total
|
|
return assetData
|
|
}
|
|
},
|
|
renderParams () {
|
|
this.editSoftwareAsset.paramObj = []
|
|
const findItem = this.softwareTypeArr.find(item => item.id == this.editSoftwareAsset.typeId)
|
|
if (findItem.params) {
|
|
Object.keys(findItem.params).forEach(key => {
|
|
if (findItem.params[key].type === 'CHECKBOX') {
|
|
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) {
|
|
findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key] : findItem.params[key].value
|
|
} else {
|
|
findItem.params[key].value = this.editSoftwareAsset.params[key] ? [this.editSoftwareAsset.params[key]] : findItem.params[key].value
|
|
}
|
|
this.editSoftwareAsset.paramObj.push(findItem.params[key])
|
|
})
|
|
this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|