kboss/f/web-kboss/src/components/organization/index.vue

<template>
  <div class="myTree">
    <el-tree class="filter-tree" :data="treeData" :props="defaultProps" node-key="id" :default-expanded-keys="treeExpandId" :filter-node-method="filterNode" :default-expand-all="true" :show-checkbox="true" ref="tree">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="nameVal">{{ node.label }}</span>
        <span class="btnGroup">
          <el-tooltip class="item" effect="dark" content="添加同级节点" placement="bottom">
            <i @click.stop="() => append(node, data)"  v-if="node.level == 1" class="el-icon-circle-plus-outline"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加子级节点" placement="bottom">
            <i @click.stop="() => append(node, data)" class="el-icon-circle-plus-outline"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <i @click.stop="() => update(node, data)" class="el-icon-edit"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-popover placement="top" width="160" :ref="`popover-${data.id}`">
              <p>确认删除该节点吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popoverCancel">取消</el-button>
                <el-button type="primary" size="mini" @click="opoverSubmit">确定</el-button>
              </div>
              <i @click.stop="() => remove(node, data)" v-if="node.level != 1" slot="reference" class="el-icon-delete"></i>
            </el-popover>
          </el-tooltip>
        </span>
      </span>
    </el-tree>
    <el-dialog :title="editIndex == 1 ? '创建' : '编辑'" :visible.sync="dialogFormVisible">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="addForm.describe"></el-input>
        </el-form-item>
      </el-form>
      <div class="btnGroup" slot="footer">
        <el-button @click="resetForm('addForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确定</el-button>
      </div>

    </el-dialog>
    <!-- <el-drawer  :visible.sync="dialogFormVisible" :with-header="true" class="dialogFormVisible">

    </el-drawer> -->
  </div>
</template>

<script>
export default {
  name: 'organization',
  data () {
    return {
      dialogFormVisible: false,
      treeData: [
        {
          id: 1,
          name: 'xxxxxxxx有限公司',
          children: [
            {
              id: 2,
              name: 'xxxxxxxxx01分公司',
              children: [
                {
                  id: 3,
                  name: '认证A组织',
                },
                {
                  id: 4,
                  name: '认证B组织',
                },
              ],
            },
          ],
        },
      ],

      defaultProps: {
        children: 'children',
        label: 'name',
      },
      treeExpandId: [], //自己定义的用于接收tree树id的数组
      editIndex: 1, // 模态框editIndex = 1为新增 editIndex != 1为修改
      addForm: {
        name: '',
        describe: '',
      }, // 新增表单
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 新增或修改数据
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editIndex) {
            var msg = '添加'
          } else {
            var msg = '编辑'
          }
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    append (node, data) {
      this.addForm.parentname = data.name
      this.editIndex = 1
      this.dialogFormVisible = true
    },
    update (node, data) {
      this.addForm.parentname = node.parent.data.name
      this.editIndex = 0
      this.dialogFormVisible = true
    },
    remove (node, data) {
      let removeData = {}
    },
    tabHandleClick () { },
    popoverCancel (index, item) {

    },
    opoverSubmit () {

    },
  },

  mounted () { },
  watch: {
  },
}
</script>

<style lang="scss" scoped>
.myTree {
  padding: 12px;

  .el-tree {
    .el-tree-node__content {
      line-height: 30px;
      height: 30px;
      .nameVal {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }

      .custom-tree-node {
        .btnGroup {
          display: none;

          .item {
            margin-left: 5px;
          }

          .item:hover {
            color: #409eff;
          }
        }
      }
    }
    ::v-deep .el-tree-node__content:hover {
      background-color: rgba(38, 122, 248, 0.1) !important;
      .custom-tree-node {
        .btnGroup {
          display: inline-block;
        }
      }
    }
  }
}
</style>