补充操作栏主状态无权限模式

src/components/app-actionbar/app-actionbar.vue

 <template>
   <div class="app-actionbar">
     <div class="app-actionbar-item" v-for="(item,index) in items" :key="index">
-      <Badge v-if="item.counterService&&item.counterService.counterData" :count="item.counterService.counterData[item.counterId]" type="primary">
-         <i-button @click="handleClick(item.viewlogicname)"><i v-if="item.icon" style="margin-right: 5px;" :class="item.icon"></i>{{item.actionName}}</i-button>
+      <Badge v-if="item.counterService&&item.counterService.counterData" v-show="item.visabled" :count="item.counterService.counterData[item.counterId]" type="primary">
+         <i-button :style="{'pointer-events':item.disabled?'none':'auto'}" @click="handleClick(item.viewlogicname)"><i v-if="item.icon" style="margin-right: 5px;" :class="item.icon"></i>{{item.actionName}}</i-button>
     </Badge>
-    <i-button v-else @click="handleClick(item.viewlogicname)">{{item.actionName}}</i-button>
+    <i-button v-show="item.visabled" :style="{'pointer-events':item.disabled?'none':'auto'}" v-else @click="handleClick(item.viewlogicname)">{{item.actionName}}</i-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
-import { Subject } from "rxjs";
+import { Vue, Component, Prop, Model, Emit,Inject, Watch } from "vue-property-decorator";
+import { Subject,Subscription } from "rxjs";
 
 @Component({})
 export default class AppActionBar extends Vue {
@@ -24,6 +24,49 @@ export default class AppActionBar extends Vue {
    */
   @Prop() public items!:any;
 
+  /**
+   * 注入的UI服务
+   *
+   * @type {*}
+   * @memberof AppActionBar
+   */
+  @Prop() public uiService!: any;
+
+  /**
+   * 视图通讯对象
+   *
+   * @type {Subject<ViewState>}
+   * @memberof AppActionBar
+   */
+  @Prop() public viewState!: Subject<ViewState>;
+
+  /**
+   * 视图状态事件
+   *
+   * @public
+   * @type {(Subscription | undefined)}
+   * @memberof ActionlinetestBase
+   */
+  public viewStateEvent: Subscription | undefined;
+
+  /**
+   * 组件初始化
+   *
+   * @memberof AppActionBar
+   */
+  public created(){
+    if (this.viewState) {
+        this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
+            if (!Object.is(tag, "app-actionbar")) {
+                return;
+            }
+            if(Object.is(action,'loadmodel')){
+              this.calcActionItemAuthState(data,this.items,this.uiService);
+            }
+        });
+    }
+  }
+
   /**
    * 触发界面行为
    * 
@@ -33,6 +76,51 @@ export default class AppActionBar extends Vue {
     this.$emit('itemClick',$event);
   }
 
+  /**
+   * 计算界面行为项权限状态
+   *
+   * @param {*} [data] 传入数据
+   * @param {*} [ActionModel] 界面行为模型
+   * @param {*} [UIService] 界面行为服务
+   * @memberof AppActionBar
+   */
+  public calcActionItemAuthState(data:any,ActionModel:any,UIService:any){
+    for (const key in ActionModel) {
+        if (!ActionModel.hasOwnProperty(key)) {
+            return;
+        }
+        const _item = ActionModel[key];
+        if(_item && _item['dataaccaction'] && UIService && data && Object.keys(data).length >0){
+            let dataActionResult:any = UIService.getAllOPPrivs(data)[_item['dataaccaction']];
+            // 无权限:0;有权限:1
+            if(!dataActionResult){
+                // 禁用:1;隐藏:2;隐藏且默认隐藏:6
+                if(_item.noprivdisplaymode === 1){
+                    _item.disabled = true;
+                }
+                if((_item.noprivdisplaymode === 2) || (_item.noprivdisplaymode === 6)){
+                    _item.visabled = false;
+                }else{
+                    _item.visabled = true;
+                }
+            }else{
+                _item.visabled = true;
+                _item.disabled = false;
+            }
+        }
+    }
+  } 
+
+  /**
+   * 组件销毁
+   * 
+   * @memberof AppActionBar
+   */
+  public destory(){
+    if (this.viewStateEvent) {
+      this.viewStateEvent.unsubscribe();
+    }
+  }
 
 }
 </script>