archives/src/views/using/query.vue

<template>
    <div class="hc-page-box" id="carry-spot-checks-layout-target">
        <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
            <div  v-if="isShowheader" class="flex_box">

                    <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" @close="deltag(item)">{{ item.name }}</el-tag>
                                </template>
                            </div>
                        </el-scrollbar>
                    </div>
                    <div class="hc-arrow-icon">
                        <HcIcon name="arrow-right-s"/>
                    </div>

            </div>
            <div class="hc-query-input-box">
                <el-input placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开" v-model="searchInput" clearable @clear="clearinput">
                    <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" @click="searchCaseClick('1')">
                                按案卷查询
                            </el-button>
                            <el-button type="primary" class="search-btn" @click="searchFileClick('2')">
                                按文件查询
                            </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"  v-for="item in hotInputlist" @click="clickHottitle(item)">{{ item.name }}</span>
                        </div>
                        <div class="hc-search-screening-item">
                            <div class="title">年度：</div>
                            <template v-for="item in annuals">
                                <div class="screening-key" :class="isArrIndex(annual,'key', item.key) ? '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="isArrIndex(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="isArrIndex(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="isArrIndex(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="isArrIndex(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-content-header-box">
                <div class="header">
                    <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false"/>
                </div>
                <div class="extra">
                    <el-button v-if="tabKey === 'tab1'">
                        <HcIcon name="download"/>
                        <span>下载</span>
                    </el-button>
                    <HcNewSwitch :datas="tabGuiData" :keys="tabGuiKey" @change="tabGuiChange" v-if="tabKey === 'tab2'"/>
                </div>
            </div>

            <div class="hc-gather-card-box" :class="tableAllShow?'file-table':''" v-if="tabKey === 'tab1'">
                <HcCardItem ui="hc-card-item-main">
                    <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(row,1)">查阅案卷</el-button>
                        </template>

                    </HcTable>
                    <template #action>
                        <HcPages :pages="searchForm" @change="pageChange"/>
                    </template>
                </HcCardItem>
                <HcCardItem ui="hc-card-item-file" title="卷内文件">
                    <template #extra>
                        <div class="hc-icon-close text-hover" @click="tableFileCloseClick">
                            <HcIcon name="close"/>
                        </div>
                    </template>
                    <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(row,2)">查阅文件</el-button>
                        </template>
                        <!-- <template #fileName="{row}">
                                    <span class="text-link text-hover" @click="viewfilePdf(row)">{{ row?.fileName }}</span>
                         </template> -->
                    </HcTable>
                    <!-- <template #action>
                        <HcPages :pages="InsearchForm" @change="InpageChange"/>
                    </template> -->
                </HcCardItem>
            </div>

            <!--档案柜-->
            <div class="hc-gather-card-box">
                <HcCardItem ui="hc-card-item-main" v-if="tabKey === 'tab2'">
                    <el-carousel class="hc-file-cabinet" :autoplay="false" :loop="false" indicator-position="none">
                        <el-carousel-item v-for="item in guiItemData">
                            <div class="hc-file-cabinet-gui">
                                <div class="gui-item" v-for="items in item.children">
                                    <el-popover effect="dark" placement="top" :title="items.name + '柜'" :width="200"
                                                :hide-after="0" :offset="-10" :content="items.content">
                                        <template #reference>
                                            <div class="gui-view" @click="guiItemClick(items)">
                                                <img :src="imageViewGui" alt="">
                                                <span class="num">{{items.name}}</span>
                                            </div>
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </HcCardItem>
            </div>

        </HcCard>

        <!--柜子侧面-->
        <HcDrawer :show="isGuiInfoDrawer"
                  direction="rtl"
                  to-id="carry-spot-checks-layout-target"
                  uis="hc-carry-spot-checks-target"
                  @close="onCloseGuiInfoDrawer">
            <template #header>
                <div class="w-96">
                    <el-input size="large" v-model="searchForm.queryValue" placeholder="请输入关键词检索" clearable/>
                </div>
                <div class="ml-2">
                    <el-button type="primary" size="large">
                        <HcIcon name="search-2"/>
                        <span>搜索</span>
                    </el-button>
                </div>
            </template>
            <div class="hc-gui-info-drawer">
                <div class="hc-gui-info-img">
                    <div class="gui-info-img">
                        <img :src="imageViewGui1" alt="">
                        <div class="gui-file-item-box">
                            <div class="gui-file-item" v-for="item in guiInfoData">
                                <template v-for="(items, index) in item.children">
                                    <!-- query 为搜索后的结果进行选中，cur 为点击的选中-->
                                    <div class="item"
                                         :class="[index === 2 || index === 5 ?'query': '', guiInfoCurKey=== items.id ? 'cur' : '']"
                                         @click="guiFileInfo(items)"
                                    >{{items.name}}</div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hc-gui-info-data">
                    <div class="hc-gui-data-container">
                        <el-scrollbar>
                            <div class="info-item">
                                <div class="title">案卷题名：</div>
                                <div class="text">安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书</div>
                            </div>
                            <div class="info-item">
                                <div class="title">
                                    <span>密</span>
                                    <span>级：</span>
                                </div>
                                <div class="text">机密</div>
                            </div>
                            <div class="info-item">
                                <div class="title">保管期限：</div>
                                <div class="text">永久</div>
                            </div>
                            <div class="info-item">
                                <div class="title">卷内文件：</div>
                                <div class="text">9</div>
                            </div>
                            <div class="info-item">
                                <div class="title">起止日期：</div>
                                <div class="text">2022.02.12~2023.11.02</div>
                            </div>
                            <div class="info-item">
                                <div class="title">立卷单位：</div>
                                <div class="text">贵州路桥集团xxxxx</div>
                            </div>
                        </el-scrollbar>
                    </div>
                    <div class="btn-box">
                        <el-button size="large" type="primary">打开案卷</el-button>
                        <el-button size="large" @click="onCloseGuiInfoDrawer">
                            <HcIcon name="close"/>
                            <span>关闭</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </HcDrawer>

        <!--展开抽查-->
        <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"/> -->
                <HcPdf :src="pdfUrl" v-loading="pdfLoading" />
                <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">{{ fileInfo.name }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">
                                <span>密</span>
                                <span class="ml-7">级：</span>
                            </div>
                            <div class="content">{{ fileInfo.secretLevelValue }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">保管期限：</div>
                            <div class="content">{{ fileInfo.storageTimeValue }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">卷内文件：</div>
                            <div class="content">{{ fileInfo.pageNumber }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">起止日期：</div>
                            <div class="content" v-if="fileInfo?.endDate!==''||fileInfo?.startDate!==''">{{ splitDate(fileInfo?.startDate)+"~"+  splitDate(fileInfo?.endDate)}}</div>
                            <div class="content" v-else></div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">立卷单位：</div>
                            <div class="content">{{ fileInfo.unit }}</div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-csc-data-box">
                    <HcTable :column="cscTableColumn1" :datas="cscTableData1" :loading="cscTableLoading" :isArrIndex="false" v-if="tabTypeKey === 'tab1'">
                        <template #name="{row}">
                            <div :class="row.id === checkId ? 'text-link' : 'text-hover'" @click="changePdf(row)">{{row?.fileName}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn2" :datas="cscTableData2" :loading="cscTableLoading" :isArrIndex="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" :isArrIndex="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" :isArrIndex="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'" :ishowFile="checkId.length>0?true:false"/>

                    <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"    v-loading="nodeTreeArrLoad">
                <template v-for="(item) in nodeTreeArr">
                    <el-collapse-item :name="item.id.toString()" :disabled="item.notExsitChild===true">
                        <template #title>
                            <div class="hc-collapse-item-title">
                                <el-checkbox v-model="item.checkColId"  style="font-size: 24px;"  @change="changeCheckColId(item)" ></el-checkbox>
                                <HcIcon name="file" fill class="icon" v-if="item.notExsitChild===true"/>
                                <HcIcon name="folder-3" fill class="icon" v-else/>
                                <span class="title">{{item.nodeName}}</span>
                            </div>
                        </template>
                        <!-- <HcNodeTree :projectId="projectId" :contractId="contractId"/> -->
                        <el-tree
                        class="col_tree"
                        node-key="id"
                        ref="nodetreeEl"
                        :props="defaultProps"
                        show-checkbox
                        v-loading="nodetreeElloading"
                        lazy
                        :load="loadNode"
                        :data="Nodetreedata"
                     >
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <HcIcon name="file" fill class="icon"  style="color: #FFAF2D;" v-if="data.notExsitChild===true"/>
                                <HcIcon name="folder-3" fill class="icon" style="color: #FFAF2D;" v-else/><span>{{ node.label }}</span>
                            </span>
                        </template>
                    </el-tree>

                    </el-collapse-item>
                </template>
            </el-collapse>
           <HcNoData v-if="nodeTreeArr.length==0"/>
        </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 {getArrValue, arrIndex, isArrIndex} from "js-fast-way"
import website from '~src/config/index'
import archiveQueryApi from "~api/using/query.js";
import tuningApi from "~api/archiveConfig/tuning.js";

import imageViewGui from "~src/assets/view/gui.png";
import imageViewGui1 from "~src/assets/view/gui1.png";

//变量
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)
const isShowheader = ref(false)
const tags = ref([])


//监听
watch(() => [
    useAppState.getBubble,tags.value
], ([bubble,Tags]) => {
    isBubble.value = bubble
   if(Tags.length==0){
    isShowheader.value=false
   }else{
    isShowheader.value=true
   }
})

//渲染完成
onMounted(() => {
    getCarrierTypeByDictdata()
    setAnnuals()
    setMonths()
    getTableData()
})
//截取日期
const splitDate=(val)=>{

    return val.substring( 0,10)
}
//处理数据
const rowsToArr = (rows) => {
    let newArr = [];
    for (let i = 0; i < rows.length; i++) {
        newArr.push(rows[i]?.key)
    }
    return newArr.join(',')
}
const deltag=(item)=>{
    tags.value=tags.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    //设置年份
    annual.value=annual.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    yeararr.value=yeararr.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    searchForm.value.year=rowsToArr(annual.value)
    if(annual.value.length==0){
        annual.value=[{key: 'all', name: '所有'}]
    }

    //设置月份
    month.value=month.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    montharr.value=montharr.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })

    searchForm.value.month=rowsToArr(month.value)
    if(month.value.length==0){
        month.value=[{key: 'all', name: '所有'}]
    }
     //设置保管期限
     deadline.value=deadline.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    deadlinearr.value=deadlinearr.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    searchForm.value.storageTime=rowsToArr(deadline.value)
    if(deadline.value.length==0){
        deadline.value=[{key: 'all', name: '所有'}]
    }
    //设置密级
    security.value=security.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    securityarr.value=securityarr.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    searchForm.value.secretLevel=rowsToArr(security.value)
    if(security.value.length==0){
        security.value=[{key: 'all', name: '所有'}]
    }
     //设置类别
    classes.value=classes.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    classesarr.value=classesarr.value.filter((ele)=>{
        if(item.name!==ele.name){
            return item
        }
    })
    searchForm.value.carrierType=rowsToArr(classes.value)
    if(classes.value.length==0){
        classes.value=[{key: 'all', name: '所有'}]
    }

}
//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0, searchType:"1", listType: 1, archiveType: '',
})
//卷内文件
const InsearchForm = ref({
    current: 1, size: 20, total: 0
})
//热门搜索词汇
const hotInputlist=ref([
    {name:'文件名'},
    {name:'案卷名'},
    {name:'档号'},
    {name:'单位'},
])
const clickHottitle=(item)=>{
    searchInput.value=item.name
    searchForm.value.queryValue=item.name

}
const clearinput=()=>{
    searchForm.value.searchType='1'
    getTableData()
}
//年度
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 some=(arr)=> {
    let some= [];
    arr.forEach(el => {
      if (!some.some(e => e.name == el.name)) {
        some.push(el);
      }
    });
  return some
}
const allarr=ref([])
const montharr=ref([])
const yeararr=ref([])
const deadlinearr=ref([])
const securityarr=ref([])
const classesarr=ref([])
const setTags=(val,type)=>{
    let arr=[]
    val.forEach((item)=>{
        if(item.name!=='所有'){
            arr.push({name:item.name})
        }
    })
    let filarr=some(arr)
    if(type==='month'){
        montharr.value=some(filarr)
        if(montharr.value.length==0){
            month.value=[{key: 'all', name: '所有'}]
        }
    }else if(type==='year'){
        yeararr.value=some(filarr)
        if(yeararr.value.length==0){
            annual.value=[{key: 'all', name: '所有'}]
        }
    }else if(type==='deadline'){
        deadlinearr.value=some(filarr)
        if(deadlinearr.value.length==0){
            deadline.value=[{key: 'all', name: '所有'}]
        }
    }else if(type==='security'){
        securityarr.value=some(filarr)
        if(securityarr.value.length==0){
            security.value=[{key: 'all', name: '所有'}]
        }
    }else if(type==='classes'){
        classesarr.value=some(filarr)
        if(classesarr.value.length==0){
            classes.value=[{key: 'all', name: '所有'}]
        }
    }
    let finalarr=[]

    yeararr.value.forEach((item)=>{
        finalarr.push({name:item.name})
    })

    montharr.value.forEach((item)=>{
        finalarr.push({name:item.name})
    })
    deadlinearr.value.forEach((item)=>{
        finalarr.push({name:item.name})
    })
    securityarr.value.forEach((item)=>{
        finalarr.push({name:item.name})
    })
    classesarr.value.forEach((item)=>{
        finalarr.push({name:item.name})
    })
    tags.value=some(finalarr)
}

const annual = ref([{key: 'all', name: '所有'}])
const annualClick = (item) => {
    annual.value = setQueryFiltering(annual.value, item)
    setTags(annual.value,'year')
   searchForm.value.year=item.name;
   let arr=[]
  annual.value.forEach((item)=>{
       arr.push(item.key)
   })
   searchForm.value.year=arr+''
}


//月份
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 =  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)
    setTags(month.value,'month')
    let arr=[]
    month.value.forEach((item)=>{
        arr.push(item.key)
    })
    searchForm.value.month=arr+''
}

