修改档案查询页面

src/styles/page/using/query.scss

@@ -0,0 +1,202 @@
+//搜索框
+.hc-query-input-box {
+    position: relative;
+    .el-input {
+        --el-input-border-radius: 10px;
+        --el-input-height: 65px;
+        font-size: 16px;
+        .el-input-group__prepend {
+            padding: 0 12px;
+            font-size: 14px;
+            cursor: pointer;
+            user-select: none;
+            transition: .1s;
+            .prepend-filtering {
+                .name {
+                    margin-right: 5px;
+                }
+            }
+            &:hover {
+                background-color: #dedede;
+            }
+        }
+        .el-input-group__append {
+            padding: 0;
+            .append-search-btn-box {
+                position: relative;
+                display: block;
+                .search-btn {
+                    border-radius: 0 10px 0 0;
+                }
+                .search-btn + .search-btn {
+                    margin-top: 0.5px;
+                    border-radius: 0 0 10px 0;
+                }
+            }
+        }
+        .el-input-group__append .el-button,
+        .el-input-group__append .el-input,
+        .el-input-group__prepend .el-button,
+        .el-input-group__prepend .el-input {
+            font-size: var(--el-font-size-base);
+        }
+        .el-input-group__append .el-button,
+        .el-input-group__append .el-select,
+        .el-input-group__prepend .el-button,
+        .el-input-group__prepend .el-select {
+            display: block;
+            margin: 0;
+        }
+        .el-input-group__append button.el-button,
+        .el-input-group__append button.el-button:hover,
+        .el-input-group__append div.el-select .el-input__wrapper,
+        .el-input-group__append div.el-select:hover .el-input__wrapper,
+        .el-input-group__prepend button.el-button,
+        .el-input-group__prepend button.el-button:hover,
+        .el-input-group__prepend div.el-select .el-input__wrapper,
+        .el-input-group__prepend div.el-select:hover .el-input__wrapper {
+            background-color: var(--el-button-bg-color);
+            color: var(--el-button-text-color);
+            font-weight: 400;
+            border: 0;
+        }
+        .el-input-group__append button.el-button:hover,
+        .el-input-group__append div.el-select:hover .el-input__wrapper,
+        .el-input-group__prepend button.el-button:hover,
+        .el-input-group__prepend div.el-select:hover .el-input__wrapper {
+            background-color: var(--el-button-hover-bg-color);
+        }
+        .el-input-group__append .el-button.is-disabled,
+        .el-input-group__append .el-button.is-disabled:focus,
+        .el-input-group__append .el-button.is-disabled:hover {
+            color: var(--el-button-disabled-text-color);
+            cursor: not-allowed;
+            background-image: none;
+            background-color: var(--el-button-disabled-bg-color);
+            border-color: var(--el-button-disabled-border-color);
+        }
+    }
+}
+
+//筛选搜索
+.hc-query-card-box .hc-query-filtering-collapse-box {
+    position: absolute;
+    width: 100%;
+    z-index: 99;
+    border-radius: 10px;
+    box-shadow: var(--hc-shadow);
+    margin-top: 5px;
+    .el-collapse {
+        --el-collapse-header-height: 0;
+        --el-collapse-border-color: inherit;
+        --el-collapse-header-bg-color: inherit;
+        --el-collapse-header-text-color: inherit;
+        --el-collapse-header-font-size: inherit;
+        --el-collapse-content-bg-color: #E7EEF4;
+        --el-collapse-content-font-size: inherit;
+        --el-collapse-content-text-color: inherit;
+        border: 0 !important;
+    }
+    .el-collapse-item__header {
+        display: block;
+        user-select: none;
+    }
+    .hc-collapse-item-header {
+        position: relative;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        .hc-search-filtering-title {
+            margin-right: 24px;
+            font-size: 16px;
+            color: var(--el-color-primary);
+            .name {
+                margin-right: 5px;
+            }
+        }
+    }
+    .el-collapse-item__arrow {
+        display: none;
+    }
+    .el-collapse-item__wrap {
+        border-bottom: 0;
+        border-radius: 10px;
+    }
+    .el-collapse-item__content {
+        padding-bottom: 0;
+    }
+}
+
+
+.hc-query-card-box.hc-card-box.el-card {
+    .el-card__header {
+        overflow-x: hidden;
+    }
+    .hc-card-header-box {
+        display: block;
+        width: 100%;
+        .hc-card-header {
+            margin: 0 -15px;
+            margin-top: 5px;
+        }
+    }
+}
+.hc-carry-spot-checks-target.el-overlay {
+    position: absolute;
+    margin: -24px;
+    height: revert;
+    background-color: transparent;
+    .hc-drawer-box.el-drawer {
+        --el-drawer-bg-color: transparent;
+        .el-drawer__body {
+            padding: 24px;
+            overflow: hidden;
+            .el-card__body {
+                padding: 10px;
+            }
+            .hc-card-main-box {
+                display: flex;
+            }
+        }
+    }
+}
+
+.hc-csc-action-box .btn-box {
+    .el-button + .el-button {
+        margin-left: 50px;
+    }
+}
+
+.hc-node-tree-collapse.el-collapse {
+    --el-collapse-header-height: 60px;
+    border: 0;
+    .el-collapse-item {
+        margin: 0 0 16px;
+        background-color: #f1f5f8;
+        border: 1px solid #E9E9E9;
+        border-radius: 4px;
+    }
+    .el-collapse-item__header {
+        background-color: transparent;
+        font-weight: 400;
+        border-bottom: 0;
+        cursor: default;
+        font-size: 14px;
+    }
+    .el-collapse-item.is-active .el-collapse-item__header.is-active {
+        background-color: #E7EEF4;
+    }
+    .el-collapse-item__wrap {
+        background-color: transparent;
+        border-bottom: 0;
+        .el-collapse-item__content {
+            position: relative;
+            font-size: 14px;
+            line-height: initial;
+            padding: 24px;
+        }
+    }
+}
+.hover-hand{
+    cursor: pointer;
+}

src/styles/page/using/scoped/query.scss

