diantou/src_product/iam/audit/matters/template/audit-matters-modal.vue

<template>
  <a-modal
    ref="auditMattersModal"
    :body-style="bodyStyle"
    :title="title"
    :destroy-on-close="true"
    :visible="visible"
    :width="modalWidth"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div :class="$style.mattersDiv">
      <audit-matters-tree
        ref="auditMattersModalTree"
        :tree-data-type="treeDataType"
        top-node-text="审计事项"
        @treeSelect="treeSelect"
        @checkedKeys="checkedKeys"
      ></audit-matters-tree>
    </div>
  </a-modal>
</template>

<script>
import auditMattersTree from './audit-matters-tree'
import components from './_import-components/audit-matters-modal-import'
function checkIn(list, node) {
  let indexNum = -1
  list.forEach((item, index) => {
    if (item.id === node) {
      indexNum = index
    }
  })
  return indexNum
}
export default {
  name: 'AuditMattersModal',
  metaInfo: {
    title: 'AuditMattersModal',
  },
  components: {
    ...components,
    auditMattersTree,
  },
  props: {
    // 弹出窗标题
    title: {
      type: String,
      default: '请选择',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '700px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bodyStyle: {
        padding: 0,
      },
      treeDataType: '',
      checkednode: [],
    }
  },
  created() {},
  methods: {
    handleOk(e) {
      this.$parent.visible = !this.$parent.visible

      this.$refs.auditMattersModalTree.mmTree()
      // 获取选中的数据
      this.$emit('handleOk', this.$refs.auditMattersModalTree.newtree)
      // 根据选中的数据展示 左边的表单
    },
    handleCancel(e) {
      this.$parent.visible = !this.$parent.visible
    },

    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)
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.matters-div {
  height: 500px;
  margin: 10px 20px;
  :global(.ant-select) {
    width: 100%;
  }
}
</style>