//期限
const deadline = ref([{key: 'all', name: '所有'}])
const deadlines = ref([
    {key: 'all', name: '所有'},
    {key: '3', name: '永久'},
    {key: '2', name: '30年'},
    {key: '1', name: '10年'}
])
const deadlineClick = (item) => {
    deadline.value = setQueryFiltering(deadline.value, item)
    setTags(deadline.value,'deadline')
    let arr=[]
    deadline.value.forEach((item)=>{
        arr.push(item.key)
    })
    searchForm.value.storageTime=arr+''
}


//密级
const security = ref([{key: 'all', name: '所有'}])
const securitys = ref([
    {key: 'all', name: '所有'},
    {key: '1',name: '机密'},
    {key: '2',name: '绝密'},
    {key: '3',name: '秘密'},
    {key: '4',name: '公开'},
])
const securityClick = (item) => {
    security.value = setQueryFiltering(security.value, item)
    setTags(security.value,'security')
    let arr=[]
    security.value.forEach((item)=>{
        arr.push(item.key)
    })
    searchForm.value.secretLevel=arr+''
}


//类别
const classes = ref([  {key: 'all', name: '所有'},])
const classess = ref([  {key: 'all', name: '所有'},])
const getCarrierTypeByDictdata=async()=>{
    const { error, code, data } = await archiveQueryApi.getCarrierTypeByDict()
    tableLoading.value = false
    if (!error && code === 200) {
        let arrdata=getArrValue(data)
        arrdata.forEach((ele)=>{
            classess.value.push({key:ele.dictKey,name:ele.dictValue})
        })
    }
}

