多数据视图快速分组组件

src/app-register.ts

@@ -111,5 +111,7 @@ export const AppComponents = {
         v.component('app-rich-text',() => import('@/components/app-rich-text/app-rich-text.vue'));
         // 定制组件
         v.component('app-customize',() => import('@/components/app-customize/app-customize.vue'));
+        // 多数据快速分组组件
+        v.component('app-quick-group-tab',() => import('@/components/app-quick-group-tab/app-quick-group-tab.vue'));
     },
 };
\ No newline at end of file

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

+.app-quick-group {
+	width: 100%;
+	height: 40px;
+	display: flex;
+    justify-content: space-around;
+    background-color: #e8e8e896;
+	.quick-group-tab {
+		span {
+			text-align: center;
+			line-height: 40px;
+		}
+		.app-quick-item-label {
+			text-align: center;
+		}
+		.parentGroup {
+			display: flex;
+			justify-content: center;
+			.app-quick-item-dropdown {
+				--padding-start: 0;
+				--padding-end: 0;
+			}
+			ion-select::part(icon) {
+				position: unset;
+				margin-right: 2px;
+			}
+			ion-select::part(text) {
+				min-width: 0;
+			}
+        }
+        .app-seleted-item {
+            height: 40px;
+            height: 40px;
+            color: red;
+            border-bottom: 2px solid red;
+        }
+	}
+}

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

+<template>
+  <div class="app-quick-group">
+    <div
+      class="quick-group-tab"
+      v-for="item in showItems"
+      :key="item.id"
+      @click="handleClick(item)"
+    >
+      <div
+        v-if="!item.children"
+        :style="{color:item.color}"
+        :class="{'app-seleted-item':isSelectedItem(item)}"
+      >
+        <ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon>
+        <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
+        <span class="app-quick-item-label">{{item.label}}</span>
+      </div>
+
+      <div class="parentGroup" v-if="item.children">
+        <span>{{item.label}}</span>
+        <ion-select class="app-quick-item-dropdown" interface="popover" selected-text=" ">
+          <ion-select-option v-for="childitem in item.children" :key="childitem.id">
+            <ion-icon v-if=" childitem.iconcls && !Object.is(childitem.iconcls, '')" :name="childitem.iconcls"></ion-icon>
+            <img v-else-if="childitem.icon && !Object.is(childitem.icon, '')" :src="childitem.icon" />
+            <span class="app-quick-item-label">{{childitem.label}}</span>
+          </ion-select-option>
+        </ion-select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  Vue,
+  Component,
+  Prop,
+  Provide,
+  Emit,
+  Watch,
+} from "vue-property-decorator";
+@Component({
+  components: {},
+})
+export default class AppQuickGroupTab extends Vue {
+  /**
+   * 快速分组代码表
+   *
+   * @type {any[]}
+   * @memberof ViewQuickGroupTab
+   */
+  @Prop({ default: () => [] }) public items!: Array<any>;
+
+  /**
+   * 渲染列表
+   *
+   * @type {any[]}
+   * @memberof AppQuickGroup
+   */
+  public showItems: any[] = [];
+
+  /**
+   * 监控代码表变化
+   *
+   * @memberof AppQuickGroup
+   */
+  @Watch("items", { immediate: true })
+  public itemsWatch(): void {
+    if (this.items) {
+      this.items.every((item: any) => {
+        if (item.default) {
+          this.handleClick(item, true);
+        }
+        return !item.default;
+      });
+      this.showItems = this.handleDataSet(this.items);
+    }
+  }
+
+  /**
+   * UI选中项
+   *
+   * @type {*}
+   * @memberof AppQuickGroup
+   */
+  public selectedUiItem: any = {};
+
+  /**
+   * 是否选中当前项
+   *
+   * @param item 传入当前项
+   * @memberof AppQuickGroup
+   */
+  public isSelectedItem(item: any): boolean {
+    if (this.selectedUiItem && this.selectedUiItem.id === item.id) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * 处理代码表返回数据(树状结构)
+   *
+   * @param result 返回数组
+   * @memberof AppQuickGroup
+   */
+  public handleDataSet(result: Array<any>): 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
+  ): void {
+    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): void {
+    if (isswitch) {
+      this.selectedUiItem = $event;
+    }
+    this.$emit("valuechange", $event);
+    this.$forceUpdate();
+  }
+
+  /**
+   * 处理子项点击事件
+   *
+   * @param $event 值
+   * @param item 父值
+   * @memberof AppQuickGroup
+   */
+  public handleCommand($event: any, item: any): void {
+    item.label = $event.label;
+    item.codename = $event.codename;
+    this.handleClick($event, false);
+  }
+}
+</script>
+
+<style lang="less">
+@import "./app-quick-group-tab.less";
+</style>
\ No newline at end of file

src/styles/theme.less

@@ -10,6 +10,11 @@
     --background: @theme-color;
     --color: @text-color;
   }
+  // 多数据快速分组组件tab选中样式
+  .app-seleted-item {
+    color: @theme-color;
+    border-bottom: 2px solid @theme-color;
+  }
   ion-fab-button{
     --background:@theme-color;
     --box-shadow:-1px 1px 5px #8e9eab;