diantou/src_product/iam/audit/dataUphold/project-modal.vue

<template>
  <a-modal
    width="800px"
    title="项目列表"
    :visible="value"
    @cancel="$emit('change', false)"
    @ok="selectRole"
  >
    <a-transfer
      :data-source="mockData"
      :list-style="{
        width: '300px',
        height: '500px',
      }"
      show-search
      :target-keys="targetKeys"
      :render="(item) => item.title"
      @change="handleChange"
    />
  </a-modal>
</template>

<script>
import axios from 'axios'
import dataService from './data-config'
import { props } from '@chenfengyuan/vue-qrcode'
export default {
  model: { prop: 'value', event: 'change' },
  props: { value: Boolean },
  data() {
    return {
      mockData: [],
      targetKeys: [],
      roleList: [],
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.getProjectList()
      }
    },
  },
  methods: {
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys
    },
    getProjectList() {
      const params = {
        buttonExpressions: [],
        columns: 'projectTitle,projectCode,id,unitName',
        expressions: [],
        formId: 'iamAuditProject',
        maxResults: 9999,
        startPosition: 0,
      }
      dataService.projectList(params).then((res) => {
        this.roleList = res.data
        this.roleList.forEach((item) => (item.leadUnitName = item.unitName))
        this.mockData = res.data.map((item) => {
          return {
            key: item.id,
            title: item.projectTitle,
            description: item.projectCode,
            leadUnitName: item.unitName,
          }
        })
      })
    },
    selectRole() {
      const arr = []
      this.roleList.forEach((item) => {
        if (this.targetKeys.includes(item.id)) {
          arr.push(item)
        }
      })
      this.$emit('selectProject', arr)
      this.$emit('change', false)
    },
  },
}
</script>