清表模板初步完成

src/views/exctab/excelmodel/excelmodel.vue

@@ -25,7 +25,7 @@
                     <i
                       class="el-icon-circle-plus-outline marleft10"
                       @click.stop="addExcel(data)"
-                      v-if="!data.fileUrl"
+                      v-if="data.fileType!=3"
                     ></i>
                     <!-- 编辑 -->
                     <i
@@ -54,7 +54,10 @@
         <el-scrollbar>
           <basic-container>
             <!-- 上传、删除、下载操作栏 -->
-            <div class="rightHeader">
+            <div
+              class="rightHeader"
+              v-show="from.checkd&&from.fileUrl"
+            >
               <div class="excelname">
                 <div>{{from.extension}}</div>
                 <i
@@ -62,25 +65,43 @@
                   style="color: rgb(0, 168, 112);"
                 ></i>
               </div>
-              <el-button
-                size="mini"
+              <el-upload
                 class="marleft10"
-              >重新上传</el-button>
-              <el-link class="marleft10 colorblue">删除</el-link>
+                :auto-upload="false"
+                :show-file-list="false"
+                action="#"
+                :limit="1"
+                :file-list='fileList'
+                accept=".xls,.xlsx"
+                :on-change="uploadChange"
+              >
+                <el-button
+                  type="primary"
+                  size="mini"
+                >重新上传</el-button>
+              </el-upload>
+              <el-link
+                class="marleft10 colorblue"
+                @click="delectExcelMS"
+              >删除</el-link>
               <el-link
                 underline
                 class="marleft10 colorblue"
                 style="text-decoration:underline;"
+                @click="downloadExcel()"
               >下载EXCEL</el-link>
             </div>
-            <div class="rightHeader">
+            <div
+              class="rightHeader"
+              v-show="from.checkd&&!from.fileUrl"
+            >
               <el-upload
                 :auto-upload="false"
                 :show-file-list="false"
                 action="#"
                 :limit="1"
                 :file-list='fileList'
-                accept=".xls"
+                accept=".xls,.xlsx"
                 :on-change="uploadChange"
               >
                 <el-button
@@ -89,7 +110,20 @@
                 >上传 excel</el-button>
               </el-upload>
             </div>
-            <!-- <el-empty description="该目录为根目录没有EXCEL文件"></el-empty> -->
+            <el-empty
+              v-show="!from.checkd"
+              description="该目录为根目录没有EXCEL文件"
+            ></el-empty>
+            <div
+              style="height:700px;margin-top:20px;"
+              v-if="from.fileUrl"
+            >
+              <iframe
+                :src="excelSrc"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
           </basic-container>
         </el-scrollbar>
       </el-col>
@@ -97,7 +131,7 @@
 
     <!-- 弹出框 -->
     <el-dialog
-      title="新增编辑"
+      :title="!excelForm.id?'添加':'编辑'"
       class="dialogModel"
       :visible.sync="dialogTap"
       width="800px"
@@ -142,7 +176,10 @@
             </el-form-item>
           </div>
         </el-form>
-        <div class="middle">
+        <div
+          class="middle"
+          v-if="wbsmiddle"
+        >
           <div class="left">
             <div class="select">
               <el-select
@@ -236,7 +273,7 @@
 </template>
 
 <script>
