系统计量单元接口对接

src/views/measure/systemUnit.vue

@@ -4,7 +4,14 @@
     <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">
+          <el-tree 
+          v-if="ishowTree"
+          lazy :props="defaultProps" @node-click="getNodeDetail"  :load="loadNode" :expand-on-click-node="false"
+                highlight-current
+                node-key="id"
+                ref="tree"
+                :default-expanded-keys="defaultExpandedKeys"
+                :data="treeData">
             <span
                   class="custom-tree-node"
                   :class="data.moreShow?'show':''"
@@ -47,21 +54,20 @@
         <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>
+                <tbody>
+                  <tr>
+                    <td class="tit" width="10%">节点编码：</td>
+                    <td id="code">{{ nodeDetail.nodeCode||'' }}</td>
+                    <td class="tit" width="10%">节点名称：</td>
+                    <td id="name">{{ nodeDetail.nodeName||'' }}</td>
+                    <td class="tit" width="10%">节点类型：</td>
+                    <td id="nodeType">{{nodeDetail.nodeTypeName||""}}</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>
+                  <td id="workType">{{ nodeDetail.engineeringType||'' }}</td>
+                  <td class="tit" width="10%" >备注</td>
+                  <td id="nodeType" colspan="4">{{nodeDetail.remarks||""}}</td>
                 </tr>
               </tbody>
           </table>
@@ -74,23 +80,23 @@
             height="650"
             style="width: 100%">
             <el-table-column
-              prop="date"
+              prop="nodeCode"
               label="节点编号"
               width="180">
             </el-table-column>
             <el-table-column
-              prop="name"
+              prop="nodeName"
               label="节点名称"
            >
             </el-table-column>
             <el-table-column
             width="180"
-              prop="address"
+              prop="nodeName"
               label="节点类型">
             </el-table-column>
             <el-table-column
             width="180"
-              prop="address"
+              prop="engineeringType"
               label="工程类型">
             </el-table-column>
           </el-table>
@@ -99,36 +105,39 @@
     </div>
     <!-- 新增编辑节点 -->
     <el-dialog
-      title="新增节点"
+      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 label="节点编码" prop="nodeCode">
+            <el-input v-model="addForm.nodeCode"></el-input>
           </el-form-item>
-          <el-form-item label="节点名称" prop="name">
-            <el-input v-model="addForm.name"></el-input>
+          <el-form-item label="节点名称" prop="nodeName">
+            <el-input v-model="addForm.nodeName"></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="1"></el-option>
-              <el-option label="分部工程" value="2"></el-option>
-              <el-option label="分项工程" value="2"></el-option>
+              <el-option
+                v-for="item in dataTypeList"
+                :key="item.id"
+                :label="item.dictValue"
+                :value="item.dictKey"
+              ></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="工程类型"  prop="goType">
-            <el-input v-model="addForm.goType" disabled></el-input>
+          <el-form-item label="工程类型"  prop="engineeringType">
+            <el-input v-model="addForm.engineeringType" disabled></el-input>
           </el-form-item>
       
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="addForm.remark"></el-input>
+          <el-form-item label="备注" prop="remarks">
+            <el-input v-model="addForm.remarks"></el-input>
           </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>
+        <el-button type="primary" @click="saveAddform" :loading="saveNodeLoading">确 定</el-button>
       </span>
     </el-dialog>
 
@@ -146,7 +155,7 @@
       />
       <span slot="footer" class="dialog-footer">
         <el-button @click="sortTag = false,sortTag2=false">取 消</el-button>
-        <el-button type="primary" @click="editSort()">确 定</el-button>
+        <el-button type="primary" @click="editSort()" >确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -154,13 +163,17 @@
 
 <script >
 import ManualSorting from '@/components/WbsTree/ManualSorting'
