diantou/src_product/iam/components/ic-picker/tree/iam-item-select.vue

<template>
  <a-modal
    :body-style="bodyStyle"
    title="请选择"
    :destroy-on-close="true"
    :visible="visible"
    width="700px"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div :class="$style.selectDiv">
      <iam-item-tree v-bind="$props" v-on="$listeners" @checking="checking"></iam-item-tree>
    </div>
  </a-modal>
</template>

<script>
import iamItemTree from './iam-item-tree.vue'
import components from './_import-components/iam-item-select-import'
function checkIn(list, node) {
  let indexNum = -1
  list.forEach((item, index) => {
    if (item.id === node) {
      indexNum = index
    }
  })
  return indexNum
}
export default {
  name: 'IamItemSelect',
  metaInfo: {
    title: '选择审计事项',
  },
  components: {
    ...components,
    iamItemTree,
  },
  props: {
    /**
     * <p>获取数据的回调，获取根节点时，parentId为undefined</p>
     * <pre>(parentId,parent) => childrenItems</pre>
     */
    loadTreeData: {
      type: Function,
      required: true,
    },
    selectclick: {
      type: Function,
      default: null,
    },
    versionId: {
      type: String,
      default: '',
    },
    orgId: {
      type: String,
      default: '',
    },
    orgName: {
      type: String,
      default: '',
    },
    selecttype: {
      type: String,
      default: 'control',
    },
    types: {
      type: String,
      default: 'NK',
    },
    /**
     * 根节点{code:'200000',name:'西安分公司'}
     */
    rootNode: {
      type: [Object, Array],
      default: undefined,
    },
    /**
     * <p>搜索数据的回调</p>
     * <pre>(searchText) => items</pre>
     * @since 8.0.2
     */
    searchTreeData: {
      type: Function,
      default: undefined,
    },
    /**
     * 默认展开指定的树节点
     * @since 8.0.7
     */
    defaultExpandedKeys: {
      type: Array,
      default: undefined,
    },
    moduleId: {
      type: String,
      default: undefined,
    },
    isAbandonment: {
      type: String,
      default: 'NO',
    },
    optionValue: {
      type: String,
      default: 'id',
    },
    /**
     * @ignore
     */
    optionLabel: {
      type: String,
      default: 'name',
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: true,
      bodyStyle: {
        padding: 0,
      },
      treeDataType: '',
      checkednode: [],
    }
  },
  created() {},
  methods: {
    checking(flag) {
      if (flag) {
        this.confirmLoading = true
      } else {
        this.confirmLoading = false
      }
    },
    handleOk(e) {
      this.visible = !this.visible
      // 获取选中的数据
      this.$emit('sxhandleOk', this.$refs.auditMattersModalTree.newtree)
      // 根据选中的数据展示 左边的表单
    },
    handleCancel(e) {
      this.$emit('handleCancel')
    },

    treeSelect(allCheckNode, checkNode) {
      // 判断当前点击节点是否为选中状态
      const indexNum = checkIn(this.checkednode, checkNode.node.dataRef.id)
      if (indexNum === -1) {
        this.checkednode.push(checkNode.node.dataRef)
      } else {
        this.checkednode.splice(indexNum, 1)
      }
    },
    checkedKeys(checkNode, allCheckNode) {
      this.checkednode = []
      allCheckNode.forEach((item) => {
        this.checkednode.push(item.data.props)
      })
    },
    openPicker() {
      this.visible = !this.visible
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.select-div {
  height: 500px;
  padding: 10px 20px;
}
</style>