dvcp_v2_wxcp_app/components/AiSelectEnterprise/AiSelectEnterprise.vue

<template>
  <div class="AiSelectEnterprise">
    <tree :checkList="checkList" :props="prop" @sendValue="(val)=>checkList = val" :multiple="multiple" :isCheck="true"
          :rootId="rootId"/>
    <div class="footer">
      <div class="fill"/>
      <div class="btn" @click="confirm">确定选择</div>
    </div>
  </div>
</template>

<script>
import tree from "./tree";

export default {
  name: "AiSelectEnterprise",
  components: {tree},
  props: {
    value: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: true
    },
    rootId: Object,
  },
  data() {
    return {
      tree: [],
      checkList: this.value,
      prop: {
        label: 'name',
        multiple: this.multiple,
      },
      map: {},
    }
  },

  created() {
    uni.pageScrollTo({
      duration: 0,
      scrollTop: 0
    })
  },

  methods: {
    confirm() {
      let filter = []
      this.map = {}
      this.recursion(this.checkList)
      Object.keys(this.map).map(e => filter.push(this.map[e]))
      this.$emit("change", filter)
      this.$emit('update:visible', false)
    },

    recursion(arr) {
      if (arr?.length) {
        arr.map(e => {
          if ((e.type == 0 || e.openId) && e.checked && !this.map[e.id]) {
            this.map[e.id] = e
            this.recursion(e.childrenUser)
          }
          if (e.childrenDept?.length) {
            this.recursion(e.childrenDept)
          }
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.AiSelectEnterprise {
  min-height: 100%;
  background-color: #F5F5F5;
  position: relative;

  .footer {
    width: 100vw;
    display: flex;
    align-items: center;
    z-index: 10;
    background: #F4F8FB;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0 32px 16px;

    .scroll {
      height: 118px;

      ::v-deep .uni-scroll-view-content {
        display: flex;
        align-items: center;

        .tag {
          width: 236px;
          height: 72px;
          background: #EAEEF1;
          border-radius: 8px;
          display: flex;
          align-items: center;
          margin-right: 16px;

          & > img {
            width: 48px;
            height: 45px;
            margin-right: 8px;
            flex-shrink: 0;
          }

          & > label {
            width: 148px;
            height: 42px;
            font-size: 30px;
            font-weight: 600;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .btn {
      width: 192px;
      height: 80px;
      line-height: 80px;
      background: #1365DD;
      border-radius: 4px;
      z-index: 10;
      text-align: center;
      font-size: 32px;
      color: #FFFFFF;
      margin-left: 8px;
    }
  }
}
</style>