style:

src/pages/regulatoryRepository/dataCenter/index.vue

@@ -15,36 +15,45 @@
               :data="treeList"
               :default-expanded-keys="['1']"
               highlight-current
+              :filter-node-method="filterNode"
               @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>
+                slot-scope="{ node, data }"
+                class="custom-tree-node"
+                @mouseenter="mouseenter(data)"
+                @mouseleave="mouseleave(data)"
+              >
+                <span
+                  :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"
+                />
                 <span style="font-size:12px"> {{ node.label }} </span>
                 <span>
                   <el-button
-                            type="text"
-                            size="mini"
                     v-show="data.show"
                     v-btn-permission="'e9e80920563325fa7f6e91213ee98466'"
-                            @click="() => append(data)">
+                    type="text"
+                    size="mini"
+                    @click="() => append(data)"
+                  >
                     新增
                   </el-button>
                   <el-button
-                            type="text"
-                            size="mini"
                     v-show="data.show"
                     v-btn-permission="'0b95246d8ad2da6c54381deffa3d0fa2'"
-                            @click="() => update(data)">
+                    type="text"
+                    size="mini"
+                    @click="() => update(data)"
+                  >
                     编辑
                   </el-button>
                   <el-button
-                            type="text"
-                            size="mini"
                     v-show="data.showDel"
                     v-btn-permission="'07ba9d907841a62a18267198da3873b1'"
-                            @click="() => remove(node, data)">
+                    type="text"
+                    size="mini"
+                    @click="() => remove(node, data)"
+                  >
                     删除
                   </el-button>
                 </span>
@@ -53,13 +62,13 @@
           </el-card>
         </div>
       </div>
-      <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
+      <div class="tree-collapse" :class="{ 'tree-close': sideClose }" @click="treeCollapse">
         <!--切换折叠样式-->
-        <i class="el-icon-arrow-left" v-if="sideClose === false"></i>
+        <i v-if="sideClose === false" class="el-icon-arrow-left" />
-        <i class="el-icon-arrow-right" v-if="sideClose === true"></i>
+        <i v-if="sideClose === true" class="el-icon-arrow-right" />
       </div>
     </div>
-    <div id="resize"></div>
+    <div id="resize" />
     <div id="right" class="tree-right">
       <div class="search-area">
         <el-form :modal="dataCenterSearch" :inline="true">
@@ -69,9 +78,21 @@
             <!--              v-model="dataCenterSearch.dataType"-->
             <!--              placeholder="请输入类型"-->
             <!--            ></el-input>-->
-            <el-select ref="treeSelect" class="tree-select" filterable :filter-method="filterMethod" @focus="onfocus" clearable v-model="dataCenterSearch.dataType" @clear="setValueNull" value-key="id" placeholder="请选择类型">
+            <el-select
+              ref="treeSelect"
+              v-model="dataCenterSearch.dataType"
+              class="tree-select"
+              filterable
+              :filter-method="filterMethod"
+              clearable
+              value-key="id"
+              placeholder="请选择类型"
+              @focus="onfocus"
+              @clear="setValueNull"
+            >
               <el-option class="tree-select-option" :value="dataCenterSearch.dataType" :label="dataCenterSearch.dataType">
-                <el-tree v-if="!fuzzyquery"
+                <el-tree
+                  v-if="!fuzzyquery"
                   ref="tree"
                   node-key="id"
                   class="tree-line"
@@ -81,10 +102,11 @@
                   :data="treeList"
                   :default-expanded-keys="['1']"
                   highlight-current
+                  :filter-node-method="filterNode"
                   @node-click="selectTreeClick2"
-                  :filter-node-method="filterNode">
+                />
-                </el-tree>
+                <el-tree
-                <el-tree v-else
+                  v-else
                   :key="1"
                   ref="tree"
                   node-key="id"
@@ -96,19 +118,19 @@
                   :default-expanded-keys="['1']"
                   default-expand-all
                   highlight-current