const classesClick = (item) => {
    classes.value = setQueryFiltering(classes.value, item)
    setTags(classes.value,'classes')
    let arr=[]
    classes.value.forEach((item)=>{
        arr.push(item.key)
    })
    searchForm.value.carrierType=arr+''
}


//设置筛选条件
const setQueryFiltering = (arr, {key, name}) => {
    if (key === 'all') {
        //如果选择所有，就删除其他
        arr = [{key, name}]
        tags.value= tags.value.filter((item)=>{
            if(item.name.indexOf===-1){
                return item
            }
        })
    } else {
        //选中还是取消
        const index = arrIndex(arr, 'key', key)
        if (index !== -1) {
            arr.splice(index, 1)
        } else {
            arr.push({key, name})
        }
        //如果存在所有，就删除所有。
        if (arr.length > 1) {
            const isAll = arrIndex(arr, 'key', 'all')
            if (isAll !== -1) {
                arr.splice(isAll, 1)
            }
        }
    }
    return arr
}



//目录树
const nodeTreeClick = () => {
    nodeTreeModal.value = true
    getnodeTabData()
}
const nodeTreeModal = ref(false)
const nodeTreeModalClose = () => {
    nodeTreeModal.value = false
    activeName.value=""
}

//确认
const nodeTreeModalSave = () => {
    nodeTreeModal.value = false
    let keys= nodetreeEl.value[treeIndex.value].getCheckedKeys()
    searchForm.value.nodeIds=keys.join(',')||singleId.value

}


