mirror of
https://github.com/kuaifan/dootask.git
synced 2026-02-08 07:15:36 +00:00
feat：组件共享研究
This commit is contained in:
weifashi
parent
ccea4b5b1b
commit
10d68790e7
2
resources/assets/js/microapp.js
vendored
2
resources/assets/js/microapp.js
vendored
@ -1,4 +1,5 @@
|
||||
import microApp from '@micro-zoe/micro-app'
|
||||
import DialogWrapper from "./pages/manage/components/DialogWrapper.vue";
|
||||
|
||||
export default function() {
|
||||
let urls = "";
|
||||
@ -28,6 +29,7 @@ export default function() {
|
||||
// 微应用
|
||||
microApp.start({
|
||||
plugins: {
|
||||
global: [DialogWrapper],
|
||||
modules: modules
|
||||
}
|
||||
})
|
||||
|
||||
@ -565,11 +565,15 @@ export default {
|
||||
|
||||
{path: 'team', name: '团队管理', divided: true},
|
||||
{path: 'approve', name: '审批中心'},
|
||||
{path: 'okrManage', name: 'OkR管理'},
|
||||
{path: 'okrAnalyze', name: 'OkR结果分析'},
|
||||
])
|
||||
} else {
|
||||
array.push(...[
|
||||
{path: 'personal', name: '个人设置', divided: true},
|
||||
{path: 'approve', name: '审批中心'},
|
||||
{path: 'okrManage', name: 'OkR管理'},
|
||||
{path: 'okrAnalyze', name: 'OkR结果分析'},
|
||||
{path: 'version', name: '更新版本', divided: true, visible: !!this.clientNewVersion},
|
||||
|
||||
{path: 'workReport', name: '工作报告', divided: true},
|
||||
@ -771,11 +775,17 @@ export default {
|
||||
this.goForward('index');
|
||||
}
|
||||
return;
|
||||
case 'approve':
|
||||
case 'approve':
|
||||
if (this.menu.findIndex((m) => m.path == path) > -1) {
|
||||
this.goForward({name: 'manage-approve'});
|
||||
}
|
||||
return;
|
||||
case 'okrManage':
|
||||
case 'okrAnalyze':
|
||||
if (this.menu.findIndex((m) => m.path == path) > -1) {
|
||||
this.goForward({path: '/manage/microapp/'});
|
||||
}
|
||||
return;
|
||||
case 'logout':
|
||||
$A.modalConfirm({
|
||||
title: '退出登录',
|
||||
|
||||
@ -540,7 +540,7 @@ export default {
|
||||
props: {
|
||||
dialogId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 1
|
||||
},
|
||||
msgId: {
|
||||
type: Number,
|
||||
@ -559,6 +559,9 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
dialogId:1,
|
||||
|
||||
msgItem: DialogItem,
|
||||
msgText: '',
|
||||
msgNew: 0,
|
||||
@ -651,6 +654,7 @@ export default {
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
console.log(21123123123123123123)
|
||||
this.$store.dispatch('forgetInDialog', this._uid)
|
||||
this.$store.dispatch('closeDialog', this.dialogId)
|
||||
},
|
||||
|
||||
90
resources/assets/js/pages/manage/microapp.vue
Normal file
90
resources/assets/js/pages/manage/microapp.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="page-microapp">
|
||||
<transition name="microapp-load">
|
||||
<div class="microapp-load">
|
||||
<Loading/>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- <div class="messenger-msg" style="width: 500px;position: relative;height: 100%;">
|
||||
<DialogWrapper :dialogId="1" is-messenger/>
|
||||
</div> -->
|
||||
<micro-app name='micro-app' v-if="microAppUrl && !loading"
|
||||
:url='microAppUrl'
|
||||
baseRoute="/"
|
||||
inline
|
||||
disableSandbox
|
||||
:data='microAppData'
|
||||
@created='handleCreate'
|
||||
@beforemount='handleBeforeMount'
|
||||
@mounted='handleMount'
|
||||
@unmount='handleUnmount'
|
||||
@error='handleError'
|
||||
@datachange='handleDataChange'
|
||||
></micro-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
|
||||
import ProjectDialog from "./components/ProjectDialog.vue";
|
||||
import DialogWrapper from "./components/DialogWrapper.vue";
|
||||
|
||||
window.DialogWrapper = DialogWrapper;
|
||||
// Vue.component('MyComponent', {
|
||||
// // 组件的配置和代码...
|
||||
// })
|
||||
window.Vue = Vue;
|
||||
|
||||
export default {
|
||||
components: { ProjectDialog, DialogWrapper },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
microAppUrl: 'http://localhost:5567/',
|
||||
microAppData: { }
|
||||
}
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
this.loading = true;
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route': {
|
||||
handler(to) {
|
||||
if( to.name == 'manage-microapp' ){
|
||||
this.loading = false;
|
||||
window.eventCenterForAppNameVite = new EventCenterForMicroApp("micro-app")
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleCreate(e) {
|
||||
console.log("子应用创建了",e)
|
||||
},
|
||||
handleBeforeMount(e) {
|
||||
console.log("子应用即将被渲染",e)
|
||||
},
|
||||
handleMount(e) {
|
||||
console.log("子应用已经渲染完成",e)
|
||||
this.microAppData = {
|
||||
msg: '来自基座的数据'
|
||||
}
|
||||
},
|
||||
handleUnmount(e) {
|
||||
this.loading = true;
|
||||
console.log("子应用卸载了",e)
|
||||
},
|
||||
handleError(e) {
|
||||
console.log("子应用加载出错了",e.detail.error)
|
||||
},
|
||||
handleDataChange(e) {
|
||||
console.log('来自子应用 child-vite 的数据:', e.detail.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
311
resources/assets/js/pages/manage/test/gggg.js
vendored
Normal file
311
resources/assets/js/pages/manage/test/gggg.js
vendored
Normal file
@ -0,0 +1,311 @@
|
||||
import Vue from 'vue';
|
||||
import Modal from './modal.vue';
|
||||
import Button from '../button/button.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-modal-confirm';
|
||||
|
||||
Modal.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
const Instance = new Vue({
|
||||
mixins: [ Locale ],
|
||||
data: Object.assign({}, _props, {
|
||||
visible: false,
|
||||
width: 416,
|
||||
title: '',
|
||||
body: '',
|
||||
iconType: '',
|
||||
iconName: '',
|
||||
okText: undefined,
|
||||
cancelText: undefined,
|
||||
showCancel: false,
|
||||
loading: false,
|
||||
buttonLoading: false,
|
||||
scrollable: false,
|
||||
closable: false,
|
||||
closing: false, // 关闭有动画，期间使用此属性避免重复点击
|
||||
okIng: false,
|
||||
enterOk: false,
|
||||
}),
|
||||
render (h) {
|
||||
let footerVNodes = [];
|
||||
if (this.showCancel) {
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'text'
|
||||
},
|
||||
on: {
|
||||
click: this.cancel
|
||||
}
|
||||
}, this.localeCancelText));
|
||||
}
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'primary',
|
||||
loading: this.buttonLoading
|
||||
},
|
||||
on: {
|
||||
click: this.ok
|
||||
}
|
||||
}, this.localeOkText));
|
||||
|
||||
// render content
|
||||
let body_render;
|
||||
if (this.render) {
|
||||
body_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-body ${prefixCls}-body-render`
|
||||
}
|
||||
}, [this.render(h)]);
|
||||
} else {
|
||||
body_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-body`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
domProps: {
|
||||
innerHTML: this.body
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
// when render with no title, hide head
|
||||
let head_render;
|
||||
if (this.title) {
|
||||
head_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
class: this.iconTypeCls
|
||||
}, [
|
||||
h('i', {
|
||||
class: this.iconNameCls
|
||||
})
|
||||
]),
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head-title`
|
||||
},
|
||||
domProps: {
|
||||
innerHTML: this.title
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
return h(Modal, {
|
||||
props: Object.assign({}, _props, {
|
||||
width: this.width,
|
||||
scrollable: this.scrollable,
|
||||
closable: this.closable,
|
||||
enterOk: this.enterOk
|
||||
}),
|
||||
domProps: {
|
||||
value: this.visible
|
||||
},
|
||||
on: {
|
||||
input: (status) => {
|
||||
this.visible = status;
|
||||
},
|
||||
'on-cancel': this.cancel
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: prefixCls
|
||||
}
|
||||
}, [
|
||||
head_render,
|
||||
body_render,
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-footer`
|
||||
}
|
||||
}, footerVNodes)
|
||||
])
|
||||
]);
|
||||
},
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
return [
|
||||
`${prefixCls}-head-icon`,
|
||||
`${prefixCls}-head-icon-${this.iconType}`
|
||||
];
|
||||
},
|
||||
iconNameCls () {
|
||||
return [
|
||||
'ivu-icon',
|
||||
`ivu-icon-${this.iconName}`
|
||||
];
|
||||
},
|
||||
localeOkText () {
|
||||
if (this.okText) {
|
||||
return this.okText;
|
||||
} else {
|
||||
return this.t('i.modal.okText');
|
||||
}
|
||||
},
|
||||
localeCancelText () {
|
||||
if (this.cancelText) {
|
||||
return this.cancelText;
|
||||
} else {
|
||||
return this.t('i.modal.cancelText');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
if (this.closing) return;
|
||||
this.$children[0].visible = false;
|
||||
this.buttonLoading = false;
|
||||
this.onCancel();
|
||||
this.remove();
|
||||
},
|
||||
ok () {
|
||||
if (this.closing) return;
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.$children[0].visible = false;
|
||||
this.remove();
|
||||
}
|
||||
|
||||
this.okIng = true;
|
||||
const call = this.onOk();
|
||||
if (call && call.then) {
|
||||
call.then(() => {
|
||||
this.$children[0].visible = false;
|
||||
this.remove();
|
||||
}).catch(() => {
|
||||
this.buttonLoading = false;
|
||||
}).finally(_ => {
|
||||
this.okIng = false;
|
||||
});
|
||||
} else {
|
||||
this.okIng = false;
|
||||
}
|
||||
},
|
||||
remove () {
|
||||
this.closing = true;
|
||||
setTimeout(() => {
|
||||
this.closing = false;
|
||||
this.destroy();
|
||||
}, 300);
|
||||
},
|
||||
destroy () {
|
||||
this.$destroy();
|
||||
if (this.$el) {
|
||||
try {
|
||||
if (this.append && typeof this.append === 'object') {
|
||||
this.append.removeChild(this.$el);
|
||||
} else {
|
||||
document.body.removeChild(this.$el);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
this.onRemove();
|
||||
},
|
||||
onOk () {},
|
||||
onCancel () {},
|
||||
onRemove () {}
|
||||
}
|
||||
});
|
||||
|
||||
const component = Instance.$mount();
|
||||
if (_props.append && typeof _props.append === 'object') {
|
||||
_props.append.appendChild(component.$el);
|
||||
} else {
|
||||
document.body.appendChild(component.$el);
|
||||
}
|
||||
const modal = Instance.$children[0];
|
||||
|
||||
return {
|
||||
show (props) {
|
||||
modal.$parent.showCancel = props.showCancel;
|
||||
modal.$parent.iconType = props.icon;
|
||||
|
||||
switch (props.icon) {
|
||||
case 'info':
|
||||
modal.$parent.iconName = 'ios-information-circle';
|
||||
break;
|
||||
case 'success':
|
||||
modal.$parent.iconName = 'ios-checkmark-circle';
|
||||
break;
|
||||
case 'warning':
|
||||
modal.$parent.iconName = 'ios-alert';
|
||||
break;
|
||||
case 'error':
|
||||
modal.$parent.iconName = 'ios-close-circle';
|
||||
break;
|
||||
case 'confirm':
|
||||
modal.$parent.iconName = 'ios-help-circle';
|
||||
break;
|
||||
}
|
||||
|
||||
if ('width' in props) {
|
||||
modal.$parent.width = props.width;
|
||||
}
|
||||
|
||||
if ('closable' in props) {
|
||||
modal.$parent.closable = props.closable;
|
||||
}
|
||||
|
||||
if ('title' in props) {
|
||||
modal.$parent.title = props.title;
|
||||
}
|
||||
|
||||
if ('content' in props) {
|
||||
modal.$parent.body = props.content;
|
||||
}
|
||||
|
||||
if ('okText' in props) {
|
||||
modal.$parent.okText = props.okText;
|
||||
}
|
||||
|
||||
if ('cancelText' in props) {
|
||||
modal.$parent.cancelText = props.cancelText;
|
||||
}
|
||||
|
||||
if ('onCancel' in props) {
|
||||
modal.$parent.onCancel = props.onCancel;
|
||||
}
|
||||
|
||||
if ('onOk' in props) {
|
||||
modal.$parent.onOk = props.onOk;
|
||||
}
|
||||
|
||||
// async for ok
|
||||
if ('loading' in props) {
|
||||
modal.$parent.loading = props.loading;
|
||||
}
|
||||
|
||||
if ('scrollable' in props) {
|
||||
modal.$parent.scrollable = props.scrollable;
|
||||
}
|
||||
|
||||
if ('enterOk' in props) {
|
||||
modal.$parent.enterOk = props.enterOk;
|
||||
}
|
||||
|
||||
// notice when component destroy
|
||||
modal.$parent.onRemove = props.onRemove;
|
||||
|
||||
modal.visible = true;
|
||||
},
|
||||
remove () {
|
||||
modal.visible = false;
|
||||
modal.$parent.buttonLoading = false;
|
||||
modal.$parent.remove();
|
||||
},
|
||||
component: modal
|
||||
};
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<micro-app name='micro-app' url='http://127.0.0.1:5567/' baseroute='/'></micro-app>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
12
resources/assets/js/routes.js
vendored
12
resources/assets/js/routes.js
vendored
@ -39,6 +39,11 @@ export default [
|
||||
path: 'approve/details',
|
||||
component: () => import('./pages/manage/approve/details.vue'),
|
||||
},
|
||||
{
|
||||
name: 'manage-microapp',
|
||||
path: 'microapp/*',
|
||||
component: () => import('./pages/manage/microapp.vue')
|
||||
},
|
||||
{
|
||||
name: 'manage-setting',
|
||||
path: 'setting',
|
||||
@ -167,10 +172,5 @@ export default [
|
||||
name: '404',
|
||||
path: '*',
|
||||
component: () => import('./pages/404.vue')
|
||||
},
|
||||
{
|
||||
path: '/microapp/*',
|
||||
name: 'microapp',
|
||||
component: () => import('./pages/microapp.vue')
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
1
resources/assets/sass/pages/_.scss
vendored
1
resources/assets/sass/pages/_.scss
vendored
@ -9,4 +9,5 @@
|
||||
@import "page-setting";
|
||||
@import "page-index";
|
||||
@import "page-approve";
|
||||
@import "page-microapp";
|
||||
@import "components/_";
|
||||
|
||||
9
resources/assets/sass/pages/page-microapp.scss
vendored
Normal file
9
resources/assets/sass/pages/page-microapp.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
.page-microapp {
|
||||
.microapp-load{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user