diff --git a/src/App.vue b/src/App.vue index 0f854550a..4765d5b4b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ + + - - - - 数据获取中 - + >删除 + + + + + 数据获取中 + + - + + +
+ + + + + + + + + + + + + + +
+
+ 提交 + + 取消 + +
+ maxT - 150) moveLen = maxT - 150; + + resize.style.left = moveLen; + left.style.width = moveLen + "px"; + right.style.width = (box.clientWidth - moveLen - 5) + "px"; + } + document.onmouseup = function (evt) { + document.onmousemove = null; + document.onmouseup = null; + resize.releaseCapture && resize.releaseCapture(); + } + resize.setCapture && resize.setCapture(); + return false; + } + }, + // 国内标签过滤 + filterNode(value, data) { + if (!value) return true; + return data.name.indexOf(value) !== -1; + }, + selectMenu1() { + return new Promise((resolve, reject) => { + this.$http.get('fileMaterialCenter/zlTree', {}, { + _this: this + }, res => { + const history = res; + resolve(history) + }) + }) + }, + async getTreeAsync(){ + + let tsResource = await this.selectMenu1() + + let list1 = [] + if(tsResource && tsResource.ok && tsResource.data){ + list1 = tsResource.data + } + if(list1.length > 0){ + this.treeList = list1 + } + }, + treeClick(treeNode) { + this.selectSarMenu = treeNode + this.dataCenterSearch.treeId = treeNode.id + this.searchInfo() + }, + // 树节点鼠标移入移出 + mouseenter(data) { + if (data.name !== '我的收藏') { + this.$set(data, 'show', true) + if (data.parentId !== null) { + this.$set(data, 'showDel', true) + } + } + }, + mouseleave(data) { + this.$set(data, 'show', false) + this.$set(data, 'showDel', false) + }, + update(data) { + this.modalType = 2 + this.productModal = true + this.productModelAdd = data + // 取消所有的选中效果 + this.productTitle = '编辑目录' + // const newChild = { id: this.id++, label: 'testtest', children: [] }; + // if (!data.children) { + // this.$set(data, 'children', []); + // } + // data.children.push(newChild); + }, + + append(data) { + this.modalType = 1 + this.productModal = true + // 取消所有的选中效果 + this.productTitle = '新增目录' + this.productModelAdd.name = '' + this.productModelAdd.parentId = data.id + this.productModelAdd.parentId = '' + }, + + selectMenu() { + this.$http.get('fileMaterialCenter/zlTree', {}, { + _this: this + }, res => { + this.treeList = res.data + this.dataCenterSearch.treeId = '' + this.searchInfo() + }) + }, + remove(node, data) { + //通过 stahndinfoList 是否有数据进行判断 + this.$confirm(data.children.length > 0 ? '该节点下有记录，是否删除？' : '是否删除菜单', '提示', { + confirmButtonText: '确定', + confirmButtonClass: 'common-button-primary', + cancelButtonText: '取消', + roundButton: true, + type: 'warning' + }).then(() => { + this.$http.delete("fileMaterialCenter/zlTree", { + id: data.id + }, res => { + }, e => { + if (e.ok) { + this.$message({ + type: 'success', + message: "删除成功" + }) + this.selectMenu() + this.getDomesticStandardTable() + } else { + this.$message({ + type: 'warning', + message: e.message + }) + } + }) + }).catch(() => { + this.$refs.selections.clearSelection() + this.$message({ + type: 'info', + message: '已取消删除' + }) + }) + // const parent = node.parent; + // const children = parent.data.children || parent.data; + // const index = children.findIndex(d => d.id === data.id); + // children.splice(index, 1); + }, + closeDrawer() { + this.$nextTick(() => { + this.$refs['productModelAdd'].resetFields() + this.productModelAdd = { + name: '', + parentId: '', + sort: '' + } + }) + this.productModal = false + }, + // 提交新增/修改 + saveProduct(name) { + this.$refs[name].validate((valid) => { + if (valid) { + if (this.modalType === 1) { + this.$http.postData('fileMaterialCenter/zlTree', this.productModelAdd, { + _this: this + }, res => { + if (res.ok) { + this.selectMenu() + this.productModal = false + this.productModelAdd = { + name: '', + parentId: '', + sort: '' + } + } else { + this.productModal = true + } + }, e => { + }) + } else if (this.modalType === 2) { + this.$http.putData('fileMaterialCenter/zlTree', this.productModelAdd, { + _this: this + }, res => { + this.selectMenu() + this.productModal = false + this.productModelAdd = { + name: '', + parentId: '', + sort: '' + } + }, e => { + }) + } + } else { + } + }) + }, + closeModal() { + this.productModal = false + this.closeDrawer() + }, + treeCollapse() { + this.sideClose = !this.sideClose + }, toDetail(row){ - console.log('243',row) this.$router.push({ name: "dataCenterDetail", params: { @@ -270,7 +605,6 @@ export default { }); }, uploadSuccess(response, file, fileList) { - console.log('240',fileList) const fileIdList = fileList.map(item => { if (item.response){ return item.response.data.attId @@ -279,8 +613,6 @@ export default { } }) this.attributeEO.attachFileId = fileIdList.join(',') - console.log('343',this.fileList) - console.log('349',this.attributeEO.attachFileId) }, handleRemove(file, fileList) { const fileIdList = fileList.map(item => { @@ -388,8 +720,6 @@ export default { }); }, e => { }); - console.log('343',this.fileList) - console.log('349',this.attributeEO.attachFileId) // const fileIdList = this.fileList.map(item => { // return item.id @@ -453,8 +783,11 @@ export default { this.showInfoModal = false }, }, - mounted() { + async mounted() { this.searchInfo() + // 进入页面后查询树形结构目录 + await this.getTreeAsync() + this.dragControllerLR() } } @@ -466,6 +799,198 @@ export default { } background-color: white; height: 100%; - padding: 10px 20px; + display: flex; +} +#left { + width: calc(30% - 5px); + height: 100%; + float: left; +} + +#resize { + width: 5px; + height: 100%; + cursor: w-resize; + float: left; +} + +#right { + float: right; + width: 70%; + height: 100%; +} +.tree-content { + background: #fff; + width: 16%; + position: relative; + + .tree { + /deep/ .el-card__body { + padding: 0 !important; + } + + .el-card { + width: 500px; + min-width: 2000px; + max-width: 100%; + //min-width: min-content; + } + + height: 95%; + width: calc(~'100% - 15px'); + position: absolute; + left: 0; + } + + .tree-collapse { + position: absolute; + right: 0; + } +} + +.tree-right { + overflow-y: hidden; + padding: 0; + position: relative; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + + .content { + display: flex; + flex-direction: column; + position: relative; + flex: auto; + + .table-wrap { + flex: auto; + overflow: hidden; + display: flex; + flex-direction: column; + + .collection-btn { + padding: 0; + border: none; + color: #F2CB51; + font-size: 18px; + width: 18px; + height: 18px; + background-color: transparent; + /*background: rgba(244, 162, 39, 0.1);*/ + + //.icon-collection { + // background-image: url("~assets/images/shangqi/standardDetails/collection.png"); + //} + + } + } + + .pagination { + position: static; + + /deep/ .pagination-slot { + padding: 0; + } + } + } +} +.table-area{ + padding: 0 10px 10px 10px; +} + +/deep/ .tree-line { + .el-tree-node { + position: relative; + padding-left: 0px; // 缩进量 + line-height: 30px; + } + + .el-tree-node__children { + padding-left: 16px; // 缩进量 + } + + // 竖线 + .el-tree-node::before { + content: ""; + height: 100%; + width: 1px; + position: absolute; + left: -3px; + top: -26px; + border-width: 1px; + border-left: 1px dashed #858990e0; + } + + // 当前层最后一个节点的竖线高度固定 + .el-tree-node:last-child::before { + height: 38px; // 可以自己调节到合适数值 + } + + // 横线 + .el-tree-node::after { + content: ""; + width: 11px; + height: 20px; + position: absolute; + left: -3px; + top: 12px; + border-width: 1px; + border-top: 1px dashed #858990e0; + } + + // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了 + & > .el-tree-node::after { + border-top: none; + } + + & > .el-tree-node::before { + border-left: none; + } + + // 展开关闭的icon + .el-tree-node__expand-icon { + font-size: 16px; + // 叶子节点（无子节点） + &.is-leaf { + color: transparent; + // display: none; // 也可以去掉 + } + } +} + +/deep/ .icon-tree { + margin: 0 5px 0 10px; + position: relative; + background: url('~@/assets/images/shangqi/img/tree-add.png'); + background-size: 100% 100%; +} + +/deep/ .expanded { + background: url('~@/assets/images/shangqi/img/tree-sub.png'); + background-size: 100% 100%; +} + +/deep/ .is-leaf { + background-image: none; + background-size: 100% 100%; +} + +/deep/ .is-leaf-none { + position: relative; + display: inline-block; + width: 15px; + height: 15px; + background: url('~@/assets/images/shangqi/img/none-file-new.png'); + background-size: 100% 100%; +} + +/deep/ .is-show { + position: relative; + display: inline-block; + width: 15px; + height: 15px; + background: url('~@/assets/images/shangqi/img/tree.png'); + background-size: 100% 100%; }