资料中心增加左侧树形

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" ref="appView">
 <!--    <router-view v-if="!isBoolean"/>-->
     <span v-if="this.$route.name === 'Login'|| !isBoolean">
       <router-view />

src/pages/regulatoryRepository/dataCenter/index.vue

@@ -1,24 +1,84 @@
 <template>
   <div id="dataCenter">
-    <div class="search-area">
-      <el-form :modal="dataCenterSearch" :inline="true">
-        <el-form-item label="类型:">
-          <el-input
+    <div id="left" class="tree-content" :class="{ 'tree-closed': sideClose }">
+      <div style="width: 100%" class="left">
+        <div class="tree">
+          <el-card style="height: 100%;padding-right: 120px;overflow-y:auto">
+            <el-tree
+              ref="tree"
+              node-key="id"
+              class="tree-line"
+              icon-class="icon-tree"
+              :indent="0"
+              :props="props"
+              :data="treeList"
+              :default-expanded-keys="['1']"
+              highlight-current
+              @node-click="treeClick"
+              :filter-node-method="filterNode">
+                  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)"
+                        @mouseleave="mouseleave(data)">
+                        <span
+                          :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
+                        <span style="font-size:12px"> {{ node.label }} </span>
+                        <span>
+                          <el-button
+                            type="text"
+                            size="mini"
+                            v-show="data.show"
+                            v-btn-permission="'764f630a49072d76a237dbcc9a1831e1'"
+                            @click="() => append(data)">
+                            新增
+                          </el-button>
+                          <el-button
+                            type="text"
+                            size="mini"
+                            v-show="data.show"
+                            v-btn-permission="'afdef0736eb111e9865e19fa3129d0ac'"
+                            @click="() => update(data)">
+                            编辑
+                          </el-button>
+                          <el-button
+                            type="text"
+                            size="mini"
+                            v-show="data.showDel"
+                            v-btn-permission="'c517df26b904cb8f69495f7f38f8f77b'"
+                            @click="() => remove(node, data)">
+                            删除
+                          </el-button>
+                        </span>
+                    </span>
+            </el-tree>
+          </el-card>
+        </div>
+      </div>
+      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
+        <!--切换折叠样式-->
+        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
+        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
+      </div>
+    </div>
+    <div id="resize"></div>
+    <div id="right" class="tree-right">
+      <div class="search-area">
+        <el-form :modal="dataCenterSearch" :inline="true">
+          <el-form-item label="类型:">
+            <el-input
               size="small"
               v-model="dataCenterSearch.dataType"
               placeholder="请输入类型"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="资料标题:">
-          <el-input
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="资料标题:">
+            <el-input
               size="small"
               v-model="dataCenterSearch.dataTitle"
               placeholder="请输入资料标题"
               clearable
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="上传时间:">
-          <el-date-picker
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="上传时间:">
+            <el-date-picker
               v-model="dataCenterSearch.dataUploadTime"
               clearable
               value-format="yyyy-MM-dd HH:mm:ss"
@@ -27,33 +87,33 @@
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button
               type="primary"
               size="mini"
               @click="searchInfo">
-            查询
-          </el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button
+              查询
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button
               @click="clearSearch"
               size="mini">清空
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="operate-area" style="margin: 0 0 10px 0">
-      <el-button
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="operate-area" style="padding: 0 10px 10px 10px">
+        <el-button
           size="mini"
           type="primary"
           @click="addInfo">新增
-      </el-button>
-    </div>
-    <div class="table-area">
-      <el-table
+        </el-button>
+      </div>
+      <div class="table-area">
+        <el-table
           :data="dataCenterTable"
           tooltip-effect="dark"
           style="width: 100%"
@@ -61,62 +121,109 @@
           height="475px"
           :header-cell-style="{background: '#f5f1f1', color: '#333333', fontSize: '16px',
          fontWeight: 'bold', height: '48px'}"
-      >
-        <el-table-column
+        >
+          <el-table-column
             type="index"
             width="55"
             label="序号"
             align="center">
-        </el-table-column>
-        <el-table-column
+          </el-table-column>
+          <el-table-column
             prop="dataType"
             width="250"
             label="类型"
             align="center">
-        </el-table-column>
-        <el-table-column
+          </el-table-column>
+          <el-table-column
             prop="dataTitle"
             min-width="250"
             label="资料标题"
             align="center">
