From 6f95ca0e2ce85ee1afb3fe774c282c69f0c18efd Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 19 十二月 2024 14:50:58 +0800
Subject: [PATCH] guangming
---
src/components/amis/AMISRenderer.vue | 412 ++++++++++++++++++++++++++++------------------------------
1 files changed, 199 insertions(+), 213 deletions(-)
diff --git a/src/components/amis/AMISRenderer.vue b/src/components/amis/AMISRenderer.vue
index edc1dd5..edec622 100644
--- a/src/components/amis/AMISRenderer.vue
+++ b/src/components/amis/AMISRenderer.vue
@@ -1,16 +1,44 @@
-<template><div class="my-amis-scope">鍔犺浇涓�...</div></template>
+<template><div ref="amisRootRef" class="my-amis-scope">鍔犺浇涓�...</div></template>
-<script lang="ts">
-import { accessSessionKey, handleNoAuth } from '/@/utils/request';
+<script setup lang="ts">
import { MAIN_URL } from '/@/constants';
import router from '/@/router/index';
-
-import { Local } from '/@/utils/storage';
-
+import { accessSessionKey, handleNoAuth } from '/@/utils/request';
// 鍙互涓嶅紩鐢�, 濡傛灉浣犱笉鎯宠浠讳綍杈呭姪绫绘牱寮忕殑璇� (姣斿 `m-t-xs` 杩欑)
// https://aisuda.bce.baidu.com/amis/zh-CN/style/index
// import 'amis/sdk/helper.css';
import qs from 'qs';
+import { onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue';
+const amisRootRef = ref<HTMLDivElement>(null);
+import { Local } from '/@/utils/storage';
+
+const props = defineProps({
+ schema: {
+ type: Object,
+ default: () => ({
+ type: 'page',
+ body: 'Hello World!',
+ }),
+ },
+ locals: {
+ type: Object,
+ default: () => ({}),
+ },
+ context:{
+ type: Object,
+ default: () => ({}),
+ },
+ props: {
+ type: Object,
+ default: () => ({}),
+ },
+ env: {
+ type: Object,
+ default: () => ({}),
+ },
+});
+
+const emit = defineEmits(['ready']);
function loadScript(callback) {
window.eventList.amisSdkJsPromise
@@ -20,16 +48,6 @@
.catch((error) => {
callback(error);
});
-}
-
-function loadStyles(styles) {
- for (const path of styles) {
- const style = document.createElement('link');
- style.setAttribute('rel', 'stylesheet');
- style.setAttribute('type', 'text/css');
- style.setAttribute('href', path);
- document.head.appendChild(style);
- }
}
function loadSDK() {
@@ -51,204 +69,172 @@
});
}
-export default {
- name: 'AMISRenderer',
- components: {},
- props: {
- schema: {
- type: Object,
- default: () => ({
- type: 'page',
- body: 'Hello World!',
- }),
- },
- locals: {
- type: Object,
- default: () => ({}),
- },
- props: {
- type: Object,
- default: () => ({}),
- },
- env: {
- type: Object,
- default: () => ({}),
- },
- },
- data() {
- return {
- // 杩欓噷闈㈢殑鏁版嵁鎵�鏈� amis 椤甸潰閮藉彲浠ヨ幏鍙栧埌
- // 鍙互鐢ㄦ潵鏀句竴涓嬪叕鍏辨暟鎹紝姣斿鐢ㄦ埛淇℃伅绛�
- // 涓嶈鏀惧彈鎺ф暟鎹紝鍙楁帶鏁版嵁搴旇閫氳繃 data 涓嬪彂
- context: {
- siteName: 'AMIS DEMO',
- },
- get location() {
- const current = router.currentRoute.value;
- return {
- pathname: current?.path,
- hash: current?.hash,
- query: current?.query,
- search: `?${qs.stringify(current.query)}`,
- };
- // return 'localtion'
- },
- loading: false,
- amisInstance: null,
- unmounted: false,
- };
- },
- watch: {
- locals: function () {
- this.updateProps();
- },
- props: function () {
- this.updateProps();
- },
- $route: function () {
- this.updateProps();
- },
- },
- async mounted() {
- try {
- this.loading = true;
- await loadSDK();
- } finally {
- this.loading = false;
- }
- if (this.unmounted) {
- return;
- }
+const current = router.currentRoute.value;
- const scoped = amisRequire('amis/embed');
- const { normalizeLink } = amisRequire('amis');
- const instance = scoped.embed(
- this.$el,
- this.schema,
- {
- data: {
- ...this.locals,
- },
- context: this.context,
- location: this.location,
-
- // todo 涓嬪彂 location 瀵硅薄
- ...this.props,
- },
- {
- requestAdaptor(api) {
- const accessSession = Local.get(accessSessionKey);
- if (accessSession) {
- // 灏� token 娣诲姞鍒拌姹傛姤鏂囧ご涓�
- api.headers['hswatersession'] = accessSession;
- } else {
- handleNoAuth();
- }
- api.url = `${MAIN_URL}${api.url}`;
- return api;
- },
- // 鍏ㄥ眬 api 閫傞厤鍣ㄣ��
- // 鍙﹀鍦� amis 閰嶇疆椤逛腑鐨� api 涔熷彲浠ラ厤缃�傞厤鍣紝閽堝鏌愪釜鐗瑰畾鎺ュ彛鍗曠嫭澶勭悊銆�
- responseAdaptor(api, payload, query, request, response) {
- // {
- // "json_ok": true,
- // "sections": [
- // {
- // "section_id": "knowledge_base",
- // "section_name": "姘村姟鐭ヨ瘑搴�",
- // "section_title": "鎷ユ湁姘村姟琛屼笟鐩稿叧鐨勯�氱敤鐭ヨ瘑锛屽寘鎷細娉曞緥娉曡銆佽璁¤鑼冦�佺粰鎺掓按鐩稿叧鐭ヨ瘑绛夌瓑"
- // },
- // {
- // "section_id": "office_assistant",
- // "section_name": "鍔炲叕鍔╂墜",
- // "section_title": "鍔炲叕鍔╂墜鑳藉杈呭姪鍐欎細璁�氱煡銆佽鍋囨潯銆佸伐浣滄�荤粨銆丳PT绛夊伐浣溿��"
- // },
- // {
- // "section_id": "customer_service",
- // "section_name": "瀹㈡埛鏈嶅姟",
- // "section_title": "閽堝姘村姟浼佷笟瀵瑰瀹㈡埛鏈嶅姟鐩稿叧鐨勫唴瀹癸紝鍖呮嫭锛氭妱琛ㄣ�佸紑璐︺�佹敹璐癸紝浠ュ強鐑嚎鐩稿叧"
- // },
- // {
- // "section_id": "network_operation",
- // "section_name": "绠＄綉杩愯",
- // "section_title": "閽堝姘村姟浼佷笟绠＄綉杩愯涓庣淮鎶ょ鐞嗐�佹按璐ㄧ鐞嗙瓑鐩稿叧"
- // },
- // {
- // "section_id": "waterworks_operation",
- // "section_name": "姘村巶杩愯",
- // "section_title": "閽堝姘村姟浼佷笟姘村巶杩愭棩甯歌繍钀ョ鐞嗘湇鍔★紝鍖呮嫭锛氭按鍘傚伐鑹烘祦绋嬨�佹按娉佃繍琛岃皟搴�"
- // }
- // ]
- // }
- return payload;
- },
- // 瑕嗙洊 amis env
- // 鍙傝�� https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
- jumpTo: (to, action) => {
- return;
- if (to === 'goBack') {
- return router.go(-1);
- }
-
- to = normalizeLink(to, this.location);
-
- if (action?.actionType === 'url') {
- action.blank === false ? router.push(to) : window.open(to);
- return;
- }
-
- // 涓昏鏄敮鎸� nav 涓殑璺宠浆
- if (action && to && action.target) {
- window.open(to, action.target);
- return;
- }
-
- if (/^https?:\/\//.test(to)) {
- window.location.replace(to);
- } else {
- router.push(to);
- }
- },
-
- updateLocation: (location, replace) => {
- // 绂佹璺宠浆
- return;
- if (location === 'goBack') {
- return router.go(-1);
- }
-
- location = normalizeLink(location, this.location);
- replace ? router.replace(location) : router.replace(location);
- },
-
- ...this.env,
- },
- () => {
- this.$emit('ready', {
- instance,
- });
- }
- );
-
- this.amisInstance = instance;
- },
-
- methods: {
- updateProps() {
- this.amisInstance?.updateProps({
- data: {
- ...this.locals,
- },
- context: this.context,
- ...this.props,
- });
- },
- },
-
- unmounted() {
- this.unmounted = true;
- this.amisInstance?.unmount();
- },
+const location = {
+ pathname: current?.path,
+ hash: current?.hash,
+ query: current?.query,
+ search: `?${qs.stringify(current.query)}`,
};
+
+const loading = ref(false);
+const amisInstance = shallowRef(null);
+const unmounted = ref(false);
+
+const updateProps = () => {
+ amisInstance.value?.updateProps({
+ data: {
+ ...props.locals,
+ },
+ context: props.context,
+ ...props.props,
+ });
+};
+watch(
+ () => props.locals,
+ (val) => {
+ updateProps();
+ }
+);
+watch(
+ () => props.props,
+ (val) => {
+ updateProps();
+ }
+);
+
+// watch(() => router.value, (val) => {
+
+// })
+
+onMounted(async () => {
+ try {
+ loading.value = true;
+ await loadSDK();
+ } finally {
+ loading.value = false;
+ }
+ if (unmounted.value) {
+ return;
+ }
+
+ const scoped = amisRequire('amis/embed');
+ const { normalizeLink } = amisRequire('amis');
+ const instance = scoped.embed(
+ amisRootRef.value,
+ props.schema,
+ {
+ data: {
+ ...props.locals,
+ },
+ context: props.context,
+ location: location,
+
+ // todo 涓嬪彂 location 瀵硅薄
+ ...props.props,
+ },
+ {
+ requestAdaptor(api) {
+ const accessSession = Local.get(accessSessionKey);
+ if (accessSession) {
+ // 灏� token 娣诲姞鍒拌姹傛姤鏂囧ご涓�
+ api.headers['hswatersession'] = accessSession;
+ } else {
+ handleNoAuth();
+ }
+ api.url = `${MAIN_URL}${api.url}`;
+ return api;
+ },
+ // 鍏ㄥ眬 api 閫傞厤鍣ㄣ��
+ // 鍙﹀鍦� amis 閰嶇疆椤逛腑鐨� api 涔熷彲浠ラ厤缃�傞厤鍣紝閽堝鏌愪釜鐗瑰畾鎺ュ彛鍗曠嫭澶勭悊銆�
+ responseAdaptor(api, payload, query, request, response) {
+ // {
+ // "json_ok": true,
+ // "sections": [
+ // {
+ // "section_id": "knowledge_base",
+ // "section_name": "姘村姟鐭ヨ瘑搴�",
+ // "section_title": "鎷ユ湁姘村姟琛屼笟鐩稿叧鐨勯�氱敤鐭ヨ瘑锛屽寘鎷細娉曞緥娉曡銆佽璁¤鑼冦�佺粰鎺掓按鐩稿叧鐭ヨ瘑绛夌瓑"
+ // },
+ // {
+ // "section_id": "office_assistant",
+ // "section_name": "鍔炲叕鍔╂墜",
+ // "section_title": "鍔炲叕鍔╂墜鑳藉杈呭姪鍐欎細璁�氱煡銆佽鍋囨潯銆佸伐浣滄�荤粨銆丳PT绛夊伐浣溿��"
+ // },
+ // {
+ // "section_id": "customer_service",
+ // "section_name": "瀹㈡埛鏈嶅姟",
+ // "section_title": "閽堝姘村姟浼佷笟瀵瑰瀹㈡埛鏈嶅姟鐩稿叧鐨勫唴瀹癸紝鍖呮嫭锛氭妱琛ㄣ�佸紑璐︺�佹敹璐癸紝浠ュ強鐑嚎鐩稿叧"
+ // },
+ // {
+ // "section_id": "network_operation",
+ // "section_name": "绠＄綉杩愯",
+ // "section_title": "閽堝姘村姟浼佷笟绠＄綉杩愯涓庣淮鎶ょ鐞嗐�佹按璐ㄧ鐞嗙瓑鐩稿叧"
+ // },
+ // {
+ // "section_id": "waterworks_operation",
+ // "section_name": "姘村巶杩愯",
+ // "section_title": "閽堝姘村姟浼佷笟姘村巶杩愭棩甯歌繍钀ョ鐞嗘湇鍔★紝鍖呮嫭锛氭按鍘傚伐鑹烘祦绋嬨�佹按娉佃繍琛岃皟搴�"
+ // }
+ // ]
+ // }
+ return payload;
+ },
+ // 瑕嗙洊 amis env
+ // 鍙傝�� https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
+ jumpTo: (to, action) => {
+ return;
+ if (to === 'goBack') {
+ return router.go(-1);
+ }
+
+ to = normalizeLink(to, this.location);
+
+ if (action?.actionType === 'url') {
+ action.blank === false ? router.push(to) : window.open(to);
+ return;
+ }
+
+ // 涓昏鏄敮鎸� nav 涓殑璺宠浆
+ if (action && to && action.target) {
+ window.open(to, action.target);
+ return;
+ }
+
+ if (/^https?:\/\//.test(to)) {
+ window.location.replace(to);
+ } else {
+ router.push(to);
+ }
+ },
+
+ updateLocation: (location, replace) => {
+ // 绂佹璺宠浆
+ return;
+ if (location === 'goBack') {
+ return router.go(-1);
+ }
+
+ location = normalizeLink(location, this.location);
+ replace ? router.replace(location) : router.replace(location);
+ },
+
+ ...props.env,
+ },
+ () => {
+ emit('ready', {
+ instance,
+ });
+ }
+ );
+ amisInstance.value = instance;
+});
+
+onUnmounted(() => {
+ unmounted.value = true;
+
+ amisInstance.value?.unmount();
+});
</script>
--
Gitblit v1.9.3