zpc --- 快速分组

src/app-register.ts

@@ -70,6 +70,7 @@ import AppFormatData from './components/app-format-data/app-format-data.vue'
 import AppUploadFileInfo from './components/app-upload-file-info/app-upload-file-info.vue'
 import ContextMenu from './components/context-menu/context-menu'
 import AppColumnFormat from './components/app-column-format/app-column-format.vue'
+import AppQuickGroup from './components/app-quick-group/app-quick-group.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -149,5 +150,6 @@ export const AppComponents = {
         v.component('app-upload-file-info', AppUploadFileInfo);
         v.component('context-menu',ContextMenu);
         v.component('app-column-format',AppColumnFormat);
+        v.component('app-quick-group',AppQuickGroup);
     },
 };
\ No newline at end of file

src/components/app-quick-group/app-quick-group.less

+.app-quick-group{
+    .app-quick-item{
+        margin-right: 4px;
+        cursor: pointer;
+    }
+}
\ No newline at end of file

src/components/app-quick-group/app-quick-group.vue

+<template>
+  <div class="app-quick-group">
+    <span class="app-quick-item" v-for="item in renderArray" :key="item.id" @click="handleClick(item)">
+      <el-tag :type="selectedUiItem.id === item.id?'':'info'" v-if="!item.children">
+        <span :style="{color:item.color}">
+          <i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
+          <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
+          <el-badge v-if="counterName" :value="curCounterService?curCounterService.counterData[item.codename]:''" class="item" type="primary">{{item.label}}</el-badge>
+          <span v-else>{{item.label}}</span>
+        </span>
+      </el-tag>
+      <el-dropdown v-if="item.children" @command="handleCommand($event,item)">
+        <el-tag :type="selectedUiItem.id === item.id?'':'info'">
+          <span :style="{color:item.color}">
+            <i v-if=" item.iconcls && !Object.is(item.iconcls, '')" :class="item.iconcls"></i>
+            <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
+            <el-badge v-if="counterName" :value="curCounterService?curCounterService.counterData[item.codename]:''" class="item" type="primary">{{item.label}}</el-badge>
+            <span v-else>{{item.label}}</span>
+          </span>
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="childitem in item.children" :command="childitem" :key="childitem.id">
+            <span :style="{color:childitem.color}">
+              <i v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')" :class="childitem.iconcls"></i>
+              <img v-else-if="childitem.icon && !Object.is(childitem.icon, '')" :src="childitem.icon" />
+              {{childitem.label}}
+            </span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+    </el-dropdown>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
+import CounterService from "@/counter/counter-service";
+@Component({})
+export default class AppQuickGroup extends Vue {
+
+    /**
+     * 传入渲染项
+     *
+     * @type {Array<any>}
+     * @memberof AppQuickGroup
+     */
+    @Prop() public items!:Array<any>;
+
+    /**
+     * 计数器服务名
+     *
+     * @type {string}
+     * @memberof AppQuickGroup
+     */
+    @Prop() public counterName?:string;
+
+    /**
+     * 计数器服务基类
+     *
+     * @type {any}
+     * @memberof AppQuickGroup
+     */
+    public counterService:any = new CounterService();
+
+    /**
+     * 当前计数器服务
+     *
+     * @type {any}
+     * @memberof AppQuickGroup
+     */
+    public curCounterService:any
+
+    /**
+     * UI选中项
+     *
+     * @type {*}
+     * @memberof AppQuickGroup
+     */
+    public selectedUiItem:any;
+
+    /**
+     * 传入渲染项
+     *
+     * @type {Array<any>}
+     * @memberof AppQuickGroup
+     */
+    get renderArray(){
+      if(this.items && this.items.length >0){
+        this.selectedUiItem = this.items[0];
+        this.handleClick(this.items[0]);
+        return this.handleDataSet(this.items)
+      }else{
+        return [];
+      }
+    }
+ 
+    /**
+     * 处理代码表返回数据(树状结构)
+     * 
+     * @param result 返回数组
+     * @memberof AppQuickGroup
+     */
+    public handleDataSet(result:Array<any>){
+        let list:Array<any> = [];
+        if(result.length === 0){
+            return list;
+        }
+        result.forEach((codeItem:any) =>{
+            if(!codeItem.pvalue){
+                let valueField:string = codeItem.value;
+                this.setChildCodeItems(valueField,result,codeItem);
+                list.push(codeItem);
+            }
+        })
+        return list;
+    }
+
+    /**
+     * 处理非根节点数据
+     * 
+     * @param pValue 父值
+     * @param result 返回数组
+     * @param codeItem 代码项
+     * @memberof AppQuickGroup
+     */
+    public setChildCodeItems(pValue:string,result:Array<any>,codeItem:any){
+        result.forEach((item:any) =>{
+            if(item.pvalue == pValue){
+                let valueField:string = item.value;
+                this.setChildCodeItems(valueField,result,item);
+                if(!codeItem.children){
+                    codeItem.children = [];
+                }
+                codeItem.children.push(item);
+            }
+        })
+    }
+
+    /**
+     * 处理点击事件
+     * 
+     * @param $event 值
+     * @param isswitch 是否切换UI选中项
+     * @memberof AppQuickGroup
+     */
+    public handleClick($event:any,isswitch:boolean = true){
+      console.log($event);
+      if($event && $event.data){
+        this.$emit('valuechange',$event.data);
+      }
+      if(isswitch){
+        this.selectedUiItem = $event;
+      }
+      this.$forceUpdate();
+    }
+
+    /**
+     * 处理子项点击事件
+     * 
+     * @param $event 值
+     * @param item 父值
+     * @memberof AppQuickGroup
+     */
+    public handleCommand($event:any,item:any){
+      item.label = $event.label;
+      this.handleClick($event,false);
+    }
+
+    
+
+}
+</script>
+
+<style lang='less'>
+@import "./app-quick-group.less";
+</style>
\ No newline at end of file

src/styles/default.less

@@ -216,11 +216,16 @@
   >.view-card{
     >.ivu-card-body{
         >.content-container{
-            .quick-group-container,.quick-search-container,.quick-search-input{
+            .quick-group-container,.quick-search-input{
                 float: left;
                 margin-top: 6px;
                 margin-bottom: 6px;
             }
+            .quick-search-container{
+                float: left;
+                margin-top: -2px;
+                margin-bottom: 6px;
+            }
         }
     }
   }