feat: 增加物模型-功能定义中添加参数的对象参数添加功能

src/views/iot/device/product/component/editOption.vue

@@ -12,23 +12,13 @@
 				<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 v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
 						</el-option-group>
 					</el-select>
 				</el-form-item>
 
-				<TypeItem :valueType="valueType"></TypeItem>
-
-				<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-form-item>
-
-
+				<TypeItem :valueType="valueType" :typeData="typeData"></TypeItem>
 				<div v-if="type == 'array'">
 					<el-form-item label="元素类型" prop="type">
 						<el-select v-model="elementType.type" placeholder="请选择元素类型" @change="seletChanges">
@@ -37,31 +27,9 @@
 							</el-option-group>
 						</el-select>
 					</el-form-item>
-
-					<!-- 数组对象 -->
-					<el-form-item label="对象属性" v-if="['object'].includes(types)">
-						<div class="flex-row" style="gap:12px" v-for="(item, index) in properties" :key="index">
-							<el-input v-model="item.key" placeholder="请输入标识" />
-							<el-input v-model="item.name" placeholder="请输入名称" />
-							<el-select v-model="item.valueType.type" placeholder="请选择元素类型">
-								<el-option v-for="item in typeData[0].options" :key="item.type" :label="item.title" :value="item.type" />
-							</el-select>
-							<el-input v-model="item.desc" 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>
-					<TypeItem :valueType="elementType"></TypeItem>
+					<TypeItem :valueType="elementType" :typeData="typeData"></TypeItem>
 				</div>
 
-				<!--根据数据类型输出不同表单-->
-
 				<el-form-item label="参数描述	" prop="desc">
 					<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入参数描述"></el-input>
 				</el-form-item>
@@ -89,7 +57,7 @@ interface RuleFormState {
 	desc: string;
 }
 
-const valueType = {
+const valueTypeBase = {
 	max: '',
 	min: '',
 	unit: '',
@@ -100,6 +68,22 @@ const valueType = {
 	falseValue: '',
 	type: '',
 	maxLength: '',
+}
+
+const valueType = {
+	...valueTypeBase,
+	properties: [{
+		'key': '',
+		'name': '',
+		'desc': '',
+		'valueType': {
+			...valueTypeBase,
+			elements: [{
+				'text': '',
+				'value': ''
+			}]
+		}
+	}],
 	elements: [{
 		'text': '',
 		'value': ''
@@ -160,7 +144,6 @@ export default defineComponent({
 						datat[index]['options'] = item;
 					}
 				});
-				console.log(datat)
 				state.typeData = datat || [];
 			});
 
@@ -202,9 +185,6 @@ export default defineComponent({
 			state.enumdata.splice(index, 1);
 		}
 
-		const addJson = () => {
-
-		}
 		// 关闭弹窗
 		const closeDialog = () => {
 			state.isShowDialog = false;
@@ -249,7 +229,6 @@ export default defineComponent({
 			openDialog,
 			addEnum,
 			delEnum,
-			addJson,
 			seletChange,
 			seletChanges,
 			closeDialog,

src/views/iot/device/product/component/typeItem.vue

@@ -21,7 +21,7 @@
       <el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
     </el-form-item>
 
-    <el-form-item label="布尔值" v-if="valueType.type === 'boolean'">
+    <el-form-item label="布尔值" v-else-if="valueType.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" />
@@ -33,7 +33,7 @@
       </div>
     </el-form-item>
 
-    <el-form-item label="枚举项" prop="" v-if="valueType.type === 'enum'">
+    <el-form-item label="枚举项" prop="" v-else-if="valueType.type === 'enum'">
       <div class="input-box" v-for="(item, index) in valueType.elements" :key="index">
         <el-input v-model="item.text" placeholder="请输入枚举值" /><span style="margin: 0px 10px"><el-icon>
             <Right />
@@ -49,12 +49,35 @@
         </div>
       </div>
     </el-form-item>
+    <el-form-item label="对象属性" prop="" v-else-if="valueType.type === 'object'">
+      <div class="w-full" v-for="(item, index) in valueType.properties" :key="index">
+        <div class="flex-row">
+          <el-input v-model="item.key" placeholder="属性标识" class="flex1" />
+          <el-input v-model="item.name" placeholder="属性名称" class="flex1" />
+          <el-select v-model="item.valueType.type" placeholder="请选择元素类型" style="width: 140px;">
+            <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="['array', 'object'].includes(item.type)" />
+            </el-option-group>
+          </el-select>
+          <el-icon @click="addObject" v-if="index == 0">
+            <Plus />
+          </el-icon>
+          <el-icon @click="delObject(index)" v-if="index != 0">
+            <Minus />
+          </el-icon>
+        </div>
+        <el-form label-width="70" label-position="left">
+          <TypeItem v-if="item.valueType.type" :valueType="item.valueType"></TypeItem>
+        </el-form>
+      </div>
+    </el-form-item>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, PropType } from 'vue'
+import { PropType } from 'vue'
 import { Plus, Minus, Right } from '@element-plus/icons-vue';
+import TypeItem from './typeItem.vue';
 
 interface IValyeType {
   type: string;
@@ -69,14 +92,33 @@ interface IValyeType {
   maxLength?: string;
   elements: { text: string, value: string }[];
   elementType?: IValyeType;
-  properties?: { key: string, name: string, desc: string, valueType: IValyeType }[];
+  properties: { key: string, name: string, desc: string, valueType: IValyeType }[];
+}
+
+const valueTypeBase = {
+  type: '',
+  max: '',
+  min: '',
+  unit: '',
+  decimals: '',
+  trueText: '',
+  falseText: '',
+  trueValue: '',
+  falseValue: '',
+  maxLength: '',
+  elements: [{
+    'text': '',
+    'value': ''
+  }],
+  properties: [],
 }
 
 const props = defineProps({
   valueType: {
     type: Object as PropType<IValyeType>,
     required: true
-  }
+  },
+  typeData: Array as PropType<any[]>
 })
 
 const addEnum = () => {
@@ -89,12 +131,38 @@ const addEnum = () => {
 const delEnum = (index: number) => {
   props.valueType.elements.splice(index, 1)
 }
+
+const addObject = () => {
+  props.valueType.properties.push({
+    'key': '',
+    'name': '',
+    'desc': '',
+    valueType: { ...valueTypeBase }
+  })
+};
+
+const delObject = (index: number) => {
+  props.valueType.properties.splice(index, 1)
+}
 </script>
 <style scoped lang="scss">
-.input-box{
+.type-item {
+  width: 100%;
+}
+
+.w-full {
+  &:not(:first-child) {
+    margin-top: 10px
+  }
+}
+
+.flex-row {
+  width: 100%;
   margin-top: 0;
   margin-bottom: 10px;
-  &:last-child{
+  gap: 12px;
+
+  &:last-child {
     margin-bottom: 0;
   }
 }