gdy_app_8/src/components/RuleCategorySelDropdown.vue

<template>
  <div class="dept-select-drodown__wrap">
      <div class="dept_path" style=" white-space:nowrap;">
        <div class="dept_paths">
          <a href="javascript:void(0);" style="display: flex; align-items: center;" @click="backToIndex(-1)" >全部</a>
          <a
            v-for="(item, i) in selectedDeptStack"
            :key="i"
            href="javascript:void(0);"
            @click.stop="backToIndex(i)"
          >
            <van-icon name="arrow"/>
            {{item.name}}
          </a>
        </div>
    </div>
    <div class="select-dropdown__content" :style="contentStyle">
      <scroller class="selector-left _v-container">
        <van-cell-group style="margin-top:0;">
          <van-cell
            :class="{on: item.id === selectedLeftDeptId}"
            v-for="(item,index) in deptData"
            :key="index"
            :title="item.name"
            v-show="item.pid == 0"
            class="employee_cell"
            @click.stop="onselectedLeftDepart(item)"
          />
          <ListEmptyDataCell :data="deptData" :loading="loading"/>
        </van-cell-group>
      </scroller>

      <scroller ref="scroller_com" class="selector-right _v-container" style="left:2.2rem; width:5.4rem;">
        <van-cell
          :is-link="selectedRightDeptId !== item.id"
          v-for="(item, i) in rightDepartData"
          :key="i"
          :title="item.name"
          class="employee_cell"
          :class="{on: selectedRightDeptId === item.id}"
          @click.stop="onselectedRightDepart(item)"
        >
          <template slot="right-icon">
            <van-icon name="success" v-if="selectedRightDeptId === item.id"/>
          </template>
        </van-cell>
      </scroller>
    </div>
    <div class="date-picker__toolbar">
      <van-button
        class="reset-button"
        block
        square
        color="rgba(38,162,255,0.2)"
        @click.stop="onResetDepart"
      >{{ resetBtnText }}
      </van-button>
      <van-button block square type="info" @click="onConfirmDepart">确认</van-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import {CellGroup, Cell, Icon, Loading} from 'vant'
import ListEmptyDataCell from './ListEmptyDataCell'

Vue.use(CellGroup).use(Cell).use(Icon).use(Loading)