+                  :filter-node-method="filterNode"
                   @node-click="selectTreeClick2"
-                  :filter-node-method="filterNode">
+                />
-                </el-tree>
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="资料标题:">
             <el-input
-              size="small"
               v-model="dataCenterSearch.dataTitle"
+              size="small"
               placeholder="请输入资料标题"
               clearable
-            ></el-input>
+            />
           </el-form-item>
           <el-form-item label="上传开始时间:">
             <!--            <el-date-picker-->
@@ -126,8 +148,8 @@
               size="small"
               type="date"
               value-format="yyyy-MM-dd"
-              placeholder="请选择上传开始时间">
+              placeholder="请选择上传开始时间"
-            </el-date-picker>
+            />
           </el-form-item>
           <el-form-item label="上传结束时间:">
             <el-date-picker
@@ -135,32 +157,37 @@
               size="small"
               type="date"
               value-format="yyyy-MM-dd"
-              placeholder="请选择上传结束时间">
+              placeholder="请选择上传结束时间"
-            </el-date-picker>
+            />
           </el-form-item>
           <el-form-item>
             <el-button
+              v-btn-permission="'39784f04404cdf50891e9d033f6373c3'"
               type="primary"
               size="mini"
-              v-btn-permission="'39784f04404cdf50891e9d033f6373c3'"
+              @click="searchInfo"
-              @click="searchInfo">
+            >
               查询
             </el-button>
           </el-form-item>
           <el-form-item>
             <el-button
+              size="mini"
               @click="clearSearch"
-              size="mini">清空
+            >
+              清空
             </el-button>
           </el-form-item>
         </el-form>
       </div>
       <div class="operate-area" style="padding: 0 10px 10px 10px">
         <el-button
+          v-btn-permission="'45db41d367f474e10a7ae5dbe8cb0f6e'"
           size="mini"
           type="primary"
-          v-btn-permission="'45db41d367f474e10a7ae5dbe8cb0f6e'"
+          @click="addInfo"
-          @click="addInfo">新增
+        >
+          新增
         </el-button>
       </div>
       <div class="table-area">
@@ -177,7 +204,8 @@
             type="index"
             width="55"
             label="序号"
-            align="center">
+            align="center"
+          >
             <template slot-scope="{scope, column, $index}">
               {{ ($index + 1) + (dataCenterSearch.page - 1) * dataCenterSearch.pageSize }}
             </template>
@@ -187,23 +215,25 @@
             width="250"
             label="类型"
             :show-overflow-tooltip="true"
-            align="center">
+            align="center"
-          </el-table-column>
+          />
           <el-table-column
             prop="dataTitle"
             min-width="250"
             label="资料标题"
             :show-overflow-tooltip="true"
-            align="center">
+            align="center"
+          >
             <template slot-scope="scope">
-              <span @click.stop="toDetail(scope.row)" style="cursor:pointer;color: #409eff">{{ scope.row.dataTitle }}</span>
+              <span style="cursor:pointer;color: #409eff" @click.stop="toDetail(scope.row)">{{ scope.row.dataTitle }}</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="dataUploadTime"
             width="250"
             label="上传时间"
