初步完成关联清表

src/api/exctab/excelmodel.js

@@ -108,4 +108,13 @@ export const deleteExcelshu = (ids) => {
             ids,
         }
     })
+}
+
+//关联清表保存
+export const saveLinkTab = (params) => {
+    return request({
+        url: ' /api/blade-manager/exceltab/save-linkTab',
+        method: 'get',
+        params
+    })
 }

src/views/manager/projectinfo/tree.vue

@@ -298,14 +298,16 @@
     <!-- 关联清表 -->
     <el-dialog
       title="关联清表"
+      class="excelBox"
       :visible.sync="GLExcel"
-      width="30%"
+      width="500px"
       modal-append-to-body
       append-to-body
       :before-close="GLExcelMD"
     >
       <div>
         <el-select
+          style="width:400px;"
           v-model="GLExcelFrom.name"
           placeholder="请选择"
           @change="changetherr()"
@@ -318,17 +320,24 @@
           >
           </el-option>
         </el-select>
-        <el-scrollbar>
+        <el-scrollbar style="margin-top:20px;height:50vh;">
           <el-input
-            v-model="GLExcelFrom.search"
+            style="width:400px;"
+            v-model.trim="GLExcelFrom.search"
+            @input="searchInput"
             placeholder="请输入需要选择的内容"
           ></el-input>
           <el-tree
+            style="margin-top:10px;"
             :props="GLExcelProps"
             :load="loadNodess"
             lazy
             :data="exceldata"
+            node-key="id"
+            :default-checked-keys="xuanzhong"
+            accordion
             show-checkbox
+            @check-change="checkchange"
           >
           </el-tree>
         </el-scrollbar>
@@ -336,11 +345,13 @@
       <span
         slot="footer"
         class="dialog-footer"
+        style="display: flex;justify-content: center;align-items: center;"
       >
-        <el-button @click="GLExcel = false">取 消</el-button>
+        <el-button @click="GLExcelMD()">取 消</el-button>
         <el-button
+          style="margin-left:30px;"
           type="primary"
-          @click="GLExcel = false"
+          @click="saveLinkTab"
         >确 定</el-button>
       </span>
     </el-dialog>
@@ -1243,7 +1254,7 @@ import { findProjectTree as getAlltree } from "@/api/manager/projectinfo";
 import { getList as getAttchFromOriginalName } from "@/api/resource/attach";
 import { getDictionary } from "@/api/system/dict";
 import { mapGetters } from "vuex";
-import { getList, tabLazytreeAll } from '@/api/exctab/excelmodel'
+import { getList, tabLazytreeAll, saveLinkTab } from '@/api/exctab/excelmodel'
 export default {
   data () {
     return {
@@ -1251,6 +1262,7 @@ export default {
       loading: false,
       GLExcel: false,
       GLExcelFrom: {
+        id: "",
         name: '',
         search: '',//搜素框舒服的值
       },
@@ -1258,8 +1270,9 @@ export default {
       GLExcelProps: {
         label: 'name',
         children: 'children',
-        isLeaf: 'childrenlength'
+        isLeaf: 'hasChildren',
       },
+      xuanzhong: [],//选中值得ID
       exceldata: [],//清表模板
       //#endregion
 
@@ -1388,7 +1401,7 @@ export default {
       }
       this.curTreeData = data;
       this.curTreeData.parentName = parentName;
-      getDetail(data.id,this.id,this.projectid).then((res) => {
+      getDetail(data.id, this.id, this.projectid).then((res) => {
         res.data.data.parentName = parentName;
         this.tableData = [res.data.data];
         this.nodeDetail = Object.assign({}, res.data.data);
@@ -1447,7 +1460,7 @@ export default {
         this.editType = type;
       }
 
-      getDetail(data.id,this.id,this.projectid).then((res) => {
+      getDetail(data.id, this.id, this.projectid).then((res) => {
         let parentName = '';
         if (node.parent.data) {
           parentName = node.parent.data.title;
@@ -1458,7 +1471,7 @@ export default {
           this.nodeDetail = {
             parentId: res.data.data.id,
             parentName: parentName,
-            projectId:res.data.data.projectId
+            projectId: res.data.data.projectId
           };
         } else {
           this.nodeDetail = Object.assign({}, res.data.data);
@@ -1943,28 +1956,86 @@ export default {
       })
       console.log(res);
       if (res.code === 200 && res.msg === '操作成功') {
+        res.data.forEach(val => {
+          if (val.hasChildren) {
+            val.disabled = false
+          } else {
+            val.disabled = true
+          }
+        })
         this.exceldata = res.data
       }
     },
     Associationlist (scope) {//关联清表点击事件
+      console.log(scope.row);
       this.GLExcel = true
       this.getList({
         current: 1,
         size: 100000,
         parentId: 0
       })
+      this.GLExcelFrom.id = scope.row.id
     },
     changetherr () {//清表类型选择框change事件
-      if (this.GLExcelFrom.name) {
+      if (this.GLExcelFrom.name != "") {
         this.GLExcelFrom.search = ''
         this.tabLazytreeAll()
       }
     },
     GLExcelMD () {//弹框关闭事件
-
+      this.GLExcelFrom.name = ""
+      this.GLExcelFrom.search = ''
+      this.GLExcelFrom.id
+      this.xuanzhong = []
+      this.GLExcel = false
+    },
+    async loadNodess (node, resolve) {//check事件
+      console.log(node);
+      if (this.GLExcelFrom.name) {
+        console.log(node.data.id);
+        console.log(resolve);
+        const { data: res } = await tabLazytreeAll({
+          modeId: node.data.id,
+          name: '',
+        })
+        if (res.code === 200 && res.msg === '操作成功') {
+          res.data.forEach(val => {
+            if (val.hasChildren) {
+              val.disabled = false
+            } else {
+              val.disabled = true
+            }
+          })
+          resolve(res.data)
+        }
+      }
     },
-    loadNodess (node, resolve) {//check事件
-      console.log(node, resolve);
+    checkchange (data, checked,) {//节点选中回调
+      if (checked) {
+        this.xuanzhong = [data.id]
+      } else {
+        this.xuanzhong = []
+      }
+    },
+    searchInput () {//输入回调
+      window.clearTimeout(setTimeout22)
+      setTimeout22 = window.setTimeout(() => {
+        this.tabLazytreeAll()
+      }, 500)
+    },
+    async saveLinkTab () {
+      const { data: res } = await saveLinkTab({
+        exceTabId: this.GLExcelFrom.id,
+        tabId: this.xuanzhong[0]
+      })
+      console.log(res);
+      if (res.code === 200) {
+        this.$message({
+          type: 'success',
+          message: '关联清表成功',
+        })
+        this.GLExcel = false
+      }
     },
     //#endregion
 
@@ -1998,4 +2069,9 @@ export default {
     display: block;
   }
 }
+.excelBox {
+  /deep/.el-dialog__body {
+    padding: 20px;
+  }
+}
 </style>

vue.config.js

@@ -30,6 +30,7 @@ module.exports = {
                 target: 'http://192.168.31.96',
                 // target: 'http://192.168.31.121',
                 // target: 'http://192.168.3.13',
+                // target: 'http://192.168.31.96',
                 //远程演示服务地址,可用于直接启动项目
                 //target: 'https://saber.bladex.vip/api',
                 ws: true,