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

app_Web/src/app-register.ts

@@ -132,9 +132,11 @@ import AppPresetQrCode from './components/layout-element/interactive/app-preset-
 import AppPresetSwitch from './components/layout-element/interactive/app-preset-switch/app-preset-switch.vue';
 import AppPresetTextInput from './components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue';
 import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue';
+import AppIndexNavBreadcrumb from './components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue';
 import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue';
 import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
 import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue';
+import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -281,8 +283,10 @@ export const AppComponents = {
         v.component('app-preset-switch',AppPresetSwitch);
         v.component('app-preset-text-input',AppPresetTextInput);
         v.component('app-index-nav-tabs', AppIndexNavTabs);
+        v.component('app-index-nav-breadcrumb', AppIndexNavBreadcrumb);
         v.component('app-index-org-select', AppIndexOrgSelect);
         v.component('app-index-user-info', AppIndexUserInfo);
         v.component('app-ctrl-pos', AppCtrlPos);
+        v.component('app-preset-button',AppPresetButton);
     },
 };
\ No newline at end of file

app_Web/src/components/layout-element/container/app-scroll-container/app-scroll-container.vue

@@ -84,7 +84,7 @@ export default class AppScrollContainer extends Vue {
      */
     get curStyle(){
         const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getBoxSpacingStyle();
+        return layoutModel.getElementStyle();
     }
 
     /**

app_Web/src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue

@@ -72,7 +72,7 @@ export default class AppSimpleFlexContainer extends Vue {
      */
     get curStyle() {
         const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getBoxSpacingStyle();
+        return layoutModel.getElementStyle();
     }
 
     /**

app_Web/src/components/layout-element/container/app-standard-container/app-standard-container.less

+// 标准容器大小靠内容撑
 .app-standard-container{
     display: block;
+    .container-item__pos{
+        width: 100%;
+        height: 100%;
+    }
 }
\ No newline at end of file

app_Web/src/components/layout-element/container/app-standard-container/app-standard-container.vue

 <template>
-    <div :class="curClassName" :style="curStyleContent">
+    <div :class="curClassName" :style="curStyle">
         <template v-if="containerModel.length > 0">
-            <template v-for="name of containerModel">
+            <div v-for="name of containerModel" class="container-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
-            </template>
+            </div>
         </template>
     </div>
 </template>
@@ -63,17 +63,24 @@ export default class AppStandardContainer extends Vue {
     * 当前容器样式类
     */
     get curClassName() {
-        return `app-standard-container ${this.name}`;
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-standard-container ${this.name} ${layoutModel.sysCss}`;
     }
 
     /**
-    * 当前容器样式
-    */
-    get curStyleContent() {
-        let boxLayoutPosStyle = "";
-        const curLayoutModel = this.layoutModelDetails[this.name];
-        console.log(curLayoutModel);
-        return boxLayoutPosStyle;
+     * 当前容器样式
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 获取项布局样式
+     */
+    public getItemPosStyle(name: string) {
+        const layoutModel = this.layoutModelDetails[name];
+        return layoutModel.getCommonLayoutStyle();
     }
 }
 </script>

app_Web/src/components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue

+<template>
+    <div :class="curClassName" :style="curStyle">
+        <app-breadcrumb :navModel="navModel" :indexViewTag="indexViewTag"></app-breadcrumb>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Inject, Prop, Vue } from "vue-property-decorator";
+
+@Component({})
+export default class AppIndexNavBreadcrumb extends Vue {
+    
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppIndexNavBreadcrumb
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 布局模型详情
+     *
+     * @type {*}
+     * @memberof AppIndexNavBreadcrumb
+     */
+    @Prop() public layoutModelDetails: any;
+
+    /**
+     * 首页视图标识
+     *
+     * @type {*}
+     * @memberof AppIndexNavBreadcrumb
+     */
+    @Prop() public indexViewTag?: string;
+
+    /**
+     * 视图默认使用
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}Base
+     */
+    @Inject({ from:'navModel', default: 'tab' })
+    public navModel!: string;
+
+    /**
+     * 当前布局模型
+     *
+     * @type {*}
+     * @memberof AppIndexNavBreadcrumb
+     */
+    public currentLayoutModel: any;
+
+    /**
+     * 当前容器类名
+     *
+     * @memberof AppIndexNavBreadcrumb
+     */
+    get curClassName() {
+        return {
+            'app-index-nav-breadcrumb': true,
+            [this.name]: true,
+            [this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
+        }
+    }
+
+    /**
+     * 当前容器样式
+     *
+     * @memberof AppIndexNavBreadcrumb
+     */
+    get curStyle() {
+        if (this.currentLayoutModel) {
+            return this.currentLayoutModel.getElementStyle();
+        }
+        return '';
+    }
+
+    /**
+     * Vue生命周期 --- created
+     *
+     * @memberof AppIndexNavBreadcrumb
+     */
+    created() {
+        this.currentLayoutModel = this.layoutModelDetails[this.name];
+    }
+    
+}
+</script>
+<style lang='less'>
+@import './app-index-nav-breadcrumb.less';
+</style>
\ No newline at end of file

app_Web/src/components/layout-element/interactive/app-preset-button/app-preset-button.less

+.app-preset-button.ivu-button {
+    font-size: 12px;
+
+    >span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .button-content {
+        display: flex;
+
+        &.left {
+            justify-content: flex-start;
+            align-items: center;
+
+            .icon+.caption {
+                padding-left: 6px;
+            }
+        }
+
+        &.right {
+            flex-direction: row-reverse;
+            justify-content: flex-start;
+            align-items: center;
+
+            .icon+.caption {
+                padding-right: 6px;
+            }
+        }
+
+        &.top {
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+
+        &.bottom {
+            flex-direction: column-reverse;
+            justify-content: flex-start;
+        }
+    }
+}
+
+//  加载效果
+.app-preset-button.ivu-btn-loading {
+    display: flex;
+    line-height: 2;
+
+    .ivu-icon-ios-loading {
+        line-height: 2;
+    }
+}
\ No newline at end of file

app_Web/src/components/layout-element/interactive/app-preset-button/app-preset-button.vue

+<template>
+    <i-button 
+        :class="className"
+        :type="buttonType"
+        :disabled="disabled"
+        :title="tooltip"
+        :loading="loading"
+        :ghost="buttonGhost"
+        @click="handleClick">
+        <div :class="['button-content', iconAlign.toLowerCase()]">
+            <span v-if="cssClass || imagePath" class="icon">
+                <i v-if="cssClass" :class="cssClass" />
+                <img v-else :src="imagePath" />
+            </span>
+            <span v-if="showCaption" class="caption">{{ caption }}</span>
+        </div>
+    </i-button>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppPresetButton extends Vue {
+    /**
+     * 按钮name
+     *
+     * @type {any}
+     * @memberof AppPresetButton
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 显示提示
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop() public tooltip?: string;
+
+    /**
+     * 标题
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop() public caption?: string;
+
+    /**
+     * 显示标题
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: true }) public showCaption!: boolean;
+
+    /**
+     * 禁用状态
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: false }) public disabled?: boolean;
+
+    /**
+     * 加载状态
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: false }) public loading?: boolean;
+
+    /**
+     * 传入数据
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop() public data: any;
+
+    /**
+     * 图标
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop() public cssClass?: string;
+
+    /**
+     * 图片路径
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop() public imagePath?: string;
+
+    /**
+     * 按钮绘制模式
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: 'BUTTON' }) public renderMode!: 'BUTTON' | 'LINK';
+
+    /**
+     * 按钮样式
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: 'DEFAULT' }) public buttonStyle!: 'DEFAULT' | 'INVERSE' | 'PRIMARY' | 'INFO' | 'SUCCESS' | 'WARNING' | 'DANGER' | 'STYLE2' | 'STYLE3' | 'STYLE4';
+
+    /**
+     * 按钮图标方向
+     *
+     * @memberof AppPresetButton
+     */
+    @Prop({ default: 'LEFT' }) public iconAlign!: 'LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM';
+
+    /**
+     * 按钮类型
+     *
+     * @memberof AppPresetButton
+     */
+    get buttonType() {
+        if (Object.is(this.renderMode, 'LINK')) {
+            return 'text';
+        } else {
+            if (
+                Object.is(this.buttonStyle, 'DEFAULT') ||
+                Object.is(this.buttonStyle, 'STYLE2') ||
+                Object.is(this.buttonStyle, 'STYLE3') ||
+                Object.is(this.buttonStyle, 'STYLE4')
+            ) {
+                return 'default';
+            } else if (Object.is(this.buttonStyle, 'DANGER')) {
+                return 'error';
+            } else if (Object.is(this.buttonStyle, 'INVERSE')) {
+                return 'primary';
+            } else {
+                return this.buttonStyle.toLowerCase();
+            }
+        }
+    }
+
+    /**
+     * 按钮幽灵属性，使按钮背景透明
+     *
+     * @memberof AppPresetButton
+     */
+    get buttonGhost() {
+        return Object.is(this.buttonStyle, 'INVERSE');
+    }
+
+    /**
+     * 类名
+     *
+     * @memberof AppPresetButton
+     */
+    get className(): string {
+        return `app-preset-button ${this.name}`;
+    }
+
+    /**
+     * 点击按钮
+     *
+     * @param {*} event
+     * @memberof AppPresetButton
+     */
+    public handleClick(event: any) {
+        this.$emit('itemClick', this.name);
+    }
+}
+</script>
+<style lang='less'>
+@import './app-preset-button.less';
+</style>
\ No newline at end of file

app_Web/src/model/panel-detail/panel-container.ts

@@ -15,7 +15,7 @@ export class PanelContainerModel extends PanelDetailModel {
      * @type {string[]}
      * @memberof PanelContainerModel
      */
-    public details:string[] = [];
+    public details: string[] = [];
 
     /**
      * 标题关闭模式
@@ -23,7 +23,15 @@ export class PanelContainerModel extends PanelDetailModel {
      * @type {number}
      * @memberof PanelContainerModel
      */
-    public titleBarCloseMode:number = 0;
+    public titleBarCloseMode: number = 0;
+
+    /**
+     * 背景图片
+     *
+     * @type {*}
+     * @memberof PanelContainerModel
+     */
+    public sysImage: any = {};
 
     /**
      * Creates an instance of PanelContainerModel.
@@ -34,6 +42,45 @@ export class PanelContainerModel extends PanelDetailModel {
         super(opts);
         this.details = opts.details;
         this.titleBarCloseMode = opts.titleBarCloseMode;
+        this.sysImage = opts.sysImage;
+    }
+
+    /**
+     * 获取容器元素样式(仅限容器元素)
+     *
+     * @return {*} 
+     * @memberof PanelContainerModel
+     */
+    public getElementStyle() {
+        const containerStyle = {};
+        Object.assign(containerStyle, this.getFlexStyle());
+        //边缘布局容器盒子大小由布局组件内部计算
+        if (this.layout !== "BORDER") {
+            Object.assign(containerStyle, this.getBoxSizeStyle());
+        }
+        Object.assign(containerStyle, this.getBoxSpacingStyle());
+        Object.assign(containerStyle, this.getSpecificStyle());
+        return containerStyle;
+    }
+
+    /**
+     * 获取容器特有样式（主要包含背景图片）
+     *
+     * @protected
+     * @memberof PanelContainerModel
+     */
+    protected getSpecificStyle() {
+        const boxStyle = {};
+        if (Object.is(this.itemStyle, 'STYLE2') && this.sysImage && (this.sysImage.imagePath || this.sysImage.rawContent)) {
+            Object.assign(boxStyle, { background: `url('${this.sysImage.imagePath || this.sysImage.rawContent}') no-repeat 0px 0px`, 'background-size': '100% 100%' });
+            if (!this.layoutWidth) {
+                Object.assign(boxStyle, { width: '100%' });
+            }
+            if (!this.layoutHeight) {
+                Object.assign(boxStyle, { height: '100%' });
+            }
+        }
+        return boxStyle;
     }
 
 

app_Web/src/model/panel-detail/panel-detail.ts

@@ -24,6 +24,14 @@ export class PanelDetailModel {
      */
     public itemType: string = '';
 
+    /**
+     * 成员样式
+     *
+     * @type {string}
+     * @memberof PanelDetailModel
+     */
+    public itemStyle: string = '';
+
     /**
      * 面板对象
      *
@@ -214,10 +222,11 @@ export class PanelDetailModel {
         this.isShowCaption = opts.isShowCaption;
         this.sysCss = opts.sysCss;
         this.predefinedType = opts.predefinedType;
+        this.itemStyle = opts.itemStyle;
     }
 
     /**
-     * 获取元素样式（元素，包含内容盒子 大小/边距/内容 的样式）
+     * 获取元素样式（除容器之外的元素，包含内容盒子 大小/边距/内容 的样式）
      *
      * @memberof PanelDetailModel
      */
@@ -234,7 +243,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSpacingStyle() {
+    protected getBoxSpacingStyle() {
         const boxStyle = {};
         // 上方间隔模式
         if (this.spacingTop) {
@@ -255,12 +264,35 @@ export class PanelDetailModel {
         return boxStyle;
     }
 
+    /**
+     * 识别flex布局方向，横轴对齐，纵轴对齐（元素）
+     *
+     * @return {*} 
+     * @memberof PanelDetailModel
+     */
+    protected getFlexStyle() {
+        const boxStyle = {};
+        if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
+            Object.assign(boxStyle, { 'display': 'flex' });
+            if (this.flexParams.dir) {
+                Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
+            }
+            if (this.flexParams.align) {
+                Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
+            }
+            if (this.flexParams.vAlign) {
+                Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
+            }
+        }
+        return boxStyle;
+    }
+
     /**
      * 获取盒子大小样式（元素）
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSizeStyle() {
+    protected getBoxSizeStyle() {
         const boxStyle = {};
         if (this.widthMode || this.layoutWidth) {
             Object.assign(boxStyle, Util.getBoxSize("WIDTH", this.widthMode, this.layoutWidth));
@@ -276,7 +308,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxContentStyle() {
+    protected getBoxContentStyle() {
         const boxStyle = {};
         return boxStyle;
     }
@@ -286,7 +318,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxBorderStyle() {
+    protected getBoxBorderStyle() {
         const boxStyle = {};
         return boxStyle;
     }
@@ -297,7 +329,7 @@ export class PanelDetailModel {
      * @return {*} 
      * @memberof PanelDetailModel
      */
-     public getCommonLayoutStyle() {
+    public getCommonLayoutStyle() {
         const layoutStyle = {};
         Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
         Object.assign(layoutStyle, this.getBoxLayOutStyle());
@@ -324,7 +356,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSelfAlignStyle() {
+    protected getBoxSelfAlignStyle() {
         const boxStyle = {};
         // 自身对齐方式
         if (this.vAlignSelf || this.hAlignSelf) {
@@ -369,25 +401,12 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxLayOutStyle() {
+    protected getBoxLayOutStyle() {
         const boxStyle = {};
         // 识别FLEX
         if (this.layout == 'FLEX') {
             Object.assign(boxStyle, { 'display': 'flex', 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
         }
-        // 识别flex布局方向，横轴对齐，纵轴对齐
-        if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
-            Object.assign(boxStyle, { 'display': 'flex' });
-            if (this.flexParams.dir) {
-                Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
-            }
-            if (this.flexParams.align) {
-                Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
-            }
-            if (this.flexParams.vAlign) {
-                Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
-            }
-        }
         // 识别SIMPLEFLEX
         if (this.layout == 'SIMPLEFLEX') {
             if (this.flexGrow) {

app_Web/src/widgets/ibizbook/default-searchform/default-searchform-base.vue

@@ -663,7 +663,7 @@ export default class DefaultBase extends Vue implements ControlInterface {
      */
     public load(opt: any = {}): void {
         if(!this.loadAction){
-            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKUsr9GridView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKGroupByCodelistListView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
             return;
         }
         const arg: any = { ...opt };
@@ -699,7 +699,7 @@ export default class DefaultBase extends Vue implements ControlInterface {
      */
     public loadDraft(opt: any = {},mode?:string): void {
         if(!this.loaddraftAction){
-            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKUsr9GridView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKGroupByCodelistListView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
             return;
         }
         const arg: any = { ...opt } ;

app_Web/src/widgets/ibizbook/quicksearchform-searchform/quicksearchform-searchform-base.vue

@@ -621,7 +621,7 @@ export default class QUICKSEARCHFORMBase extends Vue implements ControlInterface
      */
     public load(opt: any = {}): void {
         if(!this.loadAction){
-            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKDataView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKListView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
             return;
         }
         const arg: any = { ...opt };
@@ -657,7 +657,7 @@ export default class QUICKSEARCHFORMBase extends Vue implements ControlInterface
      */
     public loadDraft(opt: any = {},mode?:string): void {
         if(!this.loaddraftAction){
-            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKDataView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKListView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
             return;
         }
         const arg: any = { ...opt } ;