# DgTree 树形控件

> 基于 elementUi 封装集成度更高的树形组件。

::: demo 组件 Tree 使用示例

```vue
<template>
  <div id="jobList">
    <el-row :gutter="24" style="margin: 0px;">
      <el-col :span="layoutLeft" style="padding: 0px">
        <div id="jobListTree">
          <!-- 调用树组件 -->
          <dg-tree
            apiCode="sysDictTree"
            root="PROC_TOPICAL"
            nodeKey="ROWCODE"
            pnodeKey="PARENTCODE"
            label="ROWNAME"
            :rootVal="true"
            :showCheckbox="false"
            :showScreen="true"
            @click="changeTopic"
            :defaultExpandAll="true"
            :expandOnClickNode="false"
            placeholder="输入关键字进行过滤"
          >
          </dg-tree>
        </div>
      </el-col>
      <el-col :span="layoutRight" style="padding: 0px">
        <div id="jobListDiv">
          <i
            :class="topicTreeVisible ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
            id="icon"
            @click="clickjobListDiv"
          ></i>
        </div>
        <div id="jobListTable" v-if="jobListVisible">
          <!-- <h3>任务配置</h3> -->
          <!-- 调用表格组件 -->
          <!-- <el-card :body-style="{padding:'15px'}" style="margin: 5px; box-shadow:none"> -->
          <div>
            <dg-table
              ref="jobListTable"
              apiCode="JobProcCfg"
              :height="getHeight"
              @selectionChange="selectJobList"
              :titleItems="titleItems"
              :toolbarItems="toolbarItems"
              :tableItems="tableItems"
            >
            </dg-table>
          </div>
          <!-- </el-card> -->
        </div>
      </el-col>
    </el-row>
    <!--    <el-drawer :wrapperClosable="false"-->
    <!--               v-if="drawerVisible"-->
    <!--               :modal="false"-->
    <!--               :title="drawerTitle"-->
    <!--               :visible.sync="drawerVisible"-->
    <!--               direction="rtl"-->
    <!--               size="50%"-->
    <!--               ref="drawer"-->
    <!--               id="drawer"-->
    <!--               :before-close="handleClose">-->
    <!--      <jobLog v-if="drawerContent === 'log'" :id='runJobId'></jobLog>-->
    <!--      <jobCfg :procedure="procedure" @freshData="getData" v-else></jobCfg>-->
    <!--    </el-drawer>-->
  </div>
</template>
<script>
export default {
  name: 'tooltipDemo',
  data() {
    return {
      layoutRight: 24,
      layoutLeft: 24,
      topicTreeVisible: true,
      jobListVisible: true,
      titleItems: [{ title: '任务配置', editer: 'text' }],
      toolbarItems: [
        { placeholder: '程序名', value: 'PROC_NAME', editer: 'input', style: 'width: 145px' },
        { placeholder: '中文名', value: 'PROC_CNNAME', editer: 'input', style: 'width: 145px' },
        // { placeholder: '触发方式', value: 'TRIGGER_WAY', editer: 'select', dimCode: 'DIM_JOB_TRIGGER_WAY', style: 'width: 145px', clearable: true },
        {
          placeholder: '程序状态',
          value: 'STATUS',
          editer: 'select',
          dimCode: 'DIM_JOB_PROC_STATUS',
          style: 'width: 145px',
          clearable: true,
        },
        // { placeholder: '程序周期', value: 'PROC_CYCLE_TYPE', editer: 'select', dimCode: 'DIM_JOB_PROC_CYCLE', style: 'width: 145px', clearable: true },
        { title: '查询', editer: 'search', type: 'info', plain: true },
        // { title: '新建', editer: 'button', icon: 'el-icon-plus', type: 'success', plain: true, fn: this.handleCreate, disabled: true }
        { editer: 'add', fn: this.handleCreate },
      ],
      tableItems: [
        { type: 'selection', width: 50 },
        { field: 'PROC_NAME', title: '程序名称', width: '120', align: 'left' },
        { field: 'PROC_CNNAME', title: '中文名称', width: '120', align: 'left' },
        { field: 'STATUS', title: '状态', width: '70', render: this.renderState },
        // { field: 'SEX', title: '触发类型' },
        { field: 'GLUE_TYPE', title: '程序类型', width: '100' },
        { field: 'MODULE_CODE', title: '模块CODE', width: '150' },
        { field: 'PROC_CYCLE_TYPE', title: '周期' },
        { field: 'TRIGGER_WAY', title: '触发方式' },
        { field: 'CREATOR', title: '创建者' },
        { field: 'MODIFIER', title: '修改者' },
        { field: 'PDATE_TIME', title: '修改时间', width: '100' },
        {
          title: '操作',
          width: 170,
          fixed: 'right',
          actions: [
            {
              tooltip: '编辑',
              fn: this.editJobList,
              icon: 'el-icon-edit',
              type: 'success',
              plain: true,
              style: 'padding: 8px;border: none',
            },
            {
              tooltip: '复制',
              disabled: true,
              fn: '',
              icon: 'el-icon-document-copy',
              type: 'success',
              plain: true,
              style: 'padding: 8px;border: none',
            },
            {
              tooltip: '手工执行',
              fn: this.rowRunJobList,
              icon: 'el-icon-thumb',
              type: 'warning',
              plain: true,
              style: 'padding: 8px;border: none',
            },
            {
              tooltip: '删除',
              fn: this.deleteJobList,
              icon: 'el-icon-error',
              type: 'danger',
              plain: true,
              style: 'padding: 8px;border: none',
            },
            // { title: '操作', fn: this.otherOperation1, type: "success" }
          ],
        },
      ],
      // 勾选表格
      selectJobList(selection) {
        this.toolbarItems = selection.length
          ? [
              {
                title: `<span style="font-size:12px;font-family:PingFangSC-Medium,PingFangSC;font-weight:500;color:rgba(192,196,204,1);">已选中 ${selection.length} 个任务</span>`,
                editer: 'text',
              },
              {
                title: '批量生效',
                editer: 'button',
                icon: 'el-icon-success',
                type: 'success',
                plain: true,
                style: 'border:none',
                fn: this.validJobList,
              },
              {
                title: '批量失效',
                editer: 'button',
                icon: 'el-icon-remove',
                type: 'warning',
                plain: true,
                style: 'border:none',
                fn: this.invalidJobList,
              },
              {
                title: '手工执行',
                editer: 'button',
                icon: 'el-icon-thumb',
                type: 'warning',
                plain: true,
                style: 'border:none',
                fn: this.headRunJobList,
              },
              {
                title: '批量删除',
                editer: 'button',
                icon: 'el-icon-error',
                type: 'danger',
                plain: true,
                style: 'border:none',
              },
            ]
          : [
              { placeholder: '程序名', value: 'PROC_NAME', editer: 'input', style: 'width: 145px' },
              { placeholder: '中文名', value: 'PROC_CNNAME', editer: 'input', style: 'width: 145px' },
              // { placeholder: '触发方式', value: 'TRIGGER_WAY', editer: 'select', dimCode: 'DIM_JOB_TRIGGER_WAY', style: 'width: 145px', clearable: true },
              {
                placeholder: '程序状态',
                value: 'STATUS',
                editer: 'select',
                dimCode: 'DIM_JOB_PROC_STATUS',
                style: 'width: 145px',
                clearable: true,
              },
              {
                placeholder: '程序周期',
                value: 'PROC_CYCLE_TYPE',
                editer: 'select',
                dimCode: 'DIM_JOB_PROC_CYCLE',
                style: 'width: 145px',
                clearable: true,
              },
              { title: '查询', editer: 'search', type: 'info', plain: true },
              { editer: 'add', fn: this.handleCreate },
            ]
        this.jobListSelections = selection
      },
    }
  },
  methods: {
    changeTopic() {},
    clickjobListDiv() {
      this.topicTreeVisible = !this.topicTreeVisible
      console.log(this.topicTreeVisible)
    },
  },
  computed: {
    getHeight: function () {
      return 'calc(100vh - 100px)'
    },
  },
}
</script>
```

