506 lines
18 KiB
Vue
506 lines
18 KiB
Vue
<template>
|
|
<transition name="right-box-580">
|
|
<div class="right-box right-box-asset-meta" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
|
|
<!-- begin--标题-->
|
|
<div class="right-box__header">
|
|
<div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta"): $t("config.assetLabel.addMeta")}}
|
|
</div>
|
|
<div class="header__operation">
|
|
<span v-cancel="{obj: editAssetMeta, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
|
</div>
|
|
</div>
|
|
<!-- begin--表单-->
|
|
<div class="right-box__container">
|
|
<div class="container__form">
|
|
<el-form label-width="120px" :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
|
|
<el-form-item :label='$t("config.assetLabel.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-form-item>
|
|
<el-form-item :label='$t("config.assetLabel.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-form-item>
|
|
<el-form-item :label='$t("config.assetLabel.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-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label='$t("config.assetLabel.search")' prop="search">
|
|
<el-switch
|
|
@change="switchSearch"
|
|
v-model="editAssetMeta.search"
|
|
active-color="#ee9d3f"
|
|
active-value="1"
|
|
inactive-value="0">
|
|
</el-switch>
|
|
</el-form-item>
|
|
<el-form-item :label='$t("config.assetLabel.display")' prop="display">
|
|
<el-switch
|
|
v-model="editAssetMeta.display"
|
|
active-color="#ee9d3f"
|
|
active-value="1"
|
|
inactive-value="0">
|
|
</el-switch>
|
|
</el-form-item>
|
|
<el-form-item :label='$t("config.assetLabel.type")' prop="type">
|
|
<el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="selectType">
|
|
<el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
|
|
<div><i :class="item.icon"></i> <span>{{item.name}}</span></div>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="showParam">
|
|
<span>{{$t('config.assetLabel.params')}}</span>
|
|
<span v-if="editAssetMeta.type.toUpperCase()!=='DATETIME'&&editAssetMeta.type.toUpperCase()!=='DOUBLE'" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" @click="addParam">
|
|
<span class="create-square-box">
|
|
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<el-form-item prop="param" v-if="showParam" class="asset-meta-param">
|
|
<div v-if="editAssetMeta.type.toUpperCase()==='RADIO' || editAssetMeta.type.toUpperCase()==='CHECKBOX' || editAssetMeta.type.toUpperCase()==='SELECT'" class="meta-option-box">
|
|
<el-row class="asset-meta-param-row asset-meta-param-header">
|
|
<el-col :span="12">
|
|
{{$t('config.assetLabel.option')}}
|
|
</el-col>
|
|
<el-col :span="6">
|
|
{{$t('config.assetLabel.isCheck')}}
|
|
</el-col>
|
|
<el-col :span="6">
|
|
{{$t('config.assetLabel.operate')}}
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
|
|
<el-col :span="12">
|
|
<el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-radio v-if="editAssetMeta.type.toUpperCase()==='RADIO' || editAssetMeta.type.toUpperCase()==='SELECT'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetLabel.default')}}</el-radio>
|
|
<el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetLabel.default')}}</el-checkbox>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="">
|
|
<span class="nz-icon-minus-medium">
|
|
<i @click="deleteParam(index)" class="nz-icon nz-icon-minus"></i>
|
|
</span>
|
|
<span class="nz-icon-copy">
|
|
<i @click="copyParam(index)" class="nz-icon nz-icon-override"></i>
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div v-if="editAssetMeta.type.toUpperCase()==='DATETIME'">
|
|
<el-row style="margin-bottom: 10px">
|
|
<span class="datetime-header">{{$t('config.assetLabel.dateType')}}: </span>
|
|
<el-radio-group v-model="editAssetMeta.param.subType">
|
|
<el-radio :label="'date'">{{$t('config.assetLabel.date')}}</el-radio>
|
|
<el-radio :label="'time'">{{$t('config.assetLabel.time')}}</el-radio>
|
|
<el-radio :label="'datetime'">{{$t('config.assetLabel.datetimes')}}</el-radio>
|
|
</el-radio-group>
|
|
</el-row>
|
|
<el-row>
|
|
<span class="datetime-header">{{$t('config.assetLabel.interval')}}: </span>
|
|
<el-switch
|
|
v-model="editAssetMeta.param.interval"
|
|
@change="$forceUpdate"
|
|
active-color="#ee9d3f">
|
|
</el-switch>
|
|
</el-row>
|
|
</div>
|
|
<div v-if="editAssetMeta.type.toUpperCase()==='DOUBLE'">
|
|
<el-row>
|
|
<span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
|
|
<el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
|
|
</el-row>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item :label='$t("overall.remark")' prop="remark">
|
|
<el-input placeholder="" maxlength="256" type="textarea" show-word-limit v-model="editAssetMeta.remark" size="small" id="editAssetMeta-box-input-remark"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item :label='$t("config.assetLabel.example")'>-->
|
|
<!-- <assetTagEx :param="editAssetMeta.param" :type="editAssetMeta.type.toUpperCase()"/>-->
|
|
<!-- </el-form-item>-->
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<!-- end--表单-->
|
|
|
|
<!-- begin--底部按钮-->
|
|
<div class="right-box__footer">
|
|
<button v-cancel="{obj:editAssetMeta,func:esc}" id="editAssetMeta-box-esc" class="footer__btn footer__btn--light">
|
|
<span>{{$t('overall.cancel')}}</span>
|
|
</button>
|
|
<button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="editAssetMeta-box-save">
|
|
<span>{{$t('overall.save')}}</span>
|
|
</button>
|
|
</div>
|
|
<!-- end--底部按钮-->
|
|
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import assetTagEx from '../../page/asset/components/assetTagEx'
|
|
import editRigthBox from '../mixin/editRigthBox'
|
|
export default {
|
|
name: 'assetLabelBox',
|
|
props: {
|
|
obj: { type: Object }
|
|
},
|
|
components: { assetTagEx },
|
|
mixins: [editRigthBox],
|
|
data () {
|
|
return {
|
|
ready: false,
|
|
editAssetMeta: {},
|
|
rightBox: { // 面板弹出框相关
|
|
show: false
|
|
},
|
|
groupData: [],
|
|
rules: {
|
|
name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
|
|
metaKey: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }, { pattern: /\w/, message: this.$t('validate.onlyWord'), trigger: 'change' }],
|
|
groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
|
|
type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
|
|
},
|
|
value: '',
|
|
typeData: [
|
|
{
|
|
icon: 'nz-icon nz-icon-text',
|
|
disabled: true,
|
|
value: 'TEXT',
|
|
name: this.$t('config.assetLabel.text')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-multitext',
|
|
disabled: true,
|
|
value: 'MULTITEXT',
|
|
name: this.$t('config.assetLabel.multitext')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-textarea',
|
|
disabled: true,
|
|
value: 'TEXTAREA',
|
|
name: this.$t('config.assetLabel.textarea')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-radio',
|
|
disabled: true,
|
|
value: 'RADIO',
|
|
name: this.$t('config.assetLabel.radio')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-checkbox',
|
|
disabled: true,
|
|
value: 'CHECKBOX',
|
|
name: this.$t('config.assetLabel.checkbox')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-xialaxuanze',
|
|
disabled: true,
|
|
value: 'SELECT',
|
|
name: this.$t('config.assetLabel.select')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-integer',
|
|
disabled: true,
|
|
value: 'INTEGER',
|
|
name: this.$t('config.assetLabel.integer')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-double',
|
|
disabled: true,
|
|
value: 'DOUBLE',
|
|
name: this.$t('config.assetLabel.double')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-dingshishijian',
|
|
disabled: true,
|
|
value: 'DATETIME',
|
|
name: this.$t('config.assetLabel.datetime')
|
|
},
|
|
{
|
|
icon: 'nz-icon nz-icon-email',
|
|
disabled: true,
|
|
value: 'EMAIL',
|
|
name: this.$t('config.assetLabel.email')
|
|
}
|
|
],
|
|
showParam: false
|
|
}
|
|
},
|
|
watch: {
|
|
obj: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler (n) {
|
|
this.isEdit = true
|
|
this.editAssetMeta = {
|
|
...n,
|
|
groupId: n.groupId ? Number(n.groupId) : '',
|
|
search: `${n.search}`,
|
|
display: `${n.display}`,
|
|
param: n.param && ((typeof n.param) === 'string') ? JSON.parse(n.param) : {},
|
|
type: n.type.toUpperCase()
|
|
}
|
|
this.selectType(this.editAssetMeta.type, true)
|
|
}
|
|
},
|
|
'editAssetMeta.search': {
|
|
deep: true,
|
|
immediate: true,
|
|
handler (n) {
|
|
this.switchSearch(n)
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getGroupData()
|
|
setTimeout(() => {
|
|
this.ready = true
|
|
}, 500)
|
|
},
|
|
methods: {
|
|
switchSearch (value) {
|
|
if (value == 0) {
|
|
this.typeData.forEach(t => {
|
|
t.disabled = false
|
|
})
|
|
} else if (value == 1) {
|
|
if (this.editAssetMeta.type !== 'RADIO' &&
|
|
this.editAssetMeta.type !== 'CHECKBOX' &&
|
|
this.editAssetMeta.type !== 'SELECT') {
|
|
this.editAssetMeta.type = 'RADIO'
|
|
}
|
|
this.typeData.forEach(t => {
|
|
if (t.value === 'RADIO' || t.value === 'CHECKBOX' || t.value === 'SELECT') {
|
|
t.disabled = false
|
|
} else {
|
|
t.disabled = true
|
|
}
|
|
})
|
|
} else {
|
|
this.editAssetMeta.search = '0'
|
|
this.typeData.forEach(t => {
|
|
t.disabled = false
|
|
})
|
|
}
|
|
this.selectType(this.editAssetMeta.type, false)
|
|
},
|
|
clickOutside () {
|
|
this.esc(false)
|
|
},
|
|
esc (refresh) {
|
|
this.prevent_opt.save = false
|
|
this.$emit('close', refresh)
|
|
},
|
|
save () {
|
|
if (this.prevent_opt.save) {
|
|
return
|
|
}
|
|
this.prevent_opt.save = true
|
|
this.$refs.editAssetMetaForm.validate((valid) => {
|
|
if (valid) {
|
|
const param = { ...this.editAssetMeta }
|
|
if (param.type === 'RADIO' || param.type === 'CHECKBOX' || param.type === 'SELECT') {
|
|
for (let i = 0; i < param.param.items.length; i++) {
|
|
if (!param.param.items[i].name) {
|
|
this.$refs['metaNameOption' + i][0].focus()
|
|
this.$message.error(this.$t('config.assetLabel.metaOptionNull'))
|
|
this.prevent_opt.save = false
|
|
return
|
|
}
|
|
}
|
|
}
|
|
if (param.type !== 'RADIO' && param.type !== 'CHECKBOX' && param.type !== 'SELECT' && param.type !== 'DATETIME' && param.type !== 'DOUBLE') {
|
|
delete param.param
|
|
} else {
|
|
param.param = JSON.stringify(param.param)
|
|
}
|
|
if (this.editAssetMeta.id) {
|
|
this.$put('asset/field/meta', param).then(response => {
|
|
this.prevent_opt.save = false
|
|
if (response.code === 200) {
|
|
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
this.esc(true)
|
|
} else {
|
|
this.$message.error(response.msg)
|
|
}
|
|
})
|
|
} else {
|
|
this.$post('asset/field/meta', param).then(response => {
|
|
this.prevent_opt.save = false
|
|
if (response.code === 200) {
|
|
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
|
this.esc(true)
|
|
} else {
|
|
this.$message.error(response.msg)
|
|
}
|
|
})
|
|
}
|
|
} else {
|
|
this.prevent_opt.save = false
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
del () {
|
|
if (this.prevent_opt.save) {
|
|
return
|
|
}
|
|
this.prevent_opt.save = true
|
|
this.$confirm(this.$t('tip.confirmDelete'), {
|
|
confirmButtonText: this.$t('tip.yes'),
|
|
cancelButtonText: this.$t('tip.no'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$delete('/alert/silence?ids=' + this.editAssetMeta.id).then(response => {
|
|
this.prevent_opt.save = false
|
|
if (response.code === 200) {
|
|
this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
|
|
this.esc(true)
|
|
} else {
|
|
this.$message.error(response.msg)
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.prevent_opt.save = false
|
|
})
|
|
},
|
|
getGroupData () {
|
|
this.$get('asset/field/group', { pageSize: -1 }).then(response => {
|
|
if (response.code == 200) {
|
|
this.groupData = response.data.list
|
|
}
|
|
})
|
|
},
|
|
selectType (val, init) {
|
|
if (init) {
|
|
switch (val) {
|
|
case 'RADIO' :
|
|
case 'CHECKBOX' :
|
|
case 'SELECT' :
|
|
case 'DATETIME' :
|
|
case 'DOUBLE' :
|
|
this.showParam = true
|
|
break
|
|
default:
|
|
this.showParam = false
|
|
break
|
|
}
|
|
} else {
|
|
if (this.ready) {
|
|
switch (val) {
|
|
case 'RADIO' :
|
|
case 'CHECKBOX' :
|
|
case 'SELECT' :
|
|
this.showParam = true
|
|
this.editAssetMeta.param = {}
|
|
this.editAssetMeta.param.items = [{
|
|
name: 'Option 1',
|
|
check: false
|
|
}, {
|
|
name: 'Option 2',
|
|
check: false
|
|
}]
|
|
break
|
|
case 'DATETIME' :
|
|
this.showParam = true
|
|
this.editAssetMeta.param = {
|
|
subType: 'date',
|
|
interval: false
|
|
}
|
|
break
|
|
case 'DOUBLE' :
|
|
this.showParam = true
|
|
this.editAssetMeta.param = {
|
|
decimals: 2
|
|
}
|
|
break
|
|
default:
|
|
this.showParam = false
|
|
break
|
|
}
|
|
}
|
|
}
|
|
},
|
|
inputChange (index, val) {
|
|
this.$forceUpdate()
|
|
},
|
|
radioChange (i) {
|
|
this.editAssetMeta.param.items.forEach((item, index) => {
|
|
if (index === i) {
|
|
item.check = !!item.check
|
|
} else if (this.editAssetMeta.type.toUpperCase() !== 'CHECKBOX') {
|
|
item.check = false
|
|
}
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
checkBoxChange () {
|
|
this.$forceUpdate()
|
|
},
|
|
addParam () {
|
|
if (this.editAssetMeta.param.items.length >= 20) {
|
|
this.$message.error(this.$t('config.assetLabel.moreOptionsError'))
|
|
return
|
|
}
|
|
this.editAssetMeta.param.items.push({
|
|
name: '',
|
|
check: false
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
deleteParam (index) {
|
|
if (this.editAssetMeta.param.items.length === 1) {
|
|
this.$message.error(this.$t('config.assetLabel.onlyOptionError'))
|
|
return
|
|
}
|
|
this.editAssetMeta.param.items.splice(index, 1)
|
|
this.$forceUpdate()
|
|
},
|
|
copyParam (index) {
|
|
if (this.editAssetMeta.type.toUpperCase() !== 'CHECKBOX') {
|
|
this.editAssetMeta.param.items.push({
|
|
name: this.editAssetMeta.param.items[index].name,
|
|
check: false
|
|
})
|
|
} else {
|
|
this.editAssetMeta.param.items.push({
|
|
...this.editAssetMeta.param.items[index]
|
|
})
|
|
}
|
|
this.$forceUpdate()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/deep/ .nz-meta-group-box{
|
|
min-width: 220px;
|
|
}
|
|
/*.asset-meta-param /deep/ .el-radio__label{*/
|
|
/* display: none;*/
|
|
/*}*/
|
|
.asset-meta-param-row{
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.asset-meta-param-row:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.meta-option-box{
|
|
|
|
}
|
|
.datetime-header{
|
|
display: inline-block;
|
|
width: 80px;
|
|
margin-right: 10px;
|
|
text-align: right;
|
|
}
|
|
</style>
|