封装一个城市穿梭框

<template>
  <div>
    <a-modal
      :width="800"
      :title="title"
      :visible="show"
      :confirm-loading="confirmLoading"
      :loading="loading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="transfer-box">
        <a-transfer
          :data-source="dataSourceTransfer"
          :target-keys="filterTargetKeys"
          :render="(item) => item.title"
          :show-select-all="true"
          @change="handleTransferChange"
          :list-style="{
            width: '300px',
            height: '360px'
          }"
          show-search
          :titles="['可选城市', '已选城市']"
          @search="onSearch"
        >
          <template
            slot="children"
            slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll } }"
          >
            <a-tree
              v-if="direction === 'left'"
              :key="searchValue"
              blockNode
              checkable
              :defaultExpandAll="false"
              :checkedKeys="[...selectedKeys, ...targetKeys]"
              :treeData="cityOptions"
              @expand="onExpand"
              :expanded-keys.sync="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              @check="
                (_, props) => {
                  handleTreeChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect, itemSelectAll)
                }
              "
              @select="
                (_, props) => {
                  handleTreeChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect, itemSelectAll)
                }
              "
            >
              <template slot="title" slot-scope="{ title }">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{ title.substr(0, title.indexOf(searchValue)) }}
                  <span :id="title.indexOf(searchValue) > -1 ? 'target-elem' : ''" style="color: #f50">{{
                    searchValue
                  }}</span>
                  {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ title }}</span>
              </template>
            </a-tree>
          </template>
        </a-transfer>
      </div>

      <!-- 底部 -->
      <template slot="footer">
        <a-button key="cancel" class="normal-btn" @click="handleCancel">取消</a-button>
        <a-button key="submit" class="common-btn" :loading="confirmLoading" @click="handleOk">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { cloneDeep } from '@/views/financialBillSystem/billingManagement/utils/mapping'

function isChecked(selectedKeys, eventKey) {
  return selectedKeys.indexOf(eventKey) !== -1
}

function handleTreeData(data, targetKeys = []) {
  data.forEach((item) => {
    item['disabled'] = targetKeys.includes(item.key)
    if (item.children) {
      handleTreeData(item.children, targetKeys)
    }
  })
  return data
}