-          <template slot-scope="scope">
-            <span @click.stop="toDetail(scope.row)" style="cursor:pointer;color: #409eff">{{ scope.row.dataTitle }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
+            <template slot-scope="scope">
+              <span @click.stop="toDetail(scope.row)" style="cursor:pointer;color: #409eff">{{ scope.row.dataTitle }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
             prop="dataUploadTime"
             width="250"
             label="上传时间"
             align="center">
-          <template slot-scope="scope">
-            <span>{{ $moment(scope.row.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
+            <template slot-scope="scope">
+              <span>{{ $moment(scope.row.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
             label="操作"
             min-width="100"
             align="center">
-          <template slot-scope="scope">
-            <el-button
+            <template slot-scope="scope">
+              <el-button
                 size="mini"
                 type="primary"
                 @click="editInfo(scope.row)"
-            >编辑
-            </el-button>
-            <el-button
+              >编辑
+              </el-button>
+              <el-button
                 size="mini"
                 type="danger"
                 @click="deleteInfo(scope.row)"
-            >删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <loading :loading="loading">数据获取中</loading>
-      <pagination :page="dataCenterSearch.page" :total="dataCenterSearch.total" @pageChange="pageChange"
-                  @pageSizeChange="pageSizeChange"></pagination>
+              >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <loading :loading="loading">数据获取中</loading>
+        <pagination :page="dataCenterSearch.page" :total="dataCenterSearch.total" @pageChange="pageChange"
+                    @pageSizeChange="pageSizeChange"></pagination>
+      </div>
     </div>
-
+    <!-- 新建树节点抽屉 -->
+    <el-drawer
+      :wrapperClosable="false"
+      :title="productTitle"
+      :visible.sync="productModal"
+      size="800px"
+      :before-close="closeDrawer"
+      label-width="130px"
+    >
+      <div class="demo-drawer-content">
+        <el-form :model="productModelAdd"
+                 ref="productModelAdd"
+                 :rules="productRules"
+                 class="label-input-form"
+                 label-width="130px">
+          <el-row>
+            <el-col>
+              <el-form-item label="目录名称" prop="name" class="add-form-item">
+                <el-input v-model.trim="productModelAdd.name" placeholder="请输入目录名称" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="目录顺序" prop="sort" class="add-form-item">
+                <el-input v-model.number="productModelAdd.sort"
+                          number
+                          placeholder="请输入目录顺序"
+                          :maxlength="4"
+                          clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="demo-drawer-footer">
+        <el-button
+          class="common-button-primary"
+          icon="el-icon-check"
+          type="primary"
+          @click="saveProduct('productModelAdd')">提交
+        </el-button>
+        <el-button
+          class="common-button-default"
+          icon="el-icon-close"
+          @click="closeModal">取消
+        </el-button>
+      </div>
+    </el-drawer>
     <el-drawer
         :title="attributeTitle"
         :wrapperClosable="false"
@@ -223,6 +330,17 @@ export default {
   name: "dataCenter",
   data() {
     return {
+      filterText: '', // 国内法规过滤
+      props: {
+        label: 'name',
+        children: 'children'
+      },
+      treeList: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      sideClose: false, // 边栏收展状态
       loading: false,
       submitLoading: false,
       fileList: [],
@@ -256,12 +374,229 @@ export default {
         pageSize: this.$store.getters.userInfo.configContent,
         total: 0
       },
-      dataCenterTable: []
+      dataCenterTable: [],
+      productModelAdd: {
+        name: '',
+        parentId: '',
+        sort: ''
+      },
+      productRules: {
+        name: [
+          {required: true, message: '目录名称不能为空', trigger: 'change'}
+        ],
+        sort: [
+          {required: true, message: '目录顺序不能为空', trigger: 'change'}
+        ]
+      },
+      productModal: false,
+      productTitle: ''
     }
   },
   methods: {
+    // 左右拖动事件
+    dragControllerLR: function () {
+      var resize = document.getElementById("resize");
+      var left = document.getElementById("left");
+      var right = document.getElementById("right");
+      var box = document.getElementById("dataCenter");
+      resize.onmousedown = function (e) {
+        var startX = e.clientX;
+        resize.left = resize.offsetLeft;
+        document.onmousemove = function (e) {
+          var endX = e.clientX;
+
+          var moveLen = resize.left + (endX - startX);
+          var maxT = box.clientWidth - resize.offsetWidth;
+          if (moveLen < 150) moveLen = 150;
+          if (moveLen > 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()
   }
 }
 </script>
@@ -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%;
 }
 </style>