Skip to content

I
ibizlab-generator
提交 1cb602a1 编写于 作者: zhangkang's avatar zhangkang
浏览文件
操作

update:模态优化 & 视图详情接口

上级 89af27f3
隐藏空白字符变更
内嵌 并排
正在显示 包含 264 行增加 和 157 行删除
code/app_sample/src/ibiz-core/interface/common/i-view-detail.ts 0 → 100644
浏览文件 @ 1cb602a1
/**
* 视图对象参数
*
* @export
* @interface ViewDetail
*/
export interface ViewDetail {
/**
* 视图名称
*
* @type {string}
* @memberof ViewDetail
*/
name: string;
/**
* 代码名称
*
* @type {string}
* @memberof ViewDetail
*/
codeName: string;
/**
* 视图宽度
*
* @type {number}
* @memberof ViewDetail
*/
width?: number;
/**
* 视图高度
*
* @type {number}
* @memberof ViewDetail
*/
height?: number;
/**
* 视图标题
*
* @type {string}
* @memberof ViewDetail
*/
title?: string;
/**
* 打开方式
*
* @type {string}
* @memberof ViewDetail
*/
openMode?: 'INDEXViewDetailTAB' | 'POPUPAPP' | 'POPUPMODAL' | 'DRAWER' | 'POPOVER' | string;
/**
* 重定向视图
*
* @type {boolean}
* @memberof ViewDetail
*/
redirectView?: boolean;
/**
* 关系路径
*
* @type {[]}
* @memberof ViewDetail
*/
deResPaths?: [];
/**
* 标题
*
* @type {string}
* @memberof ViewDetail
*/
caption?: string;
/**
* 视图类型
*
* @type {string}
* @memberof ViewDetail
*/
ViewDetailType?: string;
/**
* 文件路径
*
* @type {string}
* @memberof ViewDetail
*/
fileDir?: string;
}
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/interface/common/i-view-detail.ts 0 → 100644
浏览文件 @ 1cb602a1
/**
* 视图对象参数
*
* @export
* @interface ViewDetail
*/
export interface ViewDetail {
/**
* 视图名称
*
* @type {string}
* @memberof ViewDetail
*/
name: string;
/**
* 代码名称
*
* @type {string}
* @memberof ViewDetail
*/
codeName: string;
/**
* 视图宽度
*
* @type {number}
* @memberof ViewDetail
*/
width?: number;
/**
* 视图高度
*
* @type {number}
* @memberof ViewDetail
*/
height?: number;
/**
* 视图标题
*
* @type {string}
* @memberof ViewDetail
*/
title?: string;
/**
* 打开方式
*
* @type {string}
* @memberof ViewDetail
*/
openMode?: 'INDEXViewDetailTAB' | 'POPUPAPP' | 'POPUPMODAL' | 'DRAWER' | 'POPOVER' | string;
/**
* 重定向视图
*
* @type {boolean}
* @memberof ViewDetail
*/
redirectView?: boolean;
/**
* 关系路径
*
* @type {[]}
* @memberof ViewDetail
*/
deResPaths?: [];
/**
* 标题
*
* @type {string}
* @memberof ViewDetail
*/
caption?: string;
/**
* 视图类型
*
* @type {string}
* @memberof ViewDetail
*/
ViewDetailType?: string;
/**
* 文件路径
*
* @type {string}
* @memberof ViewDetail
*/
fileDir?: string;
}
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/ibiz-core/interface/common/index.ts
浏览文件 @ 1cb602a1
export * from './i-context'; export * from './i-context';
export * from './i-param'; export * from './i-param';
export * from './i-action-param'; export * from './i-action-param';
export * from './i-control-action'; export * from './i-control-action';
\ No newline at end of file export * from './i-view-detail';
\ No newline at end of file
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/service/app/app.ts
浏览文件 @ 1cb602a1
import { AppModal } from '@/utils'; import { AppModal } from '@/utils';
import { Http, deepCopy } from '@ibiz-core'; import { Http, deepCopy, ViewDetail } from '@ibiz-core';
import { OpenViewService } from '@service'; import { OpenViewService } from '@service';
import { AppFuncService } from '@ibiz-core'; import { AppFuncService } from '@ibiz-core';
...@@ -35,10 +35,10 @@ export class App { ...@@ -35,10 +35,10 @@ export class App {
* *
* @static * @static
* @param codeName 视图codeName * @param codeName 视图codeName
* @return {*} * @return {*}
*/ */
public static getViewInfo(codeName: string){ public static getViewInfo(codeName: string): ViewDetail | undefined {
return App.allViewInfos[codeName] ? deepCopy(App.allViewInfos[codeName]) : undefined; return App.allViewInfos[codeName] ? (deepCopy(App.allViewInfos[codeName]) as ViewDetail) : undefined;
} }
/** /**
...@@ -46,7 +46,7 @@ export class App { ...@@ -46,7 +46,7 @@ export class App {
* *
* @static * @static
*/ */
public static async init(){ public static async init() {
const response = await Http.getInstance().get('./assets/json/views.json') const response = await Http.getInstance().get('./assets/json/views.json')
App.allViewInfos = response.data; App.allViewInfos = response.data;
} }
......
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/service/open-view/open-view-service.ts
浏览文件 @ 1cb602a1
import { deepCopy, IParam, RouteTool } from '@ibiz-core'; import { IParam, RouteTool, ViewDetail } from '@ibiz-core';
import { App } from '@service'; import { App } from '@service';
import router from '@/router'; import router from '@/router';
import { AppModal } from '@/utils';
interface View extends IParam {
codeName: string;
openMode?: string;
}
interface Params extends IParam { interface Params extends IParam {
context: any; context: any;
...@@ -44,9 +41,9 @@ export class OpenViewService { ...@@ -44,9 +41,9 @@ export class OpenViewService {
* @param view 视图信息 * @param view 视图信息
* @param params 相关参数 * @param params 相关参数
*/ */
public openView(view: View, params: Params) { public openView(view: ViewDetail, params: Params) {
// 获取详细视图信息 // 获取详细视图信息
let _view: any = App.getViewInfo(view.codeName); let _view: ViewDetail | undefined = App.getViewInfo(view.codeName);
if (!_view) { if (!_view) {
console.error(`应用中不存在${view.codeName}视图`); console.error(`应用中不存在${view.codeName}视图`);
return; return;
...@@ -70,7 +67,7 @@ export class OpenViewService { ...@@ -70,7 +67,7 @@ export class OpenViewService {
* @param view 视图信息 * @param view 视图信息
* @param params 相关参数 * @param params 相关参数
*/ */
public openByOpenMode(view: any, params: Params) { public openByOpenMode(view: ViewDetail, params: Params) {
const { openMode } = view; const { openMode } = view;
const { viewParams, context } = params; const { viewParams, context } = params;
// 路由打开视图 // 路由打开视图
...@@ -83,7 +80,8 @@ export class OpenViewService { ...@@ -83,7 +80,8 @@ export class OpenViewService {
window.open('./#' + routePath, '_blank'); window.open('./#' + routePath, '_blank');
} }
} else if (openMode == 'POPUPMODAL') { } else if (openMode == 'POPUPMODAL') {
} else if (openMode.indexOf('DRAWER') !== -1) { AppModal.getInstance().openModal(view, params);
} else if (openMode?.indexOf('DRAWER') !== -1) {
// TODO PMS上面抽屉DRAWER_TOP // TODO PMS上面抽屉DRAWER_TOP
} else if (openMode == 'POPOVER') { } else if (openMode == 'POPOVER') {
// TODO 打开气泡卡片 // TODO 打开气泡卡片
......
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/utils/app-modal/app-modal.ts
浏览文件 @ 1cb602a1
import { createVNode, render as vueRender } from 'vue'
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import Antd from 'ant-design-vue'; import Antd from 'ant-design-vue';
// import { AppServiceBase, LogUtil } from 'ibiz-core';
import AppModalComponent from "./app-modal.vue"; import AppModalComponent from "./app-modal.vue";
import IbizLoading from '@components/render/IbizLoading.vue'; import IbizLoading from '@components/render/IbizLoading.vue';
import { IParam, ViewDetail } from '@ibiz-core';
export class AppModal { export class AppModal {
...@@ -17,37 +16,12 @@ export class AppModal { ...@@ -17,37 +16,12 @@ export class AppModal {
private static modal = new AppModal(); private static modal = new AppModal();
/** /**
* vue 实例
* *
* @private
* @type {Vue}
* @memberof AppModal
*/
private vueExample!: any;
/**
* store对象
* *
* @private * @type {*}
* @memberof AppModal * @memberof AppModal
*/ */
private store: any; public asyncComp: any;
/**
* i18n对象
*
* @private
* @memberof AppModal
*/
private i18n: any;
/**
* router对象
*
* @private
* @memberof AppModal
*/
private router: any;
/** /**
* Creates an instance of AppModal. * Creates an instance of AppModal.
...@@ -55,7 +29,6 @@ export class AppModal { ...@@ -55,7 +29,6 @@ export class AppModal {
* @memberof AppModal * @memberof AppModal
*/ */
private constructor() { private constructor() {
this.initBasicData();
if (AppModal.modal) { if (AppModal.modal) {
return AppModal.modal; return AppModal.modal;
} }
...@@ -76,38 +49,20 @@ export class AppModal { ...@@ -76,38 +49,20 @@ export class AppModal {
} }
/** /**
* 初始化基础数据 * 创建vue对象
*
* @memberof AppModal
*/
private initBasicData() {
// const appService = AppServiceBase.getInstance();
// this.store = appService.getAppStore();
// this.i18n = appService.getI18n();
// this.router = appService.getRouter();
}
/**
* 创建 Vue 实例对象
* *
* @private * @private
* @param \{{ name: string, title: string, fileDir: string, width?: number, height?: number,isfullscreen?:boolean }} view 视图数据 * @param {view} ViewDetail 视图对象
* @param {*} [context={}] 应用上下文参数 * @param {IParam} params 视图参数
* @param {*} [viewparams={}] 视图参数 * @param {IParam} [options] 模态配置项
* @param {*} [navdatas=[]] 导航数据 * @return {*} {Subject<any>}
* @param {string} uuid 标识
* @returns {Subject<any>}
* @memberof AppModal * @memberof AppModal
*/ */
private createVueExample(view: { name: string, title: string, fileDir:string, width?: number, height?: number, isfullscreen?: boolean, customClass?: string }, context: any = {}, viewparam: any = {}, navdatas: Array<any> = [], uuid: string): Subject<any> { private createVueExample(view: ViewDetail, params: IParam, options?: IParam): Subject<any> {
const self: any = this;
if (!self.store || !self.i18n) {
self.initBasicData();
}
try { try {
let subject: null | Subject<any> = new Subject<any>(); let subject: null | Subject<any> = new Subject<any>();
let props = { view: view, context: context, viewparam: viewparam, navdatas: navdatas, uuid: uuid, subject: subject }; let props = { view: view, context: params.context, viewParams: params.viewParams, isFullscreen: params.isFullscreen, subject: subject, options: options };
let dir = view.fileDir.replace(/@page/, ''); let dir = view.fileDir?.replace(/@page/, '');
//Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 //Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
const modules = import.meta.glob('../../page/*/*/index.ts'); const modules = import.meta.glob('../../page/*/*/index.ts');
const AsyncComp = defineAsyncComponent({ const AsyncComp = defineAsyncComponent({
...@@ -123,14 +78,13 @@ export class AppModal { ...@@ -123,14 +78,13 @@ export class AppModal {
const div = document.createElement('div'); const div = document.createElement('div');
document.body.appendChild(div); document.body.appendChild(div);
const app = createApp(component, const app = createApp(component,
{ {
close: () => { document.body.removeChild(div); app.unmount(); }, close: () => { document.body.removeChild(div); app.unmount(); },
...props ...props
} }
); );
app.component(view.name, AsyncComp); app.component(view.name, AsyncComp);
const vm = app.use(Antd).mount(div); app.use(Antd).mount(div);
this.vueExample = vm;
} }
return subject; return subject;
} catch (error) { } catch (error) {
...@@ -140,24 +94,17 @@ export class AppModal { ...@@ -140,24 +94,17 @@ export class AppModal {
} }
/** /**
* 打开模态视图 * 打开模态视图
* *
* @param \{{ name: string, title: string, fileDir:string, width?: number, height?: number }} view 视图 * @param {View} view 视图对象
* @param {*} [viewParam={}] 应用上下文参数 * @param {IParam} params 视图参数
* @param {any[]} deResParameters 关系实体参数对象 * @param {IParam} [options] 模态配置项
* @param {any[]} parameters 当前应用视图参数对象 * @return {*} {Subject<any>}
* @param {any[]} args 多项数据
* @param {*} [data={}] 行为参数
* @param {any[]} navdatas 导航数据
* @returns {Subject<any>}
* @memberof AppModal * @memberof AppModal
*/ */
public openModal(view: { name: string, title: string, fileDir:string, width?: number, height?: number, isfullscreen?: boolean, customClass?: string }, context: any = {}, data: any = {}, navdatas: Array<any> = []): Subject<any> { public openModal(view: ViewDetail, params: IParam, options?: IParam): Subject<any> {
try { try {
let viewdata: any = {}; const subject = this.createVueExample(view, params, options);
Object.assign(viewdata, JSON.parse(JSON.stringify(context)));
const uuid = this.getUUID();
const subject = this.createVueExample(view, viewdata, data, navdatas, uuid);
return subject; return subject;
} catch (error) { } catch (error) {
console.log(error); console.log(error);
......
modules/ibizlab-generator-core/src/main/resources/templ/r7/app_{{apps}}/src/utils/app-modal/app-modal.vue
浏览文件 @ 1cb602a1
<script setup lang="ts"> <script setup lang="ts">
import { IParam, ViewDetail } from '@ibiz-core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { Ref, ref } from 'vue'; import { Ref, ref } from 'vue';
interface AppModalProps { interface AppModalProps {
/** /**
* @description 视图 * @description 视图
*/ */
view: any; view: ViewDetail;
/** /**
* @description 视图上下文参数 * @description 视图上下文参数
...@@ -15,50 +16,49 @@ interface AppModalProps { ...@@ -15,50 +16,49 @@ interface AppModalProps {
/** /**
* @description 视图参数 * @description 视图参数
*/ */
viewparam?: any; viewParams?: any;
/** /**
* @description 导航数据 * @description 数据传递对象
*/ */
navdatas?: any; subject?: Subject<any>;
/** /**
* @description 数据传递对象 * @description 关闭回调
*/ */
subject?:any close: Function;
/** /**
* @description 关闭回调 * @description 是否全屏
*/
isFullscreen:boolean;
/**
* @description 模态参数
*/ */
close:Function; option?: IParam;
} }
const props = withDefaults(defineProps<AppModalProps>(), { const props = withDefaults(defineProps<AppModalProps>(), {
view:{},
context: {}, context: {},
viewparam: {}, viewParams: {},
navdatas: [],
}); });
/** /**
* 是否显示 * 是否显示
*/ */
let isShow: Ref<boolean> = ref(false); let isVisible: Ref<boolean> = ref(false);
/**
* 是否满屏
*/
let isfullscreen: Ref<boolean> = ref(false);
/** /**
* 零时结果 * 临时结果
*/ */
let tempResult = { ret: '' }; let tempResult = { ret: '' };
/** /**
* 视图名称 * 视图名称
*/ */
let viewname: Ref<string> = ref(''); let viewName: Ref<string> = ref('');
/** /**
* 视图标题 * 视图标题
...@@ -75,11 +75,6 @@ let width: Ref<number> = ref(0); ...@@ -75,11 +75,6 @@ let width: Ref<number> = ref(0);
*/ */
let height: Ref<number> = ref(0); let height: Ref<number> = ref(0);
/**
* 视图层级
*/
let zIndex: any = null;
/** /**
* 视图样式 * 视图样式
*/ */
...@@ -90,30 +85,16 @@ let style: any = {}; ...@@ -90,30 +85,16 @@ let style: any = {};
*/ */
const getSubject = () => { const getSubject = () => {
return props.subject; return props.subject;
} };
/**
* 监听isShow
*/
watch(
() => isShow,
(newVal, oldVal) => {
if (newVal !== oldVal && newVal.value == false) {
zIndex -= 100;
// this.$store.commit('updateZIndex', this.zIndex);
}
},
);
/** /**
* Vue生命周期beforeMount * Vue生命周期beforeMount
*/ */
onBeforeMount(() => { onBeforeMount(() => {
if (props.view) { if (props.view) {
viewname.value = props.view.name; viewName.value = props.view.name;
title = props.view.title; title = props.view.title || '';
isfullscreen.value = props.view.isfullscreen ? props.view.isfullscreen : false; if (props.isFullscreen) {
if (isfullscreen.value) {
Object.assign(style, { height: 'auto' }); Object.assign(style, { height: 'auto' });
} else { } else {
if (!props.view.width || props.view.width === 0 || Object.is(props.view.width, '0px')) { if (!props.view.width || props.view.width === 0 || Object.is(props.view.width, '0px')) {
...@@ -143,13 +124,7 @@ onBeforeMount(() => { ...@@ -143,13 +124,7 @@ onBeforeMount(() => {
* Vue生命周期mounted * Vue生命周期mounted
*/ */
onMounted(() => { onMounted(() => {
// const curmodal: any = this.$refs.curmodal; isVisible.value = true;
// const zIndex = this.$store.getters.getZIndex();
// if (zIndex) {
// this.zIndex = zIndex + 100;
// this.$store.commit('updateZIndex', this.zIndex);
// }
isShow.value = true;
}); });
/** /**
...@@ -157,18 +132,15 @@ onMounted(() => { ...@@ -157,18 +132,15 @@ onMounted(() => {
*/ */
const close = (result: any) => { const close = (result: any) => {
if (result && Array.isArray(result) && result.length > 0) { if (result && Array.isArray(result) && result.length > 0) {
if (zIndex) {
// this.$store.commit('updateZIndex', zIndex - 100);
}
Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) }); Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
} }
isShow.value = false; isVisible.value = false;
}; };
/** /**
* 视图数据变化 * 视图数据变化
*/ */
const dataChange = (result: any) => { const viewDataChange = (result: any) => {
tempResult = { ret: '' }; tempResult = { ret: '' };
if (result && Array.isArray(result) && result.length > 0) { if (result && Array.isArray(result) && result.length > 0) {
Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) }); Object.assign(tempResult, { ret: 'OK' }, { datas: JSON.parse(JSON.stringify(result)) });
...@@ -178,7 +150,7 @@ const dataChange = (result: any) => { ...@@ -178,7 +150,7 @@ const dataChange = (result: any) => {
/** /**
* 视图数据激活 * 视图数据激活
*/ */
const viewDatasActivated = (result: any) => { const viewDataActivated = (result: any) => {
if (result && Array.isArray(result) && result.length > 0) { if (result && Array.isArray(result) && result.length > 0) {
close(result); close(result);
} }
...@@ -189,6 +161,7 @@ const viewDatasActivated = (result: any) => { ...@@ -189,6 +161,7 @@ const viewDatasActivated = (result: any) => {
*/ */
const onVisibleChange = ($event: any) => { const onVisibleChange = ($event: any) => {
handleShowState($event); handleShowState($event);
props.close(tempResult);
}; };
/** /**
...@@ -198,9 +171,6 @@ const handleShowState = ($event: any) => { ...@@ -198,9 +171,6 @@ const handleShowState = ($event: any) => {
if (props.subject && tempResult) { if (props.subject && tempResult) {
props.subject.next(tempResult); props.subject.next(tempResult);
} }
setTimeout(() => {
props.close();
}, 500);
}; };
</script> </script>
...@@ -208,7 +178,7 @@ const handleShowState = ($event: any) => { ...@@ -208,7 +178,7 @@ const handleShowState = ($event: any) => {
<a-modal <a-modal
ref="curModal" ref="curModal"
class="app-modal" class="app-modal"
v-model:visible="isShow" v-model:visible="isVisible"
:title="title" :title="title"
:footer="null" :footer="null"
:maskClosable="true" :maskClosable="true"
...@@ -218,19 +188,18 @@ const handleShowState = ($event: any) => { ...@@ -218,19 +188,18 @@ const handleShowState = ($event: any) => {
@cancel="onVisibleChange($event)" @cancel="onVisibleChange($event)"
> >
<component <component
:is="viewname" :is="viewName"
class="viewcontainer2" class="app-modal-view-component"
:width="width" :width="width"
:height="height" :height="height"
:context="JSON.stringify(context)" :context="context"
:viewparam="JSON.stringify(viewparam)" :viewParams="viewParams"
:navdatas="navdatas"
:viewDefaultUsage="false" :viewDefaultUsage="false"
:noViewCaption="true" :noViewCaption="true"
@viewdataschange="dataChange($event)" @viewDataChange="viewDataChange($event)"
@viewdatasactivated="viewDatasActivated($event)" @viewDataActivated="viewDataActivated($event)"
@close="close($event)" @close="close($event)"
:ref="viewname" :ref="viewName"
></component> ></component>
</a-modal> </a-modal>
</template> </template>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或