saber/src/views/measure/systemUnit.vue

<!--  -->
<template>
  <div style="height: 100%" class="flexStar">
    <div class="boxswai" style="width: 26%; padding-left: 0px">
      <div class="boxnei" style="display: flex; flex-direction: column">
        <div style="overflow: auto; flex: 1;height:500px">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
            <span
                  class="custom-tree-node"
                  :class="data.moreShow?'show':''"
                  slot-scope="{ node, data }"
                  @mouseleave="mouseout(data)"
                >
                  <div class="pd-r-20">
                    {{ node.label }}
                    <div class="normal-black">
                         <div >
                            <el-link :underline="false">
                              <i
                                class="el-icon-menu "
                                @click="showMenu($event,data, node)"
                              ></i>
                            </el-link>
                              <ul
                                v-show="menuvisible"
                                :style="{ left: menuleft + 'px', top: menutop + 'px' }"
                                class="contextmenu"
                              >
                                <li v-for="item in menusData" :key="item"  @click="menuClick($event,item,data)" > 
                                      <i :class="item.icon"></i>{{item.label}}
                                </li>
                               
                              </ul>
                        </div>
                    </div>
                  </div>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div
      class="boxswai"
      style="width: 74%; padding-left: 0px; padding-right: 0px"
    >
      <div class="boxnei">
        <h4 class="mg-b-10">节点信息</h4>
        <form class="form-horizontal">
            <table class="table-form" style="width: 100%;">
                <tbody><tr>
                  <td class="tit" width="10%">节点编码：</td>
                  <td id="code"></td>
                  <td class="tit" width="10%">节点名称：</td>
                  <td id="name">竣工文件</td>
                  <td class="tit" width="10%">节点类型：</td>
                  <td id="nodeType">分部工程</td>
                </tr>
                <tr>
                  <td class="tit" width="10%">工程类型：</td>
                  <td id="workType">总则</td>
                  <td class="tit" width="10%">显示类型：</td>
                  <td id="type">全部</td>
                  <td class="tit" width="10%">备注：</td>
                  <td id="remark"></td>
                </tr>
              </tbody>
          </table>
        </form>
        <h4 class="mg-b-10 mg-t-20">下级节点列表</h4>
        <div class="tableclass">
            <el-table
            :data="tableData"
            border
            height="650"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="节点编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="节点名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="节点类型">
            </el-table-column>
            <el-table-column
              prop="address"
              label="工程类型">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 新增编辑节点 -->
    <el-dialog
      title="新增节点"
      :visible.sync="adddialogVisible"
      width="30%"
      append-to-body
      :before-close="handleAddClose">
      <el-form label-position="left" label-width="80px" :model="addForm" ref="ruleForm"  :rules="addFormrules">
          <el-form-item label="节点编码" prop="code">
            <el-input v-model="addForm.code"></el-input>
          </el-form-item>
          <el-form-item label="节点名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="节点类型" prop="nodeType">
            <el-select v-model="addForm.nodeType" placeholder="请选择节点类型" style="width: 100%;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工程类型"  prop="goType">
            <el-select v-model="addForm.goType" placeholder="请选择工程类型" style="width: 100%;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示类型" prop="showType">
            <el-select v-model="addForm.showType" placeholder="请选择显示类型" style="width: 100%;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddform">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 排序弹窗 -->
    <el-dialog
      title="节点排序"
      :visible.sync="sortTag"
      append-to-body
      width="30%"
      :before-close="handleSortClose">
      <ManualSorting
        v-if="sortTag2"
        @bianhua='bianhua()'
        :sort='sort'
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="sortTag = false,sortTag2=false">取 消</el-button>
        <el-button type="primary" @click="editSort()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script >
