organ.vue

<template>
  <div class="oran-wrapper height100">
    <div class="org-tree-container">
      <div class="org-tree-box">
        <div class="org-tree-box-header">组织结构</div>
        <div class="org-tree-box-content">
          <div class="tree-search party-form">
            <el-input
              placeholder="请输入组织结构名称"
              v-model="name"
            >
             <i
              slot="suffix" 
              class="el-input__icon el-icon-search"
              @click="getOrgTree()">
              </i>
            </el-input>
            <div class="f0">
              <el-tooltip content="新建" placement="top">
                <i class="icon-add party-icon-20"  @click="handleAdd('add')"/>
              </el-tooltip>
              <el-tooltip content="导入" placement="top">
                <i class="icon-import party-icon-20"  @click="handleImport('import')"/>
              </el-tooltip>
            </div>
          </div>
          <div class="tree-content">
            <el-tree
              class="org-tree"
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <div
                class="custom-tree-node"
                slot-scope="{ node, data }"
                :class="'tree-node-level' + data.level"
              >
                <i class="icon-org" v-if="data.level === 1"></i>
                <span>{{ node.label }}</span>
              </div>
            </el-tree>
          </div>
        </div>
      </div>
    </div>
    <div class="org-detail">
      <div class="org-detail-panel-box">
        <span class="title">{{ currentInfo.name }}</span>
        <div class="icon-group">
          <i class="icon-edit party-icon-24" @click="handleEdit()"> </i>
          <i class="icon-del party-icon-24" @click="handleDel()"> </i>
        </div>
      </div>
      <div class="org-detail-panel-box-content">
        <div class="page-tip">
          <p class="page-tip-title">页面说明:</p>
          <p class="page-tip-des">
            点击相应的机构名称，可查看该机构的详细信息。可新增机构、删除机构及批量导入机构信息。新增机构中“*”为必填项
          </p>
        </div>
        <el-form label-position="top" :inline="true">
          <el-form-item label="上级机构" class="w50">
            <span></span>
          </el-form-item>
          <el-form-item label="下级机构" class="w50">
            <span>
             
            </span>
          </el-form-item>
          <el-form-item label="地理位置" class="w100">
            <span>
              {{currentInfo.remarks}}
            </span>
          </el-form-item>
          <el-form-item label="备注信息" class="w100">
            <span>
                {{currentInfo.remarks}}
            </span>
          </el-form-item>
        </el-form>
      </div>
      <org-add 
        ref="orgAdd" 
        :parentId="currentInfo.id" 
        :level="currentInfo.level"
        @success="getOrgTree()"
      /> 
      <org-edit ref="orgEdit" :currentInfo="currentInfo"/> 
    </div>
  </div>
</template>
<script>
import {orgAdd, orgEdit} from './orgDialog'
export default {
  data() {
    return {
      name: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentId:'',
      currentInfo:{},
    };
  },
  components:{orgAdd,orgEdit},
  mounted(){
    this.getOrgTree()
  },
  methods: {
    handleNodeClick(data) {
      this.currentId = data.id
      this.getInfoById()
    },
    // 获取机构数详情
    getInfoById(){
      this.$https({
         method: "get",
         url: "organ/getById",
         authType: this.backToken,
      },{id:this.currentId}).then(res=>{
        if(res.status == 200){
          if(res.data.resultCode == 200){
            if(res.data.data){
                this.currentInfo = res.data.data
            }else{
               this.currentInfo = {}
            }
          }else{
            this.currentInfo = {}
          }
        }else{
          this.currentInfo = {}
        }
      }).catch(err=>{
         console.log(res)
      })
    },
    // 获取机构树
    getOrgTree(){
      this.$https({
        method: "get",
        url: "organ/getTree",
        authType: this.backToken,
      },{name:this.name}).then(res=>{
        if(res.status == 200){
          if(res.data.resultCode == 200){
             this.data = res.data.data
          }else{
            this.data = []
          }
        }else{
          this.data = []
        }
      }).catch(err=>{
        console.log(res)
      })
    },
    // 新增或者导入 之前判断是否选择父级
    handleOperate(type){
      if(JSON.stringify(this.currentInfo) === "{}"){
        this.currentId.level = 1
        this.currentInfo.id = '0'
      }
      if(type === 'add'){
        this.handleAdd()
      }
      if(type === 'import'){
         this.handleImport()
      }
    },
    // 新增
    handleAdd(){
      this.$refs.orgAdd.dialogVisible = true
    },
    //导入
    handleImport(){

    },
    handleEdit(){


    },
    // 删除
    handleDel(){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delAction()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    delAction(){
       this.$https({
         method: `delete?id=${this.currentId}`,
         url: "organ/delete",
         authType: this.backToken,
      }).then(res=>{
        if(res.status == 200){
          if(res.data.resultCode == 200){
            this.$message({
              type:'success',
              message:res.data.message
            })
            this.getOrgTree()
          }else{
            this.$message.error(res.data.message)
          }
        }else{
          this.$message.error(res.data)
        }
      }).catch(err=>{
         console.log(err)
      })
    }
  },
};
</script>
<style lang="less" scoped>
.oran-wrapper {
  display: flex;
  .org-tree-container {
    width: 420px;
    padding-right: 20px;
    height: 100%;
    .org-tree-box {
      height: 100%;
      background: @party-white;
      border: 1px solid @party-white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
      .org-tree-box-header {
        height: 56px;
        line-height: 56px;
        background-color: @party-red;
        text-align: center;
        font-size: 16px;
        color: @party-white;
      }
      /deep/ .tree-search {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        .el-input__icon {
          width: 40px;
          font-size: 20px;
          color: @party-btn-color;
        }
        .icon-import {
          margin-left: 10px;
        }
      }
      .org-tree-box-content {
        padding: 20px;
        height: calc(100% - 56px);
        .tree-content{
          height: calc(100% - 60px);
          overflow-y: auto;
        }
      }
    }
  }
  .org-detail {
    width: calc(100% - 420px);
    height: 100%;
    background: @party-white;
    border: 1px solid @party-white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    .org-detail-panel-box {
      height: 64px;
      border-bottom: 1px solid @party-border-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      .title{
         font-size: 20px;
         font-weight: bold;
         color: @font-color;
      }
      .icon-del {
        margin-left: 30px;
      }
    }
    .org-detail-panel-box-content {
      height: calc(100% - 64px);
      padding: 20px;
      overflow-y: scroll;
      .page-tip {
        width: 648px;
        height: 72px;
        background: @party-bg-gray;
        border-radius: 8px;
        color: @font-color;
        display: flex;
        padding: 16px 20px;
        margin: 0 auto 40px;
        .page-tip-title {
          width: 100px;
          font-weight: bold;
        }
      }
      .el-form {
        width: 648px;
        margin: 0 auto;
        .w50 { width: calc(50% - 15px); }
        .w100 { width: 100%;}
        .el-form-item__content{
          span{
            color: @font-color;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>