+import { getLazyTree,add,getDetail,getChildList,updateNode,removeNode,getSameList,sortNode } from "@/api/measure/template.js";
+import { getDictionary } from "@/api/system/dict";
+
  export default {
   components:{
     ManualSorting
   },
     data() {
       return {
-        data: [{
+        ishowTree:true,
+        treeData: [{
           label: '系统计量单元',
           children: [
             {
@@ -183,9 +196,12 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
             },
         ]
         }],
+        defaultExpandedKeys:[],
         defaultProps: {
           children: 'children',
-          label: 'label'
+          label: 'nodeName',
+          isLeaf: 'notExsitChild'
+        
         },
         
       menuvisible:false,//右键菜单
@@ -201,46 +217,87 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
       menuKey:'',
       adddialogVisible:false,//新增节点
       addForm:{},
+      nodeDetail:{},
       addFormrules:{
-        name: [
+        nodeName: [
             { required: true, message: '请输入节点名称', trigger: 'blur' },
           ],
-          goType: [
+          engineeringType: [
             { 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: '单位工程'
-        },
-      
-      ]
+      tableData:[],
+      id:'',//模板ID
+      dataTypeList:[],//节点类型
+      saveNodeLoading:false
       };
     },
-    methods: {
-      handleNodeClick(data) {
+    created () {
+      this.init();
+   
+  },
+  methods: {
+    init(){
+      const {id} = this.$route.query;
+      this.id = id
+      this.getNodeTypelist()
+    },
+    //获取节点类型
+    getNodeTypelist () {
+      if (this.dataTypeList.length > 1) {
+        return;
+      }
+      getDictionary({
+        code: 'meter_node_type'
+      }).then((res) => {
+        res.data.data.forEach(element => {
+          element.dictKey = Number(element.dictKey)
+        });
+        this.dataTypeList = res.data.data;
+      })
+    },
+    //获取节点类型对应的名称
+    getNodeTypeName(type){
+      this.dataTypeList.forEach((ele)=>{
+        if(ele.dictKey==type){
+          this.nodeDetail.nodeTypeName=ele.dictValue
+        }
+      })
+    },
+    loadNode (node, resolve) {
+      let pid = 0;
+      if (node.level != 0) {
+        pid = node.data.id
+      }
+      getLazyTree({
+        templateId:this.id,
+        id:pid
+      }).then((res) => {
+        let arr = [];
+        if (Array.isArray(res.data.data)) {
+          arr = res.data.data;
+        }
+        return resolve(arr);
+      })
+    },
+    async getLazytree () {//冲洗获取wbs树
+      const { data: res } = await getLazyTree({id:0,templateId:this.id})
+      //console.log(res);
+      if (res.code == 200) {
+        this.treeData = res.data
+      }
+    },
+    handleNodeClick(data) {
         console.log(data);
-      },
+        this.curTreeData=data
+    },
           //树形控件菜单相关方法
-  mouseout(){
-      this.menuvisible=false
-  },
+    mouseout(){
+        this.menuvisible=false
+    },
     //展示菜单
   showMenu(e,data,node){
     e.preventDefault();
@@ -259,13 +316,15 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
           console.log('新增');
           this.menuKey='add'
           this.adddialogVisible=true
-          this.addForm.goType=node.parent.data.label
+          this.addForm.engineeringType=node.parent.data.engineeringType
+          this.addNodeHandle()
         }
         
         else if(item.key==='edit'){
           console.log('编辑',data,node);
           this.menuKey='edit'
           this.adddialogVisible=true
+          this.editNodeHandle()
           
         }
          else if(item.key==='del'){
@@ -279,12 +338,106 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
             this.paixuMD(data,node)
         }
     },
+    editNodeHandle(){
+      if(!this.curTreeData.id || !this.curTreeNode.id){
+        this.$message({
+          type: "warning",
+          message: "请先选择节点"
+        })
+        return;
+      }
+      this.addForm=this.curTreeData
+    },
+    addNodeHandle(){
+      if(!this.curTreeData.id ){
+        this.$message({
+          type: "warning",
+          message: "请先选择节点"
+        })
+        return;
+      }
+     
+   
+    },
+    
     handleAddClose(){
       this.adddialogVisible=false
     },
     saveAddform(){
       //新增节点确定
       this.adddialogVisible=false
+      if( this.menuKey==='add'){
+        this.$refs.ruleForm.validate(async (valid) => {
+          if(valid){
+            this.saveNodeLoading=true
+              this.addForm.parentId=this.curTreeData.id
+              this.addForm.ancestor=this.curTreeData.ancestor
+              this.addForm.templateId=this.curTreeData.templateId
+              let subobj=this.addForm
+              add(subobj).then(() => {
+                this.saveNodeLoading=false
+              this.updateTreeNewNode();
+              this.dialogVisible = false;
+              this.addForm={}
+              this.$message({
+                type: "success",
+                message: "新增成功!"
+              });
+            })
+          }
+        })
+     
+      }
+      if(this.menuKey==='edit'){
+        let subobj=this.addForm
+        updateNode(subobj).then(() => {
+        this.saveNodeLoading=false
+        this.updateTreeNewNode();
+        this.dialogVisible = false;
+        this.addForm={}
+        this.$message({
+          type: "success",
+          message: "修改成功!"
+        });
+        getDetail(subobj.id).then((res) => {
+          this.nodeDetail = Object.assign({}, res.data.data);
+        
+        })
+      })
+      }
+    },
+    getNodeDetail (data, node) {
+      let parentName = '';
+      if (node.parent.data) {
+        parentName = node.parent.data.title;
+      }
+      this.curTreeData = data;
+      this.curTreeNode = node;
+      this.curTreeData.parentName = parentName;
+      getDetail(data.id).then((res) => {
+        res.data.data.parentName = parentName;
+        this.tableData = [res.data.data];
+        this.nodeDetail = Object.assign({}, res.data.data);
+        this.getNodeTypeName(this.nodeDetail.nodeType)
+       
+      })
+      getChildList({id: this.curTreeData.id}).then((res)=>{
+        this.tableData=res.data.data
+      })
+      // this.updateNodeTable();
+
+      //获取节点展开路径
+      // this.getExpandedKeys(node);
+    },
+    updateTreeNewNode () {
+      let detail = (this.nodeDetail.parentId ? this.nodeDetail : this.curTreeData);
+      getLazyTree({id:detail.id,templateId:this.id}).then((res) => {
+        let node = this.$refs.tree.getNode(detail.parentId);
+        // node.isLeaf = false;
+        // node.isLeafByUser = false;
+        //console.log(node)
+        this.$refs.tree.updateKeyChildren(detail.id, res.data.data)
+      })
     },
     //排序
     handleSortClose(){
@@ -304,30 +457,46 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
           nodeName: sortArr[i].nodeName
         })
       }
-      // this.wbsTreeSort(newArr)
+      this.wbsTreeSort(newArr)
+    },
+    ids() {
+        let ids = [];
+        this.sort.forEach(ele => {
+          ids.push(ele.id);
+
+        });
+        return ids.join(",");
+      },
+    async wbsTreeSort () {//表单排序
+      const { data: res } = await sortNode({ids:this.ids()})
+      //console.log(res);
+      if (res.code == 200) {
+        this.sortTag = false
+        this.sortTag2 = false
+        this.ishowTree=false
+        setTimeout(() => {
+          this.ishowTree=true
+        }, 100);
+   
+      }
     },
     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)
+      this.findWbsTreeSameLevel(data.parentId)
+    },
+    async findWbsTreeSameLevel (parentId) {//查询当前节点的同级节点
+      const { data: res } = await getSameList({ parentId })
+      //console.log(res);
+      if (res.code === 200) {
+        this.sort = res.data
+      }
     },
     deleNode(data, node) {
       this.$confirm(
-        "此操作将删除节点【" + data.label + "】, 是否继续?",
+        "此操作将删除节点【" + data.nodeName + "】, 是否继续?",
         "提示",
         {
           confirmButtonText: "确定",
@@ -336,17 +505,17 @@ import ManualSorting from '@/components/WbsTree/ManualSorting'
         }
       )
         .then(() => {
-          // removePrivateTreeNode(pid).then(() => {
-          //   this.$refs.tree.remove(node);
-          //   this.$message({
-          //     type: "success",
-          //     message: "删除成功!",
-          //   });
-          // });
+          removeNode(data.id).then(() => {
+            this.$refs.tree.remove(node);
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          });
         })
         .catch(() => {});
     },
-    }
+    },
   }
 </script>
 <style lang='scss' scoped>

src/views/measure/template.vue

@@ -81,6 +81,7 @@ export default {
       query: {},
     };
   },
+
   methods: {
     onLoad (page, params = {}) {
       this.loading = true;
@@ -107,7 +108,7 @@ export default {
         this.$router.push({
         path: '/measure/template',
         query: {
-         
+         id:row.id
         }
       })
     },