提交 70977341 编写于 作者: ibizdev's avatar ibizdev

Mosher 发布系统代码 [后台服务,演示应用]

上级 5d3de2e5
import ViewEngine from './view-engine'; import { ExpViewEngine } from './exp-view-engine';
/** /**
* 列表导航视图界面引擎 * 列表导航视图界面引擎
...@@ -7,24 +7,7 @@ import ViewEngine from './view-engine'; ...@@ -7,24 +7,7 @@ import ViewEngine from './view-engine';
* @class ListExpViewEngine * @class ListExpViewEngine
* @extends {ViewEngine} * @extends {ViewEngine}
*/ */
export default class ListExpViewEngine extends ViewEngine { export class ListExpViewEngine extends ExpViewEngine {
/**
* 列表导航栏部件
*
* @type {*}
* @memberof ListExpViewEngine
*/
public listExpBar: any = null;
/**
* Creates an instance of ListExpViewEngine.
*
* @memberof ListExpViewEngine
*/
constructor() {
super();
}
/** /**
* 初始化引擎 * 初始化引擎
...@@ -33,77 +16,17 @@ export default class ListExpViewEngine extends ViewEngine { ...@@ -33,77 +16,17 @@ export default class ListExpViewEngine extends ViewEngine {
* @memberof ListExpViewEngine * @memberof ListExpViewEngine
*/ */
public init(options: any): void { public init(options: any): void {
this.listExpBar = options.listexpbar; this.expBar = options.listexpbar;
super.init(options); super.init(options);
} }
/** /**
* 引擎加载 * @description 视图销毁
*
* @memberof ListExpViewEngine * @memberof ListExpViewEngine
*/ */
public load(): void { public destroyed() {
super.load(); super.destroyed();
if (this.getListExpBar() && this.isLoadDefault) { this.expBar = null;
const tag = this.getListExpBar().name;
this.setViewState2({ tag: tag, action: 'load', viewdata: this.view.viewparams });
} else {
this.isLoadDefault = true;
}
} }
/**
* 部件事件机制
*
* @param {string} ctrlName
* @param {string} eventName
* @param {*} args
* @memberof ListExpViewEngine
*/
public onCtrlEvent(ctrlName: string, eventName: string, args: any): void {
super.onCtrlEvent(ctrlName, eventName, args);
if (Object.is(ctrlName, 'listexpbar')) {
this.listExpBarEvent(eventName, args);
}
}
/**
* 列表导航事件
*
* @param {string} eventName
* @param {*} args
* @memberof ListExpViewEngine
*/
public listExpBarEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'load')) {
this.view.$emit('viewload', args);
}
if (Object.is(eventName, 'selectionchange')) {
this.view.$emit('viewdataschange', args);
}
if (Object.is(eventName, 'activated')) {
this.view.$emit('viewdatasactivated', args);
}
}
/**
* 获取部件对象
*
* @returns {*}
* @memberof ListExpViewEngine
*/
public getListExpBar(): any {
return this.listExpBar;
}
/**
* @description 销毁
* @memberof ListExpViewEngine
*/
public destroy() {
super.destroy();
this.listExpBar = null;
}
} }
\ No newline at end of file
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<template> <template>
<div class="view-container degridexpview ibizorder-grid-exp-view"> <div class="view-container degridexpview ibizorder-grid-exp-view">
<app-studioaction :viewTitle="$t(model.srfCaption)" viewName="ibizordergridexpview"></app-studioaction> <app-studioaction :viewTitle="$t(model.srfCaption)" viewName="ibizordergridexpview"></app-studioaction>
<card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :bordered="false"> <card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :bordered="false">
<div class='view-top-messages'> <div class='view-top-messages'>
<app-alert-group position='TOP' :context="context" :viewparam="viewparams" infoGroup='VMGroup44' viewname='ibizordergridexpview'></app-alert-group> </div> <app-alert-group position='TOP' :context="context" :viewparam="viewparams" infoGroup='VMGroup44' viewname='ibizordergridexpview'></app-alert-group> </div>
<div class="content-container"> <div class="content-container">
<split v-model="split" mode="horizontal" @on-move-end="onSplitChange"> <split v-model="split" mode="horizontal" @on-move-end="onSplitChange">
<template slot="left"> <template slot="left">
<view_gridexpbar <view_gridexpbar
:viewState="viewState" :viewState="viewState"
:viewparams="viewparams" :viewparams="viewparams"
:context="context" :context="context"
...@@ -24,20 +24,20 @@ ...@@ -24,20 +24,20 @@
@activated="gridexpbar_activated($event)" @activated="gridexpbar_activated($event)"
@closeview="closeView($event)"> @closeview="closeView($event)">
</view_gridexpbar> </view_gridexpbar>
</template> </template>
<template slot="right"> <template slot="right">
<component <component
v-if="navItem && navItem.navView" v-if="navItem && navItem.navView"
:is="navItem.navView" :is="navItem.navView"
:key="navItem.data && navItem.data.length ? navItem.data[0].srfkey : ''" :key="navItem.data && navItem.data.length ? navItem.data[0].srfkey : ''"
class="viewcontainer2" class="viewcontainer2"
:viewDefaultUsage="false" :viewDefaultUsage="false"
:viewdata="JSON.stringify(navItem.srfnavdata.context)" :viewdata="JSON.stringify(navItem.srfnavdata.context)"
:viewparam="JSON.stringify(navItem.srfnavdata.viewparams)"> :viewparam="JSON.stringify(navItem.srfnavdata.viewparams)">
</component> </component>
</template> </template>
</split> </split>
</div> </div>
</card> </card>
</div> </div>
</template> </template>
......
<template> <template>
<div class="view-container delistexpview ibizorder-list-exp-view"> <div class="view-container delistexpview ibizorder-list-exp-view">
<app-studioaction :viewTitle="$t(model.srfCaption)" viewName="ibizorderlistexpview"></app-studioaction> <app-studioaction :viewTitle="$t(model.srfCaption)" viewName="ibizorderlistexpview"></app-studioaction>
<card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :bordered="false"> <card class='view-card view-no-caption view-no-toolbar' :dis-hover="true" :bordered="false">
<div class='view-top-messages'> <div class='view-top-messages'>
<app-alert-group position='TOP' :context="context" :viewparam="viewparams" infoGroup='VMGroup45' viewname='ibizorderlistexpview'></app-alert-group> </div> <app-alert-group position='TOP' :context="context" :viewparam="viewparams" infoGroup='VMGroup45' viewname='ibizorderlistexpview'></app-alert-group> </div>
<div class="content-container"> <div class="content-container">
<view_listexpbar <split v-model="split" mode="horizontal" @on-move-end="onSplitChange">
<template slot="left">
<view_listexpbar
:viewState="viewState" :viewState="viewState"
:viewparams="viewparams" :viewparams="viewparams"
:context="context" :context="context"
...@@ -23,12 +23,25 @@ ...@@ -23,12 +23,25 @@
@load="listexpbar_load($event)" @load="listexpbar_load($event)"
@activated="listexpbar_activated($event)" @activated="listexpbar_activated($event)"
@closeview="closeView($event)"> @closeview="closeView($event)">
</view_listexpbar> </view_listexpbar>
</div> </template>
</card> <template slot="right">
<component
v-if="navItem && navItem.navView"
:is="navItem.navView"
:key="navItem.data && navItem.data.length ? navItem.data[0].srfkey : ''"
class="viewcontainer2"
:viewDefaultUsage="false"
:viewdata="JSON.stringify(navItem.srfnavdata.context)"
:viewparam="JSON.stringify(navItem.srfnavdata.viewparams)">
</component>
</template>
</split>
</div>
</card>
</div> </div>
</template> </template>
<script lang='tsx'> <script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch,Inject } from 'vue-property-decorator'; import { Vue, Component, Prop, Provide, Emit, Watch,Inject } from 'vue-property-decorator';
import { UIActionTool,Util } from '@/utils'; import { UIActionTool,Util } from '@/utils';
...@@ -224,8 +237,8 @@ export default class IBIZOrderListExpViewBase extends Vue { ...@@ -224,8 +237,8 @@ export default class IBIZOrderListExpViewBase extends Vue {
* @memberof IBIZOrderListExpViewBase * @memberof IBIZOrderListExpViewBase
*/ */
public viewState: Subject<ViewState> = new Subject(); public viewState: Subject<ViewState> = new Subject();
/** /**
* 视图引擎 * 视图引擎
...@@ -760,18 +773,59 @@ export default class IBIZOrderListExpViewBase extends Vue { ...@@ -760,18 +773,59 @@ export default class IBIZOrderListExpViewBase extends Vue {
} }
this.viewState.complete(); this.viewState.complete();
} }
/** /**
* 视图唯一标识 * 视图唯一标识
* *
* @type {string} * @type {string}
* @memberof IBIZOrderListExpViewBase * @memberof IBIZOrderListExpViewBase
*/ */
public viewUID: string = 'sample-ibizorder-list-exp-view'; public viewUID: string = 'sample-ibizorder-list-exp-view';
/**
* 分隔值
*
* @type {number}
* @memberof IBIZOrderListExpViewBase
*/
public split: number = 0.5;
/**
* 导航项
*
* @type {*}
* @memberof IBIZOrderListExpViewBase
*/
public navItem: any = {};
/**
* split值变化事件
*
* @memberof IBIZOrderListExpViewBase
*/
public onSplitChange() {
if (this.split) {
this.$store.commit("setViewSplit", { viewUID: this.viewUID, viewSplit: this.split });
}
}
/**
* 初始化分隔值
*
* @memberof IBIZOrderListExpViewBase
*/
public initSplit() {
if (this.$store.getters.getViewSplit(this.viewUID)) {
this.split = this.$store.getters.getViewSplit(this.viewUID);
} else {
const containerWidth = (this.$el as any).offsetWidth;
this.split = 500 / containerWidth;
this.$store.commit("setViewSplit", { viewUID: this.viewUID, viewSplit: this.split });
}
}
} }
</script> </script>
<style lang='less'> <style lang='less'>
@import './ibizorder-list-exp-view.less'; @import './ibizorder-list-exp-view.less';
</style> </style>
\ No newline at end of file
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div slot='content'>{{$t('entities.ibizorder.gridexpviewgridexpbar_toolbar_toolbar.deuiaction3.tip')}}</div> <div slot='content'>{{$t('entities.ibizorder.gridexpviewgridexpbar_toolbar_toolbar.deuiaction3.tip')}}</div>
</tooltip> </tooltip>
</div> </div>
</div>
<div class='grid-exp-bar-content'> <div class='grid-exp-bar-content'>
<view_gridexpbar_grid <view_gridexpbar_grid
:viewState="viewState" :viewState="viewState"
...@@ -46,7 +47,6 @@ ...@@ -46,7 +47,6 @@
@closeview="closeView($event)"> @closeview="closeView($event)">
</view_gridexpbar_grid> </view_gridexpbar_grid>
</div> </div>
</div>
</div> </div>
</template> </template>
......
<template> <template>
<split id="listexpviewlistexpbar" class="app-list-exp-bar" v-model="split" mode="horizontal" @on-move-end="onSplitChange"> <div id="listexpviewlistexpbar" class="app-list-exp-bar">
<div slot='left'> <div class='list-exp-bar-header'>
<div class='list-exp-bar-header'> <div class="list-exp-bar-title">
<div class="list-exp-bar-title"> <icon type='ios-home-outline'/>{{$t('app.listExpBar.title')}}
<icon type='ios-home-outline'/>{{$t('app.listExpBar.title')}}
</div>
</div> </div>
<div class="container-header"> </div>
<div class='search-container'> <div class="exp-bar-action-container">
<i-input :search="true" <div class='search-container'>
@on-change="($event) => { this.searchText = $event.target.value; }" <i-input :search="true"
:placeholder="placeholder" @on-change="($event) => { this.searchText = $event.target.value; }"
@on-search="onSearch"> :placeholder="placeholder"
</i-input> @on-search="onSearch">
</div> </i-input>
<div class='toolbar-container'> </div>
<div class='toolbar-container'>
<tooltip :transfer="true" :max-width="600"> <tooltip :transfer="true" :max-width="600">
<i-button v-show="listexpviewlistexpbar_toolbarModels.deuiaction3.visabled" :disabled="listexpviewlistexpbar_toolbarModels.deuiaction3.disabled" class='' v-loading:i-button @click="listexpbar_toolbar_click({ tag: 'deuiaction3' }, $event)"> <i-button v-show="listexpviewlistexpbar_toolbarModels.deuiaction3.visabled" :disabled="listexpviewlistexpbar_toolbarModels.deuiaction3.disabled" class='' v-loading:i-button @click="listexpbar_toolbar_click({ tag: 'deuiaction3' }, $event)">
<i class='fa fa-edit'></i> <i class='fa fa-edit'></i>
...@@ -23,9 +22,9 @@ ...@@ -23,9 +22,9 @@
<div slot='content'>{{$t('entities.ibizorder.listexpviewlistexpbar_toolbar_toolbar.deuiaction3.tip')}}</div> <div slot='content'>{{$t('entities.ibizorder.listexpviewlistexpbar_toolbar_toolbar.deuiaction3.tip')}}</div>
</tooltip> </tooltip>
</div> </div>
</div> </div>
<div class='list-exp-bar-content'> <div class='list-exp-bar-content'>
<view_listexpbar_list <view_listexpbar_list
:viewState="viewState" :viewState="viewState"
:viewparams="viewparams" :viewparams="viewparams"
:context="context" :context="context"
...@@ -44,19 +43,8 @@ ...@@ -44,19 +43,8 @@
@load="listexpbar_list_load($event)" @load="listexpbar_list_load($event)"
@closeview="closeView($event)"> @closeview="closeView($event)">
</view_listexpbar_list> </view_listexpbar_list>
</div>
</div>
<div slot='right'>
<component
v-if="selection.view && !Object.is(this.selection.view.viewname, '')"
:is="selection.view.viewname"
class="viewcontainer2"
:viewDefaultUsage="false"
:viewdata="JSON.stringify(selection.context)"
:viewparam="JSON.stringify(selection.viewparam)">
</component>
</div> </div>
</split> </div>
</template> </template>
...@@ -322,33 +310,8 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt ...@@ -322,33 +310,8 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt
* @type {(boolean)} * @type {(boolean)}
* @memberof ListExpViewlistexpbarBase * @memberof ListExpViewlistexpbarBase
*/ */
public isSingleSelect:boolean = true; public isSingleSelect: boolean = true;
/**
* 呈现模式,可选值:horizontal或者vertical
*
* @public
* @type {(string)}
* @memberof ListExpViewlistexpbarBase
*/
public showMode:string ="horizontal";
/**
* 控件宽度
*
* @type {number}
* @memberof ListExpViewlistexpbarBase
*/
public ctrlWidth:number = 500;
/**
* 控件高度
*
* @type {number}
* @memberof ListExpViewlistexpbarBase
*/
public ctrlHeight: number = 0;
/** /**
* 可搜索字段名称 * 可搜索字段名称
...@@ -366,7 +329,7 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt ...@@ -366,7 +329,7 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt
* @type {(string)} * @type {(string)}
* @memberof ListExpViewlistexpbarBase * @memberof ListExpViewlistexpbarBase
*/ */
public searchText:string = ""; public searchText: string = "";
/** /**
* 部件类型 * 部件类型
...@@ -377,14 +340,6 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt ...@@ -377,14 +340,6 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt
*/ */
public controlType: string = "listExpBar"; public controlType: string = "listExpBar";
/**
* 分割宽度
*
* @type {number}
* @memberof ListExpViewlistexpbarBase
*/
public split: number = 0.5;
/** /**
* 导航视图名称 * 导航视图名称
...@@ -475,32 +430,13 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt ...@@ -475,32 +430,13 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt
return null; return null;
} }
/**
* 选中数据
*
* @type {*}
* @memberof ListExpViewlistexpbarBase
*/
public selection: any = {};
/**
* split值变化事件
*
* @memberof ListExpViewlistexpbarBase
*/
public onSplitChange() {
if(this.split){
this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split});
}
}
/** /**
* Vue声明周期(组件初始化完毕) * Vue声明周期(组件初始化完毕)
* *
* @memberof ListExpViewlistexpbarBase * @memberof ListExpViewlistexpbarBase
*/ */
public created() { public created() {
this.afterCreated(); this.afterCreated();
} }
/** /**
...@@ -524,24 +460,7 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt ...@@ -524,24 +460,7 @@ export default class ListExpViewlistexpbarBase extends Vue implements ControlInt
* *
* @memberof ListExpViewlistexpbarBase * @memberof ListExpViewlistexpbarBase
*/ */
public afterMounted(){ public afterMounted() { }
if(this.$store.getters.getViewSplit(this.viewUID)){
this.split = this.$store.getters.getViewSplit(this.viewUID);
}else{
let containerWidth:number = (document.getElementById("listexpviewlistexpbar") as any).offsetWidth;
let containerHeight:number = (document.getElementById("listexpviewlistexpbar") as any).offsetHeight;
if(Object.is(this.showMode,'horizontal')){
if(this.ctrlWidth && containerWidth != 0){
this.split = this.ctrlWidth/containerWidth;
}
}else{
if(this.ctrlHeight && containerHeight != 0){
this.split = this.ctrlHeight/containerHeight;
}
}
this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split});
}
}
/** /**
* Vue声明周期(组件渲染完毕) * Vue声明周期(组件渲染完毕)
......
.app-list-exp-bar { .app-list-exp-bar {
> .ivu-split-horizontal { height: 100%;
> .ivu-split-trigger-con { display: flex;
height: 100%; flex-direction: column;
width: 1px; .list-exp-bar-header {
} line-height: 50px;
> .ivu-split-pane { border-bottom: 1px solid #ddd;
> div { .list-exp-bar-title {
height: 100%; font-size: 18px;
overflow: auto; padding-left: 8px;
display: flex; i {
flex-direction: column; font-size: 20px;
.list-exp-bar-header { margin-top: -2px;
line-height: 50px; }
border-bottom: 1px solid #ddd; }
.list-exp-bar-title { }
font-size: 18px; .exp-bar-action-container {
padding-left: 8px; display: flex;
i { align-items: center;
font-size: 20px; }
margin-top: -2px; .container-header{
} display: flex;
} justify-content: flex-start;
} align-items: center;
.container-header{ flex-wrap: wrap;
display: flex; .search-container {
justify-content: flex-start; width: 30%;
align-items: center; height: 48px;
flex-wrap: wrap; padding: 10px 10px 10px 0;
.search-container { min-width: 200px;
width: 30%; max-width: 400px;
height: 48px; }
padding: 10px 10px 10px 0; .toolbar-container{
min-width: 200px; padding: 4px;
max-width: 400px; }
} .quick-group-container {
.toolbar-container{ padding-top: 8px;
padding: 4px; padding-right: 20px;
display: flex; }
flex-wrap: wrap; }
align-items: center; .list-exp-bar-content {
} flex-grow: 1;
.quick-group-container { overflow: auto;
padding-top: 8px; }
padding-right: 20px; }
}
}
.list-exp-bar-content {
height: calc(100% - 88px);
overflow: auto;
padding: 16px 0;
margin-bottom: 10px;
}
.list-exp-bar-content2 {
height: 100%;
overflow: auto;
flex-grow: 1;
}
}
}
> .right-pane.ivu-split-pane {
> div {
padding-left: 10px;
}
}
> .left-pane.ivu-split-pane {
padding-right: 10px;
}
}
> .ivu-split-vertical{
> .ivu-split-pane {
> div {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
.list-exp-bar-header {
line-height: 50px;
border-bottom: 1px solid #ddd;
.list-exp-bar-title {
font-size: 18px;
padding-left: 8px;
i {
font-size: 20px;
margin-top: -2px;
}
}
}
.container-header{
display: flex;
justify-content: space-between;
align-items: center;
.search-container {
width: 30%;
height: 48px;
padding: 10px 10px 10px 0;
min-width: 200px;
max-width: 400px;
}
.toolbar-container{
padding: 4px;
}
}
.list-exp-bar-content {
height: calc(100% - 88px);
overflow: auto;
margin-bottom: 10px;
}
.list-exp-bar-content2 {
height: 100%;
overflow: auto;
flex-grow: 1;
}
}
}
> .top-pane.ivu-split-pane {
> div {
padding-bottom: 10px;
}
}
> .bottom-pane.ivu-split-pane {
padding-top: 10px;
}
}
}
// this is less // this is less
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册