@@ -0,0 +1,291 @@
+.hc-search-hot-key {
+    position: relative;
+    color: #9A9A9A;
+    padding: 16px;
+    font-size: 14px;
+}
+
+.hc-search-screening-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 14px;
+    .title {
+        position: relative;
+    }
+    .screening-key {
+        position: relative;
+        padding: 1px 12px;
+        border-radius: 100px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        transition: background 0.2s, color 0.2s;
+        &:hover {
+            background: var(--el-color-primary-light-8);
+        }
+        &.cut {
+            background: var(--el-color-primary);
+            color: white;
+            cursor: default;
+        }
+    }
+    .screening-key + .screening-key {
+        margin-left: 10px;
+    }
+}
+.hc-search-screening-item + .hc-search-screening-item {
+    margin-top: 14px;
+}
+
+
+.hc-query-content-header-box {
+    position: relative;
+    display: flex;
+    padding: 16px 0;
+    margin-bottom: 24px;
+    align-items: center;
+    border-bottom: 1px dashed #dcdcdc;
+    .header {
+        position: relative;
+        flex: 1;
+    }
+    .extra {
+        position: relative;
+    }
+}
+
+.hc-gather-card-box {
+    position: relative;
+    border-radius: 10px;
+    background: #E7EEF4;
+    height: calc(100% - 160px);
+}
+
+
+
+
+
+.hc-c-card-box {
+    position: relative;
+    background: #E7EEF4;
+    border-radius: 10px;
+    height: calc(100% - 375px);
+    .header-box {
+        position: relative;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #d6d6d6;
+        .header {
+            position: relative;
+            flex: 1;
+        }
+        .extra {
+            position: relative;
+        }
+    }
+    .hc-arrow-icon {
+        position: absolute;
+        border-radius: 50px;
+        left: 48%;
+        &.up {
+            background: #E7EEF4;
+            top: -40px;
+        }
+        &.down {
+            background: #f1f5f8;
+            top: 6px;
+        }
+    }
+    .body {
+        position: relative;
+        height: calc(100% - 140px);
+        padding: 16px;
+        .hc-c-table-box {
+            position: relative;
+            height: 100%;
+        }
+        .hc-f-table-box {
+            position: relative;
+            height: 300px;
+            margin-top: 24px;
+            background: #f1f5f8;
+            .header-box {
+                border-bottom: initial;
+                .hc-icon-close {
+                    font-size: 18px;
+                }
+            }
+            .hc-file-table-box {
+                position: relative;
+                height: calc(100% - 55px);
+            }
+        }
+        &.file-table .hc-c-table-box {
+            height: calc(100% - 324px);
+        }
+    }
+    .action {
+        position: relative;
+        padding: 16px;
+        border-top: 1px solid #d6d6d6;
+        display: flex;
+        align-items: center;
+    }
+    &.all {
+        position: absolute;
+        top: -94px;
+        z-index: 9999;
+        left: -24px;
+        right: -24px;
+        bottom: -24px;
+        height: initial;
+    }
+}
+.hc-carry-spot-checks-pdf {
+    position: relative;
+    flex: 1 1 auto;
+    height: 100%;
+    transition: 0.2s;
+    .hc-csc-pdf-btn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        color: white;
+        font-size: 25px;
+        z-index: 111;
+        cursor: pointer;
+        width: 36px;
+        height: 40px;
+        display: flex;
+        padding-left: 6px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 150px 0 0 150px;
+        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        background-size: 200%;
+        transition: background-position 0.5s;
+        &:hover {
+            background-position: 100% 0;
+        }
+    }
+}
+.hc-carry-spot-checks-data {
+    position: relative;
+    height: 100%;
+    width: 480px;
+    padding-left: 14px;
+    border-left: 1px solid #e9e9e9;
+    transition: 0.2s;
+    .hc-csc-switch {
+        position: relative;
+        margin-bottom: 10px;
+    }
+    .hc-csc-info-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: 244px;
+        margin-bottom: 20px;
+        .hc-info-text-item {
+            position: relative;
+            font-size: 14px;
+            display: flex;
+            align-items: flex-start;
+            .title {
+                font-weight: bold;
+            }
+            .content {
+                flex: 1;
+                position: relative;
+                color: #101010;
+            }
+        }
+        .hc-info-text-item + .hc-info-text-item {
+            margin-top: 8px;
+        }
+    }
+    .hc-csc-data-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: calc(100% - 400px);
+        margin-bottom: 16px;
+        .hc-csc-associated-row {
+            position: relative;
+            text-align: left;
+            display: flex;
+            align-items: center;
+        }
+        .hc-table-info-btn {
+            position: absolute;
+            right: -5px;
+            top: -12px;
+            color: white;
+            font-size: 20px;
+            z-index: 111;
+            cursor: pointer;
+            border-radius: 50px;
+            width: 34px;
+            height: 34px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+            background-size: 200%;
+            transition: background-position 0.5s;
+            &:hover {
+                background-position: 100% 0;
+            }
+        }
+    }
+    .hc-csc-action-box {
+        position: relative;
+        background: white;
+        border-radius: 10px;
+        padding: 12px;
+        height: 70px;
+        .header-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            .title {
+                flex: 1;
+                color: #9A9A9A;
+                font-size: 15px;
+            }
+        }
+        .btn-box {
+            position: relative;
+            text-align: center;
+        }
+    }
+}
+.hc-collapse-item-title {
+    flex: 1;
+    position: relative;
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    .icon {
+        margin-right: 10px;
+        color: #FFAF2D;
+        font-size: 24px;
+    }
+    .title {
+        flex: 1;
+        position: relative;
+        user-select: none;
+        color: #50545E;
+        font-size: 16px;
+        font-weight: 400;
+    }
+}

src/views/using/query.vue

@@ -1,94 +1,96 @@
 <template>
     <div class="hc-page-box" id="carry-spot-checks-layout-target">
         <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
-            <template #header>
-                <div class="hc-arrow-icon">
-                    <HcIcon name="arrow-left-s"/>
-                </div>
-                <div class="hc-tag-box">
-                    <el-scrollbar>
-                        <div class="scrollbar-content">
-                            <template v-for="item in tags">
-                                <el-tag class="mx-1" closable effect="light" size="large">{{ item.name }}</el-tag>
+            <div class="hc-query-input-box">
+                <el-input placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开">
+                    <template #prepend>
+                        <div class="prepend-filtering" @click="filteringClick">
+                            <span class="name">条件筛选</span>
+                            <HcIcon name="arrow-up-double" v-if="filteringShow === 'show'"/>
+                            <HcIcon name="arrow-down-double" v-else/>
+                        </div>
+                    </template>
+                    <template #append>
+                        <div class="append-search-btn-box">
+                            <el-button type="primary" class="search-btn">
+                                按文件查询
+                            </el-button>
+                            <el-button type="primary" class="search-btn">
+                                按案卷查询
+                            </el-button>
+                        </div>
+                    </template>
+                </el-input>
+            </div>
+
+            <div class="hc-query-filtering-collapse-box">
+                <el-collapse v-model="filteringShow" @change="filteringChange" accordion>
+                    <el-collapse-item name="show">
+                        <div class="hc-search-hot-key">
+                            <span>热门搜索词汇：</span>
+                            <span class="text-hover ml-4">文件名</span>
+                            <span class="text-hover ml-4">案卷名</span>
+                            <span class="text-hover ml-4">档号</span>
+                            <span class="text-hover ml-4">单位</span>
+                        </div>
+                        <div class="hc-search-screening-item">
+                            <div class="title">年度：</div>
+                            <template v-for="item in annuals">
+                                <div class="screening-key" :class="isIndex(annual,'key', item.key) ? 'cut': ''" @click="annualClick(item)">{{item.name}}</div>
                             </template>
                         </div>
-                    </el-scrollbar>
-                </div>
-                <div class="hc-arrow-icon">
-                    <HcIcon name="arrow-right-s"/>
-                </div>
-            </template>
+                        <div class="hc-search-screening-item">
+                            <div class="title">月份：</div>
+                            <template v-for="item in months">
+                                <div class="screening-key" :class="isIndex(month,'key', item.key) ? 'cut': ''" @click="monthClick(item)">{{item.name}}</div>
+                            </template>
+                        </div>
+                        <div class="hc-search-screening-item">
+                            <div class="title">期限：</div>
+                            <template v-for="item in deadlines">
+                                <div class="screening-key" :class="isIndex(deadline,'key', item.key) ? 'cut': ''" @click="deadlineClick(item)">{{item.name}}</div>
+                            </template>
+                        </div>
+                        <div class="hc-search-screening-item">
+                            <div class="title">密级：</div>
+                            <template v-for="item in securitys">
+                                <div class="screening-key" :class="isIndex(security,'key', item.key) ? 'cut': ''" @click="securityClick(item)">{{item.name}}</div>
+                            </template>
+                        </div>
+                        <div class="hc-search-screening-item">
+                            <div class="title">类别：</div>
+                            <template v-for="item in classess">
+                                <div class="screening-key" :class="isIndex(classes,'key', item.key) ? 'cut': ''" @click="classesClick(item)">{{item.name}}</div>
+                            </template>
+                        </div>
+                        <div class="hc-search-screening-item mb-4">
+                            <div class="title">目录：</div>
+                            <div class="screening-key text-link" @click="nodeTreeClick">
+                                <HcIcon name="node-tree" :line="false"/>
+                                <span class="ml-1">目录树</span>
+                            </div>
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </div>
 
-            <div class="hc-query-input-box">
-                <input class="input" placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开">
-                <div class="search-btn-box">
-                    <div class="search-btn">按文件查询</div>
-                    <div class="search-btn">按案卷查询</div>
+            <div class="hc-query-content-header-box">
+                <div class="header">
+                    <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false"/>
+                </div>
+                <div class="extra">
+                    <el-button type="primary" hc-btn>
+                        <HcIcon name="download"/>
+                        <span>下载</span>
+                    </el-button>
                 </div>
