diantou/src_product/iam/components/iam-audit-tree-table.vue

<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <iam-audit-listtree
        :key="key"
        :checkable="checkable"
        :draggable="draggable"
        :is-search="isSearch"
        :show-line="showLine"
        :selected-keys="defaultSelectedKeys"
        :top-node-text="topNodeText"
        :treeparams="treeparams"
        :default-expanded-keys="defaultSelectedKeys"
        :is-select-dep="isSelectDep"
        :dep-options="depOptions"
        @treeSelect="treeSelect"
        @depChanged="depChanged"
      ></iam-audit-listtree>
      <div :class="$style.rightcard">
        <a-card :class="$style.acard">
          <sd-data-table-ex
            :key="key"
            ref="dataTable"
            data-url="api/xcoa-mobile/v1/iam-tree-list/getList"
            :process-req="processReq"
            :form-id="formId"
            :page-id="pageId"
            :columns="columns"
            :show-selection="(item) => item.editAndDeleteAuth !== 0"
            :actions="actions"
            :search-fields="searchFields"
            :filter-expressions="expressions"
            @onChange="onChange"
            @recordSaved="onRecordSaved"
            @recordsDeleted="onRecordsDeleted"
          >
            <!-- 点击列插槽 -->
            <template slot="customCell" slot-scope="text, record">
              <slot name="customCell" :text="text" :record="record"></slot>
            </template>

            <!-- 详情表单 -->
            <template v-slot:form="{ model }" @saved="onRecordSaved">
              <slot :model="model" :parentId="parentId"></slot>
            </template>
          </sd-data-table-ex>
        </a-card>
      </div>
    </div>
  </div>
</template>

Z
<script>
import iamAuditListtree from './iam-audit-listtree.vue'
import components from './_import-components/iam-audit-tree-table-import'

export default {
  name: 'IamAuditTreeTable',
  metaInfo: {
    title: 'TreeTable模板',
  },
  components: {
    ...components,
    iamAuditListtree,
  },
  props: {
    // table展示列
    columns: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 按钮信息
    actions: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 默认选中节点
    selectedKeys: {
      type: Array,
      default: function() {
        return []
      },
    },
    // 是否开启搜索
    isSearch: {
      type: Boolean,
      default: false,
    },
    // 是否显示复选框
    checkable: {
      type: Boolean,
      default: false,
    },
    // 是否可以拖拽
    draggable: {
      type: Boolean,
      default: false,
    },
    // 是否显示连线
    showLine: {
      type: Boolean,
      default: false,
    },
    // 根节点名称
    topNodeText: {
      type: String,
      default: '根节点',
    },
    // 地址树接口数据源
    treeparams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 默认展开节点id
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return ['0']
      },
    },
    // 是否显示部门选择下拉框
    isSelectDep: {
      type: Boolean,
      default: false,
    },
    // 部门下拉框列表值
    depOptions: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 部门下拉框默认值
    defaultDepValue: {
      type: Array,
      default: () => {
        return []
      },
    },
    // table搜索key
    searchFields: {
      type: Array,
      default: () => {
        return []
      },
    },
    // table formID
    formId: {
      type: String,
      default: '',
    },
    // table pageId
    pageId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      key: 0,
      treeData: [],
      parentId: 0,
      parentName: '业务类型',
      parentObj: [{ id: '0', name: '业务类型' }],
      isDocType: '', // 是否公文类
      defaultSelectedKeys: ['0'],
      pageSize: 10, // 分页数量
      startPosition: 0, // 分页起始数
      expressions: [
        {
          dataType: 'str',
          name: 'parentId',
          op: 'eq',
          stringValue: 0,
        },
      ],
    }
  },
  mounted() {
    if (this.selectedKeys.length > 0) {
      this.defaultSelectedKeys = [this.defaultSelectedKeys]
    }
  },
  methods: {
    // 获取菜单树数据
    addTreeKey(data) {
      let result
      if (!data) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        const item = data[i]
        item.key = item.id
        if (item.children && item.children.length > 0) {
          result = this.addTreeKey(item.children)
        } else {
          result = this.addTreeKey(item.children)
        }
      }
      return result
    },

    // 处理用户要选择的数据
    mapCategoryItems(items) {
      return (items || []).map((item) => {
        // 不能选择当前节点的下级节点
        let isLeaf = item.leaf
        if (item.id === String(this.$refs.dataTable.getDetailModal().getFieldValue('parentId'))) {
          isLeaf = true
        }
        const result = {
          id: item.id,
          name: item.text,
          checkable: true,
          isLeaf,
        }
        return result
      })
    },

    // 选择上级分类后给对应的域赋值
    fnTreePicker(value) {
      if (value.length > 0) {
        this.$refs.dataTable.getDetailModal().setFieldValue('parentId', value[0].id)
        this.$refs.dataTable.getDetailModal().setFieldValue('parentName', value[0].name)
      } else {
        this.$refs.dataTable.getDetailModal().setFieldValue('parentId', '')
        this.$refs.dataTable.getDetailModal().setFieldValue('parentName', '')
      }
    },

    treeSelect(selectedKeys, info) {
      this.parentId = info.node.dataRef.id // 父级id
      this.parentName = info.node.dataRef.text // 父级名称
      this.parentObj = [{ id: info.node.dataRef.id, name: info.node.dataRef.text }]
      // 是否公文类
      this.isDocType = info.node.dataRef.props.isDoc
      this.defaultSelectedKeys = selectedKeys
      this.expressions.forEach((item) => {
        if (item.name === 'parentId') {
          item.stringValue = Number(info.node.dataRef.id)
        }
      })
      this.expressions = [...this.expressions]
      this.defaultSelectedKeys = selectedKeys
      this.parentId = Number(info.node.dataRef.id)
    },
    // 部门下拉框选择事件
    depChanged(value, info) {
      // console.log(value) // 选中的值
      // console.log(info.data.props) // 选中的下拉json
    },
    // 新建保存回调刷新树
    onRecordSaved() {
      this.key = this.key + 1
    },
    // 删除回调
    onRecordsDeleted() {
      this.key = this.key + 1
    },
    // 设置请求内容
    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 *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
      .acard {
        min-height: 100%;
      }
    }
  }
}
</style>