-import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu } from '@/api/exctab/excelmodel'
+import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu, deleteExcel } from '@/api/exctab/excelmodel'
 export default {
   data () {
     return {
@@ -268,10 +305,13 @@ export default {
       wbsdata: [],//wbs模板
       //#region 右侧数据
       from: {
+        checkd: false,//判断是否可以进行上传、重新上传excel
+        id: '',//清表树ID
         extension: '', //文件名称
         fileUrl: '',//文件路径
       },
       fileList: [],//选中的文件
+      excelSrc: '',//
       //#endregion
 
       //#region   弹框
@@ -320,6 +360,7 @@ export default {
         wbsName: '',
       },//wbs树选中的值
       tableData: [],//右侧表数据
+      wbsmiddle: false,//选择wbs模板那块是否有
       tableList: [],//进行处理的wbs关联表
       exceltypeData: [],//清表类型枚举
       wbsmodel: [],//wbs模板名称枚举
@@ -346,9 +387,12 @@ export default {
       const { data: res } = await detailExcel({ id })
       console.log(res);
       if (res.code === 200) {
+        this.from.id = res.data.id
         this.from.extension = res.data.extension  //文件名称
         this.from.fileUrl = res.data.fileUrl      //文件路径
-        // console.log(res.data.alias);
+        let routeUrl = res.data.fileUrl
+        let pSrc = routeUrl + '?r=' + new Date()
+        this.excelSrc = 'http://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(pSrc)
       }
     },
     async getWbsTypeList () {//清表编辑 wbs 下拉框选择
@@ -400,8 +444,14 @@ export default {
           message: '删除清表树成功',
           type: 'success'
         });
-        this.tabLazytree(0)
-        // this.tabLazytree(this.$route.params.id)//获取清表树
+        // this.tabLazytree(0)
+        this.tabLazytree(this.$route.params.id)//获取清表树
+        this.from = {
+          checkd: false,//判断是否可以进行上传、重新上传excel
+          id: '',//清表树ID
+          extension: '', //文件名称
+          fileUrl: '',//文件路径
+        }
       }
     },
     async Excelmodify (wbsExclTabParmVO) {//编辑添加清表
@@ -409,38 +459,104 @@ export default {
       const { data: res } = await Excelmodify(wbsExclTabParmVO)
       console.log(res);
       if (res.code === 200) {
-        await this.tabLazytree(0)
-        //  await this.tabLazytree(this.$route.params.id)//获取清表树
+        // await this.tabLazytree(0)
+        await this.tabLazytree(this.$route.params.id)//获取清表树
         this.dialogTap = false
       }
     },
-    async uploadExcel () {//上传清表
-      const { data: res } = await uploadExcel({ file: '', nodeId: '' })
+    async uploadExcel (data) {//上传清表
+      const { data: res } = await uploadExcel(data)
       console.log(res);
+      if (res.code === 200) {
+        this.$message({
+          message: '上传文件成功',
+          type: 'success'
+        })
+        this.detailExcel(this.from.id)
+      }
+      this.fileList = []
+    },
+    async deleteExcel (data) {//删除excel表
+      const { data: res } = await deleteExcel(data)
+      if (res.code === 200) {
+        this.$message({
+          message: '删除excel表成功',
+          type: 'success'
+        })
+        this.detailExcel(this.from.id)
+      }
     },
     //#endregion
 
     //#region 右侧
     uploadChange (file, fileList) {//选中表后触发
       console.log(file, fileList);
-      this.fileList = [{ ...file.raw }]
+      this.fileList = [file.raw]
+      let formData = new FormData()
+      formData.append('file', ...this.fileList)
+      formData.append('nodeId', this.from.id)
+      this.uploadExcel(formData)
+    },
+    delectExcelMS () {//删除excel表点击事件、
+      let _that = this
+      this.$confirm('确认删除该文件?', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        _that.deleteExcel({ id: _that.from.id, fileUrl: '' })
+      }).catch(() => {
+      })
+    },
+    downloadExcel () {//下载excel表
+      window.open(this.from.fileUrl)
     },
     //#endregion
 
     //#region  外层左侧事件
     nodeClick (data) {//外层树结构
       console.log(data);
-      this.detailExcel(data.id)
+      if (data.hasChildren == false || data.fileType == 3) {
+        this.from.checkd = true
+      } else {
+        this.from.checkd = false
+      }
+      if (this.from.checkd) {
+        this.detailExcel(data.id)
+      } else {
+        this.from = {
+          checkd: false,//判断是否可以进行上传、重新上传excel
+          id: '',//清表树ID
+          extension: '', //文件名称
+          fileUrl: '',//文件路径
+        }
+      }
     },
-    editExcel (data) {//编辑
+    async editExcel (data) {//编辑
       console.log(data);
-      this.excelForm.id = data.id
-      this.excelForm.nodeName = data.name      //清表名称
-      this.excelForm.tabType = data.tabType    //清表类型
-      this.dialogTap = true
+      if (data.fileType != 3 && data.hasChildren) {
+        this.wbsmiddle = false
+      } else {
+        this.wbsmiddle = true
+        this.getWbsTypeList()//wbs模板名称
+      }
+      const { data: res } = await detailExcel({ id: data.id })
+      console.log(res);
+      if (res.code === 200) {
+        this.excelForm.id = res.data.id
+        this.excelForm.nodeName = res.data.name      //清表名称
+        this.excelForm.tabType = res.data.tabType    //清表类型
+        this.dialogTap = true
+      }
     },
-    addExcel (data) {//添加
+    async addExcel (data) {//添加
       console.log(data);
+      if (data.fileType != 3 && data.hasChildren) {
+        this.wbsmiddle = false
+      } else {
+        this.wbsmiddle = true
+        this.getWbsTypeList()//wbs模板名称
+      }
       this.excelForm.parentId = data.id
       this.dialogTap = true
     },
@@ -573,6 +689,7 @@ export default {
               linkDataInfo: linkDataInfo
             })
           }
+          this.handleClose()
         }
       });
     },
@@ -580,9 +697,8 @@ export default {
   },
   created () {
     this.excelType()//清表类型
-    this.getWbsTypeList()//wbs模板名称
-    this.tabLazytree(0)
-    // this.tabLazytree(this.$route.params.id)//获取清表树
+    // this.tabLazytree(0)
+    this.tabLazytree(this.$route.params.id)//获取清表树
   }
 }
 </script>
@@ -591,7 +707,9 @@ export default {
 .marleft10 {
   margin-left: 10px;
 }
-
+/deep/.el-tree-node__expand-icon {
+  font-size: 16px;
+}
 .colorblue {
   color: rgb(0, 82, 217);
 }