-            </div>
-            <div class="hc-search-hot-key">
-                <span>热门搜索词汇：</span>
-                <span class="text-hover ml-4">文件名</span>
-                <span class="text-hover ml-4">案卷名</span>
-                <span class="text-hover ml-4">档号</span>
-                <span class="text-hover ml-4">单位</span>
             </div>
 
-            <div class="hc-search-screening-item">
-                <div class="title">年度：</div>
-                <template v-for="item in annuals">
-                    <div class="screening-key" :class="item.name === annual ? 'cut': ''" @click="annualClick(item)">{{item.name}}</div>
-                </template>
-            </div>
-            <div class="hc-search-screening-item">
-                <div class="title">月份：</div>
-                <template v-for="item in months">
-                    <div class="screening-key" :class="item.name === month ? 'cut': ''" @click="monthClick(item)">{{item.name}}</div>
-                </template>
-            </div>
-            <div class="hc-search-screening-item">
-                <div class="title">期限：</div>
-                <template v-for="item in deadlines">
-                    <div class="screening-key" :class="item.name === deadline ? 'cut': ''" @click="deadlineClick(item)">{{item.name}}</div>
-                </template>
-            </div>
-            <div class="hc-search-screening-item">
-                <div class="title">密级：</div>
-                <template v-for="item in securitys">
-                    <div class="screening-key" :class="item.name === security ? 'cut': ''" @click="securityClick(item)">{{item.name}}</div>
-                </template>
-            </div>
-            <div class="hc-search-screening-item">
-                <div class="title">类别：</div>
-                <template v-for="item in classess">
-                    <div class="screening-key" :class="item.name === classes ? 'cut': ''" @click="classesClick(item)">{{item.name}}</div>
-                </template>
-            </div>
-            <div class="hc-search-screening-item mb-6">
-                <div class="title">目录：</div>
-                <div class="screening-key text-link" @click="nodeTreeClick">
-                    <HcIcon name="node-tree" :line="false"/>
-                    <span class="ml-1">目录树</span>
-                </div>
+            <div class="hc-gather-card-box">
+
             </div>
 
-            <div class="hc-c-card-box" :class="tableAllShow?'all':''">
-                <div class="header-box">
-                    <div class="header">
-                        <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false" v-if="userRoleId !== website.role_id"/>
-                        <span v-else>案卷</span>
-                    </div>
-                    <div class="extra">
-                        <el-button type="primary" hc-btn>
-                            <HcIcon name="download"/>
-                            <span>下载</span>
-                        </el-button>
-                    </div>
-                </div>
-                <div class="hc-arrow-icon" :class="tableAllShow?'down':'up'" @click="tableAllShowClick">
-                    <HcIcon name="arrow-up" v-if="!tableAllShow"/>
-                    <HcIcon name="arrow-down" v-else/>
-                </div>
+            <!--div class="hc-c-card-box" :class="tableAllShow?'all':''">
                 <div class="body" :class="tableFileShow?'file-table':''">
                     <div class="hc-c-table-box">
                         <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCurrentRow isCheck @selection-change="tableSelection" @row-click="tableRowClick"   :ui="hoverHand?'hover-hand':''">
@@ -113,11 +115,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="action">
-                    <HcPages :pages="searchForm" @change="pageChange"/>
-                </div>
             </div>
-
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"/>
+            </template-->
         </HcCard>
 
         <!--展开抽查-->
@@ -257,6 +258,7 @@ import {useAppStore} from "~src/store";
 import MetaTable from "../transfer/components/meta-table.vue"
 //import HcNodeTree from "./components/query/hc-tree.vue"
 import HcNodeTree from "~src/components/tree/hc-tree-1.vue"
+import { getIndex, isIndex } from "vue-utils-plus"
 import website from '~src/config/index'
 
 //变量
