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

app_Web/src/locale/lanres/entities/ibizappeditor/ibizappeditor_en_US.ts

@@ -75,6 +75,9 @@ export default {
 		uiactions: {
 		},
 	},
+	editorchart_chart: {
+		nodata:"",
+	},
 	default_searchform: {
 		details: {
 			formpage1: "常规条件", 

app_Web/src/locale/lanres/entities/ibizappeditor/ibizappeditor_zh_CN.ts

@@ -74,6 +74,9 @@ export default {
 		uiactions: {
 		},
 	},
+	editorchart_chart: {
+		nodata:"",
+	},
 	default_searchform: {
 		details: {
 			formpage1: "常规条件", 

app_Web/src/widgets/app/app-portal-view-db-dashboard/app-portal-view-db-dashboard-base.vue

@@ -68,6 +68,22 @@
           </span>
         </card>
       </i-col>
+      <i-col :md="{ span: 24, offset: 0 }">
+        <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
+          <span>
+                      <view_db_sysportlet4 
+              :viewState="viewState"  
+              :viewparams="viewparams" 
+              :context="context" 
+              :height="400"
+              :width="0"
+              name="db_sysportlet4"  
+              ref='db_sysportlet4' 
+              @closeview="closeView($event)">
+          </view_db_sysportlet4>
+          </span>
+        </card>
+      </i-col>
       <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 12, offset: 0 }">
         <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
           <span>

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

 <script lang='tsx'>
 import { Component } from 'vue-property-decorator';
 import AppPortalView_dbBase from './app-portal-view-db-dashboard-base.vue';
+import view_db_sysportlet4 from '@widgets/ibizappeditor/editor-chart-portlet/editor-chart-portlet.vue';
 import view_db_rawitem1 from '@widgets/app/db-rawitem1-portlet/db-rawitem1-portlet.vue';
 import view_db_sysportlet3 from '@widgets/ibizappctrl/ctrl-chart-portlet/ctrl-chart-portlet.vue';
 import view_db_sysportlet2 from '@widgets/ibizappview/view-chart-portlet/view-chart-portlet.vue';
@@ -12,6 +13,7 @@ import view_db_rawitem3 from '@widgets/app/db-rawitem3-portlet/db-rawitem3-portl
  
 @Component({
     components: {
+        view_db_sysportlet4, 
         view_db_rawitem1, 
         view_db_sysportlet3, 
         view_db_sysportlet2, 

app_Web/src/widgets/ibizappeditor/editor-chart-chart/editor-chart-chart-model.ts

+/**
+ * EditorChart 部件模型
+ *
+ * @export
+ * @class EditorChartModel
+ */
+export default class EditorChartModel {
+
+	/**
+	 * 获取数据项集合
+	 *
+	 * @returns {any[]}
+	 * @memberof EditorChartDb_sysportlet4_chartMode
+	 */
+	public getDataItems(): any[] {
+		return [
+			{
+			name:'size',
+			prop:'size'
+			},
+			{
+			name:'query',
+			prop:'query'
+			},
+			{
+			name:'page',
+			prop:'page'
+			},
+			{
+			name:'sort',
+			prop:'sort'
+			}
+		]
+	}
+
+}
\ No newline at end of file

app_Web/src/widgets/ibizappeditor/editor-chart-chart/editor-chart-chart-service.ts

+import { Http,Util,Errorlog } from '@/utils';
+import ControlService from '@/widgets/control-service';
+import IBIZAPPEDITORService from '@/service/ibizappeditor/ibizappeditor-service';
+import EditorChartModel from './editor-chart-chart-model';
+
+
+/**
+ * EditorChart 部件服务对象
+ *
+ * @export
+ * @class EditorChartService
+ */
+export default class EditorChartService extends ControlService {
+
+    /**
+     * 编辑器服务对象
+     *
+     * @type {IBIZAPPEDITORService}
+     * @memberof EditorChartService
+     */
+    public appEntityService: IBIZAPPEDITORService = new IBIZAPPEDITORService({ $store: this.getStore() });
+
+    /**
+     * 设置从数据模式
+     *
+     * @type {boolean}
+     * @memberof EditorChartService
+     */
+    public setTempMode(){
+        this.isTempMode = false;
+    }
+
+    /**
+     * Creates an instance of EditorChartService.
+     * 
+     * @param {*} [opts={}]
+     * @memberof EditorChartService
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.model = new EditorChartModel();
+    }
+
+    /**
+     * 查询数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof EditorChartService
+     */
+    @Errorlog
+    public search(action: string,context: any = {}, data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.FetchDefault(Context,Data, isloading);
+            }
+            result.then((response) => {
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+}
\ No newline at end of file

app_Web/src/widgets/ibizappeditor/editor-chart-chart/editor-chart-chart.less

+// this is less
+.app-data-chart {
+    width: 100%;
+    height: 100%;
+    .chart-no-data{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      i{
+        margin-right: 5px;
+      }
+    }
+}
\ No newline at end of file

app_Web/src/widgets/ibizappeditor/editor-chart-chart/editor-chart-chart.vue

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

app_Web/src/widgets/ibizappeditor/editor-chart-portlet/editor-chart-portlet-base.vue

+<template>
+    <div class='portlet editor-chart ' :style="{'height': isAdaptiveSize ? 'calc(100% - 16px)' : getHeight,}">
+        <p class='portlet-title'>
+            <span>
+            
+            编辑器图表
+            </span>
+        </p>
+        <el-divider class="divider"></el-divider>
+        <div class="portlet-with-title">
+        <!-- 测试 -->
+              <view_db_sysportlet4_chart 
+          :viewState="viewState"  
+          :viewparams="viewparams" 
+          :context="context" 
+          fetchAction="FetchDefault"
+          :showBusyIndicator="true" 
+          name="db_sysportlet4_chart"  
+          ref='db_sysportlet4_chart' 
+          @closeview="closeView($event)">
+      </view_db_sysportlet4_chart>
+        </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 IBIZAPPEDITORService from '@/service/ibizappeditor/ibizappeditor-service';
+import EditorChartService from './editor-chart-portlet-service';
+
+import IBIZAPPEDITORUIService from '@/uiservice/ibizappeditor/ibizappeditor-ui-service';
+import UIService from '@/uiservice/ui-service';
+import { Environment } from '@/environments/environment';
+
+
+@Component({
+    components: {
+      
+    }
+})
+export default class IBIZAPPEDITOREditorChartBase extends Vue implements ControlInterface {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof EditorChartBase
+     */
+    @Prop() public name?: string;
+
+    /**
+     * 视图通讯对象
+     *
+     * @type {Subject<ViewState>}
+     * @memberof EditorChartBase
+     */
+    @Prop() public viewState!: Subject<ViewState>;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof EditorChartBase
+     */
+    @Prop() public context!: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof EditorChartBase
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 视图状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof EditorChartBase
+     */
+    public viewStateEvent: Subscription | undefined;
+
+    /**
+     * 获取部件类型
+     *
+     * @returns {string}
+     * @memberof EditorChartBase
+     */
+    public getControlType(): string {
+        return 'PORTLET'
+    }
+
+
+
+    /**
+     * 计数器服务对象集合
+     *
+     * @type {Array<*>}
+     * @memberof EditorChartBase
+     */    
+    public counterServiceArray:Array<any> = [];
+
+    /**
+     * 建构部件服务对象
+     *
+     * @type {EditorChartService}
+     * @memberof EditorChartBase
+     */
+    public service: EditorChartService = new EditorChartService({ $store: this.$store });
+
+    /**
+     * 实体服务对象
+     *
+     * @type {IBIZAPPEDITORService}
+     * @memberof EditorChartBase
+     */
+    public appEntityService: IBIZAPPEDITORService = new IBIZAPPEDITORService({ $store: this.$store });
+
+    /**
+     * 界面UI服务对象
+     *
+     * @type {IBIZAPPEDITORUIService}
+     * @memberof EditorChartBase
+     */  
+    public appUIService:IBIZAPPEDITORUIService = new IBIZAPPEDITORUIService(this.$store);
+    
+
+
+    /**
+     * 关闭视图
+     *
+     * @param {any} args
+     * @memberof EditorChartBase
+     */
+    public closeView(args: any): void {
+        let _this: any = this;
+        _this.$emit('closeview', [args]);
+    }
+
+    /**
+     *  计数器刷新
+     *
+     * @memberof EditorChartBase
+     */
+    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 EditorChartBase
+     */
+    @Prop() public height?: number;
+
+    /**
+     * 宽度
+     *
+     * @type {number}
+     * @memberof EditorChartBase
+     */
+    @Prop() public width?: number;
+
+    /**
+     * 门户部件类型
+     *
+     * @type {number}
+     * @memberof EditorChartBase
+     */
+    public portletType: string = 'chart';
+
+    /**
+     * 视图默认使用
+     *
+     * @type {string}
+     * @memberof EditorChartBase
+     */
+    @Inject({from:'navModel',default: 'tab'})
+    public navModel!:string;
+
+
+    /**
+     * 界面行为模型数据
+     *
+     * @memberof EditorChartBase
+     */
+    public uiactionModel: any = {
+    }
+
+
+    /**
+     * 是否自适应大小
+     *
+     * @returns {boolean}
+     * @memberof EditorChartBase
+     */
+    @Prop({default: false})public isAdaptiveSize!: boolean;
+
+    /**
+     * 获取多项数据
+     *
+     * @returns {any[]}
+     * @memberof EditorChartBase
+     */
+    public getDatas(): any[] {
+        return [];
+    }
+
+    /**
+     * 获取单项树
+     *
+     * @returns {*}
+     * @memberof EditorChartBase
+     */
+    public getData(): any {
+        return {};
+    }
+
+    /**
+     * 获取高度
+     *
+     * @returns {any[]}
+     * @memberof EditorChartBase
+     */
+    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 '400px';
+        }
+    }
+
+    /**
+     * 刷新
+     *
+     * @memberof EditorChartBase
+     */
+    public refresh(args?: any) {
+      this.viewState.next({ tag: 'db_sysportlet4_chart', action: 'refresh', data: args });
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof EditorChartBase
+     */
+    public created() {
+        this.afterCreated();
+    }
+
+    /**
+     * 执行created后的逻辑
+     *
+     *  @memberof EditorChartBase
+     */    
+    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 EditorChartBase
+     */
+    public destroyed() {
+        this.afterDestroy();
+    }
+
+    /**
+     * 执行destroyed后的逻辑
+     *
+     * @memberof EditorChartBase
+     */
+    public afterDestroy() {
+        if (this.viewStateEvent) {
+            this.viewStateEvent.unsubscribe();
+        }
+    }
+
+
+    /**
+     * 计算界面行为权限
+     *
+     * @memberof EditorChartBase
+     */
+    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 './editor-chart-portlet.less';
+</style>
+

app_Web/src/widgets/ibizappeditor/editor-chart-portlet/editor-chart-portlet-model.ts

+/**
+ * EditorChart 部件模型
+ *
+ * @export
+ * @class EditorChartModel
+ */
+export default class EditorChartModel {
+
+  /**
+    * 获取数据项集合
+    *
+    * @returns {any[]}
+    * @memberof EditorChartModel
+    */
+  public getDataItems(): any[] {
+    return [
+      {
+        name: 'createman',
+      },
+      {
+        name: 'updatedate',
+      },
+      {
+        name: 'createdate',
+      },
+      {
+        name: 'ibizappeditorname',
+      },
+      {
+        name: 'updateman',
+      },
+      {
+        name: 'ibizappeditor',
+        prop: 'ibizappeditorid',
+      },
+      {
+        name: 'ibizappeditortype',
+      },
+      {
+        name: 'rditordescription',
+      },
+      {
+        name: 'documentaddress',
+      },
+      {
+        name: 'inbuilteditoramount',
+      },
+      {
+        name: 'expandeditoramount',
+      },
+      {
+        name: 'totalamount',
+      },
+    ]
+  }
+
+
+}

app_Web/src/widgets/ibizappeditor/editor-chart-portlet/editor-chart-portlet-service.ts

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

app_Web/src/widgets/ibizappeditor/editor-chart-portlet/editor-chart-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/ibizappeditor/editor-chart-portlet/editor-chart-portlet.vue

+
+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import IBIZAPPEDITOREditorChartBase from './editor-chart-portlet-base.vue';
+import view_db_sysportlet4_chart from '@widgets/ibizappeditor/editor-chart-chart/editor-chart-chart.vue';
+
+ 
+@Component({
+    components: {
+        view_db_sysportlet4_chart, 
+         
+    }
+})
+export default class IBIZAPPEDITOREditorChart extends IBIZAPPEDITOREditorChartBase {
+
+}
+</script>