|
|
@@ -1,10 +1,395 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div >jiliang</div>
|
|
|
+ <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">
|
|
|
+ <div class="mg-b-10">节点信息</div>
|
|
|
+ <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>
|
|
|
+ <div class="mg-b-10 mg-t-20">下级节点列表</div>
|
|
|
+ <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: 16px;
|
|
|
+ padding: 4px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
