Browse Source

给树加上加载提示

ZaiZai 2 years ago
parent
commit
ba6d38a34e

+ 2 - 1
src/styles/app/element.scss

@@ -438,7 +438,7 @@
     .el-tree-node__children{
             overflow: visible!important;
     }
-    
+
 }
 
 //弹窗提示
@@ -606,6 +606,7 @@
 
 // 树样式
 .hc-tree-node {
+    width: 100%;
     .data-custom-tree-node {
         position: relative;
         display: flex;

+ 8 - 2
src/views/archives/appraisal.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" @nodeLoading="treeNodeLoading"/>
                       <!--ProjectTree :datas="ElTreeData" :autoExpandKeys="TreeAutoExpandKeys" @nodeTap="nodeElTreeClick" :ischeck="false"/-->
                 </el-scrollbar>
             </div>
@@ -118,6 +118,12 @@ onMounted(() => {
       getClassIfyList()
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //搜索表单
 const searchForm = ref({
     contractId: null, type: null, approval: null, betweenTime: null,

+ 17 - 11
src/views/archives/bookmark.vue

@@ -10,9 +10,10 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                     <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" :menus="ElTreeMenu"  @menuTap="ElTreeMenuClick" style="width:100%"/>
+                     <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" :menus="ElTreeMenu"
+                             @menuTap="ElTreeMenuClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -41,10 +42,10 @@
                                     </el-select>
                                 </el-form-item>
                         </el-col>
-                        
+
                     </el-row>
-                    
-                    <el-row  :gutter="20"> 
+
+                    <el-row  :gutter="20">
                         <el-col :span="12">
                                 <el-form-item label="目录名称">
                                     <el-input v-model="formInline.value.title" placeholder="请输入" />
@@ -188,6 +189,11 @@ onMounted(() => {
      setElTreeMenu(1)
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
 
 let formInline = reactive({
     value:{
@@ -278,7 +284,7 @@ const nodeElTreeClick = ({node, data, keys, key}) => {
     console.log('点击',data);
     // treeNodeInfo.value = node
    formInline.value=data
-  
+
     //缓存展开的节点
     setStoreData('scanningTreeExpandKeys', keys)
 }
@@ -288,7 +294,7 @@ const TreeMark = ref(false)
 const setElTreeMenu = (contractType) => {
     let newArr = [];
     newArr=[
-      
+
         {icon: 'add-circle', label: '新增', key: "add"},
         {icon: 'draft', label: '编辑', key: "edit"},
         {icon: 'delete-bin', label: '删除', key: "del"},
@@ -343,7 +349,7 @@ const subList = ref([
     ])//子目录列表
 
 const getSubList = ()=>{
-    
+
 }
 
 const listChange = (value,index)=>{
@@ -390,11 +396,11 @@ const itemChange = (value,index)=>{
 .my-collapse :deep(.el-collapse-item){
     background-color: #f1f5f8 !important
 }
-  
+
 .my-collapse :deep(.el-collapse-item__header){
     background-color: #f1f5f8 !important
 }
-  
+
 .my-collapse :deep(.el-collapse-item__wrap){
     background-color: #f1f5f8 !important
 }
@@ -402,5 +408,5 @@ const itemChange = (value,index)=>{
 .coll-item{
     background-color: #d9d9d9;
 }
-  
+
 </style>

+ 20 - 14
src/views/archives/meta-data.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                  <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"/>
+                  <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" @nodeLoading="treeNodeLoading"/>
                    <!--ProjectTree :datas="ElTreeData" :autoExpandKeys="TreeAutoExpandKeys" @nodeTap="nodeElTreeClick" :ischeck="false"/-->
                 </el-scrollbar>
             </div>
@@ -28,15 +28,15 @@
                 </template> -->
                  <div class="body" :class="tableFileShow?'file-table':''">
                     <div class="hc-c-table-box">
-                        <HcTable ref="tableRef" 
-                        :column="tableColumn" 
-                        :datas="tableData" 
-                        :loading="tableLoading" 
-                        isCheck @selection-change="tableSelection" 
+                        <HcTable ref="tableRef"
+                        :column="tableColumn"
+                        :datas="tableData"
+                        :loading="tableLoading"
+                        isCheck @selection-change="tableSelection"
                         @row-click="tableRowClick"
                         :ui="hoverHand?'hover-hand':''"
                         >
-                            
+
                         </HcTable>
                     </div>
                     <div class="hc-f-table-box" v-if="tableFileShow">
@@ -47,12 +47,12 @@
                             </div>
                         </div>
                         <div class="hc-file-table-box">
-                            <HcTable ref="tableFileRef" 
-                            :column="innertableColumn" 
-                            :datas="tableData" 
-                            :loading="tableFileLoading" 
-                            isCheck 
-                            @selection-change="tableFileSelection" 
+                            <HcTable ref="tableFileRef"
+                            :column="innertableColumn"
+                            :datas="tableData"
+                            :loading="tableFileLoading"
+                            isCheck
+                            @selection-change="tableFileSelection"
                             @row-click="tableFileRowClick"
                              :ui="hoverHand?'hover-hand':''"
                             >
@@ -145,6 +145,12 @@ onMounted(() => {
      getClassIfyList()
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //搜索表单
 const searchForm = ref({
     contractId: null, type: null, approval: null, betweenTime: null,

+ 8 - 2
src/views/archives/rolling.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box"  v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"  @nodeLoading="treeNodeLoading"/>
                     <!--ProjectTree :datas="ElTreeData" :autoExpandKeys="TreeAutoExpandKeys" @nodeTap="nodeElTreeClick" :ischeck="false"/-->
                 </el-scrollbar>
             </div>
@@ -73,6 +73,12 @@ onMounted(() => {
     getClassIfyList()
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //搜索表单
 const searchForm = ref({
     contractId: null, type: null, approval: null, betweenTime: null,

+ 22 - 16
src/views/archives/tuning.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box"  v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                 <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"/>
+                 <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -63,16 +63,16 @@
                             <span>删除</span>
                         </el-button>
                     </HcTooltip>
-                   
+
             </template>
                 <div class="body" :class="tableFileShow?'file-table':''">
                     <div class="hc-c-table-box">
-                        <HcTable ref="tableRef" 
-                        :column="tableColumn" 
-                        :datas="tableData" 
-                        :loading="tableLoading" 
-                        isCheck 
-                        @selection-change="tableSelection" 
+                        <HcTable ref="tableRef"
+                        :column="tableColumn"
+                        :datas="tableData"
+                        :loading="tableLoading"
+                        isCheck
+                        @selection-change="tableSelection"
                         @row-click="tableRowClick"
                         :ui="hoverHand?'hover-hand':''"
                         >
@@ -96,15 +96,15 @@
 
                         </div>
                         <div class="hc-file-table-box">
-                            <HcTable 
+                            <HcTable
                             ref="tableFileRef"
-                             :column="innertableColumn" 
-                             :datas="tableData" 
-                             :loading="tableFileLoading" 
-                             isCheck 
-                             @selection-change="tableSelection" 
+                             :column="innertableColumn"
+                             :datas="tableData"
+                             :loading="tableFileLoading"
+                             isCheck
+                             @selection-change="tableSelection"
                              @row-click="tableFileRowClick"
-                             
+
                              >
                                  <template #table-column-header-num>
                                     <HcTooltip keys="archives_tuning_btn_sort">
@@ -290,6 +290,12 @@ onMounted(() => {
     setTableColumns()
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //自动展开缓存
 const TreeAutoExpandKeys = ref(getStoreData('scanningTreeExpandKeys') || [])
 

+ 8 - 2
src/views/custody/early-admin.vue

@@ -37,9 +37,9 @@
                         <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                     </div>
                 </div>
-                <div class="hc-tree-box">
+                <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                     <el-scrollbar>
-                        <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick"/>
+                        <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                     </el-scrollbar>
                 </div>
                 <!--左右拖动-->
@@ -78,6 +78,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //树操作
 const nodeDataInfo = ref({})
 const projectTreeClick = ({data}) => {

+ 8 - 2
src/views/custody/early.vue

@@ -37,9 +37,9 @@
                         <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                     </div>
                 </div>
-                <div class="hc-tree-box">
+                <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                     <el-scrollbar>
-                        <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick"/>
+                        <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                     </el-scrollbar>
                 </div>
                 <!--左右拖动-->
@@ -90,6 +90,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //类型处理
 const sbTableKey = ref('reform')
 const sbTableData = ref([

+ 1 - 1
src/views/file/collection.vue

@@ -10,7 +10,7 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box" v-loading="treeLoading">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
                     <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>

+ 25 - 10
src/views/file/records.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -120,9 +120,10 @@
                 </div>
                 <div class="hc-moves-transfer-panel">
                     <div class="panel-header">选择移动目录</div>
-                    <div class="panel-body">
+                    <div class="panel-body" v-loading="treePanelLoading">
                         <el-scrollbar>
-                            <HcTree idPrefix="hc-tree-moves-" ref="movesTreeRef" :projectId="projectId" :contractId="contractId" isRadio @radioChange="radioChange" :showRadioFun="showRadioFun"/>
+                            <HcTree idPrefix="hc-tree-moves-" ref="movesTreeRef" :projectId="projectId" :contractId="contractId" isRadio
+                                    @radioChange="radioChange" :showRadioFun="showRadioFun" @nodeLoading="panelTreeLoading"/>
                         </el-scrollbar>
                     </div>
                 </div>
@@ -280,13 +281,26 @@ watch(() => [
 
 //渲染完成
 onMounted(() => {
+    treeLoading.value = true
+
     setTableColumns()
-    
+
     getStoragePeriod()
 
     getSecurityLevel()
 })
 
+//树加载
+const treeLoading = ref(false)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
+const treePanelLoading = ref(false)
+const panelTreeLoading = () => {
+    treePanelLoading.value = false
+}
+
 //审批状态
 const approvalStatus = ref([
     {label: '未上报', value: '1'},
@@ -409,7 +423,7 @@ const sortingClick = async() => {
                 sortingNoneModal.value = true
             }
         }
-        
+
     } else {
         window?.$message?.warning('请先选择一个子节点')
     }
@@ -428,7 +442,7 @@ const sortingOldData = ref([])//旧数据,用来对比是否修改名字
 //获取数据
 const sortingItemLoading = ref(false)
 const getSortingItemData = () => {
-    
+
 }
 
 //校验
@@ -574,7 +588,7 @@ const sortingModalSave = async() => {
         }else{
             obj.ids = item.ids;
         }
-        
+
         rows.push(obj)
     })
 
@@ -649,6 +663,7 @@ const delModalClick = () => {
 const movesModal = ref(false)
 const movesClick = async() => {
     movesModal.value = true
+    treePanelLoading.value = true
     const { error, code, data } = await archiveFileApi.getarchiveFilePage({
         ...searchForm.value,
         size:9999,
@@ -730,7 +745,7 @@ const movesModalSave = async() => {
     } else {
         window.$message?.error('保存失败')
     }
-    
+
 }
 
 //关闭
@@ -930,7 +945,7 @@ const tableUploadColumn = ref([
     {key:'action', name: '操作', width: 100}
 ])
 const setTableUploadColumn = () => {
-    
+
 }
 const tableUploadData = ref([])
 

+ 8 - 2
src/views/transfer/initial.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -58,6 +58,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //类型处理
 const sbTableKey = ref('collect')
 const sbTableData = ref([

+ 8 - 2
src/views/transfer/inspects.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick"/>
+                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -177,6 +177,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //搜索表单
 const searchForm = ref({
     current: 1, size: 20, total: 0

+ 8 - 2
src/views/transfer/leader-sampling.vue

@@ -10,9 +10,9 @@
                     <div class="text-xs text-cut project-name">{{ projectInfo['name'] }}</div>
                 </div>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :contractId="contractId" :projectId="projectId" @nodeTap="projectTreeClick"/>
+                    <HcTree :contractId="contractId" :projectId="projectId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -107,6 +107,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //项目树被点击
 const projectTreeClick = () => {
 

+ 8 - 2
src/views/transfer/preliminary-examination.vue

@@ -13,9 +13,9 @@
             <div class="hc-tree-new-switch">
                 <HcNewSwitch :datas="tabData" :keys="tabKey" size="small" :round="false" @change="tabChange"/>
             </div>
-            <div class="hc-tree-box">
+            <div class="hc-tree-box" v-loading="treeLoading" element-loading-text="加载中...">
                 <el-scrollbar>
-                    <HcTree :contractId="contractId" :projectId="projectId" @nodeTap="projectTreeClick"/>
+                    <HcTree :contractId="contractId" :projectId="projectId" @nodeTap="projectTreeClick" @nodeLoading="treeNodeLoading"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -119,6 +119,12 @@ onMounted(() => {
 
 })
 
+//树加载
+const treeLoading = ref(true)
+const treeNodeLoading = () => {
+    treeLoading.value = false
+}
+
 //tab数据和相关处理
 const tabKey = ref('tab1')
 const tabData = ref([