export default {
  name: 'ChooseCity',
  props: {
    sureCityList: {
      required: true,
      type: Array
    },
    cityList: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      title: '选择城市',
      show: true,
      loading: false,
      confirmLoading: false,
      targetKeys: [],
      dataSource: [],
      cityOptions: [],
      arr: [],
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      dataList: [],
      parentKeys: [], //父节点
      filterTargetKeys: [], //过滤掉父节点后
      dataSourceTransfer: [] //所有子节点原数据
    }
  },

  created() {
    console.log('sureCityList', this.sureCityList, this.cityList)
    this.$nextTick(() => {
      this.initCityTreeData()
    })
  },
  methods: {
    //左边搜索滚动到指定位置
    scrollPosition() {
      this.$nextTick(() => {
        const elem = document.querySelector('#target-elem') // 获取目标元素
        console.log('elem', elem)
        if (!elem) return
        const scrollableElem = document.querySelector('.ant-transfer-list-body-customize-wrapper ') // 获取目标元素的父元素（可滚动容器）
        console.log(scrollableElem)
        const scrollY = scrollableElem.scrollTop // 获取当前垂直方向上滚动的距离
        const scrollHeight = scrollableElem.scrollHeight // 获取可滚动容器的实际高度
        const clientHeight = scrollableElem.clientHeight // 获取可滚动容器的可视区域高度

        const targetY = elem.offsetTop - scrollableElem.offsetTop // 获取目标元素相对于可滚动容器的上边距
        const scrollToY = Math.min(targetY, scrollHeight - clientHeight) // 计算滚动条滚动目标位置

        scrollableElem.scrollTo({
          top: scrollToY,
          behavior: 'smooth'
        })
      })
    },
    //源数据-转化为一层-父加子
    flatten(list = []) {
      list.forEach((item) => {
        this.dataSource.push(item)
        this.flatten(item.children)
      })
    },
    generateData(_level, _preKey, _tns) {
      const preKey = _preKey || '0'
      const tns = _tns || this.cityOptions

      const children = []
      for (let i = 0; i < x; i++) {
        const key = `${preKey}-${i}`
        tns.push({ title: key, key, scopedSlots: { title: 'title' } })
        if (i < y) {
          children.push(key)
        }
      }
      if (_level < 0) {
        return tns
      }
      const level = _level - 1
      children.forEach((key, index) => {
        tns[index].children = []
        return this.generateData(level, key, tns[index].children)
      })
    },
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const key = node.key
        const title = node.title
        this.dataList.push({ key, title })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },
    getParentKey(key, tree) {
      let parentKey
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
          if (node.children.some((item) => item.key === key)) {
            parentKey = node.key
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children)
          }
        }
      }
      return parentKey
    },
    //搜索展开当前父节点
    onExpand(expandedKeys) {
      console.log('expandedKeys', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    handleSearch(e) {
      setTimeout(() => {
        const value = e

        const expandedKeys = this.dataList
          .map((item) => {
            if (item.title.indexOf(value) > -1) {
              return this.getParentKey(item.key, this.cityOptions)
            }
            return null
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        console.log(expandedKeys)
        Object.assign(this, {
          expandedKeys: value ? expandedKeys : [],
          searchValue: value
        })

        this.scrollPosition()
        console.log(this.autoExpandParent)
      }, 200)
    },

    onSearch(dir, val) {
      console.log(dir, val)
      if (dir === 'left') {
        this.handleSearch(val)
      }
    },
    // 查找详情的父节点
    checkDetailParentKey() {
      let parKey = [] // 查找详情的父节点
      if (this.sureCityList && this.sureCityList.length > 0) {
        this.filterTargetKeys = this.sureCityList.map((item) => {
          return item.key
        })
        parKey = this.searchParents(this.dataSource, this.filterTargetKeys, false)

        console.log('初始化', this.targetKeys, this.filterTargetKeys, parKey)
      }
      return parKey
    },
    //获取子节点全部勾选的父节点
    getAllSelectParentKey(parentList) {
      //找出重复出现的次数，如果小于子节点的length则去除这个元素
      //如果等于子节点的length则只保留一个这个元素

      //获得元素以及出现了几次
      let getRepeatObj = this.getShowAcount(parentList)
      console.log(getRepeatObj)
      let newObj = {} //只保留等于子节点长度的
      for (let k in getRepeatObj) {
        this.cityList.forEach((item) => {
          if (item.key == k) {
            item.children.length > getRepeatObj[k] ? (newObj[k] = 0) : (newObj[k] = getRepeatObj[k])
          }
        })
      }
      console.log('找到父节点的子节全被选择的父节点', newObj)
      let allSelectParKey = []
      let noAllSelectparKey = []
      for (let k in newObj) {
        if (newObj[k] !== 0) {
          allSelectParKey.push(k)
        } else {
          noAllSelectparKey.push(k)
        }
      }
      return [allSelectParKey, noAllSelectparKey]
    },
    //初始化树节点
    initCityTreeData() {
      this.cityOptions = cloneDeep(this.cityList)
      this.dataSourceTransfer = this.getAllChild(cloneDeep(this.cityList)) //所有子节点原数据-控制左边的总数量的
      this.generateList(this.cityOptions) //将树结构处理成需要的字段
      this.flatten(this.cityList) //所有数据-父加子，将树结构转化为一级

      this.parentKeys = this.cityOptions.map((item) => {
        return item.key
      }) //获取所有父节点的key
      let parKey = this.checkDetailParentKey() // 查找详情的父节点
      // console.log(parKey)
      let parKeys = this.getAllSelectParentKey(parKey)[0] //获取子节点全部勾选的父节点
      // console.log('parKeys', parKeys)
      this.targetKeys = [...this.filterTargetKeys, ...parKeys]
      // console.log('最后的key', this.targetKeys)
      this.cityOptions = handleTreeData(this.cityOptions, this.targetKeys) //选择后让勾选禁用
    },

    //判断数组里元素出现的次数
    getShowAcount(names) {
      var countedNames = names.reduce((obj, name) => {
        if (name in obj) {
          obj[name]++
        } else {
          obj[name] = 1
        }
        return obj
      }, {})
      //reduce的第二个参数就是obj的初始值
      return countedNames
    },
    // 树形结构数据过滤
    filterTree(tree = [], targetKeys = [], validate = () => {}) {
      if (!tree.length) {
        return []
      }
      const result = []
      for (let item of tree) {
        if (item.children && item.children.length) {
          let node = {
            ...item,
            children: [],
            disabled: targetKeys.includes(item.key) // 禁用属性
          }
          // 子级处理
          for (let o of item.children) {
            if (!validate.apply(null, [o, targetKeys])) continue
            node.children.push({ ...o, disabled: targetKeys.includes(o.key) })
          }
          if (node.children.length) {
            result.push(node)
          }
        }
      }
      return result
    },
    formatOptions(data, children) {
      const arr = children || []
      data.forEach((e) => {
        const item = {
          key: e.id,
          title: e.name,
          scopedSlots: { title: 'title' }
          // disabled: e.children ? true : false
        }
        if (e.children && e.children.length) {
          item.children = []
          this.formatOptions(e.children, item.children)
        }
        arr.push(item)
      })
      return arr
    },
    onChange(targetKeys) {
      // console.log('Target Keys:', targetKeys)
      // this.targetKeys = targetKeys
      // this.cityOptions = handleTreeData(this.cityOptions, this.targetKeys)
    },
    handleTransferChange(targetKeys, direction, moveKeys) {
      // console.log('Target Keys:', targetKeys, direction, moveKeys)

      // 已选城市移除
      if (direction === 'left') {
        //全选
        if (this.isSelectAllCity(moveKeys, this.getAllChild(this.cityOptions))) {
          this.targetKeys = []
          this.filterTargetKeys = []
        } else {
          let parKey = this.searchParents(this.dataSource, moveKeys) //查找移除的父节点
          this.targetKeys = this.targetKeys.filter((item) => ![...moveKeys, ...parKey].includes(item))
          // console.log('parKey', parKey, this.targetKeys)
          this.filterTargetKeys = this.filterTargetKeys.filter((item) => !moveKeys.includes(item))
        }
        this.cityOptions = handleTreeData(this.cityOptions, this.targetKeys)
      } else {
        //全选
        if (this.isSelectAllCity(targetKeys, this.getAllChild(this.cityOptions))) {
          console.log('全选')
          this.targetKeys = [...targetKeys, ...this.parentKeys]
          this.filterTargetKeys = targetKeys
        } else {
          console.log('非全选')
          let parKey = this.searchParents(this.dataSource, targetKeys) //查找父节点
          this.targetKeys = [...targetKeys, ...parKey]
          this.filterTargetKeys = targetKeys
        }

        console.log(' this.targetKeys', this.targetKeys, ',this.filterTargetKeys', this.filterTargetKeys)
        this.cityOptions = handleTreeData(this.cityOptions, this.targetKeys)
      }
    },
    handleTreeChecked(keys, e, checkedKeys, itemSelect, itemSelectAll) {
      // console.log('check', keys, e, checkedKeys, itemSelect, itemSelectAll)
      // this.targetKeys = keys
      const {
        eventKey,
        checked,
        dataRef: { children }
      } = e.node
      if (this.parentKeys && this.parentKeys.includes(eventKey)) {
        // 父节点选中：将所有子节点也选中
        // let childKeys = children ? children.map((item) => item.key) : []
        // if (childKeys.length) itemSelectAll(childKeys, !checked)
        //当子节点已有被禁用勾选的，再次点击全选只勾选没被禁用的
        let abledChildKeys = []
        children.forEach((item) => {
          if (!item.disabled) {
            abledChildKeys.push(item.key)
          }
        })
        // console.log('abledChildKeys', abledChildKeys)
        let childKeys = abledChildKeys.length ? abledChildKeys : []
        if (childKeys.length) itemSelectAll(childKeys, !checked)
      } else {
        itemSelect(eventKey, isChecked(keys, eventKey))
      }
      // itemSelect(eventKey, !isChecked(checkedKeys, eventKey)) // 子节点选中
    },
    //关闭编辑
    closeEditModal(nodeData) {
      this.isShowEditModal = nodeData
    },
    handleBillNameEdit(type) {
      console.log('编辑')
      this.type = type
      this.isShowEditModal = true
    },
    //查找所有父节点
    searchParents(list, moveKeys, flag = true) {
      let arr = []
      list.forEach((item) => {
        if (moveKeys.includes(item.key)) {
          if (item.key != '0') {
            arr.push(item.parentId)
          }
        }
      })
      if (flag) {
        arr = [...new Set(arr)]
      }
      return arr
    },
    // 关闭弹窗
    handleCancel() {
      this.$emit('closeCityModal', false)
    },
    handleOk() {
      console.log(this.filterTargetKeys)
      if (this.filterTargetKeys.length === 0) {
        return this.$message.info('至少选择一个城市')
      }

      //穿梭框右边过滤出父节点的数据
      let sureCityList = this.dataList.filter((item) => {
        return this.filterTargetKeys.includes(item.key)
      })

      let flag = this.isSelectAllCity(sureCityList, this.getAllChild(this.cityOptions))
      this.$emit('handleChangeCity', sureCityList, this.dataSource, flag)
      this.$emit('closeCityModal', false)
    },
    //获取所有子节点
    getAllChild(list) {
      let arr = []
      list.forEach((item) => {
        if (item.children.length) {
          item.children.forEach((child) => {
            arr.push(child)
          })
        }
      })
      return arr
    },
    //判断是否选了全部城市
    isSelectAllCity(selectCity, childAllCity) {
      return selectCity.length === childAllCity.length
    }
  }
}
</script>

<style lang="less" scoped>
.transfer-box {
  padding-bottom: 35px;
  display: flex;
  justify-content: center;
}
::v-deep .ant-transfer-list-body.ant-transfer-list-body-with-search {
  overflow-y: hidden;
  padding-top: 50px;
  width: 100%;
}
::v-deep .ant-transfer-list-body-customize-wrapper {
  overflow: auto;
  height: 100%;
}
::v-deep .ant-transfer-list-content {
  padding-bottom: 15px;
  height: 100%;
}
::v-deep .ant-transfer-list-body.ant-transfer-list-body-with-search .ant-transfer-list-body-search-wrapper {
  position: absolute;
  z-index: 99;
  width: 100%;
  background-color: #fff;
}
</style>

<!-- 选择城市 -->
    <ChooseCity
      ref="chooseCity"
      v-if="isShowCityModal"
      :cityList="cityList"
      @closeCityModal="closeCityModal"
      @handleChangeCity="handleChangeCity"
      :sureCityList="form.sureCityList"
    />