|
@@ -1,135 +1,140 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="box flexBetween" >
|
|
|
+ <div class="box flexBetween">
|
|
|
<!-- 左侧树结构 -->
|
|
|
- <div :style="{'width':threessW+'px'}">
|
|
|
+ <div
|
|
|
+ :style="{'width':threessW+'px'}"
|
|
|
+ ref="rulesss"
|
|
|
+ >
|
|
|
<div
|
|
|
class="box flexStar"
|
|
|
- style="width:100%;"
|
|
|
+ style="width:100%;backgroundColor:#fff;border-radius:3px;padding:10px 0px 0px 8px;box-sizing: border-box;border: 1px solid #EBEEF5;overflow:hidden;"
|
|
|
>
|
|
|
- <el-scrollbar style="width:100%;">
|
|
|
- <basic-container style="width:100%;">
|
|
|
- <!-- 树结构 -->
|
|
|
- <avue-tree
|
|
|
- :style="{width:'100%',height:heightss +'px'}"
|
|
|
- :permission="getPermission"
|
|
|
- :loading="loading"
|
|
|
- :option="option"
|
|
|
- :data="data"
|
|
|
- @node-click="nodeClick"
|
|
|
- >
|
|
|
- <span
|
|
|
- class="el-tree-node__label"
|
|
|
- slot-scope="{ data }"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <span style="text-overflow: ellipsis;width:70%;"> {{ data.name }} </span>
|
|
|
- <!-- <span> {{ node}} </span> -->
|
|
|
- <!-- 添加 -->
|
|
|
- <i
|
|
|
- class="el-icon-circle-plus-outline marleft10"
|
|
|
- @click.stop="addExcel(data)"
|
|
|
- v-if="data.fileType!=3"
|
|
|
- ></i>
|
|
|
- <!-- 编辑 -->
|
|
|
- <i
|
|
|
- class="el-icon-edit marleft10"
|
|
|
- @click.stop="editExcel(data)"
|
|
|
- v-if="data.fileType!=1"
|
|
|
- ></i>
|
|
|
- <!-- 删除 -->
|
|
|
- <i
|
|
|
- class="el-icon-delete marleft10"
|
|
|
- @click.stop="deleteExcelM(data)"
|
|
|
- v-if="!data.hasChildren&&data.fileType!=1"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- </avue-tree>
|
|
|
- </basic-container>
|
|
|
- </el-scrollbar>
|
|
|
+ <!-- 树结构 -->
|
|
|
+ <avue-tree
|
|
|
+ :style="{width:'100%',height:heightss-20+'px','box-sizing': 'border-box',overflow:'hidden'}"
|
|
|
+ :permission="getPermission"
|
|
|
+ :loading="loading"
|
|
|
+ :option="option"
|
|
|
+ :data="data"
|
|
|
+ @node-click="nodeClick"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ class="el-tree-node__label"
|
|
|
+ slot-scope="{ data }"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span style="text-overflow: ellipsis;width:70%;"> {{ data.name }} </span>
|
|
|
+ <!-- <span> {{ node}} </span> -->
|
|
|
+ <!-- 添加 -->
|
|
|
+ <i
|
|
|
+ class="el-icon-circle-plus-outline marleft10"
|
|
|
+ @click.stop="addExcel(data)"
|
|
|
+ v-if="data.fileType!=3"
|
|
|
+ ></i>
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <i
|
|
|
+ class="el-icon-edit marleft10"
|
|
|
+ @click.stop="editExcel(data)"
|
|
|
+ v-if="data.fileType!=1"
|
|
|
+ ></i>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <i
|
|
|
+ class="el-icon-delete marleft10"
|
|
|
+ @click.stop="deleteExcelM(data)"
|
|
|
+ v-if="!data.hasChildren&&data.fileType!=1"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </avue-tree>
|
|
|
<div
|
|
|
- style="border-left:5px solid rgba(255,255,255,0);position:relative;left: -6px;z-index:999"
|
|
|
+ style="border-left:8px solid rgba(255,255,255,0);z-index:999"
|
|
|
@mousedown="mousedown1()"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧 -->
|
|
|
- <div class="rightBox box" style="height: 100%;" ref="rulesss">
|
|
|
- <el-scrollbar style="height: 100%;" >
|
|
|
- <basic-container style="height: 100%;" >
|
|
|
- <!-- 上传、删除、下载操作栏 -->
|
|
|
- <div
|
|
|
- class="rightHeader"
|
|
|
- v-show="from.checkd&&from.fileUrl"
|
|
|
- >
|
|
|
- <div class="excelname">
|
|
|
- <div>{{from.extension}}</div>
|
|
|
- <i
|
|
|
- class="el-icon-success marleft10"
|
|
|
- style="color: rgb(0, 168, 112);"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- <el-upload
|
|
|
- class="marleft10"
|
|
|
- :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
|
|
|
+ class="rightBox box"
|
|
|
+ style="height: 100%;"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="width:calc(100% - 10px);backgroundColor:#fff;border-radius:3px;padding:10px 10px 0px 8px;box-sizing: border-box;border: 1px solid #EBEEF5;"
|
|
|
+ class="marleft10"
|
|
|
+ >
|
|
|
+ <!-- 上传、删除、下载操作栏 -->
|
|
|
+ <div
|
|
|
+ class="rightHeader"
|
|
|
+ v-show="from.checkd&&from.fileUrl"
|
|
|
+ >
|
|
|
+ <div class="excelname">
|
|
|
+ <div>{{from.extension}}</div>
|
|
|
+ <i
|
|
|
+ class="el-icon-success marleft10"
|
|
|
+ style="color: rgb(0, 168, 112);"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="rightHeader"
|
|
|
- v-show="from.checkd&&!from.fileUrl"
|
|
|
+ <el-upload
|
|
|
+ class="marleft10"
|
|
|
+ :auto-upload="false"
|
|
|
+ :show-file-list="false"
|
|
|
+ action="#"
|
|
|
+ :limit="1"
|
|
|
+ :file-list='fileList'
|
|
|
+ accept=".xls,.xlsx"
|
|
|
+ :on-change="uploadChange"
|
|
|
>
|
|
|
- <el-upload
|
|
|
- :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"
|
|
|
- >上传 excel</el-button>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <el-empty
|
|
|
- v-show="!from.checkd"
|
|
|
- description="该目录为根目录没有EXCEL文件"
|
|
|
- ></el-empty>
|
|
|
- <div v-if="from.fileUrl"
|
|
|
- :style="{ 'margin-top': '20px', 'height':heightss+'px'}"
|
|
|
+ <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"
|
|
|
+ v-show="from.checkd&&!from.fileUrl"
|
|
|
+ >
|
|
|
+ <el-upload
|
|
|
+ :auto-upload="false"
|
|
|
+ :show-file-list="false"
|
|
|
+ action="#"
|
|
|
+ :limit="1"
|
|
|
+ :file-list='fileList'
|
|
|
+ accept=".xls,.xlsx"
|
|
|
+ :on-change="uploadChange"
|
|
|
>
|
|
|
- <iframe
|
|
|
- :src="excelSrc"
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- ></iframe>
|
|
|
- </div>
|
|
|
- </basic-container>
|
|
|
- </el-scrollbar>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ >上传 excel</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <el-empty
|
|
|
+ :style="{width:'100%',height:heightss-13 +'px'}"
|
|
|
+ v-show="!from.checkd"
|
|
|
+ description="该目录为根目录没有EXCEL文件"
|
|
|
+ ></el-empty>
|
|
|
+ <div
|
|
|
+ v-if="from.fileUrl"
|
|
|
+ :style="{ 'margin-top': '20px', 'height':heightss-60+'px','box-sizing': 'border-box','padding-bottom': '15px',}"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ :src="excelSrc"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -282,41 +287,38 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
//#region 鼠标
|
|
|
+ leftTRee: '',//左侧树ID
|
|
|
threessW: 400,
|
|
|
- tharrss: true,
|
|
|
- mouse1: {
|
|
|
- x: '',
|
|
|
- y: '',
|
|
|
- },//开始
|
|
|
- mouse2: {
|
|
|
- x: '',
|
|
|
- y: '',
|
|
|
- },//结束
|
|
|
//#endregion
|
|
|
- heightss:'',//
|
|
|
+ heightss: '',//
|
|
|
loading: false,//懒加载
|
|
|
option: {
|
|
|
filter: false,
|
|
|
lazy: true,
|
|
|
- menu:false,
|
|
|
+ menu: false,
|
|
|
treeLoad: (async (node, resolve) => {
|
|
|
console.log(node);
|
|
|
console.log(resolve);
|
|
|
- if (node.data.hasChildren) {
|
|
|
- const { data: res } = await tabLazytree({ parentId: node.data.id, modeId: this.$route.params.id })
|
|
|
- console.log(res);
|
|
|
- if (res.code === 200) {
|
|
|
- if (Array.isArray(res.data)) {
|
|
|
- res.data.forEach((val) => {
|
|
|
- if (!val.hasChildren) {
|
|
|
- val.leaf = true
|
|
|
- }
|
|
|
- })
|
|
|
+ if (node.level !== 0) {
|
|
|
+ if (node.data.hasChildren) {
|
|
|
+ const { data: res } = await tabLazytree({ parentId: node.data.id, modeId: this.$route.params.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)
|
|
|
}
|
|
|
- return resolve(res.data)
|
|
|
+ } else {
|
|
|
+ return resolve([])
|
|
|
}
|
|
|
} else {
|
|
|
- return resolve([])
|
|
|
+ return resolve(await this.tabLazytree(0, this.$route.params.id))
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
@@ -401,7 +403,7 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- this.data = res.data
|
|
|
+ return res.data
|
|
|
}
|
|
|
},
|
|
|
async detailExcel (id) {//获取列表信息
|
|
@@ -480,7 +482,7 @@ export default {
|
|
|
const { data: res } = await Excelmodify(wbsExclTabParmVO)
|
|
|
console.log(res);
|
|
|
if (res.code === 200) {
|
|
|
- await this.tabLazytree(0, this.$route.params.id)//获取清表树
|
|
|
+ this.tabLazytree(wbsExclTabParmVO.parentId, this.$route.params.id)//获取清表树
|
|
|
this.dialogTap = false
|
|
|
}
|
|
|
},
|
|
@@ -546,7 +548,6 @@ export default {
|
|
|
|
|
|
//#region 外层左侧事件
|
|
|
nodeClick (data) {//外层树结构
|
|
|
- console.log(data);
|
|
|
if (data.hasChildren == false || data.fileType == 3) {
|
|
|
this.from.checkd = true
|
|
|
} else {
|
|
@@ -735,7 +736,10 @@ export default {
|
|
|
//#region 树结构拉事件
|
|
|
mousedown1 () {//鼠标按下事件
|
|
|
document.onmousemove = (va) => {
|
|
|
- this.threessW = va.clientX - 240
|
|
|
+ console.log(1000 > va.clientX - 240 && va.clientX - 240 > 200);
|
|
|
+ if (1000 > va.clientX - 240 && va.clientX - 240 > 200) {
|
|
|
+ this.threessW = va.clientX - 240
|
|
|
+ }
|
|
|
}
|
|
|
document.onmouseup = () => {
|
|
|
document.onmousemove = null;
|
|
@@ -746,10 +750,9 @@ export default {
|
|
|
},
|
|
|
created () {
|
|
|
this.excelType()//清表类型
|
|
|
- this.tabLazytree(0, this.$route.params.id)//获取清表树
|
|
|
},
|
|
|
mounted () {
|
|
|
- this.heightss=this.$refs.rulesss.clientHeight-100
|
|
|
+ this.heightss = this.$refs.rulesss.clientHeight
|
|
|
}
|
|
|
}
|
|
|
</script>
|