//搜索筛选
const filteringShow = ref('')
const filteringChange = (name) => {
    filteringShow.value = name
}
//条件筛选
const filteringClick = () => {
    if (filteringShow.value) {
        filteringShow.value = ''
    } else {
        filteringShow.value = 'show'
    }
}
const searchInput=ref('')
//按文件查询
const searchFileClick = (type) => {
    filteringShow.value = ''
    searchForm.value.searchType=type
    getTableData()


}

//按案卷查询
const searchCaseClick = (type) => {
    filteringShow.value = ''
    searchForm.value.searchType=type
    getTableData()
}


//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    {key:'tab1', name: '案卷列表'},
    {key:'tab2', name: '档案柜'},
]);
const tabChange = (item) => {
    tabKey.value = item?.key;
    searchForm.value.listType = item?.key === 'tab1' ? 1 : 2
    searchForm.value.current = 1
    searchForm.value.archiveType = item?.key === 'tab2' ? tabGuiKey.value : ''
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}
//分页被点击
const InpageChange = ({current, size}) => {
    InsearchForm.value.current = current
    InsearchForm.value.size = size
    // getTableData()
}
//表头
const tableRef = ref(null)
const tableColumn = ref([
    {key:'fileNumber', name: '档号', width: 180},
    {key:'name', name: '题名'},
    {key:'secretLevelValue', name: '密级', width: 120},
    {key:'storageTimeValue', name: '保管期限', width: 120},
    {key:'pageN', name: '页数', width: 120},
    {key:'unit', name: '立卷单位', width: 260},
    {key:'action', name: '操作', width: 120},
])
const tableData = ref([

])
const pdfUrl=ref('')
const pdfLoading=ref(false)
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    searchForm.value.queryValue=searchInput.value
    for (let key in  searchForm.value) {
        if(searchForm.value[key]==='all'||searchForm.value[key]==='所有'){
            searchForm.value[key]=''
        }
    }
    const { error, code, data } = await archiveQueryApi.getarchiveQueryPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId:contractId.value
    })
    tableLoading.value = false
    if (!error && code === 200) {
        if (tabKey.value === 'tab1') {
            tableData.value = getArrValue(data['records'])
            searchForm.value.total = data['total'] || 0
        }
    } else {
        if (tabKey.value === 'tab1') {
            tableData.value = []
            searchForm.value.total = 0
        }
    }
    //案卷列表
    if (tabKey.value === 'tab1') {
        tableFileCloseClick()
        if(searchForm.value.searchType==='2'){
            if(tableData.value.length>0&&tableData.value[0]?.approvalFileList.length>0){
                // tableFileData.value =getArrValue( tableData.value[0]['approvalFileList'])
                let searchinput=searchForm.value.queryValue
                let allarr=getArrValue( tableData.value[0]['approvalFileList'])
                let filterarr=allarr.filter((item)=>{
                    if(item.fileName.indexOf(searchinput)!=-1){
                        return item
                    }
                })
                tableFileData.value =getArrValue( filterarr)
                tableAllShow.value = true;
                tableFileShow.value = true;
            }
        }
    }
}
//多选
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:'fileNumber', name: '文件编号', width: 180},
    {key:'fileName', name: '文件题名'},
    {key:'fileTime', name: '文件日期', width: 120},
    {key:'dutyUser', name: '责任者', width: 120},
    {key:'filePage', name: '页数', width: 120},
    {key:'action', name: '操作', width: 120},
])
const tableFileData = ref([

])
//查看卷内文件pdf
// const viewfilePdf=(row)=>{
//     if(row?.pdfFileUrl){
//         window.open(row?.pdfFileUrl, '_blank')
//     }else{
//         window.$message?.warning('文件不存在')
//  }
// }
const tableFileLoading = ref(false)
const tableFileSelection = (rows) => {
    console.log(rows)
}

