Files
SaaS-lib/nervui-resource-manage/view/resource-type-detail.vue
xuziqiang d0155dbe3c push
2024-05-15 17:29:42 +08:00

147 lines
4.1 KiB
Vue

<template>
<Skeleton
active
:loading="loading">
<div v-if="!show" >
<page-title :title="data?.alias"/>
<a-page-header class="ns-page-header">
<template #extra>
<ns-button @click="navigateBack">返回</ns-button>
<ns-button @click="onAdd" type="primary">创建</ns-button>
</template>
</a-page-header>
<div class="content-wrapper">
<NsMarkDown
:value="data?.detail"
:previewOnly="true"
:htmlPreview="true"/>
</div>
</div>
<div v-if="show" class="frame-wrapper" style="height: 100%">
<iframe :src="src" id="frame" height="100%" width="100%" ></iframe>
</div>
</Skeleton>
</template>
<script lang="ts">
import {defineComponent, nextTick, onUnmounted, ref} from 'vue';
import NsMarkDown from '/@/component/markdown.vue';
import {http} from "/nerv-lib/util";
import {useRoute, useRouter} from "vue-router";
import {useNavigate} from "/nerv-lib/use/use-navigate";
import {NsMessage} from "/nerv-lib/component";
import {Skeleton} from "ant-design-vue";
import {APP} from "/@/router/index.ts";
import Cookie from "js-cookie";
export default defineComponent({
name: 'ResourceTypeDetail',
props: {},
components: {NsMarkDown, Skeleton},
setup(props, {attrs}) {
let loading = ref(true);
let data = ref({});
const route = useRoute();
const router = useRouter();
const params = route.params;
const code = params?.id;
const { navigateBack } = useNavigate();
let src = ref('');
let show = ref(false);
let frameRef = ref(null);
let createPageAddr = '';
http.get(`/api/${APP}/objs/ManageResourceTypes/` + params.id).then(res => {
loading.value = false;
data.value = res;
createPageAddr = res['createPageAddr'];
src.value = createPageAddr + '?nervsid=' + Cookie.get('nervsid');
// src.value = 'http://100.68.2.97:4200/nervui-mock-ra/mr/instance/add?nervsid='+Cookie.get('nervsid');
// src.value = 'http://localhost:4200/nervui-mock-ra/mr/instance/add?nervsid='+Cookie.get('nervsid');
})
function onAdd() {
if (createPageAddr) {
let flag = !/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/.test(createPageAddr);
if (flag) {
NsMessage.error('不合法地址');
} else {
show.value = true;
}
} else {
NsMessage.error('无对应资源页面');
return;
}
// loading.value = true;
nextTick(() => {
load();
});
}
function handleMsg(e) {
const frame = frameRef.value;
const data = e?.data;
if(data) {
if(data.type === 'back') {
window.removeEventListener('message', handleMsg);
show.value = false;
// router.push({name:'resourceDetail', path: '/rm/resourceManage/list/'+params.id + '/detail'});
}
if(data.type === 'successBack') {
window.removeEventListener('message', handleMsg);
router.push({name:'resource', path: '/rm/resourceManage/list'});
}
}
}
function load() {
frameRef.value = document.getElementById('frame');
const frame = frameRef.value;
const msg = {
type: 'style',
showLayout: false,
data: {
typeCode: params.id
}
}
if(frame) {
loading.value = false;
frame.onload = function (e) {
frame.contentWindow?.postMessage(msg, src.value );
}
window.addEventListener('message', handleMsg);
}
}
onUnmounted(()=>{
window.removeEventListener('message', handleMsg);
})
return {
data,
navigateBack,
code,
loading,
onAdd,
show,
src
};
},
methods: {
}
})
</script>
<style lang="less" scoped>
.ant-page-header {
padding: 0 24px;
margin-bottom: 15px;
}
:deep(.ant-page-header-heading-extra) {
margin-right: auto !important;
margin-left: 0;
}
.content-wrapper {
margin: 0 24px
}
#frame {
border: 0;
}
</style>