feat: 新增采购单位类型卡片组件

src/components/selector/BuyerclassSelectorCard.vue

@@ -0,0 +1,268 @@
+<template>
+  <selector-card
+    class="buyerclass-selector card"
+    @onConfirm="onConfirm"
+    @onCancel="onCancel"
+  >
+    <div slot="header">选择采购单位类型</div>
+    <div class="selector-content" v-loading="loading">
+      <div class="search-container">
+        <el-input v-model="searchContent" placeholder="搜索" prefix-icon="el-icon-search"></el-input>
+      </div>
+      <div class="select-list scrollbar" ref="selectList">
+        <div
+          v-for="(item, key) in cateListMap"
+          :key="key"
+          class="select-group-container"
+          :class="{
+            global: key === '#'
+          }"
+        >
+          <div class="index-anchor" :id="key" :data-index="key" v-if="key !== '#'">{{ key }}</div>
+          <div class="select-group">
+            <button v-for="(cate, i) in item" :key="999-i"
+              class="j-button-item"
+              :class="{
+                active: cate.selected,
+                [cate.id]: true
+              }"
+              @click="changeCateState($event,cate)">{{ cate.name }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </selector-card>
+</template>
+
+<script>
+import { Input } from 'element-ui'
+import SelectorCard from '@/components/selector/SelectorCard.vue'
+import { debounce, getRandomString } from '@/utils/'
+export default {
+  name: 'buyerclass-selector-card',
+  components: {
+    [Input.name]: Input,
+    SelectorCard
+  },
+  props: {
+    initCate: {
+      type: Array,
+      default () {
+        return [] // '财政', '传媒', '城管', '出版广电'
+      }
+    }
+  },
+  data () {
+    return {
+      searchContent: '',
+      loading: false,
+      // 原始数据
+      cateListMapExp: {
+        '#': ['全部行业'],
+        C: ['财政', '传媒', '城管', '采矿业', '出版广电'],
+        D: ['档案', '党委办', '电信行业'],
+        F: ['法院', '发改'],
+        G: ['工信', '公安', '国资委', '公共资源交易'],
+        H: ['海关'],
+        J: ['教育', '军队', '交通', '纪委', '金融业', '建筑业', '检察院', '机关事务'],
+        K: ['科技'],
+        M: ['民政', '民宗'],
+        N: ['农业', '能源化工', '农林牧渔'],
+        P: ['批发零售'],
+        Q: ['气象'],
+        R: ['人行', '人社', '人大'],
+        S: ['税务', '水利', '市政', '审计', '商务', '司法', '社会团体', '市场监管', '生态环境'],
+        T: ['统计', '统战', '体育'],
+        W: ['文旅', '卫健委'],
+        X: ['学校', '宣传', '信息技术'],
+        Y: ['医疗', '银保监', '运输物流', '应急管理'],
+        Z: ['组织', '政协', '住建', '证监', '政府办', '制造业', '政务中心', '住宿餐饮', '自然资源']
+      },
+      // 页面中循环的数据
+      cateListMap: {},
+      cateExp: {
+        name: '全部行业',
+        selected: false,
+        level: 0,
+        id: ''
+      },
+      // indexBar数据
+      indexList: []
+    }
+  },
+  watch: {
+    searchContent: debounce(function (newVal, oldVal) {
+      const search = newVal
+      const index = this.getIndexWithString(search)
+      if (index) {
+        this.$nextTick(() => {
+          const wrapper = document.querySelector('.buyerclass-selector.card')
+          this.$refs.selectList.scrollTop = wrapper.querySelector(`[data-index=${index}]`).offsetTop
+        })
+      }
+    }, 300),
+    initCate (newVal, oldVal) {
+      if (Array.isArray(newVal)) {
+        this.setCateState(newVal)
+      }
+    }
+  },
+  created () {
+    this.initCateMap()
+  },
+  methods: {
+    changeLoadingState (s) {
+      this.loading = s
+    },
+    // 初始化数据
+    initCateMap () {
+      const cateListMap = {}
+      for (const key in this.cateListMapExp) {
+        this.indexList.push(key)
+        const cateArr = []
+        this.cateListMapExp[key].forEach(cateName => {
+          const cateExp = JSON.parse(JSON.stringify(this.cateExp))
+          cateExp.name = cateName
+          cateExp.id = `bc-${getRandomString(8).toLowerCase()}`
+          if (cateName !== '全部行业') {
+            cateExp.level = 1
+          } else {
+            cateExp.level = 0
+            cateExp.selected = true
+          }
+          cateArr.push(cateExp)
+        })
+        cateListMap[key] = cateArr
+      }
+
+      for (const k in cateListMap) {
+        this.$set(this.cateListMap, k, cateListMap[k])
+      }
+    },
+    changeCateState (e, item) {
+      // 循环所有数据，判断并改变状态
+      switch (item.level) {
+        case 0: {
+          this.setCateState()
+          break
+        }
+        case 1: {
+          this.cateListMap['#'][0].selected = false
+          item.selected = !item.selected
+          break
+        }
+        default: {
+          console.log('未知level')
+        }
+      }
+
+      if (item.level !== 0) {
+        const allSelected = this.checkAllSelectedState()
+        if (allSelected.allSelected || allSelected.allNotSelected) {
+          this.setCateState()
+        }
+      }
+    },
+    // 检查是否全部选中了/全部不选中
+    checkAllSelectedState () {
+      const allSelectedArr = []
+      for (const key in this.cateListMap) {
+        // 跳过全部进行筛选
+        if (key === '#') continue
+        this.cateListMap[key].forEach(item => {
+          allSelectedArr.push(item.selected)
+        })
+      }
+
+      return {
+        // 找不到false，就说明全部被选中
+        allSelected: allSelectedArr.indexOf(false) === -1,
+        // 找不到true，就说明没有一个被选中
+        allNotSelected: allSelectedArr.indexOf(true) === -1,
+      }
+    },
+    /**
+     * 初始化页面选中状态
+     * @param {undefinde|Array} data 要恢复的数据
+     */
+    setCateState (data) {
+      // 设置全部按钮
+      if (!data || data.length === 0) {
+        // 其他全部设置不选中，全部按钮设置选中
+        for (const key in this.cateListMap) {
+          this.cateListMap[key].forEach(item => {
+            item.selected = false
+          })
+        }
+
+        this.cateListMap['#'][0].selected = true
+      } else {
+        this.setCateState()
+        this.cateListMap['#'][0].selected = false
+
+        if (Array.isArray(data)) {
+          for (const key in this.cateListMap) {
+            this.cateListMap[key].forEach(function (item) {
+              if (data.indexOf(item.name) !== -1) {
+                item.selected = true
+              }
+            })
+          }
+        } else {
+          console.error('参数必须为undefined或数组')
+        }
+      }
+    },
+    // 获取选中的数据
+    getSelected () {
+      const data = []
+      for (const key in this.cateListMap) {
+        // 跳过全部进行查找
+        if (key === '#') continue
+        this.cateListMap[key].forEach(item => {
+          if (item.selected) {
+            data.push(item.name)
+          }
+        })
+      }
+      return data
+    },
+    getIndexWithString (s = '') {
+      if (!s) return
+      let giveMyIndex = ''
+      for (const key in this.cateListMapExp) {
+        const wowFindIt = this.cateListMapExp[key].find(item => {
+          return item.includes(s)
+        })
+        if (wowFindIt) {
+          giveMyIndex = key
+          break
+        }
+      }
+      return giveMyIndex
+    },
+    onCancel () {
+      this.$emit('onCancel')
+    },
+    onConfirm () {
+      var selected = this.getSelected()
+      this.$emit('onConfirm', selected)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card {
+    font-size: 14px;
+    .select-group-container {
+      border-bottom: 1px solid rgba(0,0,0,.05);
+      .select-group {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 16px;
+      }
+    }
+    
+  }
+</style>