增加产品数据解析中的调试操作

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

@@ -1,6 +1,13 @@
 <template>
-	<codeEditor class="params" ref="mirrorRef" mode="" :content="content"></codeEditor>
+	<div class="flex">
+		<codeEditor class="params flex1" ref="mirrorRef" mode="" :content="content"></codeEditor>
+		<div class="mock" style="width: 300px;margin-left: 20px;">
+			<el-input class="input" v-model="inputData" type="textarea" placeholder="请输入入参，以字符串的方式，如果是对象字符串会在执行时自动转换为对象再执行"></el-input>
+			<el-input class="output" v-model="outputData" type="textarea" readonly placeholder="此处显示执行结果"></el-input>
+		</div>
+	</div>
 	<el-button type="primary" style="margin-top:20px" @click="saveCode">保存脚本</el-button>
+	<el-button type="primary" style="margin-top:20px" @click="mock">调试</el-button>
 </template>
 
 <script lang="ts" setup>
@@ -18,6 +25,8 @@ const props = defineProps({
 	script: String
 })
 
+const inputData = ref('')
+const outputData = ref('')
 const content = ref('')
 const mirrorRef = ref()
 
@@ -26,15 +35,15 @@ onMounted(() => {
 })
 
 function saveCode() {
-	const data = mirrorRef.value.getValue()
+	const funStr = mirrorRef.value.getValue()
 
-	if (data === '') {
-		return toSave(data)
+	if (funStr === '') {
+		return toSave(funStr)
 	}
 
 	try {
-		eval("(" + data + ")")
-		toSave(data)
+		eval("(" + funStr + ")")
+		toSave(funStr)
 	} catch (error) {
 		ElMessage.error('语法校验未通过')
 	}
@@ -48,11 +57,45 @@ function toSave(data: string) {
 		ElMessage.success('保存成功')
 		emit('updateScript', data)
 	})
+}
+
+function mock() {
+	if (!inputData.value) return ElMessage.error('请输入参数')
+
+	const funStr = mirrorRef.value.getValue()
+
+	if (funStr === '') {
+		return ElMessage.error('请先输入可执行脚本')
+	}
+
+	try {
+		const fun = eval("(" + funStr + ")")
+		try {
+			const res = fun(JSON.parse(inputData.value))
+			outputData.value = JSON.stringify(res, null, 2)
+		} catch {
+			const res = fun(inputData.value)
+			outputData.value = JSON.stringify(res, null, 2)
+		}
+	} catch (error) {
+		ElMessage.error('数据解析脚本语法校验未通过或参数类型有误')
+	}
 
 }
 </script>
 <style lang="scss" scoped>
-::v-deep(.CodeMirror){
+::v-deep(.CodeMirror) {
 	height: calc(100vh - 360px);
 }
+
+.input,
+.output {
+	::v-deep(.el-textarea__inner) {
+		height: calc(50vh - 190px);
+	}
+}
+
+.output {
+	margin-top: 20px;
+}
 </style>