<template><div class="my-amis-scope">加载中...</div></template>
|
|
<script lang="ts">
|
import { accessSessionKey, handleNoAuth } from '/@/utils/request';
|
import { MAIN_URL } from '/@/constants';
|
import router from '/@/router/index';
|
|
import { Local } from '/@/utils/storage';
|
|
// 可以不引用, 如果你不想要任何辅助类样式的话 (比如 `m-t-xs` 这种)
|
// https://aisuda.bce.baidu.com/amis/zh-CN/style/index
|
// import 'amis/sdk/helper.css';
|
import qs from 'qs';
|
|
function loadScript(callback) {
|
window.eventList.amisSdkJsPromise
|
.then(() => {
|
callback();
|
})
|
.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() {
|
return new Promise((resolve, reject) => {
|
// loadStyles(['/static/amis/sdk/sdk.css', '/static/amis/sdk/helper.css', '/static/amis/sdk/iconfont.css']);
|
|
if (window.amisRequire) {
|
resolve();
|
return;
|
}
|
|
loadScript((err) => {
|
if (err) {
|
reject(err);
|
return;
|
}
|
resolve();
|
});
|
});
|
}
|
|
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 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": "办公助手能够辅助写会议通知、请假条、工作总结、PPT等工作。"
|
// },
|
// {
|
// "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();
|
},
|
};
|
</script>
|
