清表列表弹框接口调用

src/api/exctab/excelmodel.js

@@ -2,37 +2,77 @@ import request from '@/router/axios';
 
 //清表树
 export const tabLazytree = (params) => {
-        return request({
-            url: '/api/blade-manager/exceltab/tab-lazytree',
-            method: 'get',
-            params
-        })
-    }
-    //获取列表信息
+    return request({
+        url: '/api/blade-manager/exceltab/tab-lazytree',
+        method: 'get',
+        params
+    })
+};
+
+//获取列表信息
 export const detailExcel = (params) => {
-        return request({
-            url: '/api/blade-manager/exceltab/detail',
-            method: 'get',
-            params
-        })
-    }
-    // 添加
-    // export const addExcel = (row) => {
-    //         return request({
-    //             url: '/api/blade-manager/exceltab/submit',
-    //             method: 'post',
-    //             data: row
-    //         })
-    //     }
-    // 编辑
-export const editExcel = (row) => {
-        return request({
-            url: '/api/blade-manager/exceltab/submit',
-            method: 'post',
-            data: row
-        })
-    }
-    // 删除
+    return request({
+        url: '/api/blade-manager/exceltab/detail',
+        method: 'get',
+        params
+    })
+}
+
+//清表编辑 wbs 下拉框选择
+export const getWbsTypeList = (params) => {
+    return request({
+        url: '/api/blade-manager/exceltab/getWbsTypeList',
+        method: 'get',
+        params
+    })
+}
+
+//清表类型
+export const excelType = (params) => {
+    return request({
+        url: ' /api/blade-system/dict-biz/dictionary',
+        method: 'get',
+        params
+    })
+}
+
+//懒加载节点树形结构
+export const wbstree = (params) => {
+    return request({
+        url: ' /api/blade-manager/exceltab/lazy-tree',
+        method: 'get',
+        params
+    })
+}
+
+//wbs树获取表
+export const selectByNodeTable = (params) => {
+    return request({
+        url: ' /api/blade-manager/exceltab/selectByNodeTable',
+        method: 'get',
+        params
+    })
+}
+
+// 添加编辑清表
+export const Excelmodify = (row) => {
+    return request({
+        url: '/api/blade-manager/exceltab/sava-dataInfo',
+        method: 'post',
+        data: row
+    })
+}
+
+// 上传清表
+export const uploadExcel = (row) => {
+    return request({
+        url: '/api/blade-manager/exceltab/put-file-attach',
+        method: 'post',
+        data: row
+    })
+}
+
+// 删除
 export const deleteExcel = (row) => {
     return request({
         url: '/api/blade-manager/exceltab/remove',

src/views/exctab/excelmodel/excelmodel.vue

@@ -6,13 +6,13 @@
         <div class="box">
           <el-scrollbar>
             <basic-container>
+              <!-- 树结构 -->
               <avue-tree
                 :permission="getPermission"
                 :loading="loading"
                 :option="option"
                 :data="data"
                 @node-click="nodeClick"
-                v-model="form"
               >
                 <span
                   class="el-tree-node__label"
@@ -23,17 +23,18 @@
                     <!-- <span> {{ node}} </span> -->
                     <i
                       class="el-icon-circle-plus-outline marleft10"
-                      @click.stop="addExcel()"
+                      @click.stop="addExcel(data)"
+                      v-if="!data.fileUrl"
                     ></i>
                     <i
                       class="el-icon-edit marleft10"
                       @click.stop="editExcel()"
-                      v-if="!data.btss"
+                      v-if="data.fileUrl"
                     ></i>
                     <i
                       class="el-icon-delete marleft10"
-                      @click.stop="deleteExcel()"
-                      v-if="!data.btss"
+                      @click.stop="deleteExcelM(data)"
+                      v-if="data.fileUrl"
                     ></i>
                   </div>
                 </span>
@@ -49,6 +50,7 @@
       >
         <el-scrollbar>
           <basic-container>
+            <!-- 上传、删除、下载操作栏 -->
             <div class="rightHeader">
               <div class="excelname">
                 <div>名ssssssssssssssssssssssssssssss称</div>
@@ -95,7 +97,7 @@
               style="width: 370px;"
               size="small"
             >
-              <el-input v-model="excelForm.name"></el-input>
+              <el-input v-model="excelForm.nodeName"></el-input>
             </el-form-item>
             <el-form-item
               label="清表类型"
@@ -108,8 +110,10 @@
                 placeholder="请选择清表类型"
               >
                 <el-option
-                  label="区域一"
-                  value="shanghai"
+                  v-for="(val,index) in exceltypeData"
+                  :key="index"
+                  :label="val.dictValue"
+                  :value="val.id"
                 ></el-option>
               </el-select>
             </el-form-item>
@@ -122,31 +126,35 @@
                 placeholder="请选择WBS模板"
                 style="width: 96%;"
                 size="small"
+                @change="wbsmodelchange"
+                v-model="excelForm.wbsId"
               >
                 <el-option
-                  label="区域一"
-                  value="shanghai"
+                  v-for="(val,index) in wbsmodel"
+                  :key="index"
+                  :label="val.wbsName"
+                  :value="val.id"
                 ></el-option>
               </el-select>
             </div>
-            <!-- <avue-tree :permission="getPermission"
-                       :loading="loading"
-                       :option="option"
-                       :data="data"
-                       @node-click="nodeClick"
-                       v-model="form">
-              <span class="el-tree-node__label"
-                    slot-scope="{ node, data }">
-                <div>
-                  <span> {{ data.name }} </span>
-                </div>
-              </span>
-              <template slot-scope="scope"
-                        slot="menu">
-                <div class="avue-tree__item"
-                     @click.native="tip(scope.node, scope.data)">自定义按钮</div>
-              </template>
-            </avue-tree> -->
+            <div class="leftscroll">
+              <avue-tree
+                :permission="getPermission"
+                :loading="loading"
+                :option="option2"
+                :data="wbsdata"
+                @node-click="nodeClickExcel"
+              >
+                <span
+                  class="el-tree-node__label"
+                  slot-scope="{ node, data }"
+                >
+                  <div>
+                    <span> {{ data.deptName }} </span>
+                  </div>
+                </span>
+              </avue-tree>
+            </div>
           </div>
           <template>
             <table
@@ -162,14 +170,19 @@
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <td>1</td>
+                <tr
+                  v-for="(val,index) in tableData"
+                  :key="index"
+                >
+                  <td>{{val.tableName}}</td>
                   <td style="text-align: center;height:30px;">
                     <el-button
+                      v-if="val.isLinkTable!=2"
                       type="info"
                       size="small"
                     >关联</el-button>
                     <el-button
+                      v-if="val.isLinkTable==2"
                       type="warning"
                       size="small"
                     >取消关联</el-button>
@@ -183,12 +196,13 @@
       <div class="btbox">
         <el-button
           size="mini"
-          @click="dialogTap = false"
+          @click="handleClose()"
         >取消</el-button>
         <el-button
           type="info"
           style="margin-left: 50px;"
           size="mini"
+          @click="saveExcel()"
         >确定</el-button>
       </div>
     </el-dialog>
@@ -196,7 +210,7 @@
 </template>
 
 <script>
-import { detailExcel, tabLazytree } from '@/api/exctab/excelmodel'
+import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel } from '@/api/exctab/excelmodel'
 export default {
   data () {
     return {
@@ -204,38 +218,39 @@ export default {
       option: {
         filter: false,
       },
-      data: [
-        {
-          value: 0,
-          label: '一级部门',
-          children: [
-            {
-              value: 1,
-              label: '一级部门1',
-            }, {
-              value: 2,
-              label: '一级部门2',
-            }
-          ]
-        }, {
-          value: 3,
-          label: '二级部门',
-          children: [
-            {
-              value: 4,
-              label: '二级部门1',
-            }, {
-              value: 5,
-              label: '二级部门2',
-            }
-          ]
-        }
-      ],
-      //#region 
+      data: [],//清表模板
+      wbsdata: [],//wbs模板
+      //#region   弹框
       dialogTap: false,
+      option2: {
+        filter: false,
+        lazy: true,
+        treeLoad: (async (node, resolve) => {
+          if (node.data.hasChildren) {
+            const { data: res } = await wbstree({ parentId: node.data.id, wbsId: this.excelForm.wbsId, wbsType: this.excelForm.wbsType })
+            console.log(res);
+            if (res.code === 200) {
+              res.data.forEach((val) => {
+                if (!val.hasChildren) {
+                  val.leaf = true
+                }
+              })
+              return resolve(res.data)
+            }
+          } else {
+            return resolve([])
+          }
+        }),
+      },//弹框里面的wbs树
       excelForm: {
-
-      }
+        nodeName: '',//清表名称
+        parentId: '',//清表Id
+        wbsId: '',//WBS模板Id
+        wbsType: '',//WBS模板类型
+      },
+      tableData: [],//右侧表数据
+      exceltypeData: [],//清表类型枚举
+      wbsmodel: [],//wbs模板名称枚举
       //#endregion
     }
   },
@@ -245,47 +260,131 @@ export default {
       const { data: res } = await tabLazytree({ modeId })
       console.log(res);
       if (res.code === 200) {
-        res.data.forEach(value => {
-          value.btss = true
-        });
         this.data = res.data
       }
     },
-    async detailExcel () {
+    async detailExcel (id) {//获取列表信息
+      const { data: res } = await detailExcel({ id })
+      console.log(res);
+      if (res.code === 200) {
+        console.log(res.data.alias);
+      }
+    },
+    async getWbsTypeList () {//清表编辑 wbs 下拉框选择
+      const { data: res } = await getWbsTypeList()
+      console.log(res);
+      if (res.code === 200) {
+        this.wbsmodel = res.data
+      }
+    },
+    async excelType () {//清表类型
+      const { data: res } = await excelType({ code: 'sys_excltab_type' })
+      console.log(res);
+      if (res.code === 200) {
+        this.exceltypeData = res.data
+      }
+    },
+    async wbstree () {//wbs树懒加载
+      const { data: res } = await wbstree({ parentId: 0, wbsId: this.excelForm.wbsId, wbsType: this.excelForm.wbsType })
+      console.log(res);
+      if (res.code === 200) {
+        res.data.forEach((val) => {
+          if (!val.hasChildren) {
+            val.leaf = true
+          }
+        })
+        this.wbsdata = res.data
+      }
+    },
+    async selectByNodeTable (id, wbsType) {//wbs树获取表
+      const { data: res } = await selectByNodeTable({ id, wbsType })
+      console.log(res);
+      if (res.code === 200) {
+        this.tableData = res.data
+      }
+    },
+    async deleteExcel (ids) {//删除清表
+      const { data: res } = await deleteExcel({ ids })
+      console.log(res);
+      if (res.code === 200) {
 
+      }
+    },
+    async Excelmodify () {//编辑添加清表
+      const { data: res } = await Excelmodify()
+      console.log(res);
+    },
+    async uploadExcel () {//上传清表
+      const { data: res } = await uploadExcel()
+      console.log(res);
     },
     //#endregion
 
-    //#region  
-    nodeClick () {
-
+    //#region  外层左侧事件
+    nodeClick (data) {//外层树结构
+      console.log(data);
+      // this.detailExcel(data.id)
     },
     editExcel () {//编辑
       console.log(111);
     },
-    addExcel () {//添加
+    addExcel (data) {//添加
+      this.excelForm.parentId = data.id
       this.dialogTap = true
     },
-    deleteExcel () {//删除
+    deleteExcelM (data) {//删除
+      const _that = this
       this.$confirm('确定将选择数据删除?', '', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'error'
-      }).then(() => {
+      }).then(async () => {
+        await _that.deleteExcel(data.id)
       }).catch(() => {
       });
     },
+    //#endregion
+
+    //#region 弹框属性
     handleClose () {//关闭弹框触发事件
+      this.excelForm = {
+        nodeName: '',//清表名称
+        parentId: '',//清表Id
+        wbsId: '',//WBS模板Id
+        wbsType: '',//WBS模板类型
+      }
+      this.wbsdata = []  //wbs树数据
+      this.tableData = []//弹框table数据
+      this.dialogTap = false
+    },
+    wbsmodelchange (val) {//wbs模板change事件
+      if (val) {
+        this.wbsmodel.forEach((da) => {
+          if (da.id == val) {
+            this.excelForm.wbsType = da.wbsType
+          }
+        })
+      }
+      this.wbstree()
+    },
+    async nodeClickExcel (data) {//wbs树点击事件
+      console.log(data);
+      this.selectByNodeTable(data.id, data.type)
+    },
+    saveExcel () {//保存按钮
 
     },
     //#endregion
   },
   created () {
+    this.excelType()//清表类型
+    this.getWbsTypeList()//wbs模板名称
     // this.tabLazytree(this.$route.params.id)//获取清表树
     this.tabLazytree(0)
   }
 }
 </script>
+
 <style scoped lang="scss">
 .marleft10 {
   margin-left: 10px;
@@ -345,6 +444,10 @@ export default {
           padding: 5px 0;
           border-bottom: 1px solid #e0e0e0;
         }
+        .leftscroll {
+          height: 450px;
+          overflow-y: scroll;
+        }
       }
 
       .right {
@@ -354,7 +457,6 @@ export default {
         margin-left: 2%;
         // height: 500px;
         border-radius: 3px;
-
         td {
           box-sizing: border-box;
           padding: 5px 10px;

vue.config.js

@@ -1,39 +1,39 @@
 module.exports = {
-  //路径前缀
-  publicPath: "/",
-  lintOnSave: true,
-  productionSourceMap: false,
-  chainWebpack: (config) => {
-    //忽略的打包文件
-    config.externals({
-      'vue': 'Vue',
-      'vue-router': 'VueRouter',
-      'vuex': 'Vuex',
-      'axios': 'axios',
-      'element-ui': 'ELEMENT',
-    });
-    const entry = config.entry('app');
-    entry.add('babel-polyfill').end();
-    entry.add('classlist-polyfill').end();
-    entry.add('@/mock').end();
-  },
-  css: {
-    extract: { ignoreOrder: true }
-  },
-  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
-  devServer: {
-    port: 1888,
-    proxy: {
-      '/api': {
-        //本地服务接口地址
-        target: 'http://192.168.31.96',
-        //远程演示服务地址,可用于直接启动项目
-        //target: 'https://saber.bladex.vip/api',
-        ws: true,
-        pathRewrite: {
-          '^/api': '/'
+    //路径前缀
+    publicPath: "/",
+    lintOnSave: true,
+    productionSourceMap: false,
+    chainWebpack: (config) => {
+        //忽略的打包文件
+        config.externals({
+            'vue': 'Vue',
+            'vue-router': 'VueRouter',
+            'vuex': 'Vuex',
+            'axios': 'axios',
+            'element-ui': 'ELEMENT',
+        });
+        const entry = config.entry('app');
+        entry.add('babel-polyfill').end();
+        entry.add('classlist-polyfill').end();
+        entry.add('@/mock').end();
+    },
+    css: {
+        extract: { ignoreOrder: true }
+    },
+    //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
+    devServer: {
+        port: 1888,
+        proxy: {
+            '/api': {
+                //本地服务接口地址
+                target: 'http://192.168.31.96',
+                //远程演示服务地址,可用于直接启动项目
+                //target: 'https://saber.bladex.vip/api',
+                ws: true,
+                pathRewrite: {
+                    '^/api': '/'
+                }
+            }
         }
-      }
     }
-  }
-};
+};