diantou/src_product/iam/components/picker/audit-picker-users-by-group.vue

<template>
  <div>
    <a-card :class="$style.tree" bordered size="small">
      <a-input-search slot="title" v-model="searchValue" placeholder="搜索" @search="onSearch" />
      <a-checkbox slot="extra" v-model="isContainSub">含下级</a-checkbox>
      <AuditGroupTree
        :root-node="rootNode"
        :hierarchical="hierarchical"
        @update:selectedKeys="handleTreeSelect"
      />
    </a-card>
    <sd-picker-source-lazy-list
      v-if="key"
      :key="listKey + isContainSub"
      v-bind="$attrs"
      :load-list-data="() => loadListData()"
      :show-search="false"
      v-on="$listeners"
    />
  </div>
</template>

<script>
import AddressBook from '@/addressbook/group-user-service'
import AuditGroupTree from './audit-group-tree.vue'
import components from './_import-components/audit-picker-users-by-group-import'
export default {
  name: 'AuditPickerUsersByGroup',
  metaInfo: {},
  components: {
    ...components,
    AuditGroupTree,
  },
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    rootNode: {
      type: [Object, Array],
      default: undefined,
    },
    hierarchical: {
      type: Boolean,
      default: undefined,
    },
    secretLevel: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      key: '',
      isContainSub: false,
      searchValue: '',
      listKey: '',
    }
  },
  methods: {
    handleTreeSelect(key) {
      this.key = key[0]
      this.listKey = this.key
      this.searchValue = ''
    },
    loadListData() {
      if (this.searchValue) {
        return AddressBook.usersQuery(this.searchValue, [], {
          secretLevel: this.secretLevel,
          hierarchical: this.hierarchical,
        })
      }
      if (this.key) {
        return AddressBook.getChildNodes(this.key, {
          type: 'U',
          isContainSub: this.isContainSub,
          secretLevel: this.secretLevel,
          hierarchical: this.hierarchical,
        })
      }
    },
    onSearch() {
      this.listKey = this.searchValue
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tree {
  position: absolute;
  top: -41px;
  left: -285px;
  width: 275px;
  height: calc(100% + 42px);
  :global(.ant-card-body) {
    height: calc(100% - 42px);
    padding: 0;
    > div {
      height: 100%;
      overflow: auto;
    }
  }
  :global(.ant-card-head > .ant-card-head-wrapper > .ant-card-head-title) {
    padding: 0;
    margin-right: 4px;
  }
}
</style>