app-quick-group.vue 5.4 KB
Newer Older
1 2
<template>
  <div class="app-quick-group">
3 4
    <div :class="{'app-quick-item': true, 'is-active': isSelectedItem(item)}" v-for="item in renderArray" :key="item.id" @click="handleClick(item)">
      <span v-if="!item.children" :style="{color:item.color}">
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
        <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" />
        <span class="app-quick-item-label">{{item.label}}</span>
        <span v-show="isSelectedItem(item) && counterService && counterService.counterData && counterService.counterData[item.codename.toLowerCase()]" class="app-quick-item-counter">{{itemTag(item)}}</span>
      </span>
      <el-dropdown v-if="item.children" style="outline: none !important;" trigger="click" @command="handleCommand($event,item)">
        <span :style="{color:item.color}" :class="{'app-seleted-item':isSelectedItem(item)}">
          <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" />
          <span class="app-quick-item-label">{{item.label}}</span>
          <span v-show="isSelectedItem(item) && counterService && counterService.counterData && counterService.counterData[item.codename.toLowerCase()]" class="app-quick-item-counter">{{itemTag(item)}}</span>
        </span>
        <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" />
              <span :style="{color:(childitem.label == item.label)?'#0c64eb':''}">{{childitem.label}}</span>
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
27
    </div>
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
@Component({})
export default class AppQuickGroup extends Vue {

    /**
     * 传入渲染项
     *
     * @type {Array<any>}
     * @memberof AppQuickGroup
     */
    @Prop() public items!:Array<any>;

    /**
     * 计数器服务名
     *
     * @type {string}
     * @memberof AppQuickGroup
     */
    @Prop() public counterService?:any;

    /**
     * UI选中项
     *
     * @type {*}
     * @memberof AppQuickGroup
     */
    public selectedUiItem:any;

    /**
     * 传入渲染项
     *
     * @type {Array<any>}
     * @memberof AppQuickGroup
     */
    get renderArray(){
      if(this.items && this.items.length >0){
        this.handleClick(this.items[0]);
        return this.handleDataSet(this.items)
      }else{
        return [];
      }
    }

    public itemTag(item:any){
      if(this.counterService && this.counterService.counterData && item.codename){
        return this.counterService.counterData[item.codename.toLowerCase()];
      }else{
        return "";
      }
    }

    /**
     * 是否选中当前项
     * 
     * @param item 传入当前项
     * @memberof AppQuickGroup
     */
    public isSelectedItem(item:any){
      if(this.selectedUiItem && (this.selectedUiItem.id === item.id)){
        return true;
      }else{
        return false;
      }
    }
 
    /**
     * 处理代码表返回数据(树状结构)
     * 
     * @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){
      if((this.selectedUiItem && (this.selectedUiItem.id === $event.id)) || $event.children) {
        return;
      }
      this.$emit('valuechange',$event);
      if(isswitch){
        this.selectedUiItem = $event;
      }
      this.$forceUpdate();
    }

    /**
     * 处理子项点击事件
     * 
     * @param $event 值
     * @param item 父值
     * @memberof AppQuickGroup
     */
    public handleCommand($event:any,item:any){
      item.label = $event.label;
      item.codename = $event.codename;
      this.handleClick($event,false);
    }

    

}
</script>

175 176
<style lang='scss'>
@import "./app-quick-group.scss";
177
</style>