//表格行被点击
const tableFileShow = ref(false)
const tableRowClick = ({row}) => {
    tableAllShow.value = true;
    tableFileShow.value = true;
    tableFileData.value =getArrValue( row['approvalFileList'])
    cscTableData1.value=getArrValue( row['approvalFileList'])
    InsearchForm.value.total=row['approvalFileList'].length
    fileInfo.value=row
    // fileInfo.value.pageN=row['approvalFileList'].length||0
     fileInfo.value.pageNumber=row['approvalFileList'].length||0


}
const tableFileCloseClick = () => {
    tableAllShow.value = false;
    tableFileShow.value = false;
}
const viewPdf = async (id) => {
    window.$message?.info('预览案卷需要合并pdf，需要一点时间')
    pdfLoading.value=true
    const {error, code, data, msg} = await tuningApi.printArchive({
        id: id
    })
    pdfLoading.value=false
    if (!error && code === 200) {
        if (data) {

            return data
            // window.open(data, '_blank')
        } else {
            window.$message?.warning('文件不存在')
        }

    }
    // else {
    //     window.$message?.warning(msg)
    // }
}
const consultFileClick =async (row,type) => {
    isCarrySpotChecksDrawer.value = true
    console.log(row,'row');


    // pdfUrl.value=row.approvalFileList

   if(type===1){
    cscTableData1.value=row.approvalFileList
    fileInfo.value=row
    // fileInfo.value.pageN=row['approvalFileList'].length||0
    fileInfo.value.pageNumber=row['approvalFileList'].length||0
   }else if(type==2){
    checkId.value=row.id
    pdfUrl.value=row.pdfFileUrl
   }
    if(type===1&& cscTableData1.value.length>0&&cscTableData1.value[0]['pdfFileUrl']){
        console.log('查阅案卷');

        const url=await viewPdf(row.id)
        console.log(url,'url');

        pdfUrl.value=url
        checkId.value=''
        // checkId.value=cscTableData1.value[0].id
        // pdfUrl.value=row.approvalFileList[0]['pdfFileUrl']
    }

}
const isCarrySpotChecksDrawer = ref(false)
const fileInfo=ref({
    name:"",
    storageTimeValue:'',
    secretLevelValue:'',
    filePage:'',
    unit:'',
    time:'',
    pageN:0,
})//案卷信息
const checkId=ref('')
const changePdf=(row)=>{
    console.log(row,'row');
    pdfUrl.value=row['pdfFileUrl']||''
    checkId.value=row.id

}

