设备-物模型-功能添加增加多个输出参数

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

@@ -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="请输入功能定义名称" />
@@ -29,150 +29,26 @@
 					</div>
 				</el-form-item>
 
-				<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" />
-						</el-option-group>
-					</el-select>
-				</el-form-item>
-
-				<!--根据数据类型输出不同表单-->
-
-				<el-form-item label="精度" prop="decimals" v-if="type == 'float' || type == 'double'">
-					<el-input v-model="valueType.decimals" placeholder="请输入精度" />
-				</el-form-item>
-
-				<el-form-item label="单位" prop="unit" v-if="type == 'int' || type == 'long' || type == 'float' || type == 'double'">
-					<el-input v-model="valueType.unit" placeholder="请输入单位" />
-				</el-form-item>
-
-				<el-form-item label="最大长度" prop="maxLength" v-if="type == 'string'">
-					<el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
-				</el-form-item>
-
-				<el-form-item label="时间格式" prop="maxLength" v-if="type == 'date'">
-					<el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
-				</el-form-item>
-
-				<el-form-item label="布尔值" prop="trueText" 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" />
-					</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" />
-					</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="请输入枚举文本" />
-						<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>
-
-				<el-form-item label="JSON对象" prop="maxLength" v-if="type == 'object'">
-					<div v-for="(item, index) in jsondata" :key="index" class="jslist">
+				<el-form-item label="输出参数" prop="">
+					<div v-for="(item, index) in outputsdata" :key="index" class="jslist">
 						<div class="jsonlist">
 							<div>参数名称：</div>
 							<div style="width: 60%">{{ item.name }}</div>
 							<div class="jsonoption">
 								<!-- <el-link type="primary">编辑</el-link> -->
-								<el-link type="primary" @click="deljson(index, 'fun')">删除</el-link>
+								<el-link type="primary" @click="deljsonOut(index, 'fun')">删除</el-link>
 							</div>
 						</div>
 					</div>
 
 					<div style="display: block; width: 100%">
-						<div class="input-options" @click="addJson('json')">
+						<div class="input-options" @click="addJsonOut('fun')">
 							<el-icon><Plus /></el-icon>
 							<div>添加参数</div>
 						</div>
 					</div>
 				</el-form-item>
 
-				<div v-if="type == 'array'">
-					<el-form-item label="元素类型" prop="types">
-						<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="maxLength" v-if="types == 'string'">
-						<el-input v-model="elementType.maxLength" 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 == '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>
-
-						<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 == '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>
-
-				<el-form-item label="JSON对象" prop="maxLength" v-if="types == 'object'">
-					<div v-for="(item, index) in jsondata" :key="index" class="jslist">
-						<div class="jsonlist">
-							<div>参数名称：</div>
-							<div style="width: 60%">{{ item.data.name }}</div>
-							<div class="jsonoption">
-								<el-link type="primary">编辑</el-link>
-								<el-link type="primary">删除</el-link>
-							</div>
-						</div>
-					</div>
-
-					<div style="display: block; width: 100%">
-						<div class="input-options" @click="addJson('json')">
-							<el-icon><Plus /></el-icon>
-							<div>添加参数</div>
-						</div>
-					</div>
-				</el-form-item>
-
-				<!--根据数据类型输出不同表单-->
-
 				<el-form-item label="功能定义描述	" prop="desc">
 					<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入功能定义描述"></el-input>
 				</el-form-item>
@@ -184,7 +60,8 @@
 				</span>
 			</template>
 		</el-dialog>
-		<EditOption ref="editOptionRef" @typeList="getOptionData" />
+		<EditOption ref="editOptionRef" key="editOptionRef" @typeList="getOptionData" />
+		<EditOption ref="editOptionOutRef" key="editOptionOutRef" @typeList="getOptionDataOut" />
 	</div>
 </template>
 
