diantou/src_product/iam/components/iam-audit-modal.vue

<template>
  <div>
    <a-modal
      ref="auditModal"
      :body-style="bodyStyle"
      :title="title"
      :destroy-on-close="true"
      :visible="visible"
      :width="modalWidth"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <!-- 列表 -->
      <sd-data-table-ex
        v-if="selectType === 'table'"
        ref="auditModalTable"
        data-url="api/xcoa-mobile/v1/iam-choose/getList"
        page-id=""
        form-id=""
        :pagination="{ pageSize: 5 }"
        :process-req="processReq"
        :filter-expressions="expressions"
        :check-type="checkType"
        :columns="columns"
        :search-fields="searchFields"
        show-selection
        @onChange="onChange"
      >
      </sd-data-table-ex>
      <!-- 树组件 -->
      <div v-if="selectType === 'tree'" :class="$style.treeDiv">
        <iam-audit-modaltree
          :single="single"
          :show-primary="false"
          :checkable="true"
          :top-node-text="topNodeText"
          :treeparams="treeparams"
          :default-expanded-keys="['0']"
          @treeSelect="treeSelect"
          @checkedKeys="checkedKeys"
        ></iam-audit-modaltree>
      </div>
    </a-modal>
  </div>
</template>

<script>
import iamAuditModaltree from './iam-audit-modaltree.vue'
import components from './_import-components/iam-audit-modal-import'

function checkIn(list, node) {
  let indexNum = -1
  list.forEach((item, index) => {
    if (item.id === node) {
      indexNum = index
    }
  })
  return indexNum
}

export default {
  name: 'IamAuditModal',
  metaInfo: {
    title: 'AuditModal',
  },
  components: {
    ...components,
    iamAuditModaltree,
  },
  props: {
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
    // 弹出窗模式  /table表格/tree树
    selectType: {
      type: String,
      default: 'table',
    },
    // 列表列内容
    columns: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 弹出窗标题
    title: {
      type: String,
      default: '请选择',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '50%',
    },
    // 树是否显示单选
    single: {
      type: Boolean,
      default: false,
    },
    // 配置文档ID
    treeparams: {
      type: Object,
      default: () => {
        return {
          configId: 0,
        }
      },
    },
    // 根节点名称
    topNodeText: {
      type: String,
      default: '根节点',
    },
    /**
     * 选择列表单选或者复选 add by zzb 20220224
     */
    checkType: {
      type: String,
      default: 'checkbox',
    },
  },
  data() {
    return {
      searchFields: ['title'],
      checkednode: [],
      bodyStyle: {
        padding: 0,
      },
      pageSize: 10, // 分页数量
      startPosition: 0, // 分页起始数
      expressions: [
        {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: 0,
        },
      ],
    }
  },
  mounted() {
    if (this.selectType !== 'tree') {
      this.bodyStyle.padding = 24
    }
  },
  methods: {
    handleOk(e) {
      this.$parent.visible = !this.$parent.visible

      if (this.selectType === 'table') {
        // 列表选择事件，返回选择的数据
        this.$emit(
          'listSelected',
          this.$refs.auditModalTable.getSelectedRowKeys(),
          this.$refs.auditModalTable.getSelectedRows()
        )
      } else {
        // 发布事件，用于父组件获取选择的节点
        this.$emit('getCheckNode', this.checkednode)
      }
    },
    handleCancel(e) {
      this.$parent.visible = !this.$parent.visible
      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)
      })
    },
    // 设置请求内容
    processReq(req) {
      // 获取查询内容
      const searchExp = req.data.expressions.find((item) => {
        return item.dataType === 'exps'
      })
      const searchText = searchExp?.expressionsValue[0]?.stringValue.replaceAll(/%/g, '')
      req.data = {
        configId: this.treeparams.configId,
        parentId: this.parentId,
        key: searchText ?? '',
        maxResults: this.pageSize,
        startPosition: this.startPosition,
      }
      return req
    },
    // 翻页操作
    onChange(pagination, filters, sorter) {
      this.pageSize = pagination.pageSize
      this.startPosition = (pagination.current - 1) * pagination.pageSize
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.tree-div {
  height: 350px;
  overflow: auto;
  width: 100%;
  :global(.ant-card) {
    width: 100%;
  }
}
</style>