接入文档

组件引入

1. 引入组件

<template>
  <div class="h-full border" v-loading="loading">
    <sunForm
      v-if="widgetConfig"
      :widgetConfig="widgetConfig"
      :httpSuccessHandle="httpSuccessHandle"
      :httpErrorHandle="httpErrorHandle"
      :httpBeforeSendHandle="httpBeforeSendHandle"
      :baseUrl="baseUrl"
      :headers="headers"
      @componentEvent="componentEvent"
      ref="formRef"
    >
      <slot></slot>
    </sunForm>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ref, reactive, nextTick } from "vue";
const emit = defineEmits(["componentEvent", "onConfigLoaded"]);

const props = defineProps({
  code: {
    type: String,
    default: "",
  },
});
const widgetConfig = ref(null);
const loading = ref(false);
const langParams = ref([]);
const language = app.$store.state.language;
const httpSuccessHandle = (res) => {
  if (res.Success == false) {
    if (
      res.Message == "Token失效，请重新登录" ||
      res.Message == "请确认Token是否正确" ||
      res.ErrorCode == 404 ||
      res.ErrorCode == 403
    ) {
      if (app.$store.state.tokenPass) {
        app.$store.commit("setTokenPass", false);
        app
          .$confirm("登录信息失效，是否重新登录", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async () => {
            app.$store.commit("logout");
          })
          .catch(() => {
            app.$store.commit("setTokenPass", true);
          });
      }
    }
  }
};
const componentEvent = (data) => {
  emit("componentEvent", data);
};
const httpErrorHandle = (err) => {};
const httpBeforeSendHandle = () => {
  return {};
};
const route = useRoute();
const baseUrl = "/adminApi";
const headers = {
  token: app.$store.state.userInfo.token,
};
const formRef = ref(null);
const getDesigner = () => {
  return formRef.value.designer;
};
function translate(text) {
  return text.replace(/\{\{\s*(.*?)\s*\}\}/g, (_, key) => {
    let tmpKey = key.trim();
    let tmpObj = langParams.value.find((e) => e.ObjectID === tmpKey);
    return tmpObj ? tmpObj["LanData"] : tmpKey;
  });
}
const getConfig = async () => {
  try {
    loading.value = true;
    let code = route.meta.code;
    if (props.code) {
      code = props.code;
    }
    let d = await app.$http.post("/util/getLowcodeCode", {
      componentCode: code,
    });
    widgetConfig.value = d.componentConfig;
    nextTick(() => {
      emit("onConfigLoaded");
    });
    loading.value = false;
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
};
defineExpose({
  getDesigner: getDesigner,
});
getConfig();
</script>

<style scoped lang="scss"></style>

2.当普通页面使用时，组件使用方式如下：

<template>
  <lowcode :code="'salesInfo'" ref="myLowcode"></lowcode>
</template>
<script setup>
import lowcode from "@/components/aLowcode/index.vue";
let myLowcode = ref();
let app = myLowcode.value.getDesigner();
</script>

路由中使用

静态路由使用如下 如若动态路由 也把组件的 meta.code 替换成动态路由的 code 即可

{
    meta: {
        title: "项目管理",
        code: "projectManage"//这个是云平台中的组件code
    },
    path: "/all/project/projectManage",
    name: "projectManage",
    component: createCustomComponent('projectManage', () => import('../components/aLowcode/index.vue'))
}
// 封装路由以此种方式使用   keepAlive 可缓存组件   如若不想缓存则不需要使用此方法   正常引用即可
function createCustomComponent(name, componentImport) {
    return defineComponent({
        name,
        setup() {
            const component = shallowRef(null)

            onMounted(async () => {
                if (componentImport instanceof Function) {
                    try {
                        const module = await componentImport()
                        component.value = module.default || module
                    } catch (error) {
                        console.error(`无法解析组件 ${name}，错误:`, error)
                    }
                } else {
                    component.value = componentImport
                }
            })

            return () => component.value ? h(component.value) : null
        }
    })
}