//类型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([

])

//竣工资料
const cscTableColumn2 = [
    {key:'name', name: '竣工图资料', align: 'center'}
];
const cscTableData2 = ref([

])

//计量资料
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([
])

//抽检意见
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
    pdfUrl.value=''
}

//tab数据和相关处理
const nodeTabKey = ref('1')
const nodeTabData = ref([
    {key:'1', name: '业主档案'},
    {key:'2', name: '施工档案'},
    {key:'3', name: '监理档案'},
    {key:'4', name: '文书档案'},
]);
const nodeTabChange = (item) => {
    nodeTabKey.value = item?.key;
    getnodeTabData()
}
//获取目录树getArchiveTreeByNodeType
const checkColId=ref(false)
const checkNodeid=ref('')
const singleId=ref('')
const changeCheckColId=(item)=>{

    let arr= nodeTreeArr.value.filter((ele)=>{
            if(ele.checkColId){
            return ele
            }
        })
        if(arr.length>1){
           nodeTreeArr.value.forEach((ele1)=>{
            if(ele1.id!==item.id)
            ele1.checkColId=false
           })
     }
    if(item.notExsitChild===true){
        singleId.value=item.id
    }else{
        if(!activeName.value){
            checkNodeid.value=item.id
            activeName.value=item.id
            item.checkColId=false
            getNodetreedata()
        }else{
            let idsarr=[]
            if(item.checkColId===false){
            nextTick(()=>{
                nodetreeEl?.value[treeIndex.value].setCheckedKeys([],false);
            })
            }else{
                nextTick(()=>{
                    Nodetreedata?.value.forEach((item)=>{
                        idsarr.push(item.id)
                    })
                    nodetreeEl?.value[treeIndex.value].setCheckedKeys(idsarr,true);
                })
            }

        }

    }





}
const nodeTreeArrLoad=ref(false)
const getnodeTabData=async()=>{
    nodeTreeArrLoad.value=true
    const { error, code, data } = await archiveQueryApi.getArchiveTreeByNodeType({
        nodeType:nodeTabKey.value,
        projectId: projectId.value,
        contractId:contractId.value,

    })

    if (!error && code === 200) {
        console.log(data,'mulushu');
        nodeTreeArr.value = getArrValue(data)
        nodeTreeArr.value.forEach((item)=>{
            item.checkColId=false
        })
        nodeTreeArrLoad.value=false

    } else {
        nodeTreeArr.value = []
        nodeTreeArrLoad.value=false

    }
}
const defaultProps = {
  children: 'children',
  label: 'nodeName',
  isLeaf: 'notExsitChild'
}
const Nodetreedata=ref([])
const nodetreeEl=ref(null)
const activeName = ref('')
const nodeTreeArr = ref([])