-            align="center">
+            align="center"
+          >
             <template slot-scope="scope">
               <span>{{ $moment(scope.row.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
             </template>
@@ -211,28 +241,35 @@
           <el-table-column
             label="操作"
             min-width="100"
-            align="center">
+            align="center"
+          >
             <template slot-scope="scope">
               <el-button
+                v-btn-permission="'d9698737e801822ab8f96dbcd47b7d62'"
                 size="mini"
                 type="primary"
-                v-btn-permission="'d9698737e801822ab8f96dbcd47b7d62'"
                 @click="editInfo(scope.row)"
-              >编辑
+              >
+                编辑
               </el-button>
               <el-button
+                v-btn-permission="'1cae70abf414bacc33f3ed794cdfa903'"
                 size="mini"
                 type="danger"
-                v-btn-permission="'1cae70abf414bacc33f3ed794cdfa903'"
                 @click="deleteInfo(scope.row)"
-              >删除
+              >
+                删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <loading :loading="loading">数据获取中</loading>
-        <pagination :page="dataCenterSearch.page" :total="total" @pageChange="pageChange"
+        <pagination
-                    @pageSizeChange="pageSizeChange"></pagination>
+          :page="dataCenterSearch.page"
+          :total="total"
+          @pageChange="pageChange"
+          @pageSizeChange="pageSizeChange"
+        />
       </div>
     </div>
     <!-- 新建树节点抽屉 -->
@@ -245,24 +282,28 @@
       label-width="130px"
     >
       <div class="demo-drawer-content">
-        <el-form :model="productModelAdd"
+        <el-form
           ref="productModelAdd"
+          :model="productModelAdd"
           :rules="productRules"
           class="label-input-form"
-                 label-width="130px">
+          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-input v-model.trim="productModelAdd.name" placeholder="请输入目录名称" clearable />
               </el-form-item>
             </el-col>
             <el-col>
               <el-form-item label="目录顺序" prop="sort" class="add-form-item">
-                <el-input v-model.number="productModelAdd.sort"
+                <el-input
+                  v-model.number="productModelAdd.sort"
                   number
                   placeholder="请输入目录顺序"
                   :maxlength="4"
-                          clearable></el-input>
+                  clearable
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -273,12 +314,16 @@
           class="common-button-primary"
           icon="el-icon-check"
           type="primary"
-          @click="saveProduct('productModelAdd')">提交
+          @click="saveProduct('productModelAdd')"
+        >
+          提交
         </el-button>
         <el-button
           class="common-button-default"
           icon="el-icon-close"
-          @click="closeModal">取消
+          @click="closeModal"
+        >
+          取消
         </el-button>
       </div>
     </el-drawer>
@@ -292,15 +337,21 @@
     >
       <div style="height: 92%;margin-left: 3%">
         <el-form
+          v-if="showInfoModal"
           ref="attributeEO"
           :model="attributeEO"
           :rules="attributeEOFormRules"
           class="label-input-form"
           label-width="130px"
-          v-if="showInfoModal"
         >
           <el-form-item label="所属目录" prop="treeId" class="add-form-item">
-            <el-select ref="treeSelect" class="tree-select" v-model="attributeEO.treeId" value-key="id" placeholder="请选择所属目录">
+            <el-select
+              ref="treeSelect"
+              v-model="attributeEO.treeId"
+              class="tree-select"
+              value-key="id"
+              placeholder="请选择所属目录"
+            >
               <el-option class="tree-select-option" :value="attributeEO.treeId" :label="attributeEO.treeName">
                 <el-tree
                   ref="tree"
@@ -312,9 +363,9 @@
                   :data="treeList"
                   :default-expanded-keys="['1']"
                   highlight-current
+                  :filter-node-method="filterNode"
                   @node-click="selectTreeClick"
-                  :filter-node-method="filterNode">
+                />
-                </el-tree>
               </el-option>
             </el-select>
           </el-form-item>
@@ -323,7 +374,13 @@
             prop="dataType"
             class="add-form-item"
           >
-            <el-select ref="treeSelect" class="tree-select" v-model="attributeEO.dataType" value-key="id" placeholder="请选择类型">
+            <el-select
+              ref="treeSelect"
+              v-model="attributeEO.dataType"
+              class="tree-select"
+              value-key="id"
+              placeholder="请选择类型"
+            >
               <el-option class="tree-select-option" :value="attributeEO.dataType" :label="attributeEO.dataType">
                 <el-tree
                   ref="tree"
@@ -335,9 +392,9 @@
                   :data="treeList"
                   :default-expanded-keys="['1']"
                   highlight-current
+                  :filter-node-method="filterNode"
                   @node-click="selectTreeClick3"
-                  :filter-node-method="filterNode">
+                />
-                </el-tree>
               </el-option>
             </el-select>
             <!--            <el-input-->
@@ -352,8 +409,8 @@
             class="add-form-item"
           >
             <el-input
-              class="dataTitle"
               v-model="attributeEO.dataTitle"
+              class="dataTitle"
               placeholder="请输入资料标题"
               clearable
             />
@@ -364,17 +421,23 @@
             class="add-form-item"
           >
             <el-input
+              v-model="attributeEO.dataExplain"
               type="textarea"
               :autosize="{ minRows: 1, maxRows: 10}"
               resize="none"
               style="width: 95%"
               maxlength="4000"
               show-word-limit
-              v-model="attributeEO.dataExplain"
               placeholder="请输入资料说明"
               clearable
             />
-            <el-button icon="el-icon-delete" circle type="danger" size="mini" @click="attributeEO.dataExplain = ''"></el-button>
+            <el-button
+              icon="el-icon-delete"
+              circle
+              type="danger"
+              size="mini"
+              @click="attributeEO.dataExplain = ''"
+            />
           </el-form-item>
           <el-form-item
             label="附件"
@@ -391,7 +454,8 @@
               :limit="50"
               :on-exceed="handleExceed"
               :on-success="uploadSuccess"
-              :file-list="fileList">
+              :file-list="fileList"
+            >
               <el-button size="small" type="primary">点击上传</el-button>
             </el-upload>
           </el-form-item>
@@ -403,19 +467,19 @@
           class="common-button-primary"
           size="mini"
           icon="el-icon-check"
-          @click="saveInfo"
           :loading="submitLoading"
-        >提交
+          @click="saveInfo"
-        </el-button
         >
+          提交
+        </el-button>
         <el-button
           size="mini"
           icon="el-icon-close"
           class="common-button-default"
           @click="cancelModel"
-        >取消
-        </el-button
         >
+          取消
+        </el-button>
       </div>
     </el-drawer>
   </div>
@@ -423,7 +487,7 @@
 
 <script>
 export default {
-  name: "dataCenter",
+  name: 'DataCenter',
   data () {
     return {
       fuzzyquery: false,
@@ -500,6 +564,12 @@ export default {
       treeId: '',
     }
   },
+  async mounted () {
+    this.searchInfo()
+    // 进入页面后查询树形结构目录
+    await this.getTreeAsync()
+    this.dragControllerLR()
+  },
   methods: {
     onfocus () {
       this.fuzzyquery = false
@@ -513,7 +583,7 @@ export default {
       }
     },
     fuzzyQuery (list, keyWord) {
-      let newTree = []
+      const newTree = []
       list.forEach(element => {
         if(element.children && element.children.length > 0) {
           const ab = this.fuzzyQuery(element.children, keyWord);
@@ -553,24 +623,24 @@ export default {
     // },
     // 左右拖动事件
     dragControllerLR: function () {
-      var resize = document.getElementById("resize");
+      const resize = document.getElementById('resize');
-      var left = document.getElementById("left");
+      const left = document.getElementById('left');
-      var right = document.getElementById("right");
+      const right = document.getElementById('right');
-      var box = document.getElementById("dataCenter");
+      const box = document.getElementById('dataCenter');
       resize.onmousedown = function (e) {
-        var startX = e.clientX;
+        const startX = e.clientX;
         resize.left = resize.offsetLeft;
         document.onmousemove = function (e) {
-          var endX = e.clientX;
+          const endX = e.clientX;
 
-          var moveLen = resize.left + (endX - startX);
+          let moveLen = resize.left + (endX - startX);
-          var maxT = box.clientWidth - resize.offsetWidth;
+          const 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";
+          left.style.width = moveLen + 'px';
-          right.style.width = (box.clientWidth - moveLen - 5) + "px";
+          right.style.width = (box.clientWidth - moveLen - 5) + 'px';
         }
         document.onmouseup = function (evt) {
           document.onmousemove = null;
@@ -597,8 +667,7 @@ export default {
       })
     },
     async getTreeAsync () {
-
+      const tsResource = await this.selectMenu1()
-      let tsResource = await this.selectMenu1()
 
       let list1 = []
       if(tsResource && tsResource.ok && tsResource.data) {
@@ -631,17 +700,14 @@ export default {
           this.attributeEO.dataType = res.data.name
         }
       })
-
     },
     selectTreeClick2 (treeNode) {
       // this.dataCenterSearch.treeId = treeNode.id === '1' ? '' : treeNode.id
       this.dataCenterSearch.dataType = treeNode.name
-
     },
     selectTreeClick3 (treeNode) {
       // this.attributeEO.dataType = treeNode.id === '1' ? '' : treeNode.id
       this.attributeEO.dataType = treeNode.name
-
     },
     // 树节点鼠标移入移出
     mouseenter (data) {
@@ -696,14 +762,14 @@ export default {
         roundButton: true,
         type: 'warning'
       }).then(() => {
-        this.$http.delete("fileMaterialCenter/zlTree", {
+        this.$http.delete('fileMaterialCenter/zlTree', {
           id: data.id
         }, res => {
         }, e => {
           if (e.ok) {
             this.$message({
               type: 'success',
-              message: "删除成功"
+              message: '删除成功'
             })
             this.selectMenu()
             this.getDomesticStandardTable()
@@ -785,7 +851,7 @@ export default {
     },
     toDetail (row) {
       this.$router.push({
-        name: "dataCenterDetail",
+        name: 'dataCenterDetail',
         query: {
           id: row.id,
           treeId: this.treeId
@@ -793,10 +859,10 @@ export default {
       });
     },
     beginImportFile (file) {
-      var filename = file.name
+      const filename = file.name
-      var index1 = filename.lastIndexOf('.')
+      const index1 = filename.lastIndexOf('.')
-      var index2 = filename.length
+      const index2 = filename.length
-      var fileSuffix = filename.substring(index1, index2)
+      const fileSuffix = filename.substring(index1, index2)
       // const fileSuffix = file.name.split('.')[1] // 后缀名
       // 判断上传文件格式
       if (fileSuffix === '.pdf' || fileSuffix === '.PDF' || fileSuffix === '.ppt' || fileSuffix === '.PPT' || fileSuffix === '.pptx' || fileSuffix === '.PPTX' || fileSuffix === '.doc' || fileSuffix === '.DOC' || fileSuffix === '.docx' || fileSuffix === '.DOCX' || fileSuffix === '.xls' || fileSuffix === '.xlsx') {
@@ -817,7 +883,6 @@ export default {
       return true
     },
     uploadSuccess (response, file, fileList) {
-
       if(response.ok) {
         const fileIdList = fileList.map(item => {
           if (item.response) {
@@ -856,7 +921,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        let deleteId = row.id
+        const deleteId = row.id
         this.$http.delete('fileMaterialCenter/file-material', { id: deleteId }, {
           _this: this
         }, res => {
@@ -935,7 +1000,7 @@ export default {
       this.attributeEO = row
       this.fileList = []
       // 请求上传的文件信息
-      this.$http.get("att/attFile/getMultiFileInfos", {
+      this.$http.get('att/attFile/getMultiFileInfos', {
         fileIds: row.attachFileId
       }, {
         _this: this
@@ -1000,7 +1065,6 @@ export default {
           this.submitLoading = false
         }
       })
-
     },
     cancelModel () {
       this.$nextTick(() => {
@@ -1015,12 +1079,6 @@ export default {
       })
       this.showInfoModal = false
     },
-  },
-  async mounted() {
-    this.searchInfo()
-    // 进入页面后查询树形结构目录
-    await this.getTreeAsync()
-    this.dragControllerLR()
   }
 }
 </script>