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

app_Web/public/assets/json/portlet-data.json

@@ -314,7 +314,7 @@
 {"type":"app",
 "appCodeName":"Web",
 "appName":"演示应用",
-"portletCodeName": "appMenu",
+"portletCodeName": "QUICKMENUBAR",
 "portletName": "快捷菜单",
 "groupCodeName":"Ungroup",
 "groupName":"（未分类）",

app_Web/src/locale/lang/en-US-base.ts

@@ -179,7 +179,7 @@ function getAppLocale(){
                 info:"Please configure the data import item"    
             },
             menus: {
-                appmenu: {
+                quickmenubar: {
                     menuitem1: commonLogic.appcommonhandle("应用菜单",null),
                     menuitem2: commonLogic.appcommonhandle("打开文档",null),
                 },

app_Web/src/locale/lang/zh-CN-base.ts

@@ -179,7 +179,7 @@ function getAppLocale(){
                 info:"请配置数据导入项" 
             },
             menus: {
-                appmenu: {
+                quickmenubar: {
                     menuitem1: commonLogic.appcommonhandle("应用菜单",null),
                     menuitem2: commonLogic.appcommonhandle("打开文档",null),
                 },

app_Web/src/mock/app/quickmenubar-appmenu/quickmenubar-appmenu.ts

+import { MockAdapter } from '@/mock/mock-adapter';
+const mock = MockAdapter.getInstance();
+
+import Mock from 'mockjs'
+const Random = Mock.Random;
+
+// 获取应用数据
+mock.onGet('v7/quickmenubarappmenu').reply((config: any) => {
+    let status = MockAdapter.mockStatus(config);
+    return [status, {
+        name: 'db_appmenu1_appmenu',
+        items:  [
+            {
+	id: '161CE06C-7FEB-4D3A-908A-EA2756104A50',
+	name: 'menuitem1',
+	text: '应用菜单',
+	type: 'MENUITEM',
+	counterid: '',
+	tooltip: '应用菜单',
+	expanded: false,
+	separator: false,
+	hidden: false,
+	hidesidebar: false,
+	opendefault: false,
+	iconcls: '',
+	icon: '',
+	textcls: '',
+	appfunctag: '',
+	resourcetag: '',
+	items: [
+		{
+	id: '00926656-BCDE-45AF-B381-3B465E80D8EB',
+	name: 'menuitem2',
+	text: '打开文档',
+	type: 'MENUITEM',
+	counterid: '',
+	tooltip: '打开文档',
+	expanded: false,
+	separator: false,
+	hidden: false,
+	hidesidebar: false,
+	opendefault: false,
+	iconcls: 'fa fa-twitter',
+	icon: '',
+	textcls: '',
+	appfunctag: 'AppFunc93',
+	resourcetag: '',
+},
+	],
+},
+        ],
+    }];
+});
+

app_Web/src/mock/portlet/portlet.ts

@@ -324,7 +324,7 @@ mock.onGet('./assets/json/portlet-data.json').reply((config: any) => {
     {"type":"app",
     "appCodeName":"Web",
     "appName":"演示应用",
-    "portletCodeName": "appMenu",
+    "portletCodeName": "QUICKMENUBAR",
     "portletName": "快捷菜单",
     "groupCodeName":"Ungroup",
     "groupName":"（未分类）",

app_Web/src/widgets/app/app-portal-view2-db-dashboard/app-portal-view2-db-dashboard.vue

 <script lang='tsx'>
 import { Component } from 'vue-property-decorator';
 import AppPortalView2_dbBase from './app-portal-view2-db-dashboard-base.vue';
-import view_db_appmenu1 from '@widgets/app/app-menu-portlet/app-menu-portlet.vue';
+import view_db_appmenu1 from '@widgets/app/quickmenubar-portlet/quickmenubar-portlet.vue';
 
  
 @Component({

app_Web/src/widgets/app/quickmenubar-appmenu/quickmenubar-appmenu-model.ts

+/**
+ * QUICKMENUBAR 部件模型
+ *
+ * @export
+ * @class QUICKMENUBARModel
+ */
+export default class QUICKMENUBARModel {
+
+    /**
+     * 菜单项集合
+     *
+     * @public
+     * @type {any[]}
+     * @memberof QUICKMENUBARModel
+     */
+    public items: any[] = [
+        {
+	id: '161CE06C-7FEB-4D3A-908A-EA2756104A50',
+	name: 'menuitem1',
+	text: '应用菜单',
+	type: 'MENUITEM',
+	counterid: '',
+	tooltip: '应用菜单',
+	expanded: false,
+	separator: false,
+	hidden: false,
+	hidesidebar: false,
+	opendefault: false,
+	iconcls: '',
+	icon: '',
+	textcls: '',
+	appfunctag: '',
+	resourcetag: '',
+	authtag:'Web-QUICKMENUBAR-menuitem1',
+	items: [
+		{
+	id: '00926656-BCDE-45AF-B381-3B465E80D8EB',
+	name: 'menuitem2',
+	text: '打开文档',
+	type: 'MENUITEM',
+	counterid: '',
+	tooltip: '打开文档',
+	expanded: false,
+	separator: false,
+	hidden: false,
+	hidesidebar: false,
+	opendefault: false,
+	iconcls: 'fa fa-twitter',
+	icon: '',
+	textcls: '',
+	appfunctag: 'AppFunc93',
+	resourcetag: '',
+	authtag:'Web-QUICKMENUBAR-menuitem2',
+},
+	],
+},
+    ];
+
+	/**
+	 * 应用功能集合
+	 *
+	 * @public
+	 * @type {any[]}
+	 * @memberof QUICKMENUBARModel
+	 */
+	public funcs: any[] = [
+	];
+
+    /**
+     * 获取所有菜单项集合
+     *
+     * @returns {any[]}
+     * @memberof QUICKMENUBARModel
+     */
+    public getAppMenuItems(): any[] {
+        return this.items;
+    }
+
+    /**
+     * 获取所有应用功能集合
+     *
+     * @returns {any[]}
+     * @memberof QUICKMENUBARModel
+     */
+    public getAppFuncs(): any[] {
+        return this.funcs;
+    }
+}
\ No newline at end of file

app_Web/src/widgets/app/quickmenubar-appmenu/quickmenubar-appmenu-service.ts

+import { Http,Util,Errorlog } from '@/utils';
+import ControlService from '@/widgets/control-service';
+import QUICKMENUBARModel from './quickmenubar-appmenu-model';
+
+
+/**
+ * QUICKMENUBAR 部件服务对象
+ *
+ * @export
+ * @class QUICKMENUBARService
+ */
+export default class QUICKMENUBARService extends ControlService {
+
+    /**
+     * 设置从数据模式
+     *
+     * @type {boolean}
+     * @memberof QUICKMENUBARService
+     */
+    public setTempMode(){
+        this.isTempMode = false;
+    }
+
+    /**
+     * Creates an instance of QUICKMENUBARService.
+     * 
+     * @param {*} [opts={}]
+     * @memberof QUICKMENUBARService
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.model = new QUICKMENUBARModel();
+    }
+
+    /**
+     * 获取数据
+     *
+     * @returns {Promise<any>}
+     * @memberof QUICKMENUBAR
+     */
+    @Errorlog
+    public get(params: any = {}): Promise<any> {
+        return Http.getInstance().get('v7/quickmenubarappmenu', params);
+    }
+
+}
\ No newline at end of file

app_Web/src/widgets/app/quickmenubar-appmenu/quickmenubar-appmenu.less

+/***    BRGIN:菜单样式    ***/
+.app-app-menu {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100% - 58px);
+    .ivu-divider{
+      background-color: #b3b3b3;
+      height: 2px;
+    }
+    > .el-menu {
+        border-right: 0;
+        .el-menu-item {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+            .ivu-badge {
+                .ivu-badge-count {
+                    box-shadow: 0 0 0 0px #fff;
+                }
+            }
+        }
+        .el-submenu__title i, .el-menu-item i {
+            font-size: 12px;
+            width: 18px;
+        }
+        .el-submenu__title .app-menu-icon,.el-menu-item .app-menu-icon{
+            width:20px;
+            font-size: 14px;
+        }
+        .el-submenu__title .text {
+            font-size: 16px;      
+        }
+        .el-submenu__title .app-menu-circle,.el-menu-item .app-menu-circle {
+            display: inline-block;
+            border-radius: 50%;       
+            width: 20px;
+            height: 20px;
+            line-height: 36px;
+            vertical-align:middle;
+            background: rgb(var(--app-footer-background-color-rgb));
+            border: 1px solid #fff;
+            border-color: rgb(var(--app-header-color-rgb));
+            color: rgb(var(--app-header-color-rgb));;
+            text-align: center;
+            font: 12px Arial, sans-serif;   
+         }
+
+        .el-submenu__title, .el-menu-item {
+            height: 50px;
+            font-size: 14px;
+            line-height: 50px;
+            border-left: 4px !important;       
+        }
+
+        .el-menu-item .el-tooltip {
+            padding-left: 12px !important; 
+        }
+
+        .isCollpase .el-submenu__title{
+            padding-left: 12px !important;
+        }
+
+        .isFirst > .text {
+            font-size: 16px !important;
+        }
+       
+        .el-menu-item, .el-submenu, .el-menu {
+            border-top: 1px solid #fff;
+        }
+        > .el-menu-item, > .el-submenu > .el-submenu__title {
+            height: 56px;
+            line-height: 56px;
+            padding-left: 16px !important;
+        }
+        .app-menu-icon {
+            margin: 4px;
+            text-align: center;
+        }
+        > .el-submenu {
+            > .el-menu {
+                > .el-menu-item, > .el-submenu > .el-submenu__title {
+                    padding-left: 44px !important;
+                }
+                > .el-submenu {
+                    > .el-menu {
+                        > .el-menu-item, > .el-submenu > .el-submenu__title {
+                            padding-left: 68px !important;
+                        }
+                    }
+                }
+            }
+        }
+        .active-icon {
+            font-size: 40px !important;
+            position: absolute;
+            right: 0;
+            line-height: 42px;
+            color: #fff !important;
+            display: none;
+            width: 24px !important;
+            overflow: hidden;
+        }
+    }
+    .el-menu--horizontal{
+        display: flex;
+        width: calc(100vw - 1100px);
+        height: 65px;
+        flex-wrap: nowrap;
+        overflow-x:scroll;
+        padding-top: 3px;
+        .el-menu-item{
+            overflow: visible;
+        }
+        .el-submenu{
+            .el-submenu__title{
+                padding-right: 0px !important;
+                padding-left: 0px !important;
+            }
+        } 
+    }
+    .ivu-divider-horizontal {
+        width: 100%;
+        min-width: 100%;
+        margin: 4px auto;
+        margin-bottom: 1px;
+    }
+}
+.app-popper-menu {
+    .el-menu-item, .el-submenu__title {
+        height: 36px;
+        font-size: 16px;
+        line-height: 36px;
+    }
+    > .el-menu-item, > .el-submenu > .el-submenu__title {
+        height: 40px;
+        line-height: 40px;
+    }
+    .el-menu-item {
+        .ivu-badge {
+            .ivu-badge-count {
+                box-shadow: 0 0 0 0px #fff;
+            }
+        }
+        > span{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    .ivu-divider-horizontal {
+        width: 100%;
+        min-width: 100%;
+        margin: 4px auto;
+        margin-bottom: 1px;
+    }
+}
+
+// this is less

app_Web/src/widgets/app/quickmenubar-appmenu/quickmenubar-appmenu.vue

+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import QUICKMENUBARBase from './quickmenubar-appmenu-base.vue';
+
+ 
+@Component({
+    components: {
+         
+    }
+})
+export default class QUICKMENUBAR extends QUICKMENUBARBase {
+
+}
+</script>
\ No newline at end of file

app_Web/src/widgets/app/quickmenubar-portlet/quickmenubar-portlet-base.vue

+<template>
+    <div class='portlet quickmenubar ' :style="{}">
+        <p class='portlet-title'>
+            <span>
+            
+            快捷菜单
+            </span>
+        </p>
+        <el-divider class="divider"></el-divider>
+        <div class="portlet-with-title">
+              <view_db_appmenu1_appmenu 
+          :viewState="viewState"  
+          :viewparams="viewparams" 
+          :context="context" 
+          :showBusyIndicator="true"  
+          name="db_appmenu1_appmenu"  
+          ref='db_appmenu1_appmenu' 
+          @closeview="closeView($event)">
+      </view_db_appmenu1_appmenu>
+        </div>
+    </div>
+</template>
+<script lang='tsx'>
+import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
+import { CreateElement } from 'vue';
+import { Subject, Subscription } from 'rxjs';
+import { ControlInterface } from '@/interface/control';
+import { UIActionTool,Util, ViewTool } from '@/utils';
+import NavDataService from '@/service/app/navdata-service';
+import QUICKMENUBARService from './quickmenubar-portlet-service';
+
+import UIService from '@/uiservice/ui-service';
+import { Environment } from '@/environments/environment';
+
+
+@Component({
+    components: {
+      
+    }
+})
+export default class QUICKMENUBARBase extends Vue implements ControlInterface {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public name?: string;
+
+    /**
+     * 视图通讯对象
+     *
+     * @type {Subject<ViewState>}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public viewState!: Subject<ViewState>;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 视图状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof QUICKMENUBARBase
+     */
+    public viewStateEvent: Subscription | undefined;
+
+    /**
+     * 获取部件类型
+     *
+     * @returns {string}
+     * @memberof QUICKMENUBARBase
+     */
+    public getControlType(): string {
+        return 'PORTLET'
+    }
+
+
+
+    /**
+     * 计数器服务对象集合
+     *
+     * @type {Array<*>}
+     * @memberof QUICKMENUBARBase
+     */    
+    public counterServiceArray:Array<any> = [];
+
+    /**
+     * 建构部件服务对象
+     *
+     * @type {QUICKMENUBARService}
+     * @memberof QUICKMENUBARBase
+     */
+    public service: QUICKMENUBARService = new QUICKMENUBARService({ $store: this.$store });
+    
+
+
+    /**
+     * 关闭视图
+     *
+     * @param {any} args
+     * @memberof QUICKMENUBARBase
+     */
+    public closeView(args: any): void {
+        let _this: any = this;
+        _this.$emit('closeview', [args]);
+    }
+
+    /**
+     *  计数器刷新
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public counterRefresh(){
+        const _this:any =this;
+        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
+            _this.counterServiceArray.forEach((item:any) =>{
+                if(item.refreshData && item.refreshData instanceof Function){
+                    item.refreshData();
+                }
+            })
+        }
+    }
+
+
+
+    /**
+     * 长度
+     *
+     * @type {number}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public height?: number;
+
+    /**
+     * 宽度
+     *
+     * @type {number}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop() public width?: number;
+
+    /**
+     * 门户部件类型
+     *
+     * @type {number}
+     * @memberof QUICKMENUBARBase
+     */
+    public portletType: string = 'appmenu';
+
+    /**
+     * 视图默认使用
+     *
+     * @type {string}
+     * @memberof QUICKMENUBARBase
+     */
+    @Inject({from:'navModel',default: 'tab'})
+    public navModel!:string;
+
+
+    /**
+     * 界面行为模型数据
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public uiactionModel: any = {
+    }
+
+
+    /**
+     * 是否自适应大小
+     *
+     * @returns {boolean}
+     * @memberof QUICKMENUBARBase
+     */
+    @Prop({default: false})public isAdaptiveSize!: boolean;
+
+    /**
+     * 获取多项数据
+     *
+     * @returns {any[]}
+     * @memberof QUICKMENUBARBase
+     */
+    public getDatas(): any[] {
+        return [];
+    }
+
+    /**
+     * 获取单项树
+     *
+     * @returns {*}
+     * @memberof QUICKMENUBARBase
+     */
+    public getData(): any {
+        return {};
+    }
+
+    /**
+     * 获取高度
+     *
+     * @returns {any[]}
+     * @memberof QUICKMENUBARBase
+     */
+    get getHeight(){
+        if(!this.$util.isEmpty(this.height) && !this.$util.isNumberNaN(this.height)){
+            if(this.height == 0){
+                return 'auto';
+            }else{
+                return this.height+'px';
+            }
+        }else{
+            return 'auto';
+        }
+    }
+
+    /**
+     * 刷新
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public refresh(args?: any) {
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public created() {
+        this.afterCreated();
+    }
+
+    /**
+     * 执行created后的逻辑
+     *
+     *  @memberof QUICKMENUBARBase
+     */    
+    public afterCreated(){
+        if (this.viewState) {
+            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
+                if(Object.is(tag, "all-portlet") && Object.is(action,'loadmodel')){
+                   this.calcUIActionAuthState(data);
+                }
+                if (!Object.is(tag, this.name)) {
+                    return;
+                }
+                const refs: any = this.$refs;
+                Object.keys(refs).forEach((_name: string) => {
+                    this.viewState.next({ tag: _name, action: action, data: data });
+                });
+            });
+        }
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public destroyed() {
+        this.afterDestroy();
+    }
+
+    /**
+     * 执行destroyed后的逻辑
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public afterDestroy() {
+        if (this.viewStateEvent) {
+            this.viewStateEvent.unsubscribe();
+        }
+    }
+
+
+    /**
+     * 计算界面行为权限
+     *
+     * @memberof QUICKMENUBARBase
+     */
+    public calcUIActionAuthState(data:any = {}) {
+        //  如果是操作栏，不计算权限
+        if(this.portletType && Object.is('actionbar', this.portletType)) {
+            return;
+        }
+        let _this: any = this;
+        let uiservice: any = _this.appUIService ? _this.appUIService : new UIService(_this.$store);
+        if(_this.uiactionModel){
+            ViewTool.calcActionItemAuthState(data,_this.uiactionModel,uiservice);
+        }
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './quickmenubar-portlet.less';
+</style>
+

app_Web/src/widgets/app/quickmenubar-portlet/quickmenubar-portlet-model.ts

+/**
+ * QUICKMENUBAR 部件模型
+ *
+ * @export
+ * @class QUICKMENUBARModel
+ */
+export default class QUICKMENUBARModel {
+
+  /**
+    * 获取数据项集合
+    *
+    * @returns {any[]}
+    * @memberof QUICKMENUBARModel
+    */
+  public getDataItems(): any[] {
+    return [
+    ]
+  }
+
+
+}

app_Web/src/widgets/app/quickmenubar-portlet/quickmenubar-portlet-service.ts

+import { Http } from '@/utils';
+import ControlService from '@/widgets/control-service';
+
+/**
+ * QUICKMENUBAR 部件服务对象
+ *
+ * @export
+ * @class QUICKMENUBARService
+ */
+export default class QUICKMENUBARService extends ControlService {
+}

app_Web/src/widgets/app/quickmenubar-portlet/quickmenubar-portlet.less

+// this is less
+.portlet{
+  height: 100%;
+  width: 100%;
+  > .portlet-title{
+    padding: 14px 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 52px;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+    line-height: 22px;
+    font-size: 16px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #304265;
+    font-weight: 600;
+    i{
+      margin-right: 5px;
+    }
+    >.portlet-action{
+      margin-left: 12px;
+      font-size: 14px;
+      >a{
+        padding: 6px;
+      }
+    }
+  }
+    > .divider {
+      margin: 0px 0px 11px 0px;
+    }
+  > .portlet-with-title{
+    width:100%;
+    height:calc(100% - 58px);
+    overflow:auto;
+    padding:0px 12px;
+  }
+  > .portlet-without-title{
+    width:100%;
+    height:100%;
+    overflow:auto;
+    padding:0px 12px;
+  }
+  .app-charts{
+    height: 100%!important;
+  }
+  .toolbar-container {
+    button{
+      margin: 6px 0px 4px 16px;
+    }
+    .ivu-badge{
+      .ivu-badge-count{
+        top: 0;
+      }
+    }
+  }
+}

app_Web/src/widgets/app/quickmenubar-portlet/quickmenubar-portlet.vue

+
+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import QUICKMENUBARBase from './quickmenubar-portlet-base.vue';
+import view_db_appmenu1_appmenu from '@widgets/app/quickmenubar-appmenu/quickmenubar-appmenu.vue';
+
+ 
+@Component({
+    components: {
+        view_db_appmenu1_appmenu, 
+         
+    }
+})
+export default class QUICKMENUBAR extends QUICKMENUBARBase {
+
+}
+</script>