fix: settings 细节问题
This commit is contained in:
@changcode
@@ -1,152 +1,129 @@
|
||||
<template>
|
||||
<transition name="right-box-580">
|
||||
<div class="right-box right-box-asset" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns right-box-form-delete">
|
||||
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
|
||||
v-has="'alert_silence_delete'" v-if="editAssetMeta.id">
|
||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta") + " ID：" + editAssetMeta.id :
|
||||
$t("config.assetLabel.addMeta")}}</div>
|
||||
</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta") + " ID：" + editAssetMeta.id :
|
||||
$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">
|
||||
<el-form class="right-box-form right-box-form-left" 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="" 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="" 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-input placeholder="" show-word-limit v-model="editAssetMeta.group" size="small" id="editAssetMeta-box-input-group"></el-input>-->
|
||||
<el-select v-model="editAssetMeta.groupId" size="small" :popper-class="'nz-meta-group-box'" :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-input placeholder="" show-word-limit v-model="editAssetMeta.search" size="small" id="editAssetMeta-box-input-search"></el-input>-->
|
||||
<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-input placeholder="" show-word-limit v-model="editAssetMeta.display" size="small" id="editAssetMeta-box-input-display"></el-input>-->
|
||||
<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" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @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 @click="addParam" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="editAssetMeta.type!=='datetime'">
|
||||
<span class="create-square-box">
|
||||
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
|
||||
<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="" 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="" 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" popper-class="right-box-select-dropdown 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" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @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 @click="addParam" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="editAssetMeta.type!=='datetime'">
|
||||
<span class="create-square-box">
|
||||
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-form-item prop="param" v-if="showParam" class="asset-meta-param">
|
||||
<!-- <el-input placeholder="" show-word-limit v-model="editAssetMeta.param" size="small" id="editAssetMeta-box-input-param"></el-input>-->
|
||||
<div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='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==='radio' || editAssetMeta.type==='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==='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==='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="512" 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 :type="editAssetMeta.type" :param="editAssetMeta.param"/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-form-item prop="param" v-if="showParam" class="asset-meta-param">
|
||||
<div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='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==='radio' || editAssetMeta.type==='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==='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==='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="512" 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 :type="editAssetMeta.type" :param="editAssetMeta.param"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end--表单-->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user