档案验收样式修改

src/views/transfer/components/table-collect.vue

@@ -27,20 +27,25 @@
             </template>
             <div v-loading="totalLoaing" class="h-screen">
                 <div v-for="(item, index) in totalData" :key="item.unitInfo">
-                    <div class="hc-card-table-title">{{ item.unitInfo }}</div>
-                    <template v-for="(item1, index1) in item.nodeLists" :key="item1.nodeInfo">
-                        <HcCardItem v-if="item1.list && item1.list.length > 0" ui="h-half">
-                            <template #header>
-                                <!-- <el-checkbox v-model="item1.checkedval" label="全选" size="large" @change="clickAll($event, index)" />  -->
-                                <span>{{ item1.nodeInfo }}</span>
-
-                            <!-- <span class="text-gray">（238卷）</span> -->
-                            </template>
-                            <div :style="`height: ${item1.list !== null && item1.list.length > 9 ? '300px' : 'auto'};`">
-                                <visualTable ref="visuatable" :table-data="item1.list " :index-num="index" @get-table-keys="getTableKeys($event, index1)" />
-                            </div>
-                        </HcCardItem>
-                    </template>
+                    <div v-if="item.nodeLists && item.nodeLists.length > 0" class="hc-card-table-title">{{ item.unitInfo }}</div>
+                    <el-collapse>
+                        <template v-for="(item1, index1) in item.nodeLists" :key="item1.nodeInfo">
+                            <el-collapse-item v-if="item1.list && item1.list.length > 0" :name="index1">
+                                <template #title>
+                                    <span class="item1-title">{{ item1.nodeInfo }}</span>
+                                </template>
+                                <template #icon="{ isActive }">
+                                    <span class="icon-ele">
+                                        <i v-if="!isActive" class="ri-arrow-right-wide-line" />
+                                        <i v-else class="ri-arrow-down-wide-line" />
+                                    </span>
+                                </template>
+                                <div :style="listHeightStyle(item1)">
+                                    <visualTable ref="visuatable" :table-data="item1.list" :index-num="index" @get-table-keys="getTableKeys($event, index1)" />
+                                </div>
+                            </el-collapse-item>
+                        </template>
+                    </el-collapse>
                 </div>
             </div>
         </hc-new-card>
@@ -141,6 +146,7 @@ const getBtnstatus = async ()=>{
 const totalData = ref([])
 const totalTabledata = ref([])
 const totalLoaing = ref(false)
+const isActive = ref(1)
 const getTotalData = async ()=>{
     totalLoaing.value = true
     const { error, code, data } = await initialgApi.getAllUnitArchivesView({
@@ -322,8 +328,23 @@ const changePdfDate = (val) => {
         }
     })
 }
+// 计算属性
+const listHeightStyle = (item1) => {
+    if (!item1 || !item1.list) return 'height: auto;'
+    return item1.list.length > 9 ? 'height: 300px;' : 'height: auto;'
+}
 </script>
 
 <style lang="scss" scoped>
 @import '~style/transfer/scoped/initial.scss';
+.item1-title{
+    color:var(--el-color-primary-dark-2);
+    font-weight: 700;
+    margin-left: 10px;
+    font-size: 16px;
+}
+.icon-ele {
+  margin: 0 8px 0 auto;
+  color:var(--el-color-primary);
+}
 </style>

src/views/transfer/components/visual-table.vue

@@ -62,7 +62,7 @@ watch(() => [
     indexNum.value = index
     tableData.value = []
         //判断数据长度有没有9个，有就先添加9个，没有直接获取所有数据
-        if (allData.value.length > 9) {
+        if (allData.value && allData.value.length > 9) {
           for (let i = 0;i < needle.value ;i++) {
             tableData.value[i] = allData.value[i]
           }

src/views/transfer/initial-expert.vue

@@ -33,29 +33,31 @@
                 </HcTooltip>
             </template>
 
-            <div v-if="totalData.length > 0" v-loading="totalLoaing" class="h-screen">
+            <div v-if="totalData.length > 0 && totalData[0].nodeLists" v-loading="totalLoaing" class="h-screen">
                 <div v-for="(item, index) in totalData" :key="index">
-                    <div class="hc-card-table-title">{{ item?.unitInfo }}</div>
-                    <template v-for="(item1, index1) in item?.nodeLists" :key="index1">
-                        <HcCardItem v-if="item1.list && item1.list.length > 0" ui="h-half">
-                            <template #header>
-                                <span>{{ item1.nodeInfo }}</span>
-                            <!-- <span class="text-gray">（238卷）</span> -->
-                            </template>
-                            <div :style="`height: ${item1.list !== null && item1.list.length > 9 ? '300px' : 'auto'};`">
-                                <!-- <HcTable
-                                    ref="tableRef" :column="tableColumn" :datas="item1.list" :loading="tableLoading"
-                                    is-new :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
-                                    @selection-change="tableSelection"
-                                /> -->
-                                <visualTable :table-data="item1.list " :is-check="false" @get-table-keys="getTableKeys" />
-                            </div>
-                        </HcCardItem>
-                    </template>
+                    <div v-if="item.nodeLists && item.nodeLists.length > 0" class="hc-card-table-title">{{ item?.unitInfo }}</div>
+                    <el-collapse>
+                        <template v-for="(item1, index1) in item.nodeLists" :key="item1.nodeInfo">
+                            <el-collapse-item v-if="item1.list && item1.list.length > 0" :name="index1">
+                                <template #title>
+                                    <span class="item1-title">{{ item1.nodeInfo }}</span>
+                                </template>
+                                <template #icon="{ isActive }">
+                                    <span class="icon-ele">
+                                        <i v-if="!isActive" class="ri-arrow-right-wide-line" />
+                                        <i v-else class="ri-arrow-down-wide-line" />
+                                    </span>
+                                </template>
+                                <div :style="listHeightStyle(item1)">
+                                    <visualTable ref="visuatable" :table-data="item1.list" :index-num="index" @get-table-keys="getTableKeys($event, index1)" />
+                                </div>
+                            </el-collapse-item>
+                        </template>
+                    </el-collapse>
                 </div>
             </div>
 
-            <div v-else class=" h-screen">
+            <div v-else class="h-screen">
                 <hc-empty />
             </div>
         </hc-new-card>
@@ -117,6 +119,7 @@ const getTableKeys = (val)=>{
     tableKeys.value = val
 }
 const totalData = ref([])
+const isActive = ref(1)
 const totalLoaing = ref(false)
 const getTotalData = async ()=>{
     totalLoaing.value = true
@@ -137,6 +140,8 @@ const getTotalData = async ()=>{
         totalData.value = []
 
     }
+   
+    
 }
 
 //------立项审批
@@ -363,10 +368,26 @@ const previewClick = async ()=>{
 
 //     }
 // }
+// 计算属性
+const visuatable = ref(false)
+const listHeightStyle = (item1) => {
+    if (!item1 || !item1.list) return 'height: auto;'
+    return item1.list.length > 9 ? 'height: 300px;' : 'height: auto;'
+}
 </script>
 
 <style lang="scss" scoped>
 @import '~style/transfer/scoped/initial-expert.scss';
+.item1-title{
+    color:var(--el-color-primary-dark-2);
+    font-weight: 700;
+    margin-left: 10px;
+    font-size: 16px;
+}
+.icon-ele {
+  margin: 0 8px 0 auto;
+  color:var(--el-color-primary);
+}
 </style>
 
 <style lang="scss">