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 class="hc-query-input-box">
                <el-input placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开" v-model="searchInput">
                    <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="item.select ? '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="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-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-gather-card-box" :class="tableAllShow?'file-table':''">
                <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">查阅案卷</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">查阅文件</el-button>
                        </template>
                    </HcTable>
                    <template #action>
                        <HcPages :pages="InsearchForm" @change="InpageChange"/>
                    </template>
                </HcCardItem>
            </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"/> -->
                <HcPdf :src="pdfUrl"/>
                <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 { getIndex, isIndex } from "vue-utils-plus"
import website from '~src/config/index'
import archiveQueryApi from "~api/using/query.js";
import {getArrValue} from "js-fast-way"

//变量
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(() => {
    setAnnuals()
    setMonths()
    getTableData()
})

//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0,searchType:"1"
})
//卷内文件
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 annuals = ref([])
const setAnnuals = () => {
    let annualArr = [{key: 'all', name: '所有',select:true}]
    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)
    searchForm.value.year=item.name;
    annuals.value.forEach((ele)=>{
        ele.select=false
    })
    item.select=true
}


//月份
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)
    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: '9999', name: '永久'},
    {key: '30', name: '30年'},
    {key: '10', name: '10年'}
])
const deadlineClick = (item) => {
    deadline.value = setQueryFiltering(deadline.value, item)
    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: '3',name: '公开'},
])
const securityClick = (item) => {
    security.value = setQueryFiltering(security.value, item)
    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: '所有'},
    {key: '1', name: '竣工图'},
    {key: '2', name: '试验'},
    {key: '3', name: '声像'},
    {key: '4', name: '质检'},
    {key: '5', name: '计量'},
    {key: '6', name: '隐蔽'},
    {key: '7', name: '管理文件'},
])
const classesClick = (item) => {
    classes.value = setQueryFiltering(classes.value, item)
    let arr=[]
    classes.value.forEach((item)=>{
        arr.push(item.name)
    })
    searchForm.value.carrierType=arr+''
}


//设置筛选条件
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
}
const nodeTreeModal = ref(false)
const nodeTreeModalClose = () => {
    nodeTreeModal.value = false
}
//确认
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'
    }
}
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;
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.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:'filingUnit', name: '立卷单位', width: 260},
    {key:'action', name: '操作', width: 120},
])
const tableData = ref([
  
])
const pdfUrl=ref('https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf')
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    searchForm.value.queryValue=searchInput.value
    const { error, code, data } = await archiveQueryApi.getarchiveQueryPage({
        ...searchForm.value,
        projectId: projectId.value,
      
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total'] || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}
//多选
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([
    
])
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'])
    InsearchForm.value.total=row['approvalFileList'].length
}
const tableFileCloseClick = () => {
    tableAllShow.value = false;
    tableFileShow.value = false;
}

const consultFileClick = ({row}) => {
    isCarrySpotChecksDrawer.value = true
    pdfUrl.value=row['pdfFileUrl']
   

}
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>
@import '~style/using/scoped/query.scss';
</style>

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