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