222

schangxiang@126.com

2025-06-13 6a8393408d8cefcea02b7a598967de8dc1e565c2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
 
<template>
  <div class="tabs-nav-container">
    <template v-for="(tab, index) in currentTabNavList">
      <template v-if="tab.type==='checkbox'">
        <el-checkbox-group :key="'rg_'+index" v-model="tab.value" size="mini" class="tabs-nav" @change="checkBoxGroupChange">
          <el-checkbox-button v-for="(item, itemIndex) in tab.items.filter((li, _index)=>{return _index < tab.showCount})" :key="itemIndex" :label="item.label">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
        <el-dropdown v-if="tab.items.length>tab.showCount" :key="'dd_'+index" size="mini">
          <el-button type="text" size="mini">
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, itemIndex) in tab.items.filter((li, _index)=>{return _index >= tab.showCount})" :key="itemIndex" :class="{'active':activeMenuItem(tab, item)}" @click.native="menuItemClick(tab, item)">{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-else-if="tab.type==='radio'">
        <el-radio-group :key="'rg_'+index" v-model="tab._value" size="mini" class="tabs-nav">
          <el-radio-button v-for="(item, itemIndex) in tab.items.filter((li, _index)=>{return _index < tab.showCount})" :key="itemIndex" :label="item.label" @click.native="radioGroupChange(tab, item)">{{ item.label }}</el-radio-button>
        </el-radio-group>
        <el-dropdown v-if="tab.items.length>tab.showCount" :key="'dd_'+index" size="mini">
          <el-button type="text" size="mini">
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, itemIndex) in tab.items.filter((li, _index)=>{return _index >= tab.showCount})" :key="itemIndex" :class="{'active':activeMenuItem(tab, item)}" @click.native="menuItemClick(tab, item)">{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </template>
  </div>
</template>
 
<script>
export default {
  props: {
    // tab导航数据结构
    tabNavList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    currentTabNavList: {
      get: function() {
        return this.tabNavList;
      }
    }
  },
  watch: {
    currentTabNavList: {
      handler(val) {},
      deep: true
    }
  },
  methods: {
    // 复选组改变
    checkBoxGroupChange(tab, item) {
      this.getWhere();
    },
    // 单选组改变
    radioGroupChange(tab, item) {
      tab.value = item.label;
      this.getWhere();
    },
    // 菜单项选择
    menuItemClick(tab, item) {
      if (tab.type === "checkbox") {
        var index = tab.value.findIndex(s => {
          return s === item.label;
        });
        if (index >= 0) {
          tab.value.splice(index, 1);
        } else {
          tab.value.push(item.label);
        }
      } else {
        tab.value = item.label;
        tab._value = null;
      }
      this.getWhere();
    },
    // 是否选中
    activeMenuItem(tab, item) {
      if (tab.type === "checkbox") {
        var index = tab.value.findIndex(s => {
          return s === item.label;
        });
        return index >= 0;
      } else {
        return tab.value === item.label;
      }
    },
    // 获得条件
    getWhere() {
      var where = [];
      this.currentTabNavList.forEach(item => {
        if (item.type === "checkbox") {
          if (item.value.length) {
            where.push({
              prop: item.field,
              value: item.value
            });
          }
        } else {
          if (item.value) {
            where.push({
              prop: item.field,
              value: item.value
            });
          }
        }
      });
      this.$emit("on-tabs-nav-change", where);
    }
  }
};
</script>
 
<style lang="scss" scoped>
.tabs-nav-container {
  .tabs-nav {
    display: inline-block;
  }
  .el-dropdown {
    top: 3px;
    margin-right: 20px;
  }
}
.el-dropdown-menu {
  .active {
    background-color: #409eff;
    color: white;
  }
}
</style>