feat: 新增客户分类选择行组件

src/assets/js/selector.js

@@ -23,7 +23,7 @@ export const provinceListMapExp = {
 // 采购单位类型数据
 // 在[@/components/selector/BuyerclassSelectorCard.vue]中使用
 export const cateListMapExp = {
-  '#': ['全部行业'],
+  '#': ['全部'],
   C: ['财政', '传媒', '城管', '采矿业', '出版广电'],
   D: ['档案', '党委办', '电信行业'],
   F: ['法院', '发改'],

src/components/selector/AreaSelector.vue

@@ -66,9 +66,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .s-line {
-    .s-header {
-      line-height: 36px;
-    }
-  }
+
 </style>

src/components/selector/BuyerclassSelector.vue

@@ -1,226 +1,52 @@
 <template>
   <selector-card
-    class="buyerclass-selector card"
+    class="buyerclass-selector"
+    :cardType="selectorType"
     @onConfirm="onConfirm"
     @onCancel="onCancel"
   >
-    <div slot="header">选择采购单位类型</div>
-    <div class="selector-content" v-loading="loading">
-      <div class="search-container">
-        <el-input v-model.trim="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>
+    <div slot="header" v-if="selectorType === 'card'" key="header">选择采购单位类型</div>
+    <div slot="header" class="s-header" v-if="selectorType === 'line'" key="header">客户分类：</div>
+    <BuyerclassSelectorContent
+      ref="buyerclassSelectorContent"
+      :selectorType="selectorType"
+      :initCate="initCate"
+      @onChange="onChange"
+    />
   </selector-card>
 </template>
 
 <script>
-import { Input } from 'element-ui'
 import SelectorCard from '@/components/selector/SelectorCard.vue'
-import { cateListMapExp } from '@/assets/js/selector.js'
-import { debounce, getRandomString } from '@/utils/'
+import BuyerclassSelectorContent from '@/components/selector/BuyerclassSelectorContent.vue'
 export default {
-  name: 'buyerclass-selector-card',
+  name: 'buyerclass-selector',
   components: {
-    [Input.name]: Input,
-    SelectorCard
+    SelectorCard,
+    BuyerclassSelectorContent
   },
   props: {
+    selectorType: {
+      type: String,
+      default: 'card' // card/line
+    },
     initCate: {
       type: Array,
       default () {
-        return [] // '财政', '传媒', '城管', '出版广电'
+        return []
       }
     }
   },
   data () {
-    return {
-      searchContent: '',
-      loading: false,
-      // 原始数据
-      cateListMapExp,
-      // 页面中循环的数据
-      cateListMap: {},
-      cateExp: {
-        name: '全部行业',
-        selected: false,
-        level: 0,
-        id: ''
-      },
-      // indexBar数据
-      indexList: []
-    }
-  },
-  watch: {
-    initCate (newVal, oldVal) {
-      // console.log(...arguments)
-      this.setCateState(newVal)
-    },
-    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)
-  },
-  created () {
-    this.initCateMap()
-    this.setCateState(this.initCate)
+    return {}
   },
+  created () {},
   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 { Array | undefined } 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或数组')
-        }
-      }
+      return this.$refs.buyerclassSelectorContent.setCitySelected(data)
     },
