foton-laws-system-front/src/components/ProjectRelatedPersonnel/index.vue

<!--项目相关人员-->
<template>
  <div class="tree__wrapper">
    <div class="item">
      <dept-tree
        treeDivId="selectTree"
        ref="selectTree"
        showUser
        allDept
        deptSelect
        style="width: 200px;height: 500px;overflow: auto"
        :editable="false"
        @treeClick="handleSelectTreeClick"
        @treeDblClick=""
      >
      </dept-tree>
    </div>

    <div class="item btn__wrapper">
      <el-button
        type="primary"
        icon="el-icon-arrow-right"
        @click="toResultTree"
      ></el-button>
    </div>

    <div class="item">
      <laws-tree2
        treeDivId="resultTree"
        ref="resultTree"
        :zNodes="resultNodes"
        :autoSelect="false"
        deptSelect
        style="width: 200px;height: 500px;overflow: auto"
        editable
        showRMenu
        :show-r-menu-add="false"
        :show-r-menu-copy="false"
        @treeClick="handleResultTreeClick"
        @treeDblClick=""
        @treeRemove="handleResultTreeRemove"
        @treeEdit="handleResultTreeEdit"
      >
      </laws-tree2>
    </div>

    <el-dialog
      title="编辑角色"
      :visible.sync="editNodeDialogVisible"
      destroy-on-close
      append-to-body
      width="60%">
      <el-form ref="editNode" :model="editNodeForForm" class="label-input-form" label-width="130px">
        <el-formItem label="角色" prop="title" class="add-form-item">
          <el-input v-model="editNodeForForm.wxRole" placeholder="请输入角色"></el-input>
        </el-formItem>
      </el-form>
      <div slot="footer" class="demo-drawer-footer">
        <el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="editNodeDialogSubmit">确定</el-button>
        <el-button class="common-button-default" icon="el-icon-close" @click="editNodeDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import lawsTree2 from '@/components/lawsTree/index2'

let wxId = 0

const rootNode = {
  id: '-1',
  name: '根节点',
  nativeName: '根节点',
  icon: 'static/images/dept.png',
  wxId: -1,
  type: 'root',
  wxRole: ''
}

const checkNodeTypeByIcon = (data) => {
  const matcher = {
    'static/images/dept.png': 'dept',
    'static/images/user.png': 'user'
  }
  return data.type || matcher[data.icon]
}

const checkNodeIconByType = (data) => {
  const matcher = {
    'dept': 'static/images/dept.png',
    'user': 'static/images/user.png'
  }
  return data.icon || matcher[data.type]
}

const resolveNameByType = (data) => {
  if (data.type === 'dept') {
    return data.orgName
  } else {
    return data.userName
  }
}

export default {
  name: 'index',
  components: {
    lawsTree2
  },
  props: ['value'],
  data() {
    return {
      selectNode: {}, // 左侧选中的节点数据
      resultNode: {}, // 右侧选中的节点数据
      resultNodes: [], // 右侧树数据
      editNode: {},
      editNodeForForm: {},
      editNodeDialogVisible: false
    }
  },
  watch:{
    value(newValue, oldValue) {
      this.resolveValueToResultNodes(newValue)
    }
  },
  methods: {
    handleSelectTreeClick(treeId, treeNode) {
      this.selectNode = { ...treeNode }
    },

    handleResultTreeClick(treeId, treeNode) {
      this.resultNode = { ...treeNode }
    },

    toResultTree() {
      if (this.resultNode.id || this.resultNode.name) {
        // 判断是否为相同节点
        if (this.resultNode.id === this.selectNode.id) {
          this.$message.warning("请选择右侧其他不相同的节点")
          return
        }

        if (this.checkHasNode(this.selectNode.id, this.resultNode.id)) {
          this.$message.warning("右侧当前层级已存在相同节点")
          return
        }

        if (!this.selectNode.id && !this.selectNode.name) {
          this.$message.warning("请选择左侧节点")
          return
        }

        const treeNode = {
          id: this.selectNode.id,
          name: this.selectNode.name,
          nativeName: this.selectNode.name,
          icon: this.selectNode.icon,
          pId: this.resultNode.id,
          wxId: wxId++,
          type: checkNodeTypeByIcon(this.selectNode),
          wxRole: ''
        }
        this.$refs['resultTree'].addNode(treeNode)
        this.emitInput()
      } else {
        this.$message.warning("请选择右侧节点")
      }

    },

    checkHasNode(id, pId) {
      return this.resultNodes.some(item => item.pId === pId && item.id === id)
    },

    handleResultTreeRemove(treeId, treeNode) {
      const wxId = treeNode.wxId
      const findIndex = this.resultNodes.findIndex(item => item.wxId === wxId)
      if (findIndex > -1) {
        this.resultNodes.splice(findIndex, 1)
      }
      this.emitInput()
    },

    handleResultTreeEdit(treeId, treeNode) {
      const wxId = treeNode.wxId
      const findNode = this.resultNodes.find(item => item.wxId === wxId)
      if (findNode && findNode.type === 'user') {
        this.editNode = findNode
        this.editNodeForForm = { ...findNode }
        this.editNodeDialogVisible = true
      } else {
        this.$message.warning('当前节点不可编辑角色')
      }
    },

    editNodeDialogSubmit() {
      this.editNode.wxRole = this.editNodeForForm.wxRole
      // 用户的显示需要  用户名+角色
      let nameAndRole = this.editNode.nativeName
      if (this.editNode.type === 'user' && this.editNode.wxRole) {
        nameAndRole = this.editNode.nativeName + ' - ' + this.editNode.roleName
      }
      this.editNodeDialogVisible = false

      this.emitInput()
    },

    emitInput() {
      const list = [...this.resultNodes]
      // 去掉根节点
      list.shift()
      const result = list.map(item => {
        const pId = item.pId === '-1' ? '' : item.pId
        return {
          tsId: item.id,
          pid: pId,
          roleName: item.wxRole,
          type: item.type,
          orgName: item.type === 'dept' && item.nativeName || null,
          userName: item.type === 'user' && item.nativeName || null
        }
      })
      this.$emit('input', result)
    },

    resolveValueToResultNodes() {
      const value = this.value || []
      const result = value.map(item => {
        const pId = item.pid || '-1'
        const name = resolveNameByType(item)
        // 用户的显示需要  用户名+角色
        let nameAndRole = name
        if (item.type === 'user' && item.roleName) {
          nameAndRole = name + ' - ' + item.roleName
        }
        return {
          id: item.tsId,
          nativeName: name,
          name: nameAndRole,
          icon: checkNodeIconByType(item),
          pId: pId,
          wxId: item.id || wxId++,
          type: item.type,
          wxRole: item.roleName || ''
        }
      })

      this.resultNodes = [rootNode, ...result]

    }
  },
  created() {
    this.resolveValueToResultNodes()
  }
}
</script>

<style lang="less" scoped>
  .tree__wrapper {
    display: flex;
    justify-content: space-between;

    .item {
      flex: 1 1 200px;
    }

    .btn__wrapper {
      flex: 0 0 60px;
      padding: 10px;
      align-self: center;
    }
  }

</style>