export default {
  props: {
    contentHeight: {type: String, default: '5rem'},
    resetBtnText: {type: String, default: '恢复默认'}
  },
  name: 'RuleCategorySelDropdown',
  data () {
    return {
      loading: false,
      deptData: null,
      rightDepartData: null,
      selectedDeptStack: null,
      selectedLeftDeptId: null,
      selectedLeftDeptItem: null,
      selectedRightDeptId: null,
      selectedRightDeptItem: null
    }
  },
  components: {ListEmptyDataCell},
  computed: {
    contentStyle () {
      return {height: this.contentHeight}
    }
  },
  methods: {
    backToIndex (index) {
      if (index < 0) {
        this.restoreDefaults()
        // this.$emit('onchange', 0)
      } else {
        this.Paging_return(index)// 传入当前点击下标
        const deptItem = this.selectedDeptStack[index]
        this.selectedRightDeptId = deptItem.id
        this.selectedRightDeptItem = deptItem
        this.rightDepartData = [].concat(deptItem, deptItem.child)
        // this.$emit('onchange', deptItem)
      }
    },
    Paging_return (deptItem) {
      // 1.循环遍历重新插入数组
      // let Paging_return_Arrer = []
      // for(let i=0;i<this.selectedDeptStack.length;i++){//循环当前有的面包屑，获取当前点击下标及前面的面包屑
      //   if(i <= deptItem){
      //     Paging_return_Arrer.push(this.selectedDeptStack[i])
      //   }
      // }
      // this.selectedDeptStack = Paging_return_Arrer
      // 2.删除点击的下标后边所有
      this.selectedDeptStack.splice(deptItem + 1, 1 * 1000)
    },
    onselectedLeftDepart (deptItem) {
      this.selectedLeftDeptId = deptItem.id
      this.selectedLeftDeptItem = deptItem
      this.selectedRightDeptId = deptItem.id
      this.selectedRightDeptItem = deptItem
      this.selectedDeptStack = [deptItem]
      this.rightDepartData = [].concat(deptItem, deptItem.child)
      // this.$emit('onchange', deptItem)
    },
    onselectedRightDepart (deptItem) {
      if (deptItem.id === this.selectedRightDeptId) {
        return
      }
      this.selectedRightDeptId = deptItem.id
      this.selectedRightDeptItem = deptItem
      this.selectedDeptStack.push(deptItem)
      this.rightDepartData = [].concat(deptItem, deptItem.child)
    },
    onResetDepart () {
      this.backToIndex(-1)
    },
    onConfirmDepart () {
      this.$emit('onConfirm', this.selectedRightDeptItem == null ? '' : this.selectedRightDeptItem.id)
    },
    getDepartData () {
      this.loading = true
      this.$axiosUser('get', '/api/pro/integral/rule/trees', {cycle_type: '1'}).then((res) => {
        const result = res.data
        if (result.code === 1) {
          const arr = []
          const {rule_tree: items} = result.data
          for (let key in items) {
            arr.push(items[key])
          }
          this.deptData = arr
        }
      }).finally(() => {
        this.$toast.clear()
        this.loading = false
      })
    },
    restoreDefaults () {
      this.selectedLeftDeptId = null
      this.selectedLeftDeptItem = null
      this.selectedRightDeptId = null
      this.selectedRightDeptItem = null
      this.selectedDeptStack = null
      this.rightDepartData = null
    }
  },
  mounted () {
    this.getDepartData()
  }
}
</script>
<style lang="less" scoped>
  .dept-select-drodown__wrap {
    position: relative;
    overflow: hidden;
  }

  .select-dropdown__content {
    position: relative;
  }

  .employee_cell {
    display: flex;
    align-items: center;
    padding: 0.16rem 0.32rem;
    touch-action: none;
  }

  .employee_cell .van-cell__title {
    line-height: 0.8rem;

    & > span {
      font-size: 0.3rem;
    }
  }

  .dept_path a {
    color: #238dfa;
    font-size: 0.3rem;
  }

  .dept_path a:nth-last-child(1) {
    color: #999;
  }

  .dept_path a * {
    vertical-align: middle;
  }
  //滚动条
  .dept_paths{
      overflow-x: scroll;
      height: 0.8rem;
      display: flex;
      align-items: center;
  }
  .dept_path {
    width: 7rem;
    // position: relative;
    display: flex;
    flex-wrap: nowrap;
    height: 0.8rem;
    font-size: 0.32rem;
    padding: 0 0.32rem;
    align-items: center;
    touch-action: none;
  }

  .dept_path:after {
    content: ' ';
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #efefef;
    height: 1px;
    position: absolute;
    transform: scaleY(0.5);
  }

  .selector-left {
    width: 2.2rem !important;
    background-color: #f5f5f5;
  }

  .selector-left .van-cell {
    background-color: #f5f5f5;
  }

  .selector-left .employee_cell {
    padding-left: 0.32rem;
  }

  .selector-left .employee_cell.on {
    position: relative;

    &:before {
      position: absolute;
      top: 50%;
      left: 0.08rem;
      content: '';
      width: 0.04rem;
      height: 0.36rem;
      background: #26a2ff;
      border-radius: 0.04rem;
      transform: translateY(-50%);
    }
  }

  /deep/ .selector-left .van-cell:not(:last-child):after {
    left: 0;
  }

  .selector-right {
    width: 5.4rem !important;
    background-color: #fff;
  }

  .van-cell {
    &.on {
      color: #238dfa;

      & .van-cell__title > span {
        font-size: 0.3rem;
      }
    }

    & .van-cell__title > span {
      font-size: 0.3rem;
    }

    & .van-icon-success {
      align-self: center;
    }
  }

  .date-picker__toolbar {
    display: flex;
    flex-direction: row;

    & .reset-button {
      touch-action: none;
      color: #26a2ff !important;
      border: transparent !important;
    }
  }

  // .rule-selector__wrap {
  //   display: flex;
  //   position: relative;
  //   overflow: hidden;
  //   height: 7rem;
  //   flex-direction: column;

  //   & .rule-selector__conetent {
  //     display: flex;
  //     position: relative;
  //     flex: 1;
  //     padding: 0.26rem 0.19rem;
  //     flex-direction: column;
  //     overflow-y: auto;
  //     overflow-x: hidden;

  //     & .rule-category__content {
  //       position: relative;

  //       & .rule-category___title {
  //         padding: 0 0.13rem;
  //         color: #333;
  //         font-size: 0.3rem;
  //       }

  //       & .rule-category__sub-items {
  //         display: flex;
  //         padding-bottom: 0.24rem;
  //         flex-flow: row wrap;

  //         & .rule-sub__item {
  //           display: flex;
  //           margin: 0.24rem 0.13rem 0 0.13rem;
  //           width: 1.52rem;
  //           height: 0.72rem;
  //           background: #f5f7fa;
  //           border-radius: 0.04rem;
  //           align-items: center;
  //           justify-content: center;
  //           touch-action: none;

  //           &.selected {
  //             color: #26a2ff;
  //             background: #26a2ff33;
  //           }

  //           & > span {
  //             font-size: 0.28rem;
  //           }
  //         }
  //       }
  //     }
  //   }

  //   & .date-picker__toolbar {
  //     display: flex;
  //     flex-direction: row;

  //     & .reset-button {
  //       color: #26a2ff !important;
  //       border: transparent !important;
  //     }
  //   }
  // }
</style>