-    // 获取选中的数据
-    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
+    getSelected (data) {
+      return this.$refs.buyerclassSelectorContent.setCitySelected(data)
     },
     onCancel () {
       this.$emit('onCancel')
@@ -228,21 +54,14 @@ export default {
     onConfirm () {
       const selected = this.getSelected()
       this.$emit('onConfirm', selected)
+    },
+    onChange (selected) {
+      this.$emit('onChange', 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>

src/components/selector/BuyerclassSelectorContent.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="selector-content" v-if="selectorType === 'card'" key="s-content">
+    <div class="search-container">
+      <el-input v-model.trim="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>
+  <div class="selector-content" :class="{ 'no-more': !showMore }" v-else-if="selectorType === 'line'" key="s-content">
+    <span class="action-button show-more" @click="showMore = !showMore">
+      <span class="action-text">{{ showMore ? '收起' : '更多' }}</span>
+      <span class="el-icon-arrow-down" :class="showMore ? 'rotate180' : ''"></span>
+    </span>
+    <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>
+</template>
+
+<script>
+import { Input } from 'element-ui'
+import { cateListMapExp } from '@/assets/js/selector.js'
+import { debounce, getRandomString } from '@/utils/'
+export default {
+  name: 'buyerclass-selector-content',
+  components: {
+    [Input.name]: Input
+  },
+  props: {
+    selectorType: {
+      type: String,
+      default: 'card' // card/line
+    },
+    initCate: {
+      type: Array,
+      default () {
+        return [] // '财政', '传媒', '城管', '出版广电'
+      }
+    }
+  },
+  data () {
+    return {
+      searchContent: '',
+      // 原始数据
+      cateListMapExp,
+      // 页面中循环的数据
+      cateListMap: {},
+      cateExp: {
+        name: '全部',
+        selected: false,
+        level: 0,
+        id: ''
+      },
+      // indexBar数据
+      indexList: [],
+      showMore: false
+    }
+  },
+  watch: {
+    initCate (newVal, oldVal) {
+      // console.log(...arguments)
+      this.setCateState(newVal)
+    },
+    searchContent: debounce(function (newVal, oldVal) {
+      const search = newVal
+      const index = this.getIndexWithString(search)
+      if (index) {
+        this.$nextTick(() => {
+          const wrapper = document.querySelector('.buyerclass-selector.s-card')
+          this.$refs.selectList.scrollTop = wrapper.querySelector(`[data-index=${index}]`).offsetTop
+        })
+      }
+    }, 300)
+  },
+  created () {
+    this.initCateMap()
+    this.setCateState(this.initCate)
+  },
+  methods: {
+    // 初始化数据
+    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 !== this.cateExp.name) {
+            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 { Array | undefined } 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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .s-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;
+      }
+    }
+  }
+
+  .s-line {
+    .selector-content {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      &.no-more {
+        height: 38px;
+        overflow: hidden;
+      }
+      .j-button-item {
+        border-color: transparent;
+        &.active {
+          color: #fff;
+          background-color: $color-text--highlight;
+        }
+      }
+    }
+    .select-group-container {
+      margin: 0 4px;
+      display: flex;
+      flex-wrap: wrap;
+      .select-group {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+</style>

src/components/selector/IndustrySelector.vue

@@ -63,9 +63,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .s-line {
-    .s-header {
-      line-height: 36px;
-    }
-  }
+
 </style>

src/components/selector/IndustrySelectorContent.vue

@@ -7,9 +7,9 @@
       <div
         v-for="(item, index) in industryListMap"
         :key="index"
-        class="list-item-container"
+        class="select-group-container"
       >
-        <div class="list-item-header">
+        <div class="select-group-header">
           <button
             class="j-button-item button-level-1"
             :class="{
@@ -19,7 +19,7 @@
             @click="changeIndustryState(item)"
           >{{ item.name }}</button>
         </div>
-        <div class="list-item-main">
+        <div class="select-group-main">
           <button
             v-for="(iitem, iindex) in item.children" :key="999-iindex"
             class="j-button-item button-level-2"
@@ -41,9 +41,9 @@
     <div
       v-for="(item, index) in industryListMap"
       :key="index"
-      class="list-item-container"
+      class="select-group-container select-group-container"
     >
-      <div class="list-item-header">
+      <div class="select-group-header">
         <button
           class="j-button-item"
           :class="{
@@ -55,7 +55,7 @@
           @click="changeIndustryState(item)"
         >{{ item.name }}</button>
       </div>
-      <div class="list-item-main">
+      <div class="select-group-main">
         <button
           v-for="(iitem, iindex) in item.children" :key="999-iindex"
           class="j-button-item button-level-2"
@@ -343,12 +343,12 @@ export default {
     .button-level-2 {
       margin: 5px;
     }
-    .list-item-container {
+    .select-group-container {
       padding: 6px 20px;
       &:not(:last-of-type) {
         border-bottom: 1px solid rgba(0,0,0,.05);
       }
-      .list-item-main {
+      .select-group-main {
         display: flex;
         flex-wrap: wrap;
       }
@@ -383,7 +383,7 @@ export default {
         }
       }
     }
-    .list-item-container {
+    .select-group-container {
       position: relative;
       margin: 0 4px;
       display: flex;
@@ -398,7 +398,7 @@ export default {
         background-color: #E3E4E6;
         margin-top: -8px;
       }
-      .list-item-main {
+      .select-group-main {
         display: flex;
         flex-wrap: wrap;
       }

src/components/selector/SelectorCard.vue

@@ -207,6 +207,9 @@ export default {
 
   .selector-card.s-line {
     padding: 12px 40px;
+    .s-header {
+      line-height: 36px;
+    }
     .selector-card-header {
       margin-right: 10px;
     }