fix: 修复json文本框未转换为对象问题

Author: shaohuzhang1

ui/src/components/dynamics-form/DemoConstructor.vue

@@ -21,15 +21,18 @@
           :render_data="form_item_list"
           ref="dynamicsFormRef"
         >
-        </DynamicsForm> </el-card
-    ></el-col>
+        </DynamicsForm>
+        <el-button @click="validate">校验</el-button>
+      </el-card></el-col
+    >
   </el-row>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
 const DynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+
 const form_item_list = ref<Array<any>>([])
 const add_field = () => {
   if (DynamicsFormConstructorRef.value) {
@@ -38,8 +41,20 @@ const add_field = () => {
     })
   }
 }
+
 const form_data = ref({})
 const item = ref({})
 const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const validate = () => {
+  console.log('asda')
+  dynamicsFormRef.value
+    ?.validate()
+    .then((ok) => {
+      console.log('ok')
+    })
+    .catch((e) => {
+      console.log(e)
+    })
+}
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/FormItem.vue

@@ -114,6 +114,7 @@ const errMsg = computed(() => {
 const to_rule = (rule: any) => {
   if (rule.validator) {
     let validator = (rule: any, value: string, callback: any) => {}
+    eval(rule.validator)
     return { ...rule, validator }
   }
   return rule

ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue

@@ -5,15 +5,16 @@
     prop="default_value"
     :rules="[default_value_rule]"
   >
-    <JsonInput v-model="formValue.default_value"> </JsonInput>
+    <JsonInput ref="jsonInputRef" v-model="formValue.default_value"> </JsonInput>
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import JsonInput from '@/components/dynamics-form/items/JsonInput.vue'
 const props = defineProps<{
   modelValue: any
 }>()
+const formField = ref<any>({})
 const emit = defineEmits(['update:modelValue'])
 const formValue = computed({
   set: (item) => {
@@ -23,8 +24,9 @@ const formValue = computed({
     return props.modelValue
   }
 })
-
+const jsonInputRef = ref<InstanceType<typeof JsonInput>>()
 const getData = () => {
+  console.log('xx')
   return {
     input_type: 'JsonInput',
     attrs: {},
@@ -33,11 +35,8 @@ const getData = () => {
         {
           required: true,
           validator: `validator = (rule, value, callback) => {
-  try {
-    JSON.parse(value)
-  } catch (e) {
-    callback(new Error('JSON格式不正确'))
-  }
+            return componentFormRef.value?.validate_rules(rule, value, callback);
+             
 }`,
           trigger: 'blur'
         }
@@ -50,11 +49,7 @@ const getData = () => {
 const default_value_rule = {
   required: true,
   validator: (rule: any, value: any, callback: any) => {
-    try {
-      JSON.parse(value)
-    } catch (e) {
-      callback(new Error('JSON格式不正确'))
-    }
+    jsonInputRef.value?.validate_rules(rule, value, callback)
     return true
   },
   trigger: 'blur'
@@ -65,7 +60,7 @@ const rander = (form_data: any) => {
 }
 defineExpose({ getData, rander })
 onMounted(() => {
-  formValue.value.default_value = '{}'
+  formValue.value.default_value = {}
 })
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/items/JsonInput.vue

@@ -43,46 +43,76 @@ import { oneDark } from '@codemirror/theme-one-dark'
 import { Codemirror } from 'vue-codemirror'
 import { linter } from '@codemirror/lint'
 import { computed, ref } from 'vue'
-const props = withDefaults(defineProps<{ modelValue?: string }>(), { modelValue: '{}' })
+const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: () => {} })
 const emit = defineEmits(['update:modelValue'])
+
+const cache_model_value_str = ref<string>()
+
 const model_value = computed({
   get: () => {
-    if (!props.modelValue) {
-      emit('update:modelValue', '{}')
+    if (cache_model_value_str.value) {
+      return cache_model_value_str.value
     }
-    return props.modelValue
+    return JSON.stringify(props.modelValue, null, 4)
   },
   set: (v: string) => {
     if (!v) {
-      emit('update:modelValue', '{}')
+      emit('update:modelValue', JSON.parse('{}'))
     } else {
-      emit('update:modelValue', v)
+      try {
+        cache_model_value_str.value = v
+        const result = JSON.parse(v)
+        emit('update:modelValue', result)
+      } catch (e) {}
     }
   }
 })
 
 const extensions = [json(), linter(jsonParseLinter()), oneDark]
+
 const codemirrorStyle = {
   height: '210px!important',
   width: '100%'
 }
+
 // 弹出框相关代码
 const dialogVisible = ref<boolean>(false)
+
 const cloneContent = ref<string>('')
+
 const openCodemirrorDialog = () => {
   cloneContent.value = model_value.value
   dialogVisible.value = true
 }
+
 const format = () => {
   try {
     const json_str = JSON.parse(model_value.value)
     model_value.value = JSON.stringify(json_str, null, 4)
   } catch (e) {}
 }
+
 function submitDialog() {
   model_value.value = cloneContent.value
   dialogVisible.value = false
 }
+/**
+ * 校验格式
+ * @param rule
+ * @param value
+ * @param callback
+ */
+const validate_rules = (rule: any, value: any, callback: any) => {
+  if (model_value.value) {
+    try {
+      JSON.parse(model_value.value)
+    } catch (e) {
+      callback(new Error('JSON格式不正确'))
+    }
+  }
+}
+
+defineExpose({ validate_rules: validate_rules })
 </script>
 <style lang="scss">
 .function-CodemirrorEditor__footer {