import ManualSorting from '@/components/WbsTree/ManualSorting'
 export default {
  components:{
    ManualSorting
  },
    data() {
      return {
        data: [{
          label: '系统计量单元',
          children: [
            {
              label: '总则',
              children: [{
                label: '保险费'
              }]
            },
            {
              label: '路基工程',
              children: [{
                label: '清理与掘除'
              }]
            },
            {
              label: '路面工程',
              children: [{
                label: '底基层'
              }]
            },
        ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        
      menuvisible:false,//右键菜单
      menuleft:20,
      menutop:0,
      menusData:[
        {icon: 'el-icon-plus', label: '新增节点', key: "add"},
        {icon: 'el-icon-s-promotion', label: '编辑节点', key: "edit"},
        {icon: 'el-icon-sort', label: '排序节点', key: "sort"},
        {icon: 'el-icon-delete', label: '删除节点', key: "del"},
      
      ],//树组件操作菜单
      menuKey:'',
      adddialogVisible:false,//新增节点
      addForm:{},
      addFormrules:{
        name: [
            { required: true, message: '请输入节点名称', trigger: 'blur' },
          ],
          goType: [
            { required: true, message: '请输入工程类型', trigger: 'blur' }
          ]
      },
      sortTag2: false,
      sortTag: false,
      sort: [],
      tableData:[{
          date: '001',
          name: '路基工程',
          address: '单位工程'
        }, {
          date: '001',
          name: '路基工程',
          address: '单位工程'
        }, {
          date: '001',
          name: '路基工程',
          address: '单位工程'
        }, {
          date: '001',
          name: '路基工程',
          address: '单位工程'
        },
      
      ]
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
          //树形控件菜单相关方法
  mouseout(){
      this.menuvisible=false
  },
    //展示菜单
  showMenu(e,data,node){
    e.preventDefault();
    console.log(e,'e');
    var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
    var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
    this.menutop = y;
    this.menuleft = x;
    this.menuvisible=true

    },
    menuClick(e,item,data,node){
       this.menuKey=''
        e.preventDefault();
        if(item.key==='add'){
          console.log('新增');
          this.menuKey='add'
          this.adddialogVisible=true
        }
        
        else if(item.key==='edit'){
          console.log('编辑');
          this.menuKey='edit'
          this.adddialogVisible=true
        }
         else if(item.key==='del'){
            this.menuKey='del'
            console.log('删除');
            this.deleNode(data,node)
        }
        else if(item.key==='sort'){
            this.menuKey='sort'
            console.log('排序');
            this.paixuMD(data,node)
        }
    },
    handleAddClose(){
      this.adddialogVisible=false
    },
    saveAddform(){
      //新增节点确定
      this.adddialogVisible=false
    },
    //排序
    handleSortClose(){
      this.sortdialogVisible=false
    },
    bianhua () {
      this.sortTag2 = false
      this.$nextTick(() => {
        this.sortTag2 = true
      })
    },
    editSort () {//修改排序
      let sortArr = this.sort, newArr = []
      for (let i = 0; i < sortArr.length; i++) {
        newArr.push({
          id: sortArr[i].id,
          nodeName: sortArr[i].nodeName
        })
      }
      // this.wbsTreeSort(newArr)
    },
    paixuMD (data) {
      this.sortTag = true
      this.sortTag2 = true
      console.log(data,'data');
      this.sort=[
          {tableName: '二级 3-1',
            children: [{
              tableName: '三级 3-1-1'
            }]
          }, {
            tableName: '二级 3-2',
            children: [{
              tableName: '三级 3-2-1'
            }]
          }
      ]
          
      // this.findWbsTreeSameLevel(data.id)
    },
    deleNode(data, node) {
      this.$confirm(
        "此操作将删除节点【" + data.label + "】, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // removePrivateTreeNode(pid).then(() => {
          //   this.$refs.tree.remove(node);
          //   this.$message({
          //     type: "success",
          //     message: "删除成功!",
          //   });
          // });
        })
        .catch(() => {});
    },
    }
  }
</script>
<style lang='scss' scoped>
.custom-tree-node {
  .normal-black {
    display: none;
  }
  &:hover {
    .normal-black {
      display: inline-block;
    }
  }
  &.show .normal-black {
    display: inline-block;
  }
}
// 树形控件菜单样式
.contextmenu {
margin: 0;
background: #fff;
z-index: 1000;
position: fixed; //关键样式设置固定定位
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
.form-horizontal .table-form, .form-horizontal .table-form td {
    border: 1px solid #ddd;
    background-color: #fdfdfd;
    font-size: 14px;
    padding: 4px;
}

</style>