update amis

tansci-boot-ui/src/components/amis/AmisComponent.vue

@@ -1,17 +1,15 @@
 <template> 
-    <div ref="boxRef"></div>
+    <div id="amisid" ref="boxRef"></div>
 </template>
 <script setup lang="ts">
     import {defineProps,onMounted,watch,toRaw,ref} from "vue"
     import {ElMessage} from 'element-plus'
-    import 'amis/sdk/sdk.js';
-    import 'amis/lib/themes/default.css';
+    import 'amis/sdk/sdk.js'
+    import 'amis/lib/themes/default.css'
     import axios from 'axios'
     import copy from 'copy-to-clipboard'
-    import {getPagesInfo} from '@/api/lowcode/lcPages'
     import {getToken} from '@/api/auth'
 
-    const boxRef = ref()
     const props = defineProps({
         formid: {
             type: String,
@@ -27,22 +25,22 @@
         }
     })
 
-    watch(props.formjson, (newValue, oldValue) =>{
-        onRendering(newValue)
-    })
-
-    onMounted(()=>{
-        onRendering(props.formjson)
-    })
+    // @ts-ignore
+    const amis = amisRequire('amis/embed');
+    const boxRef = ref(null)
 
+    watch(()=> props.formjson, (data)=>{
+            onRendering(data)
+        },
+        {immediate: true,deep: true}
+    )
 
     function onRendering(data:any){
-        // @ts-ignore
-        let amis = amisRequire('amis/embed')
+        // let amisScoped = amis.embed('#amisid', data);
         let theme = 'cxd'
         let amisScoped = amis.embed( 
-            boxRef.value,
-            toRaw(data),
+            '#amisid',
+            data,
             {
                 updateLocation: (to, replace) => {},
             },

tansci-boot-ui/src/components/layout/LowcodeEngine.vue

@@ -1,26 +1,26 @@
 <template> 
-    <amisComponent :formid="state.formid" :formjson="state.formjson"></amisComponent>
+    <amisComponent :formid="formid" :formjson="formjson"></amisComponent>
 </template>
 <script setup lang="ts">
-    import {reactive,onMounted} from "vue"
+    import {reactive, ref} from "vue"
     import amisComponent from "../amis/AmisComponent.vue"
     import {getPagesInfo} from '@/api/lowcode/lcPages'
     import {useRoute} from 'vue-router'
 
     const route = useRoute()
-    const state = reactive({
-        formid: '',
-        formjson: {}
-    })
+    const formid = ref('')
+    const formjson = ref({})
 
-    onMounted(()=>{
+    const init = () =>{
         getPagesInfo(route.meta.id).then((res:any) => {
             if(res){
-                state.formid = res.result.id
-                state.formjson = JSON.parse(res.result.pageschema)
+                formid.value = res.result.id
+                formjson.value = JSON.parse(res.result.pageschema)
             }
         })
-    })
+    }
+
+    init()
 </script>
 <style scoped>
 </style>

tansci-boot-ui/src/views/system/Menu.vue

@@ -19,6 +19,7 @@
             chineseName: '',
             englishName: '',
             sort: 0,
+            componentType: 0,
             component: null,
             openMode: 0,
             isDel: 0,
@@ -60,6 +61,7 @@
             chineseName: data.chineseName,
             englishName: data.englishName,
             sort: data.sort,
+            componentType: data.componentType,
             component: data.component,
             openMode: data.openMode,
             isDel: data.isDel,
@@ -88,6 +90,7 @@
                 chineseName: '',
                 englishName: '',
                 sort: 0,
+                componentType: 0,
                 component: null,
                 openMode: 0,
                 isDel: 0,
@@ -122,6 +125,7 @@
                             chineseName: '',
                             englishName: '',
                             sort: 0,
+                            componentType: 0,
                             component: '',
                             openMode: 0,
                             isDel: 0,
@@ -173,6 +177,7 @@
                     chineseName: '',
                     englishName: '',
                     sort: 0,
+                    componentType: 0,
                     component: null,
                     openMode: 0,
                     isDel: 0,
@@ -240,6 +245,12 @@
                 <el-form-item label="菜单顺序" prop="sort" :rules="[{required: true, message: '菜单顺序不能为空', trigger: 'blur'}]">
                     <el-input-number v-model="state.menuForm.sort" :min="0" :max="999" style="width:50%"></el-input-number>
                 </el-form-item>
+                <el-form-item v-if="state.type == 1" label="组件类型" prop="componentType" :rules="[{required: true, message: '请选择组件类型', trigger: 'change'}]">
+                    <el-radio-group v-model="state.menuForm.componentType">
+                        <el-radio :label="0">默认</el-radio>
+                        <el-radio :label="1">amis</el-radio>
+                    </el-radio-group>
+                </el-form-item>
                 <el-form-item v-if="state.type == 1" label="组件名称" prop="component">
                     <el-input v-model="state.menuForm.component" placeholder="请输入组件名称" style="width:50%"></el-input>
                 </el-form-item>