@@ -221,6 +98,7 @@ export default defineComponent({
 	setup(prop, { emit }) {
 		const formRef = ref<HTMLElement | null>(null);
 		const editOptionRef = ref();
+		const editOptionOutRef = ref();
 		const state = reactive<DicState>({
 			isShowDialog: false,
 			typeData: [], //
@@ -248,13 +126,14 @@ export default defineComponent({
 
 			jsondata: [],
 			inputsdata: [],
+			outputsdata: [],
 
 			ruleForm: {
 				productId: 0,
 				name: '',
 				key: '',
 				inputs: [],
-				output: [],
+				outputs: [],
 				valueType: {
 					type: '',
 					maxLength: '',
@@ -272,55 +151,13 @@ export default defineComponent({
 		// 打开弹窗
 		const openDialog = (row: RuleFormState | null, productId: number | null) => {
 			resetForm();
-
-			api.product.getDataType({ status: -1 }).then((res: any) => {
-				const datat = Object.values(res.dataType);
-				datat.forEach((item, index) => {
-					if (index == 0) {
-						datat[index]['label'] = '基础类型';
-						datat[index]['options'] = item;
-					} else {
-						datat[index]['label'] = '扩展类型';
-						datat[index]['options'] = item;
-					}
-				});
-				console.log(datat);
-				state.typeData = datat || [];
-			});
-
-
-console.log(row);
+			// console.log(row);
 			state.ruleForm = row;
-			if (row.inputs) {
-				state.ruleForm = row;
-
-				state.productId = productId;
-				state.valueType = row.output;
-			
-				
-				//state.ruleForm.valueType.type = row.valueType.type;
-				//state.ruleForm.type = row.valueType.type;
-				state.type = row.output.type;
-				if(row.output.elementType){
-					state.elementType = row.output.elementType;
-					state.types = row.output.elementType.type;
-
-						if(state.type == 'array' && state.types=='enum'){
-							state.enumdata=row.output.elementType.elements
-						}
-						if(state.type == 'array' && state.types=='object'){
-							state.jsondata=row.output.elementType.properties
-						}
-						
-				}
-			
-				if (state.type == 'object') {
-						state.jsondata = row.output.properties;
-				}
-				state.inputsdata = row.inputs;
-				
-			}
+			state.productId = productId;
+			state.inputsdata = row.inputs || [];
+			state.outputsdata = row.outputs || [];
 			state.isShowDialog = true;
+			
 		};
 		const resetForm = () => {
 			state.ruleForm = {
@@ -334,11 +171,12 @@ console.log(row);
 
 				desc: '',
 			};
-			state.type='';
-			state.types='';
-			state.inputsdata =[];
-			state.elementType=[];
-			state.valueType={};
+			state.type = '';
+			state.types = '';
+			state.inputsdata = [];
+			state.outputsdata = [];
+			state.elementType = [];
+			state.valueType = {};
 		};
 
 		const seletChange = (val) => {
@@ -371,9 +209,22 @@ console.log(row);
 			}
 		};
 
+		const deljsonOut = (index, type) => {
+			if (type == 'fun') {
+				state.outputsdata.splice(index, 1);
+			} else {
+				state.outputsdata.splice(index, 1);
+			}
+		};
+
 		const addJson = (type) => {
 			editOptionRef.value.openDialog({ product_id: 0, id: 0, type_data: type });
 		};
+
+		const addJsonOut = (type) => {
+			editOptionOutRef.value.openDialog({ product_id: 0, id: 0, type_data: type });
+		};
+
 		const getOptionData = (data, type_data) => {
 			if (type_data == 'fun') {
 				state.inputsdata.push(data);
@@ -381,8 +232,18 @@ console.log(row);
 				state.jsondata.push(data);
 			}
 
-			console.log(state.jsondata);
-			console.log(type_data);
+			// console.log(state.jsondata);
+			// console.log(type_data);
+		};
+		const getOptionDataOut = (data, type_data) => {
+			if (type_data == 'fun') {
+				state.outputsdata.push(data);
+			} else {
+				state.outputsdata.push(data);
+			}
+
+			// console.log(state.jsondata);
+			// console.log(type_data);
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
@@ -398,38 +259,9 @@ console.log(row);
 			if (!formWrap) return;
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
+					state.ruleForm.inputs = state.inputsdata;
+					state.ruleForm.outputs = state.outputsdata;
 					if (state.ruleForm.id !== 0) {
-						//修改
-						if (state.type == 'enum') {
-							state.valueType.elements = state.enumdata;
-						}
-
-						if (state.type == 'object') {
-							state.valueType.properties = state.jsondata;
-						}
-
-						if (state.type == 'array') {
-							state.valueType.elementType = state.elementType;
-							//如果是选中数组，并选择了枚举
-							if(state.types=='enum'){
-								state.valueType.elementType = {
-									elements: state.enumdata,
-									type: 'enum'
-								}
-							}
-							//如果是选中数组，并选择了object
-							if(state.types=='object'){
-								state.valueType.elementType = {
-									properties: state.jsondata,
-									type: 'object'
-								}
-							}
-						}
-
-						console.log(state.valueType);
-
-						state.ruleForm.inputs = state.inputsdata;
-						state.ruleForm.output = state.valueType;
 						state.ruleForm.productId = state.productId;
 						api.model.functionedit(state.ruleForm).then(() => {
 							ElMessage.success('功能定义类型修改成功');
@@ -437,36 +269,6 @@ console.log(row);
 							emit('typeList');
 						});
 					} else {
-						//添加
-						if (state.type == 'enum') {
-							state.valueType.elements = state.enumdata;
-						}
-
-						if (state.type == 'object') {
-							state.valueType.properties = state.jsondata;
-						}
-
-						if (state.type == 'array') {
-							state.valueType.elementType = state.elementType;
-							//如果是选中数组，并选择了枚举
-							if(state.types=='enum'){
-								state.valueType.elementType = {
-									elements: state.enumdata,
-									type: 'enum'
-								}
-							}
-							//如果是选中数组，并选择了object
-							if(state.types=='object'){
-								state.valueType.elementType = {
-									properties: state.jsondata,
-									type: 'object'
-								}
-							}
-						}
-
-						state.ruleForm.inputs = state.inputsdata;
-						state.ruleForm.output = state.valueType;
-
 						api.model.functionadd(state.ruleForm).then(() => {
 							ElMessage.success('功能定义类型添加成功');
 							closeDialog(); // 关闭弹窗
@@ -479,12 +281,16 @@ console.log(row);
 
 		return {
 			editOptionRef,
+			editOptionOutRef,
 			getOptionData,
+			getOptionDataOut,
 			openDialog,
 			deljson,
+			deljsonOut,
 			addEnum,
 			delEnum,
 			addJson,
+			addJsonOut,
 			seletChange,
 			seletChanges,
 			closeDialog,