|
@@ -3,7 +3,7 @@
|
|
|
<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '参数'" v-model="isShowDialog" width="769px">
|
|
|
<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
|
|
|
<el-form-item label="参数标识" prop="key">
|
|
|
- <el-input v-model="ruleForm.key" placeholder="请输入参数标识" :disabled="ruleForm.id!== 0 ?true : false" />
|
|
|
+ <el-input v-model="ruleForm.key" placeholder="请输入参数标识" :disabled="ruleForm.id !== 0 ? true : false" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="参数名称" prop="name">
|
|
|
<el-input v-model="ruleForm.name" placeholder="请输入参数名称" />
|
|
@@ -12,7 +12,7 @@
|
|
|
<el-form-item label="数据类型" prop="type">
|
|
|
<el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange">
|
|
|
<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
|
|
|
- <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="item.type=='object'" />
|
|
|
+ <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="item.type == 'object'" />
|
|
|
</el-option-group>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -38,90 +38,104 @@
|
|
|
<el-form-item label="布尔值" prop="maxLength" v-if="type == 'boolean'">
|
|
|
<div class="input-box">
|
|
|
<el-input v-model="valueType.trueText" placeholder="请输入布尔值" value="是" /><span style="margin: 0px 10px">~</span>
|
|
|
- <el-input v-model="valueType.trueValue" placeholder="请输入布尔值" value="true"/>
|
|
|
+ <el-input v-model="valueType.trueValue" placeholder="请输入布尔值" value="true" />
|
|
|
</div>
|
|
|
|
|
|
<div class="input-box">
|
|
|
- <el-input v-model="valueType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
|
|
|
- <el-input v-model="valueType.falseValue" placeholder="请输入布尔值" value="false"/>
|
|
|
+ <el-input v-model="valueType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
|
|
|
+ <el-input v-model="valueType.falseValue" placeholder="请输入布尔值" value="false" />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="枚举项" prop="maxLength" v-if="type == 'enum'">
|
|
|
<div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
|
- <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon><Right /></el-icon></span>
|
|
|
- <el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
|
+ <el-input v-model="item.text" placeholder="请输入枚举文本" /><span style="margin: 0px 10px"><el-icon>
|
|
|
+ <Right />
|
|
|
+ </el-icon></span>
|
|
|
+ <el-input v-model="item.value" placeholder="请输入枚举值" />
|
|
|
<div class="input-option">
|
|
|
- <el-icon @click="addEnum" v-if="index == 0"><Plus /></el-icon>
|
|
|
- <el-icon @click="delEnum(index)" v-if="index != 0"><Minus /></el-icon>
|
|
|
+ <el-icon @click="addEnum" v-if="index == 0">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon @click="delEnum(index)" v-if="index != 0">
|
|
|
+ <Minus />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="JSON对象" prop="maxLength" v-if="type == 'object'">
|
|
|
<div class="input-options" @click="addJson">
|
|
|
- <el-icon ><Plus /></el-icon>
|
|
|
- <div>添加参数</div>
|
|
|
- </div>
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <div>添加参数</div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
- <div v-if="type == 'array'">
|
|
|
- <el-form-item label="元素类型" prop="type" >
|
|
|
- <el-select v-model="elementType.type" placeholder="请选择元素类型" @change="seletChanges">
|
|
|
- <el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
|
|
|
- <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="item.type=='array'" />
|
|
|
- </el-option-group>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
+ <div v-if="type == 'array'">
|
|
|
+ <el-form-item label="元素类型" prop="type">
|
|
|
+ <el-select v-model="elementType.type" placeholder="请选择元素类型" @change="seletChanges">
|
|
|
+ <el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
|
|
|
+ <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" :disabled="item.type == 'array'" />
|
|
|
+ </el-option-group>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item label="精度" prop="decimals" v-if="types == 'float' || types == 'double'">
|
|
|
- <el-input v-model="elementType.decimals" placeholder="请输入精度" />
|
|
|
- </el-form-item>
|
|
|
|
|
|
- <el-form-item label="单位" prop="unit" v-if="types == 'int' || types == 'long' || types == 'float' || types == 'double'">
|
|
|
- <el-input v-model="elementType.unit" placeholder="请输入单位" />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="精度" prop="decimals" v-if="types == 'float' || types == 'double'">
|
|
|
+ <el-input v-model="elementType.decimals" placeholder="请输入精度" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item label="最大长度" prop="maxLength" v-if="types == 'string'">
|
|
|
- <el-input v-model="elementType.maxLength" placeholder="请输入最大长度" />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="单位" prop="unit" v-if="types == 'int' || types == 'long' || types == 'float' || types == 'double'">
|
|
|
+ <el-input v-model="elementType.unit" placeholder="请输入单位" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item label="时间格式" prop="maxLength" v-if="types == 'date'">
|
|
|
- <el-input v-model="elementType.maxLength" placeholder="请输入时间格式" />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="最大长度" prop="maxLength" v-if="types == 'string'">
|
|
|
+ <el-input v-model="elementType.maxLength" placeholder="请输入最大长度" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item label="布尔值" prop="maxLength" v-if="types == 'boolean'">
|
|
|
- <div class="input-box">
|
|
|
- <el-input v-model="elementType.trueText" placeholder="请输入布尔值" value="是" /><span style="margin: 0px 10px">~</span>
|
|
|
- <el-input v-model="elementType.trueValue" placeholder="请输入布尔值" value="true"/>
|
|
|
- </div>
|
|
|
+ <el-form-item label="时间格式" prop="maxLength" v-if="types == 'date'">
|
|
|
+ <el-input v-model="elementType.maxLength" placeholder="请输入时间格式" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <div class="input-box">
|
|
|
- <el-input v-model="elementType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
|
|
|
- <el-input v-model="elementType.falseValue" placeholder="请输入布尔值" value="false"/>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="布尔值" prop="maxLength" v-if="types == 'boolean'">
|
|
|
+ <div class="input-box">
|
|
|
+ <el-input v-model="elementType.trueText" placeholder="请输入布尔值" value="是" /><span style="margin: 0px 10px">~</span>
|
|
|
+ <el-input v-model="elementType.trueValue" placeholder="请输入布尔值" value="true" />
|
|
|
+ </div>
|
|
|
|
|
|
- <el-form-item label="枚举项" prop="maxLength" v-if="types == 'enum'">
|
|
|
- <div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
|
- <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon><Right /></el-icon></span>
|
|
|
- <el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
|
- <div class="input-option">
|
|
|
- <el-icon @click="addEnum" v-if="index == 0"><Plus /></el-icon>
|
|
|
- <el-icon @click="delEnum(index)" v-if="index != 0"><Minus /></el-icon>
|
|
|
+ <div class="input-box">
|
|
|
+ <el-input v-model="elementType.falseText" placeholder="请输入布尔值" value="否" /> <span style="margin: 0px 10px">~</span>
|
|
|
+ <el-input v-model="elementType.falseValue" placeholder="请输入布尔值" value="false" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="枚举项" prop="maxLength" v-if="types == 'enum'">
|
|
|
+ <div class="input-box" v-for="(item, index) in enumdata" :key="index">
|
|
|
+ <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon>
|
|
|
+ <Right />
|
|
|
+ </el-icon></span>
|
|
|
+ <el-input v-model="item.value" placeholder="请输入枚举文本" />
|
|
|
+ <div class="input-option">
|
|
|
+ <el-icon @click="addEnum" v-if="index == 0">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon @click="delEnum(index)" v-if="index != 0">
|
|
|
+ <Minus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
<!--根据数据类型输出不同表单-->
|
|
|
|
|
|
-
|
|
|
+
|
|
|
<el-form-item label="参数描述 " prop="desc">
|
|
|
<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入参数描述"></el-input>
|
|
|
</el-form-item>
|
|
@@ -140,7 +154,7 @@
|
|
|
import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
|
|
|
import api from '/@/api/device';
|
|
|
import uploadVue from '/@/components/upload/index.vue';
|
|
|
-import { Plus, Minus,Right } from '@element-plus/icons-vue';
|
|
|
+import { Plus, Minus, Right } from '@element-plus/icons-vue';
|
|
|
|
|
|
import { ElMessage, UploadProps } from 'element-plus';
|
|
|
|
|
@@ -158,7 +172,7 @@ interface DicState {
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'deviceEditPro',
|
|
|
- components: { Plus, Minus,Right },
|
|
|
+ components: { Plus, Minus, Right },
|
|
|
setup(prop, { emit }) {
|
|
|
const formRef = ref<HTMLElement | null>(null);
|
|
|
|
|
@@ -166,7 +180,7 @@ export default defineComponent({
|
|
|
isShowDialog: false,
|
|
|
typeData: [], //
|
|
|
type: '',
|
|
|
- types:'',
|
|
|
+ types: '',
|
|
|
valueType: {
|
|
|
type: '',
|
|
|
maxLength: '',
|
|
@@ -183,7 +197,7 @@ export default defineComponent({
|
|
|
],
|
|
|
|
|
|
ruleForm: {
|
|
|
- id:0,
|
|
|
+ id: 0,
|
|
|
name: '',
|
|
|
key: '',
|
|
|
transportProtocol: '',
|
|
@@ -236,12 +250,12 @@ export default defineComponent({
|
|
|
name: '',
|
|
|
desc: '',
|
|
|
};
|
|
|
- state.valueType={};
|
|
|
- state.enumdata=[{
|
|
|
- 'text': '',
|
|
|
- 'value': '',
|
|
|
- }];
|
|
|
- state.elementType={};
|
|
|
+ state.valueType = {};
|
|
|
+ state.enumdata = [{
|
|
|
+ 'text': '',
|
|
|
+ 'value': '',
|
|
|
+ }];
|
|
|
+ state.elementType = {};
|
|
|
};
|
|
|
|
|
|
const seletChange = (val) => {
|
|
@@ -256,16 +270,16 @@ export default defineComponent({
|
|
|
|
|
|
const addEnum = () => {
|
|
|
state.enumdata.push({
|
|
|
- 'text': '',
|
|
|
- 'value': '',
|
|
|
-
|
|
|
- });
|
|
|
+ 'text': '',
|
|
|
+ 'value': '',
|
|
|
+
|
|
|
+ });
|
|
|
};
|
|
|
- const delEnum=(index)=>{
|
|
|
+ const delEnum = (index) => {
|
|
|
state.enumdata.splice(index, 1);
|
|
|
}
|
|
|
|
|
|
- const addJson=()=>{
|
|
|
+ const addJson = () => {
|
|
|
|
|
|
}
|
|
|
// 关闭弹窗
|
|
@@ -291,14 +305,14 @@ export default defineComponent({
|
|
|
});
|
|
|
} else {
|
|
|
//添加
|
|
|
- if(state.type=='enum'){
|
|
|
- state.valueType.elements=state.enumdata;
|
|
|
+ if (state.type == 'enum') {
|
|
|
+ state.valueType.elements = state.enumdata;
|
|
|
}
|
|
|
|
|
|
state.ruleForm.valueType = state.valueType;
|
|
|
ElMessage.success('参数类型添加成功');
|
|
|
- closeDialog(); // 关闭弹窗
|
|
|
- emit('typeList',state.ruleForm,state.ruleForm.type_data);
|
|
|
+ closeDialog(); // 关闭弹窗
|
|
|
+ emit('typeList', state.ruleForm, state.ruleForm.type_data);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -327,21 +341,22 @@ export default defineComponent({
|
|
|
justify-content: space-between;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
+
|
|
|
.input-option {
|
|
|
line-height: 30px;
|
|
|
padding-top: 5px;
|
|
|
width: 140px;
|
|
|
}
|
|
|
+
|
|
|
.input-option i {
|
|
|
margin: 0px 5px;
|
|
|
border: 1px solid #c3c3c3;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+
|
|
|
.input-options {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #409eff;
|
|
|
- cursor:pointer
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
|
|
+ align-items: center;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer
|
|
|
+}</style>
|