:::
`

## API

| 属性               | 说明                                              |   类型   |  默认值  |
| ------------------ | ------------------------------------------------- | :------: | :------: | --- |
| apiCode            | 数据库对应 apiCode                                | `String` |    -     |
| queryTerms         | apiCode 查询数据时的过滤条件                      | `String` |    -     |
| root               | 根节点名称                                        | `String` |    -     |
| nodeKey            | 节点 key                                          |          | `String` | -   |
| pnodeKey           | 父节点 key                                        | `String` |    -     |
| data               | 接口传来的数组                                    |  Array   |          |
| showCheckbox       | 是否显示多选小方框                                | Boolean  |          |
| placeholder        | 提示语，上方搜索框提示语                          |  String  |          |
| check              | 父组件使用 check 来接收已选中的所有数据组成的数组 | Boolean  |          |
| title              | 弹窗上方的名字                                    |  String  |          |
| showScreen         | 是否需要筛选框                                    | Boolean  |          |
| nodeclick          | 节点被点击时的回调                                |          |          |
| defaults           | 默认选中的数据 传 key 组成的数                    |  Array   |          |
| expandOnClickNode  | 是否在点击节点的时候展开或者收缩节点              | Boolean  |          |
| defaultExpandAll   | 是否默认展开                                      | Boolean  |          |
| renderContent      | 自定义节点内容                                    | Function |          |
| label              | 节点 label                                        |  String  |          |
| lazy               | 是否懒加载子节点，需与 load 方法结合使用          | Boolean  |          |
| load               | 加载子树数据的方法                                | Function |          |
| accordion          | 是否每次只打开一个同级树节点展开                  | Boolean  |          |
| defaultCheckedKeys | 默认选中的节点                                    |  Array   |          |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.9（2020-03-07）

- 完善文档