清表添加

src/api/exctab/excelmodel.js

@@ -66,17 +66,27 @@ export const Excelmodify = (row) => {
 // 上传清表
 export const uploadExcel = (row) => {
     return request({
+        // ty  application/json
         url: '/api/blade-manager/exceltab/put-file-attach',
         method: 'post',
         data: row
     })
 }
 
-// 删除
+// 删除excel文件
 export const deleteExcel = (row) => {
     return request({
-        url: '/api/blade-manager/exceltab/remove',
+        url: '/api/blade-manager/exceltab/update',
         method: 'post',
         data: row
     })
+}
+export const deleteExcelshu = (ids) => {
+    return request({
+        url: '/api/blade-manager/exceltab/remove',
+        method: 'post',
+        params: {
+            ids,
+        }
+    })
 }

src/views/exctab/excelmodel/excelmodel.vue

@@ -21,20 +21,23 @@
                   <div>
                     <span> {{ data.name }} </span>
                     <!-- <span> {{ node}} </span> -->
+                    <!-- 添加 -->
                     <i
                       class="el-icon-circle-plus-outline marleft10"
                       @click.stop="addExcel(data)"
                       v-if="!data.fileUrl"
                     ></i>
+                    <!-- 编辑 -->
                     <i
                       class="el-icon-edit marleft10"
-                      @click.stop="editExcel()"
-                      v-if="data.fileUrl"
+                      @click.stop="editExcel(data)"
+                      v-if="data.fileType!=3"
                     ></i>
+                    <!-- 删除 -->
                     <i
                       class="el-icon-delete marleft10"
                       @click.stop="deleteExcelM(data)"
-                      v-if="data.fileUrl"
+                      v-if="!data.hasChildren"
                     ></i>
                   </div>
                 </span>
@@ -53,7 +56,7 @@
             <!-- 上传、删除、下载操作栏 -->
             <div class="rightHeader">
               <div class="excelname">
-                <div>名ssssssssssssssssssssssssssssss称</div>
+                <div>{{from.extension}}</div>
                 <i
                   class="el-icon-success marleft10"
                   style="color: rgb(0, 168, 112);"
@@ -70,6 +73,23 @@
                 style="text-decoration:underline;"
               >下载EXCEL</el-link>
             </div>
+            <div class="rightHeader">
+              <el-upload
+                :auto-upload="false"
+                :show-file-list="false"
+                action="#"
+                :limit="1"
+                :file-list='fileList'
+                accept=".xls"
+                :on-change="uploadChange"
+              >
+                <el-button
+                  type="primary"
+                  size="mini"
+                >上传 excel</el-button>
+              </el-upload>
+            </div>
+            <!-- <el-empty description="该目录为根目录没有EXCEL文件"></el-empty> -->
           </basic-container>
         </el-scrollbar>
       </el-col>
@@ -90,12 +110,14 @@
           ref="excelForm"
           :model="excelForm"
           label-width="80px"
+          rules="rules"
         >
           <div style="display: flex;justify-content: space-between;">
             <el-form-item
               label="清表名称"
               style="width: 370px;"
               size="small"
+              prop="nodeName"
             >
               <el-input v-model="excelForm.nodeName"></el-input>
             </el-form-item>
@@ -103,9 +125,10 @@
               label="清表类型"
               style="width: 370px;"
               size="small"
+              prop="tabType"
             >
               <el-select
-                v-model="excelForm.name"
+                v-model="excelForm.tabType"
                 style="width:100%;"
                 placeholder="请选择清表类型"
               >
@@ -156,6 +179,7 @@
               </avue-tree>
             </div>
           </div>
+          <!-- 右侧关联 -->
           <template>
             <table
               class="right"
@@ -174,17 +198,19 @@
                   v-for="(val,index) in tableData"
                   :key="index"
                 >
-                  <td>{{val.tableName}}</td>
+                  <td style="width:50%;">{{val.tableName}}</td>
                   <td style="text-align: center;height:30px;">
                     <el-button
-                      v-if="val.isLinkTable!=2"
+                      v-if="val.isLinkTable==1"
                       type="info"
                       size="small"
+                      @click="relation(index)"
                     >关联</el-button>
                     <el-button
                       v-if="val.isLinkTable==2"
                       type="warning"
                       size="small"
+                      @click="Disassociate(index)"
                     >取消关联</el-button>
                   </td>
                 </tr>
@@ -210,16 +236,44 @@
 </template>
 
 <script>
-import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel } from '@/api/exctab/excelmodel'
+import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu } from '@/api/exctab/excelmodel'
 export default {
   data () {
     return {
       loading: false,//懒加载
       option: {
         filter: false,
+        lazy: true,
+        treeLoad: (async (node, resolve) => {
+          console.log(node);
+          if (node.data.hasChildren) {
+            const { data: res } = await tabLazytree({ modeId: node.data.id })
+            console.log(res);
+            if (res.code === 200) {
+              if (Array.isArray(res.data)) {
+                res.data.forEach((val) => {
+                  if (!val.hasChildren) {
+                    val.leaf = true
+                  }
+                })
+              }
+              return resolve(res.data)
+            }
+          } else {
+            return resolve([])
+          }
+        }),
       },
       data: [],//清表模板
       wbsdata: [],//wbs模板
+      //#region 右侧数据
+      from: {
+        extension: '', //文件名称
+        fileUrl: '',//文件路径
+      },
+      fileList: [],//选中的文件
+      //#endregion
+
       //#region   弹框
       dialogTap: false,
       option2: {
@@ -230,11 +284,13 @@ export default {
             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
-                }
-              })
+              if (Array.isArray(res.data)) {
+                res.data.forEach((val) => {
+                  if (!val.hasChildren) {
+                    val.leaf = true
+                  }
+                })
+              }
               return resolve(res.data)
             }
           } else {
@@ -244,11 +300,27 @@ export default {
       },//弹框里面的wbs树
       excelForm: {
         nodeName: '',//清表名称
-        parentId: '',//清表Id
+        tabType: '',//清表类型
+        id: '',//清表Id,编辑时用
+        parentId: '',//清表Id，添加时用
         wbsId: '',//WBS模板Id
         wbsType: '',//WBS模板类型
       },
+      rules: {
+        nodeName: [
+          { required: true, message: '请输入清表名称', trigger: 'blur' },
+        ],
+        tabType: [
+          { required: true, message: '请选择清表类型', trigger: 'blur' },
+        ],
+      },
+      wbsform: {
+        id: '',
+        wbsType: '',
+        wbsName: '',
+      },//wbs树选中的值
       tableData: [],//右侧表数据
+      tableList: [],//进行处理的wbs关联表
       exceltypeData: [],//清表类型枚举
       wbsmodel: [],//wbs模板名称枚举
       //#endregion
@@ -260,6 +332,13 @@ export default {
       const { data: res } = await tabLazytree({ modeId })
       console.log(res);
       if (res.code === 200) {
+        if (Array.isArray(res.data)) {
+          res.data.forEach((val) => {
+            if (!val.hasChildren) {
+              val.leaf = true
+            }
+          })
+        }
         this.data = res.data
       }
     },
@@ -267,7 +346,9 @@ export default {
       const { data: res } = await detailExcel({ id })
       console.log(res);
       if (res.code === 200) {
-        console.log(res.data.alias);
+        this.from.extension = res.data.extension  //文件名称
+        this.from.fileUrl = res.data.fileUrl      //文件路径
+        // console.log(res.data.alias);
       }
     },
     async getWbsTypeList () {//清表编辑 wbs 下拉框选择
@@ -300,35 +381,66 @@ export default {
       const { data: res } = await selectByNodeTable({ id, wbsType })
       console.log(res);
       if (res.code === 200) {
-        this.tableData = res.data
+        console.log(Array.isArray(res.data));
+        if (Array.isArray(res.data)) {
+          this.tableData = res.data
+          this.tableData.forEach(val => {
+            val.changeTable = val.isLinkTable
+          })
+        } else {
+          this.tableData = []
+        }
       }
     },
-    async deleteExcel (ids) {//删除清表
-      const { data: res } = await deleteExcel({ ids })
+    async deleteExcelshu (ids) {//删除清表
+      const { data: res } = await deleteExcelshu(ids)
       console.log(res);
       if (res.code === 200) {
-
+        this.$message({
+          message: '删除清表树成功',
+          type: 'success'
+        });
+        this.tabLazytree(0)
+        // this.tabLazytree(this.$route.params.id)//获取清表树
       }
     },
-    async Excelmodify () {//编辑添加清表
-      const { data: res } = await Excelmodify()
+    async Excelmodify (wbsExclTabParmVO) {//编辑添加清表
+      console.log(wbsExclTabParmVO);
+      const { data: res } = await Excelmodify(wbsExclTabParmVO)
       console.log(res);
+      if (res.code === 200) {
+        await this.tabLazytree(0)
+        //  await this.tabLazytree(this.$route.params.id)//获取清表树
+        this.dialogTap = false
+      }
     },
     async uploadExcel () {//上传清表
-      const { data: res } = await uploadExcel()
+      const { data: res } = await uploadExcel({ file: '', nodeId: '' })
       console.log(res);
     },
     //#endregion
 
+    //#region 右侧
+    uploadChange (file, fileList) {//选中表后触发
+      console.log(file, fileList);
+      this.fileList = [{ ...file.raw }]
+    },
+    //#endregion
+
     //#region  外层左侧事件
     nodeClick (data) {//外层树结构
       console.log(data);
-      // this.detailExcel(data.id)
+      this.detailExcel(data.id)
     },
-    editExcel () {//编辑
-      console.log(111);
+    editExcel (data) {//编辑
+      console.log(data);
+      this.excelForm.id = data.id
+      this.excelForm.nodeName = data.name      //清表名称
+      this.excelForm.tabType = data.tabType    //清表类型
+      this.dialogTap = true
     },
     addExcel (data) {//添加
+      console.log(data);
       this.excelForm.parentId = data.id
       this.dialogTap = true
     },
@@ -338,8 +450,8 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'error'
-      }).then(async () => {
-        await _that.deleteExcel(data.id)
+      }).then(() => {
+        _that.deleteExcelshu(data.id)
       }).catch(() => {
       });
     },
@@ -349,12 +461,20 @@ export default {
     handleClose () {//关闭弹框触发事件
       this.excelForm = {
         nodeName: '',//清表名称
-        parentId: '',//清表Id
+        tabType: '',//清表类型
+        id: '',//清表Id,编辑时用
+        parentId: '',//清表Id，添加时用
         wbsId: '',//WBS模板Id
         wbsType: '',//WBS模板类型
       }
+      this.wbsform = {
+        id: '',
+        wbsType: '',
+        wbsName: '',
+      }//wbs树选中的值
       this.wbsdata = []  //wbs树数据
       this.tableData = []//弹框table数据
+      this.tableList = []//关联取消关联的数据
       this.dialogTap = false
     },
     wbsmodelchange (val) {//wbs模板change事件
@@ -367,20 +487,102 @@ export default {
       }
       this.wbstree()
     },
-    async nodeClickExcel (data) {//wbs树点击事件
+    nodeClickExcel (data) {//wbs树点击事件
       console.log(data);
-      this.selectByNodeTable(data.id, data.type)
+      this.wbsform.id = data.id
+      this.wbsform.wbsType = data.type
+      this.wbsform.wbsName = data.deptName
+      if (this.tableList == '') {
+        this.selectByNodeTable(data.id, data.type)
+      } else {
+        let tag = true
+        this.tableList.forEach((val) => {
+          if (val.id == data.id) {
+            this.tableData = val.arrs
+            tag = false
+          }
+        })
+        if (tag) {
+          this.selectByNodeTable(data.id, data.type)
+        }
+      }
+
+    },
+    relation (key) {//关联
+      this.tableData[key].isLinkTable = 2
+      let tap = this.tableList.find((val) => {
+        return val.id == this.wbsform.id
+      })
+      if (!tap) {
+        this.tableList.push({
+          id: this.wbsform.id,
+          wbsType: this.wbsform.wbsType,
+          wbsName: this.wbsform.wbsName,
+          arrs: this.tableData
+        })
+      }
+    },
+    Disassociate (key) {//取消关联
+      this.tableData[key].isLinkTable = 1
+      const tap = this.tableList.find((val) => {
+        return val.id == this.wbsform.id
+      })
+      if (!tap) {
+        this.tableList.push({
+          id: this.wbsform.id,
+          wbsType: this.wbsform.wbsType,
+          wbsName: this.wbsform.wbsName,
+          arrs: this.tableData
+        })
+      }
     },
     saveExcel () {//保存按钮
-
+      this.$refs.excelForm.validate(async (valid) => {
+        if (valid) {
+          let linkDataInfo = []
+          if (this.tableList.length > 0) {
+            this.tableList.forEach((val, index) => {
+              let linkIds = ''
+              val.arrs.forEach((da, key) => {
+                if (da.isLinkTable != da.changeTable) {
+                  linkIds = `${linkIds}${linkIds != '' ? ',' : ''}${da.id}`
+                }
+              })
+              if (linkIds != '') {
+                linkDataInfo.push({
+                  id: val.id,
+                  linkIds: linkIds,
+                  wbsName: val.wbsName,
+                  wbsType: val.wbsType
+                })
+              }
+            })
+          }
+          if (this.excelForm.parentId && !this.excelForm.id) {
+            await this.Excelmodify({
+              nodeName: this.excelForm.nodeName,
+              tabType: this.excelForm.tabType,
+              parentId: this.excelForm.parentId,
+              linkDataInfo: linkDataInfo
+            })
+          } else {
+            await this.Excelmodify({
+              nodeName: this.excelForm.nodeName,
+              tabType: this.excelForm.tabType,
+              id: this.excelForm.id,
+              linkDataInfo: linkDataInfo
+            })
+          }
+        }
+      });
     },
     //#endregion
   },
   created () {
     this.excelType()//清表类型
     this.getWbsTypeList()//wbs模板名称
-    // this.tabLazytree(this.$route.params.id)//获取清表树
     this.tabLazytree(0)
+    // this.tabLazytree(this.$route.params.id)//获取清表树
   }
 }
 </script>