diantou/src_product/iam/audit/riskLibrary/audit-picker-group.vue

<template>
  <div>
    <a-select v-model="onKeys">
      <a-select-option v-for="(item, i) in mockData" :key="i" :value="item.key">{{
        item.title
      }}</a-select-option>
    </a-select>
    <a-modal v-model="show" :title="title" @ok="onSubmit" @canplay="colseModel">
      <a-transfer
        :data-source="mockData"
        show-search
        :filter-option="filterOption"
        :target-keys="targetKeys"
        :render="(item) => item.title"
        :list-style="{ width: '45%', height: '500px' }"
      ></a-transfer>
    </a-modal>
  </div>
</template>

<script>
import AuditRiskbraryService from './riskLibrary'
export default {
  name: 'AuditPickerGroup',
  metaInfo: {
    title: 'AuditPickerGroup',
  },

  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    value: {
      type: [Array],
      default: () => [],
    },
    icon: {
      type: String,
      default: '',
    },
    rootNode: {
      type: [Object, Array],
      default: undefined,
    },
    hierarchical: {
      type: Boolean,
      default: false,
    },
    secretLevel: {
      type: String,
      default: '',
    },
    single: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      // 数据源
      mockData: [],
      targetKeys: [],
      // 点击确定时, 传递的数据
      onKeys: [],
    }
  },

  methods: {
    open() {
      AuditRiskbraryService.getGroups().then((res) => {
        this.mockData = []
        res.data.data.map((item, i) => {
          this.mockData.push({
            key: item.code,
            title: item.name,
            description: item.description,
          })
        })
        // 设置默认值，默认为当前用户所在组织
        this.show = true
      })
    },
    close() {
      this.show = false
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    onSubmit() {
      this.onKeys = this.targetKeys
      this.$emit('change', this.onKeys)
      this.show = false
      this.onKeys = []
      this.targetKeys = []
    },
    colseModel() {
      this.show = false
      this.onKeys = []
      this.targetKeys = []
    },
    onChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>