const treeIndex=ref(0)
const collapseChange = (key) => {

    treeIndex.value=nodeTreeArr.value.findIndex(item=>{return item.id===key})

    checkNodeid.value=key
    activeName.value = key.toString();
    getNodetreedata()
}
const nodetreeElloading=ref(false)
const getNodetreedata=async()=>{
    nodetreeElloading.value=true
    const { error, code, data } = await archiveQueryApi.getChildrenNodeByNodeId({
        nodeId:checkNodeid.value,
    })
    nodetreeElloading.value=false
    if (!error && code === 200) {
        Nodetreedata.value = getArrValue(data)

    } else {
        Nodetreedata.value = []
    }
}
const checkNodeids=ref([])


const loadNode=(tree, resolve)=>{
    archiveQueryApi.getChildrenNodeByNodeId({  nodeId:tree.data.id}).then((response) => {
        let resdata=getArrValue(response.data)
            resolve(resdata);
        })
}


//档案柜的tab数据和相关处理
const tabGuiKey = ref('1')
const tabGuiData = ref([
    {key:'1', name: '业主档案'},
    {key:'2', name: '施工档案'},
    {key:'3', name: '监理档案'},
]);
const tabGuiChange = (item) => {
    tabGuiKey.value = item?.key;
    searchForm.value.current = 1
    searchForm.value.archiveType = tabGuiKey.value
    getTableData()
}


//测试档案柜的数据
const guiItemData = ref([
    {
        children: [
            {id: '柜子id或其他的唯一值', name: '01', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '02', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '03', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '04', content: '档号xxxx ~ 档号xxxxx'},
        ]
    },
    {
        children: [
            {id: '柜子id或其他的唯一值', name: '05', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '06', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '07', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '08', content: '档号xxxx ~ 档号xxxxx'},
        ]
    },
    {
        children: [
            {id: '柜子id或其他的唯一值', name: '09', content: '档号xxxx ~ 档号xxxxx'},
            {id: '柜子id或其他的唯一值', name: '10', content: '档号xxxx ~ 档号xxxxx'},
        ]
    }
])

//柜子被点击
const isGuiInfoDrawer = ref(false)
const guiItemClick = (item) => {
    console.log(item)
    isGuiInfoDrawer.value = true
}

//关闭抽屉
const onCloseGuiInfoDrawer = () => {
    isGuiInfoDrawer.value = false
}

//案卷文件数据
const guiInfoCurKey = ref('')
const guiInfoData = ref([
    {
        children: [
            {id: '1', name: '123Abc'},
            {id: '2', name: '12测试一下Ab'},
            {id: '3', name: 'ABCDEFG'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
    {
        children: [
            {id: '1', name: '123456789'},
            {id: '2', name: '123456789'},
            {id: '3', name: '123456789'},
            {id: '4', name: '123456789'},
            {id: '5', name: '123456789'},
            {id: '6', name: '123456789'},
            {id: '7', name: '123456789'},
            {id: '8', name: '123456789'},
        ]
    },
])

//点击档案
const guiFileInfo = (item) => {
    //因为当前测试数据的id是有重复的，所以，点击后，会出现多个选中。
    guiInfoCurKey.value = item.id
}

</script>

<style lang="scss" scoped>
@import '~style/using/scoped/query.scss';
</style>

<style lang="scss">
@import '~style/using/query.scss';
.col_tree{
    font-size: 16px;
}
.hc-tag-box {
    position: relative;
    width: calc(100% - 40px);
    overflow: hidden;


}
.scrollbar-content {
    white-space: nowrap;
    padding: 10px;
}
.flex_box{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>