@@ -277,7 +279,8 @@ watch(() => [
 
 //渲染完成
 onMounted(() => {
-
+    setAnnuals()
+    setMonths()
 })
 
 //搜索表单
@@ -285,67 +288,114 @@ const searchForm = ref({
     current: 1, size: 20, total: 0
 })
 
-const tags = ref([
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-    {name: '搜索字符符号'},
-])
-
 //年度
-const annual = ref('2019')
-const annuals = ref([
-    {name: '所有'}, {name: '2020'}, {name: '2019'}, {name: '2018'},
-    {name: '2017'}, {name: '2016'}, {name: '2015'}, {name: '2014'},
-])
-const annualClick = ({name}) => {
-    annual.value = name
+const annuals = ref([])
+const setAnnuals = () => {
+    let annualArr = [{key: 'all', name: '所有'}]
+    const year = new Date().getFullYear()
+    for (let i = 0; i < 8; i++) {
+        const item = year - i + ''
+        annualArr.push({
+            key: item,
+            name: item
+        })
+    }
+    annuals.value = annualArr
+}
+const annual = ref([{key: 'all', name: '所有'}])
+const annualClick = (item) => {
+    annual.value = setQueryFiltering(annual.value, item)
 }
 
+
 //月份
-const month = ref('01月')
-const months = ref([
-    {name: '所有'}, {name: '01月'}, {name: '02月'}, {name: '03月'},
-    {name: '04月'}, {name: '05月'}, {name: '06月'}, {name: '07月'},
-    {name: '08月'}, {name: '09月'}, {name: '10月'}, {name: '11月'},
-    {name: '12月'}
-])
-const monthClick = ({name}) => {
-    month.value = name
+const months = ref([])
+const setMonths = () => {
+    let monthArr = [{key: 'all', name: '所有'}]
+    for (let i = 0; i < 12; i++) {
+        let item = (i + 1) + ''
+        item.length === 1 && (item = '0' + item)
+        monthArr.push({
+            key: item,
+            name: item + '月'
+        })
+    }
+    months.value = monthArr
+}
+const month = ref([{key: 'all', name: '所有'}])
+const monthClick = (item) => {
+    month.value = setQueryFiltering(month.value, item)
 }
 
 //期限
-const deadline = ref('永久')
+const deadline = ref([{key: 'all', name: '所有'}])
 const deadlines = ref([
-    {name: '所有'}, {name: '永久'}, {name: '30年'}, {name: '10年'}
+    {key: 'all', name: '所有'},
+    {key: 'for', name: '永久'},
+    {key: '30', name: '30年'},
+    {key: '10', name: '10年'}
 ])
-const deadlineClick = ({name}) => {
-    deadline.value = name
+const deadlineClick = (item) => {
+    deadline.value = setQueryFiltering(deadline.value, item)
 }
 
+
 //密级
-const security = ref('所有')
+const security = ref([{key: 'all', name: '所有'}])
 const securitys = ref([
-    {name: '所有'}, {name: '秘密'}, {name: '机密'}, {name: '绝密'}
+    {key: 'all', name: '所有'},
+    {key: '1',name: '秘密'},
+    {key: '2',name: '机密'},
+    {key: '3',name: '绝密'}
 ])
-const securityClick = ({name}) => {
-    security.value = name
+const securityClick = (item) => {
+    security.value = setQueryFiltering(security.value, item)
 }
 
+
 //类别
-const classes = ref('所有')
+const classes = ref([{key: 'all', name: '所有'}])
 const classess = ref([
-    {name: '所有'}, {name: '竣工图'}, {name: '试验'}, {name: '声像'}, {name: '质检'}, {name: '计量'}, {name: '隐蔽'}, {name: '管理文件'},
+    {key: 'all', name: '所有'},
+    {key: '1', name: '竣工图'},
+    {key: '2', name: '试验'},
+    {key: '3', name: '声像'},
+    {key: '4', name: '质检'},
+    {key: '5', name: '计量'},
+    {key: '6', name: '隐蔽'},
+    {key: '7', name: '管理文件'},
 ])
-const classesClick = ({name}) => {
-    classes.value = name
+const classesClick = (item) => {
+    classes.value = setQueryFiltering(classes.value, item)
+}
+
+
+//设置筛选条件
+const setQueryFiltering = (arr, {key, name}) => {
+    if (key === 'all') {
+        //如果选择所有，就删除其他
+        arr = [{key, name}]
+    } else {
+        //选中还是取消
+        const index = getIndex(arr, 'key', key)
+        if (index !== -1) {
+            arr.splice(index, 1)
+        } else {
+            arr.push({key, name})
+        }
+        //如果存在所有，就删除所有。
+        if (arr.length > 1) {
+            const isAll = getIndex(arr, 'key', 'all')
+            if (isAll !== -1) {
+                arr.splice(isAll, 1)
+            }
+        }
+    }
+    return arr
 }
 
+
+
 //目录树
 const nodeTreeClick = () => {
     nodeTreeModal.value = true
@@ -359,11 +409,26 @@ const nodeTreeModalSave = () => {
     nodeTreeModal.value = false
 }
 
+
+//搜索筛选
+const filteringShow = ref('')
+const filteringChange = (name) => {
+    filteringShow.value = name
+}
+//条件筛选
+const filteringClick = () => {
+    if (filteringShow.value) {
+        filteringShow.value = ''
+    } else {
+        filteringShow.value = 'show'
+    }
+}
+
 //tab数据和相关处理
 const tabKey = ref('tab1')
 const tabData = ref([
-    {key:'tab1', name: '文书档案', text: '(23)'},
-    {key:'tab2', name: '竣工档案', text: '(13)'},
+    {key:'tab1', name: '案卷列表'},
+    {key:'tab2', name: '档案柜'},
 ]);
 const tabChange = (item) => {
     tabKey.value = item?.key;
@@ -648,417 +713,9 @@ const collapseChange = (key) => {
 </script>
 
 <style lang="scss" scoped>
-.hc-arrow-icon {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    font-size: 20px;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: color 0.2s;
-    &:hover {
-        color: var(--el-color-primary);
-    }
-}
-.hc-tag-box {
-    position: relative;
-    width: calc(100% - 40px);
-    overflow: hidden;
-}
-.scrollbar-content {
-    white-space: nowrap;
-}
-
-.hc-query-input-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    .input {
-        position: relative;
-        height: 62px;
-        border: 0;
-        flex: 1;
-        padding: 0 24px;
-        font-size: 18px;
-        background: #E7EEF4;
-        border-radius: 100px 0 0 100px;
-        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-            color: #cccccc;
-        }
-        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-            color: #cccccc;
-        }
-        &:-moz-placeholder { /* Mozilla Firefox 19+ */
-            color: #cccccc;
-        }
-        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
-            color: #cccccc;
-        }
-        &:-ms-input-placeholder { /* Microsoft Edge */
-            color: #cccccc;
-        }
-        &:focus {
-            outline: none;
-        }
-    }
-    .search-btn-box {
-        position: relative;
-        height: 62px;
-        .search-btn {
-            position: relative;
-            height: 30px;
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 24px;
-            cursor: pointer;
-            background: var(--el-color-primary);
-            border-radius: 0 100px 100px 0;
-            transition: background 0.2s;
-            &:hover {
-                background: var(--el-color-primary-dark-2);
-            }
-        }
-        .search-btn + .search-btn {
-            margin-top: 2px;
-        }
-    }
-}
-.hc-search-hot-key {
-    position: relative;
-    color: #9A9A9A;
-    padding: 20px;
-    font-size: 14px;
-}
-
-.hc-search-screening-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    font-size: 14px;
-    .title {
-        position: relative;
-    }
-    .screening-key {
-        position: relative;
-        padding: 4px 12px;
-        border-radius: 100px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        transition: background 0.2s, color 0.2s;
-        &:hover {
-            background: var(--el-color-primary-light-8);
-        }
-        &.cut {
-            background: var(--el-color-primary);
-            color: white;
-            cursor: default;
-        }
-    }
-}
-.hc-search-screening-item + .hc-search-screening-item {
-    margin-top: 14px;
-}
-
-.hc-c-card-box {
-    position: relative;
-    background: #E7EEF4;
-    border-radius: 10px;
-    height: calc(100% - 375px);
-    .header-box {
-        position: relative;
-        padding: 16px;
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid #d6d6d6;
-        .header {
-            position: relative;
-            flex: 1;
-        }
-        .extra {
-            position: relative;
-        }
-    }
-    .hc-arrow-icon {
-        position: absolute;
-        border-radius: 50px;
-        left: 48%;
-        &.up {
-            background: #E7EEF4;
-            top: -40px;
-        }
-        &.down {
-            background: #f1f5f8;
-            top: 6px;
-        }
-    }
-    .body {
-        position: relative;
-        height: calc(100% - 140px);
-        padding: 16px;
-        .hc-c-table-box {
-            position: relative;
-            height: 100%;
-        }
-        .hc-f-table-box {
-            position: relative;
-            height: 300px;
-            margin-top: 24px;
-            background: #f1f5f8;
-            .header-box {
-                border-bottom: initial;
-                .hc-icon-close {
-                    font-size: 18px;
-                }
-            }
-            .hc-file-table-box {
-                position: relative;
-                height: calc(100% - 55px);
-            }
-        }
-        &.file-table .hc-c-table-box {
-            height: calc(100% - 324px);
-        }
-    }
-    .action {
-        position: relative;
-        padding: 16px;
-        border-top: 1px solid #d6d6d6;
-        display: flex;
-        align-items: center;
-    }
-    &.all {
-        position: absolute;
-        top: -94px;
-        z-index: 9999;
-        left: -24px;
-        right: -24px;
-        bottom: -24px;
-        height: initial;
-    }
-}
-.hc-carry-spot-checks-pdf {
-    position: relative;
-    flex: 1 1 auto;
-    height: 100%;
-    transition: 0.2s;
-    .hc-csc-pdf-btn {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        color: white;
-        font-size: 25px;
-        z-index: 111;
-        cursor: pointer;
-        width: 36px;
-        height: 40px;
-        display: flex;
-        padding-left: 6px;
-        align-items: center;
-        justify-content: center;
-        border-radius: 150px 0 0 150px;
-        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-        background-size: 200%;
-        transition: background-position 0.5s;
-        &:hover {
-            background-position: 100% 0;
-        }
-    }
-}
-.hc-carry-spot-checks-data {
-    position: relative;
-    height: 100%;
-    width: 480px;
-    padding-left: 14px;
-    border-left: 1px solid #e9e9e9;
-    transition: 0.2s;
-    .hc-csc-switch {
-        position: relative;
-        margin-bottom: 10px;
-    }
-    .hc-csc-info-box {
-        position: relative;
-        background: #E7EEF4;
-        border-radius: 10px;
-        padding: 12px;
-        height: 244px;
-        margin-bottom: 20px;
-        .hc-info-text-item {
-            position: relative;
-            font-size: 14px;
-            display: flex;
-            align-items: flex-start;
-            .title {
-                font-weight: bold;
-            }
-            .content {
-                flex: 1;
-                position: relative;
-                color: #101010;
-            }
-        }
-        .hc-info-text-item + .hc-info-text-item {
-            margin-top: 8px;
-        }
-    }
-    .hc-csc-data-box {
-        position: relative;
-        background: #E7EEF4;
-        border-radius: 10px;
-        padding: 12px;
-        height: calc(100% - 400px);
-        margin-bottom: 16px;
-        .hc-csc-associated-row {
-            position: relative;
-            text-align: left;
-            display: flex;
-            align-items: center;
-        }
-        .hc-table-info-btn {
-            position: absolute;
-            right: -5px;
-            top: -12px;
-            color: white;
-            font-size: 20px;
-            z-index: 111;
-            cursor: pointer;
-            border-radius: 50px;
-            width: 34px;
-            height: 34px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
-            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
-            background-size: 200%;
-            transition: background-position 0.5s;
-            &:hover {
-                background-position: 100% 0;
-            }
-        }
-    }
-    .hc-csc-action-box {
-        position: relative;
-        background: white;
-        border-radius: 10px;
-        padding: 12px;
-        height: 70px;
-        .header-box {
-            position: relative;
-            display: flex;
-            align-items: center;
-            .title {
-                flex: 1;
-                color: #9A9A9A;
-                font-size: 15px;
-            }
-        }
-        .btn-box {
-            position: relative;
-            text-align: center;
-        }
-    }
-}
-.hc-collapse-item-title {
-    flex: 1;
-    position: relative;
-    margin-left: 24px;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    .icon {
-        margin-right: 10px;
-        color: #FFAF2D;
-        font-size: 24px;
-    }
-    .title {
-        flex: 1;
-        position: relative;
-        user-select: none;
-        color: #50545E;
-        font-size: 16px;
-        font-weight: 400;
-    }
-}
+@import '~style/using/scoped/query.scss';
 </style>
 
 <style lang="scss">
-.hc-query-card-box.hc-card-box.el-card {
-    .el-card__header {
-        overflow-x: hidden;
-    }
-    .hc-card-header-box {
-        display: block;
-        width: 100%;
-        .hc-card-header {
-            margin: 0 -15px;
-            margin-top: 5px;
-        }
-    }
-}
-.hc-carry-spot-checks-target.el-overlay {
-    position: absolute;
-    margin: -24px;
-    height: revert;
-    background-color: transparent;
-    .hc-drawer-box.el-drawer {
-        --el-drawer-bg-color: transparent;
-        .el-drawer__body {
-            padding: 24px;
-            overflow: hidden;
-            .el-card__body {
-                padding: 10px;
-            }
-            .hc-card-main-box {
-                display: flex;
-            }
-        }
-    }
-}
-
-.hc-csc-action-box .btn-box {
-    .el-button + .el-button {
-        margin-left: 50px;
-    }
-}
-
-.hc-node-tree-collapse.el-collapse {
-    --el-collapse-header-height: 60px;
-    border: 0;
-    .el-collapse-item {
-        margin: 0 0 16px;
-        background-color: #f1f5f8;
-        border: 1px solid #E9E9E9;
-        border-radius: 4px;
-    }
-    .el-collapse-item__header {
-        background-color: transparent;
-        font-weight: 400;
-        border-bottom: 0;
-        cursor: default;
-        font-size: 14px;
-    }
-    .el-collapse-item.is-active .el-collapse-item__header.is-active {
-        background-color: #E7EEF4;
-    }
-    .el-collapse-item__wrap {
-        background-color: transparent;
-        border-bottom: 0;
-        .el-collapse-item__content {
-            position: relative;
-            font-size: 14px;
-            line-height: initial;
-            padding: 24px;
-        }
-    }
-}
-  .hover-hand{
-      cursor: pointer;
-  }
+@import '~style/using/query.scss';
 </style>

src/views/using/query_bak.vue

@@ -0,0 +1,1064 @@
+<template>
+    <div class="hc-page-box" id="carry-spot-checks-layout-target">
+        <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
+            <template #header>
+                <div class="hc-arrow-icon">
+                    <HcIcon name="arrow-left-s"/>
+                </div>
+                <div class="hc-tag-box">
+                    <el-scrollbar>
+                        <div class="scrollbar-content">
+                            <template v-for="item in tags">
+                                <el-tag class="mx-1" closable effect="light" size="large">{{ item.name }}</el-tag>
+                            </template>
+                        </div>
+                    </el-scrollbar>
+                </div>
+                <div class="hc-arrow-icon">
+                    <HcIcon name="arrow-right-s"/>
+                </div>
+            </template>
+
+            <div class="hc-query-input-box">
+                <input class="input" placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开">
+                <div class="search-btn-box">
+                    <div class="search-btn">按文件查询</div>
+                    <div class="search-btn">按案卷查询</div>
+                </div>
+            </div>
+            <div class="hc-search-hot-key">
+                <span>热门搜索词汇：</span>
+                <span class="text-hover ml-4">文件名</span>
+                <span class="text-hover ml-4">案卷名</span>
+                <span class="text-hover ml-4">档号</span>
+                <span class="text-hover ml-4">单位</span>
+            </div>
+
+            <div class="hc-search-screening-item">
+                <div class="title">年度：</div>
+                <template v-for="item in annuals">
+                    <div class="screening-key" :class="item.name === annual ? 'cut': ''" @click="annualClick(item)">{{item.name}}</div>
+                </template>
+            </div>
+            <div class="hc-search-screening-item">
+                <div class="title">月份：</div>
+                <template v-for="item in months">
+                    <div class="screening-key" :class="item.name === month ? 'cut': ''" @click="monthClick(item)">{{item.name}}</div>
+                </template>
+            </div>
+            <div class="hc-search-screening-item">
+                <div class="title">期限：</div>
+                <template v-for="item in deadlines">
+                    <div class="screening-key" :class="item.name === deadline ? 'cut': ''" @click="deadlineClick(item)">{{item.name}}</div>
+                </template>
+            </div>
+            <div class="hc-search-screening-item">
+                <div class="title">密级：</div>
+                <template v-for="item in securitys">
+                    <div class="screening-key" :class="item.name === security ? 'cut': ''" @click="securityClick(item)">{{item.name}}</div>
+                </template>
+            </div>
+            <div class="hc-search-screening-item">
+                <div class="title">类别：</div>
+                <template v-for="item in classess">
+                    <div class="screening-key" :class="item.name === classes ? 'cut': ''" @click="classesClick(item)">{{item.name}}</div>
+                </template>
+            </div>
+            <div class="hc-search-screening-item mb-6">
+                <div class="title">目录：</div>
+                <div class="screening-key text-link" @click="nodeTreeClick">
+                    <HcIcon name="node-tree" :line="false"/>
+                    <span class="ml-1">目录树</span>
+                </div>
+            </div>
+
+            <div class="hc-c-card-box" :class="tableAllShow?'all':''">
+                <div class="header-box">
+                    <div class="header">
+                        <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false" v-if="userRoleId !== website.role_id"/>
+                        <span v-else>案卷</span>
+                    </div>
+                    <div class="extra">
+                        <el-button type="primary" hc-btn>
+                            <HcIcon name="download"/>
+                            <span>下载</span>
+                        </el-button>
+                    </div>
+                </div>
+                <div class="hc-arrow-icon" :class="tableAllShow?'down':'up'" @click="tableAllShowClick">
+                    <HcIcon name="arrow-up" v-if="!tableAllShow"/>
+                    <HcIcon name="arrow-down" v-else/>
+                </div>
+                <div class="body" :class="tableFileShow?'file-table':''">
+                    <div class="hc-c-table-box">
+                        <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCurrentRow isCheck @selection-change="tableSelection" @row-click="tableRowClick"   :ui="hoverHand?'hover-hand':''">
+                            <template #action="{row,index}">
+                                <el-button type="primary" size="small" @click.stop="consultFileClick">查阅案卷</el-button>
+                            </template>
+                        </HcTable>
+                    </div>
+                    <div class="hc-f-table-box" v-if="tableFileShow">
+                        <div class="header-box">
+                            <div class="header">卷内文件</div>
+                            <div class="hc-icon-close text-hover" @click="tableFileCloseClick">
+                                <HcIcon name="close"  style=" color:rgb(64, 149, 229);"/>
+                            </div>
+                        </div>
+                        <div class="hc-file-table-box">
+                            <HcTable ref="tableFileRef" :column="tableFileColumn" :datas="tableFileData" :loading="tableFileLoading" isCheck @selection-change="tableFileSelection">
+                                <template #action="{row,index}">
+                                    <el-button type="primary" size="small" @click.stop="consultFileClick">查阅文件</el-button>
+                                </template>
+                            </HcTable>
+                        </div>
+                    </div>
+                </div>
+                <div class="action">
+                    <HcPages :pages="searchForm" @change="pageChange"/>
+                </div>
+            </div>
+
+        </HcCard>
+
+        <!--展开抽查-->
+        <HcDrawer :show="isCarrySpotChecksDrawer" uis="hc-carry-spot-checks-target" to-id="carry-spot-checks-layout-target" @close="onCarrySpotChecksDrawerClose">
+            <div class="hc-carry-spot-checks-pdf">
+                <HcPdf src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
+                <el-tooltip content="展开/收起 右侧目录" placement="top" :disabled="!isBubble">
+                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
+                        <HcIcon name="arrow-right-s" v-show="isCarryDataShow"/>
+                        <HcIcon name="arrow-left-s" v-show="!isCarryDataShow"/>
+                    </div>
+                </el-tooltip>
+            </div>
+            <div class="hc-carry-spot-checks-data" v-show="isCarryDataShow">
+                <div class="hc-csc-switch">
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange" size="default" :round="false"/>
+                </div>
+                <div class="hc-csc-info-box">
+                    <el-scrollbar>
+                        <div class="hc-info-text-item">
+                            <div class="title">案卷题名：</div>
+                            <div class="content">安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书</div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">
+                                <span>密</span>
+                                <span class="ml-7">级：</span>
+                            </div>
+                            <div class="content">机密</div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">保管期限：</div>
+                            <div class="content">永久</div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">卷内文件：</div>
+                            <div class="content">9</div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">起止日期：</div>
+                            <div class="content">2022.02.12~2023.11.02</div>
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">立卷单位：</div>
+                            <div class="content">贵州路桥集团xxxxx</div>
+                        </div>
+                    </el-scrollbar>
+                </div>
+                <div class="hc-csc-data-box">
+                    <HcTable :column="cscTableColumn1" :datas="cscTableData1" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab1'">
+                        <template #name="{row}">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable :column="cscTableColumn2" :datas="cscTableData2" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab2'">
+                        <template #name="{row}">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable :column="cscTableColumn3" :datas="cscTableData3" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab3'">
+                        <template #name="{row}">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable :column="cscTableColumn4" :datas="cscTableData4" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab4'">
+                        <template #name="{row}">
+                            <div class="hc-csc-associated-row" :class="row.id === 2 ? 'text-link' : 'text-hover'">
+                                <el-tag effect="dark">{{row?.tag}}</el-tag>
+                                <span class="ml-3">{{row?.name}}</span>
+                            </div>
+                        </template>
+                    </HcTable>
+
+                    <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>
+
+                    <HcTable :column="cscTableColumn5" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
+
+                    <el-tooltip content="使用弹窗查看数据" placement="top" :disabled="!isBubble" v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'">
+                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
+                            <HcIcon name="airplay"/>
+                        </div>
+                    </el-tooltip>
+                </div>
+                <div class="hc-csc-action-box">
+                    <div class="btn-box">
+                        <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
+                            <HcIcon name="close"/>
+                            <span>取消查阅</span>
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </HcDrawer>
+
+        <!--使用弹窗查看数据-->
+        <HcDialog :show="cscTableDataModal" :title="cscTableDataTitle" widths="1080px" isTable :footer="false" @close="cscTableDataModalClose">
+            <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>
+            <HcTable :column="cscTableColumn51" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
+        </HcDialog>
+
+        <!--目录树-->
+        <HcDialog :show="nodeTreeModal" widths="1080px" isTable saveText="确认" :isClose="false" @close="nodeTreeModalClose" @save="nodeTreeModalSave">
+            <template #header>
+                <div role="heading" class="el-dialog__title">
+                    <span class="mr-3">选择目录</span>
+                    <span class="text-sm text-orange">点击左侧黄色文件夹可展开下一级</span>
+                </div>
+            </template>
+            <template #extra>
+                <HcNewSwitch :datas="nodeTabData" :keys="nodeTabKey" @change="nodeTabChange" :round="false"/>
+            </template>
+
+            <el-collapse class="hc-node-tree-collapse" v-model="activeName" accordion @change="collapseChange">
+                <template v-for="item in nodeTreeArr">
+                    <el-collapse-item :name="item.id.toString()">
+                        <template #title>
+                            <div class="hc-collapse-item-title">
+                                <HcIcon name="folder-3" fill class="icon"/>
+                                <span class="title">{{item.name}}</span>
+                            </div>
+                        </template>
+                        <HcNodeTree :projectId="projectId" :contractId="contractId"/>
+                    </el-collapse-item>
+                </template>
+            </el-collapse>
+        </HcDialog>
+
+    </div>
+</template>
+
+<script setup>
+import {ref, nextTick, onMounted, watch} from "vue";
+import {useAppStore} from "~src/store";
+import MetaTable from "../transfer/components/meta-table.vue"
+//import HcNodeTree from "./components/query/hc-tree.vue"
+import HcNodeTree from "~src/components/tree/hc-tree-1.vue"
+import website from '~src/config/index'
+
+//变量
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId);
+const contractId = ref(useAppState.getContractId);
+const projectInfo = ref(useAppState.getProjectInfo);
+const isBubble = ref(useAppState.getBubble);
+const userRoleId = ref(useAppState.getRoleId);
+const hoverHand = ref(true)
+
+//监听
+watch(() => [
+    useAppState.getBubble,
+], ([bubble]) => {
+    isBubble.value = bubble
+})
+
+//渲染完成
+onMounted(() => {
+
+})
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 20, total: 0
+})
+
+const tags = ref([
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+    {name: '搜索字符符号'},
+])
+
+//年度
+const annual = ref('2019')
+const annuals = ref([
+    {name: '所有'}, {name: '2020'}, {name: '2019'}, {name: '2018'},
+    {name: '2017'}, {name: '2016'}, {name: '2015'}, {name: '2014'},
+])
+const annualClick = ({name}) => {
+    annual.value = name
+}
+
+//月份
+const month = ref('01月')
+const months = ref([
+    {name: '所有'}, {name: '01月'}, {name: '02月'}, {name: '03月'},
+    {name: '04月'}, {name: '05月'}, {name: '06月'}, {name: '07月'},
+    {name: '08月'}, {name: '09月'}, {name: '10月'}, {name: '11月'},
+    {name: '12月'}
+])
+const monthClick = ({name}) => {
+    month.value = name
+}
+
+//期限
+const deadline = ref('永久')
+const deadlines = ref([
+    {name: '所有'}, {name: '永久'}, {name: '30年'}, {name: '10年'}
+])
+const deadlineClick = ({name}) => {
+    deadline.value = name
+}
+
+//密级
+const security = ref('所有')
+const securitys = ref([
+    {name: '所有'}, {name: '秘密'}, {name: '机密'}, {name: '绝密'}
+])
+const securityClick = ({name}) => {
+    security.value = name
+}
+
+//类别
+const classes = ref('所有')
+const classess = ref([
+    {name: '所有'}, {name: '竣工图'}, {name: '试验'}, {name: '声像'}, {name: '质检'}, {name: '计量'}, {name: '隐蔽'}, {name: '管理文件'},
+])
+const classesClick = ({name}) => {
+    classes.value = name
+}
+
+//目录树
+const nodeTreeClick = () => {
+    nodeTreeModal.value = true
+}
+const nodeTreeModal = ref(false)
+const nodeTreeModalClose = () => {
+    nodeTreeModal.value = false
+}
+//确认
+const nodeTreeModalSave = () => {
+    nodeTreeModal.value = false
+}
+
+//tab数据和相关处理
+const tabKey = ref('tab1')
+const tabData = ref([
+    {key:'tab1', name: '文书档案', text: '(23)'},
+    {key:'tab2', name: '竣工档案', text: '(13)'},
+]);
+const tabChange = (item) => {
+    tabKey.value = item?.key;
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//表头
+const tableRef = ref(null)
+const tableColumn = ref([
+    {key:'key1', name: '档号', width: 180},
+    {key:'key2', name: '题名'},
+    {key:'key3', name: '密级', width: 120},
+    {key:'key4', name: '保管期限', width: 120},
+    {key:'key5', name: '页数', width: 120},
+    {key:'key6', name: '立卷单位', width: 260},
+    {key:'action', name: '操作', width: 120},
+])
+const tableData = ref([
+    {
+        id: 1,
+        key1: 'FJZB-02-123',
+        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
+        key3: '秘密',
+        key4: '永久',
+        key5: '2',
+        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
+    },
+    {
+        id: 2,
+        key1: 'FJZB-02-123',
+        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
+        key3: '秘密',
+        key4: '永久',
+        key5: '2',
+        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
+    },
+    {
+        id: 2,
+        key1: 'FJZB-02-123',
+        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
+        key3: '秘密',
+        key4: '永久',
+        key5: '2',
+        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
+    }
+])
+
+const tableLoading = ref(false)
+const getTableData = async () => {
+
+}
+
+//多选
+const tableKeys = ref([]);
+const tableSelection = (rows) => {
+    tableKeys.value = rows
+}
+
+
+const tableAllShow = ref(false)
+const tableAllShowClick = () => {
+    tableFileShow.value = false;
+    tableAllShow.value = !tableAllShow.value;
+}
+
+//表头
+const tableFileRef = ref(null)
+const tableFileColumn = ref([
+    {key:'key1', name: '文件编号', width: 180},
+    {key:'key2', name: '文件题名'},
+    {key:'key3', name: '文件日期', width: 120},
+    {key:'key4', name: '责任者', width: 120},
+    {key:'key5', name: '页数', width: 120},
+    {key:'action', name: '操作', width: 120},
+])
+const tableFileData = ref([
+    {
+        id: 1,
+        key1: 'FJZB-02-123',
+        key2: 'K0+000~K0+100土沟土沟.pdf',
+        key3: '20220212',
+        key4: '贵州路桥xxxxx',
+        key5: '2',
+    },
+    {
+        id: 2,
+        key1: 'FJZB-02-123',
+        key2: 'K0+000~K0+100土沟土沟.pdf',
+        key3: '20220212',
+        key4: '贵州路桥xxxxx',
+        key5: '2',
+    },
+    {
+        id: 2,
+        key1: 'FJZB-02-123',
+        key2: 'K0+000~K0+100土沟土沟.pdf',
+        key3: '20220212',
+        key4: '贵州路桥xxxxx',
+        key5: '2',
+    }
+])
+const tableFileLoading = ref(false)
+const tableFileSelection = (rows) => {
+    console.log(rows)
+}
+
+//表格行被点击
+const tableFileShow = ref(false)
+const tableRowClick = () => {
+    tableAllShow.value = true;
+    tableFileShow.value = true;
+}
+const tableFileCloseClick = () => {
+    tableFileShow.value = false;
+}
+
+const consultFileClick = () => {
+    isCarrySpotChecksDrawer.value = true
+}
+const isCarrySpotChecksDrawer = ref(false)
+
+//类型tab数据和相关处理
+const tabTypeKey = ref('tab1')
+const tabTypeTab = ref([
+    {key:'tab1',  name: '卷内目录'},
+    {key:'tab2', name: '竣工资料'},
+    {key:'tab3', name: '计量资料'},
+    {key:'tab4', name: '关联资料'},
+    {key:'tab5', name: '元数据'},
+    {key:'tab6', name: '验签包'},
+]);
+const tabTypeChange = ({key}) => {
+    tabTypeKey.value = key
+}
+
+const cscTableLoading = ref(false)
+
+//卷内目录
+const cscTableColumn1 = [
+    {key:'name', name: '卷内文件题名', align: 'center'}
+];
+const cscTableData1 = ref([
+    {id: 1, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 2, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 3, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 4, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 5, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 6, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
+    {id: 7, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'}
+])
+
+//竣工资料
+const cscTableColumn2 = [
+    {key:'name', name: '竣工图资料', align: 'center'}
+];
+const cscTableData2 = ref([
+    {id: 1, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
+    {id: 2, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
+    {id: 3, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
+    {id: 4, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
+    {id: 5, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
+    {id: 6, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
+    {id: 7, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'}
+])
+
+//计量资料
+const cscTableColumn3 = [
+    {key:'name', name: '计量资料', align: 'center'}
+];
+const cscTableData3 = ref([
+    {id: 1, name: 'ZB2-17.pdf'},
+    {id: 2, name: 'ZB2-18.pdf'},
+    {id: 3, name: 'ZB2-19.pdf'},
+    {id: 4, name: 'ZB2-20.pdf'},
+    {id: 5, name: 'ZB2-21.pdf'},
+    {id: 6, name: 'ZB2-22.pdf'},
+    {id: 7, name: 'ZB2-23.pdf'}
+])
+
+//计量资料
+const cscTableColumn4 = [
+    {key:'name', name: '关联文件', align: 'center'}
+];
+const cscTableData4 = ref([
+    {id: 1, name: 'xxxxxxxxxxxxxxxxxxx.pdf', tag: '开工'},
+    {id: 2, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '工序'},
+    {id: 3, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '评定'},
+    {id: 4, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '交工'},
+    {id: 5, name: '', tag: '抽检'},
+    {id: 6, name: '', tag: '隐蔽'}
+])
+
+//验签包
+const cscTableColumn5 = [
+    {key:'user', name: '签名者'},
+    {key:'time', name: '签名时间'},
+    {key:'val', name: '摘要'},
+];
+const cscTableColumn51 = [
+    {key:'user', name: '签名者', width: 300},
+    {key:'time', name: '签名时间', width: 200},
+    {key:'val', name: '摘要'},
+];
+const cscTableData5 = ref([
+    {id: 1, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
+    {id: 2, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
+    {id: 3, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
+    {id: 4, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
+    {id: 5, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
+    {id: 6, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'}
+])
+
+//抽检意见
+const reform = ref({
+    type: false, content: ''
+})
+
+//显示右侧目录
+const isCarryDataShow = ref(true)
+const onCarryDataShow = () => {
+    isCarryDataShow.value = !isCarryDataShow.value
+}
+
+//使用弹窗查看数据
+const cscTableDataModal = ref(false)
+const cscTableDataTitle = ref('')
+//显示弹窗
+const cscTableDataModalShow = () => {
+    const key = tabTypeKey.value;
+    if (key === 'tab5') {
+        cscTableDataTitle.value = '元数据'
+    } else if (key === 'tab6') {
+        cscTableDataTitle.value = '验签包'
+    }
+    cscTableDataModal.value = true
+}
+
+//关闭弹窗
+const cscTableDataModalClose = () => {
+    cscTableDataModal.value = false
+}
+
+//关闭抽查
+const onCarrySpotChecksDrawerClose = () => {
+    isCarrySpotChecksDrawer.value = false
+}
+
+//tab数据和相关处理
+const nodeTabKey = ref('tab1')
+const nodeTabData = ref([
+    {key:'tab1', name: '业主档案'},
+    {key:'tab2', name: '施工档案'},
+    {key:'tab3', name: '监理档案'},
+    {key:'tab4', name: '文书档案'},
+]);
+const nodeTabChange = (item) => {
+    nodeTabKey.value = item?.key;
+}
+
+
+const activeName = ref('')
+const nodeTreeArr = ref([
+    {id: '1', name: '一、立项审批文件'},
+    {id: '2', name: '二、勘察设计文件'},
+    {id: '3', name: '三、招标投标、合同协议文件'},
+    {id: '4', name: '四、工程准备、征地、拆迁、移民等文件'},
+    {id: '5', name: '五、项目管理文件'},
+    {id: '6', name: '六、计量与支付、结算与审计文件'},
+    {id: '7', name: '七、交、竣工文件'},
+    {id: '8', name: '八、工程照片、音像资料'},
+])
+const collapseChange = (key) => {
+    activeName.value = key.toString();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.hc-arrow-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+        color: var(--el-color-primary);
+    }
+}
+.hc-tag-box {
+    position: relative;
+    width: calc(100% - 40px);
+    overflow: hidden;
+}
+.scrollbar-content {
+    white-space: nowrap;
+}
+
+.hc-query-input-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    .input {
+        position: relative;
+        height: 62px;
+        border: 0;
+        flex: 1;
+        padding: 0 24px;
+        font-size: 18px;
+        background: #E7EEF4;
+        border-radius: 100px 0 0 100px;
+        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+            color: #cccccc;
+        }
+        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+            color: #cccccc;
+        }
+        &:-moz-placeholder { /* Mozilla Firefox 19+ */
+            color: #cccccc;
+        }
+        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+            color: #cccccc;
+        }
+        &:-ms-input-placeholder { /* Microsoft Edge */
+            color: #cccccc;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+    .search-btn-box {
+        position: relative;
+        height: 62px;
+        .search-btn {
+            position: relative;
+            height: 30px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 24px;
+            cursor: pointer;
+            background: var(--el-color-primary);
+            border-radius: 0 100px 100px 0;
+            transition: background 0.2s;
+            &:hover {
+                background: var(--el-color-primary-dark-2);
+            }
+        }
+        .search-btn + .search-btn {
+            margin-top: 2px;
+        }
+    }
+}
+.hc-search-hot-key {
+    position: relative;
+    color: #9A9A9A;
+    padding: 20px;
+    font-size: 14px;
+}
+
+.hc-search-screening-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    font-size: 14px;
+    .title {
+        position: relative;
+    }
+    .screening-key {
+        position: relative;
+        padding: 4px 12px;
+        border-radius: 100px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        transition: background 0.2s, color 0.2s;
+        &:hover {
+            background: var(--el-color-primary-light-8);
+        }
+        &.cut {
+            background: var(--el-color-primary);
+            color: white;
+            cursor: default;
+        }
+    }
+}
+.hc-search-screening-item + .hc-search-screening-item {
+    margin-top: 14px;
+}
+
+.hc-c-card-box {
+    position: relative;
+    background: #E7EEF4;
+    border-radius: 10px;
+    height: calc(100% - 375px);
+    .header-box {
+        position: relative;
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #d6d6d6;
+        .header {
+            position: relative;
+            flex: 1;
+        }
+        .extra {
+            position: relative;
+        }
+    }
+    .hc-arrow-icon {
+        position: absolute;
+        border-radius: 50px;
+        left: 48%;
+        &.up {
+            background: #E7EEF4;
+            top: -40px;
+        }
+        &.down {
+            background: #f1f5f8;
+            top: 6px;
+        }
+    }
+    .body {
+        position: relative;
+        height: calc(100% - 140px);
+        padding: 16px;
+        .hc-c-table-box {
+            position: relative;
+            height: 100%;
+        }
+        .hc-f-table-box {
+            position: relative;
+            height: 300px;
+            margin-top: 24px;
+            background: #f1f5f8;
+            .header-box {
+                border-bottom: initial;
+                .hc-icon-close {
+                    font-size: 18px;
+                }
+            }
+            .hc-file-table-box {
+                position: relative;
+                height: calc(100% - 55px);
+            }
+        }
+        &.file-table .hc-c-table-box {
+            height: calc(100% - 324px);
+        }
+    }
+    .action {
+        position: relative;
+        padding: 16px;
+        border-top: 1px solid #d6d6d6;
+        display: flex;
+        align-items: center;
+    }
+    &.all {
+        position: absolute;
+        top: -94px;
+        z-index: 9999;
+        left: -24px;
+        right: -24px;
+        bottom: -24px;
+        height: initial;
+    }
+}
+.hc-carry-spot-checks-pdf {
+    position: relative;
+    flex: 1 1 auto;
+    height: 100%;
+    transition: 0.2s;
+    .hc-csc-pdf-btn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        color: white;
+        font-size: 25px;
+        z-index: 111;
+        cursor: pointer;
+        width: 36px;
+        height: 40px;
+        display: flex;
+        padding-left: 6px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 150px 0 0 150px;
+        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        background-size: 200%;
+        transition: background-position 0.5s;
+        &:hover {
+            background-position: 100% 0;
+        }
+    }
+}
+.hc-carry-spot-checks-data {
+    position: relative;
+    height: 100%;
+    width: 480px;
+    padding-left: 14px;
+    border-left: 1px solid #e9e9e9;
+    transition: 0.2s;
+    .hc-csc-switch {
+        position: relative;
+        margin-bottom: 10px;
+    }
+    .hc-csc-info-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: 244px;
+        margin-bottom: 20px;
+        .hc-info-text-item {
+            position: relative;
+            font-size: 14px;
+            display: flex;
+            align-items: flex-start;
+            .title {
+                font-weight: bold;
+            }
+            .content {
+                flex: 1;
+                position: relative;
+                color: #101010;
+            }
+        }
+        .hc-info-text-item + .hc-info-text-item {
+            margin-top: 8px;
+        }
+    }
+    .hc-csc-data-box {
+        position: relative;
+        background: #E7EEF4;
+        border-radius: 10px;
+        padding: 12px;
+        height: calc(100% - 400px);
+        margin-bottom: 16px;
+        .hc-csc-associated-row {
+            position: relative;
+            text-align: left;
+            display: flex;
+            align-items: center;
+        }
+        .hc-table-info-btn {
+            position: absolute;
+            right: -5px;
+            top: -12px;
+            color: white;
+            font-size: 20px;
+            z-index: 111;
+            cursor: pointer;
+            border-radius: 50px;
+            width: 34px;
+            height: 34px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
+            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+            background-size: 200%;
+            transition: background-position 0.5s;
+            &:hover {
+                background-position: 100% 0;
+            }
+        }
+    }
+    .hc-csc-action-box {
+        position: relative;
+        background: white;
+        border-radius: 10px;
+        padding: 12px;
+        height: 70px;
+        .header-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            .title {
+                flex: 1;
+                color: #9A9A9A;
+                font-size: 15px;
+            }
+        }
+        .btn-box {
+            position: relative;
+            text-align: center;
+        }
+    }
+}
+.hc-collapse-item-title {
+    flex: 1;
+    position: relative;
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    .icon {
+        margin-right: 10px;
+        color: #FFAF2D;
+        font-size: 24px;
+    }
+    .title {
+        flex: 1;
+        position: relative;
+        user-select: none;
+        color: #50545E;
+        font-size: 16px;
+        font-weight: 400;
+    }
+}
+</style>
+
+<style lang="scss">
+.hc-query-card-box.hc-card-box.el-card {
+    .el-card__header {
+        overflow-x: hidden;
+    }
+    .hc-card-header-box {
+        display: block;
+        width: 100%;
+        .hc-card-header {
+            margin: 0 -15px;
+            margin-top: 5px;
+        }
+    }
+}
+.hc-carry-spot-checks-target.el-overlay {
+    position: absolute;
+    margin: -24px;
+    height: revert;
+    background-color: transparent;
+    .hc-drawer-box.el-drawer {
+        --el-drawer-bg-color: transparent;
+        .el-drawer__body {
+            padding: 24px;
+            overflow: hidden;
+            .el-card__body {
+                padding: 10px;
+            }
+            .hc-card-main-box {
+                display: flex;
+            }
+        }
+    }
+}
+
+.hc-csc-action-box .btn-box {
+    .el-button + .el-button {
+        margin-left: 50px;
+    }
+}
+
+.hc-node-tree-collapse.el-collapse {
+    --el-collapse-header-height: 60px;
+    border: 0;
+    .el-collapse-item {
+        margin: 0 0 16px;
+        background-color: #f1f5f8;
+        border: 1px solid #E9E9E9;
+        border-radius: 4px;
+    }
+    .el-collapse-item__header {
+        background-color: transparent;
+        font-weight: 400;
+        border-bottom: 0;
+        cursor: default;
+        font-size: 14px;
+    }
+    .el-collapse-item.is-active .el-collapse-item__header.is-active {
+        background-color: #E7EEF4;
+    }
+    .el-collapse-item__wrap {
+        background-color: transparent;
+        border-bottom: 0;
+        .el-collapse-item__content {
+            position: relative;
+            font-size: 14px;
+            line-height: initial;
+            padding: 24px;
+        }
+    }
+}
+  .hover-hand{
+      cursor: pointer;
+  }
+</style>