查阅案卷修改

src/views/archives/manage/carryDrawer/carrySpotChecksDrawer.vue

@@ -0,0 +1,775 @@
+<template>
+    <div>
+        <HcDrawer v-model="isDrawer" to-id="carry-spot-checks-layout-target-tuning" ui="hc-carry-spot-checks-target-tuning" is-close flex @close="onCarrySpotChecksDrawerClose">
+            <div class="hc-carry-spot-checks-pdf">
+                <div v-loading="pdfLoading" class="h-full">
+                    <HcPdf v-if="ishowPdf" :src="pdfUrl" />
+                </div>
+                <el-tooltip :disabled="!isBubble" content="展开/收起 右侧目录" placement="top">
+                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
+                        <HcIcon v-show="isCarryDataShow" name="arrow-right-s" />
+                        <HcIcon v-show="!isCarryDataShow" name="arrow-left-s" />
+                    </div>
+                </el-tooltip>
+            </div>
+            <div v-show="isCarryDataShow" class="hc-carry-spot-checks-data">
+                <div class="hc-csc-switch">
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" :round="false" size="default" @change="tabTypeChange" />
+                </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 v-if="fileInfo?.endDate !== '' || fileInfo?.startDate !== null" class="content">
+                                {{ `${splitDate(fileInfo?.startDate)}~${splitDate(fileInfo?.endDate)}` }}
+                            </div>
+                            <div v-else class="content" />
+                        </div>
+                        <div class="hc-info-text-item">
+                            <div class="title">立卷单位：</div>
+                            <div class="content"> {{ fileInfo.unit }}</div>
+                        </div>
+                    </el-scrollbar>
+                </div>
+                <div :style="{ height: checkId ? '' : 'calc(100% - 363px)' }" class="hc-csc-data-box">
+                    <HcTable
+                        v-if="tabTypeKey === 'tab1'" :column="cscTableColumn1" :datas="cscTableData1"
+                        :index-style="{ width: 60 }" :is-index="false" :loading="cscTableLoading" is-new
+                    >
+                        <template #name="{ row }">
+                            <div :class="row.id === checkId ? 'bg-orange-400' : 'text-hover'" @click="changePdf(row)">{{ row?.fileName }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable v-if="tabTypeKey === 'tab2'" :column="cscTableColumn2" :datas="cscTableData2" :is-index="false" :loading="cscTableLoading" is-new>
+                        <template #name="{ row }">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable
+                        v-if="tabTypeKey === 'tab3'" :column="cscTableColumn3" :datas="cscTableData3"
+                        :is-index="false" :loading="cscTableLoading" is-new
+                    >
+                        <template #name="{ row }">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
+                        </template>
+                    </HcTable>
+
+                    <HcTable
+                        v-if="tabTypeKey === 'tab4'" :column="cscTableColumn4" :datas="cscTableData4"
+                        :is-index="false" :loading="cscTableLoading" is-new
+                    >
+                        <template #name="{ row }">
+                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'" class="hc-csc-associated-row">
+                                <el-tag effect="dark">{{ row?.tag }}</el-tag>
+                                <span class="ml-3">{{ row?.name }}</span>
+                            </div>
+                        </template>
+                    </HcTable>
+
+                    <MetaTable
+                        v-if="tabTypeKey === 'tab5'" :ishow-file="ishowFile"
+                        :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata"
+                    />
+
+                    <HcTable
+                        v-if="tabTypeKey === 'tab6'" :column="cscTableColumn5" :datas="cscTableData5"
+                        :loading="cscTableLoading" is-new
+                    />
+
+                    <el-tooltip
+                        v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'" :disabled="!isBubble"
+                        content="使用弹窗查看数据"
+                        placement="top"
+                    >
+                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
+                            <HcIcon name="airplay" />
+                        </div>
+                    </el-tooltip>
+                    <div class="hc-csc-action-box-height mt-4 text-center">
+                        <div class="btn-box">
+                            <el-button hc-btn size="large" style="height: 40px; padding: 0 15px;" type="warning" @click="onCarrySpotChecksDrawerClose">
+                                <HcIcon name="close" />
+                                <span>取消查阅</span>
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </HcDrawer>
+
+        <!-- 使用弹窗查看数据 -->
+        <hc-new-dialog
+            v-model="cscTableDataModal" :footer="false" :title="cscTableDataTitle" is-table widths="1080px"
+            @close="cscTableDataModalClose"
+        >
+            <MetaTable
+                v-if="tabTypeKey === 'tab5'" :ishow-file="ishowFile"
+                :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata"
+            />
+            <HcTable
+                v-if="tabTypeKey === 'tab6'" :column="cscTableColumn51" :datas="cscTableData5"
+                :index-style="{ width: 60 }" :loading="cscTableLoading" is-new
+            />
+        </hc-new-dialog>
+    </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
+import MetaTable from '../components/meta-table.vue'
+import archiveQueryApi from '~api/using/query.js'
+import { getArrValue } from 'js-fast-way'
+import tuningApi from '~api/archiveConfig/tuning.js'
+
+
+//参数
+const props = defineProps({
+    projectId: {
+        type: [String, Number],
+        default: '',
+    },
+    contractId: {
+        type: [String, Number],
+        default: '',
+    },
+    show: {
+        type: Boolean,
+        default: false,
+    },
+
+    fileId: {
+        type: [String, Number],
+        default: '', //案卷ID
+    },
+    fileInfo: {
+        type: Object,
+        default: () => ({}),
+    },
+    isOpinion: {
+        type: Boolean,
+        default: false,
+    },
+    currentId: {
+        type: [String, Number],
+        default: '',
+    },
+    checkmetaFileId: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['close', 'check'])
+
+const useAppState = useAppStore()
+
+//变量
+const projectId = ref(props.projectId)
+const contractId = ref(props.contractId)
+const isOpinion = ref(props.isOpinion)
+const isBubble = ref(useAppState.getBubble)
+const isDrawer = ref(props.show)
+const fileId = ref(props.fileId)//案卷ID
+const fileInfo = ref(props.fileInfo)//案卷ID
+const userInfo = ref(useAppState.getUserInfo)
+const currentId = ref(props.currentId)
+const checkmetaFileId = ref(props.checkmetaFileId )
+
+//监听
+watch(() => [
+    props.show,
+    useAppState.getBubble,
+    props.fileId,
+    props.fileInfo,
+    props.projectId,
+    props.isOpinion,
+    props.currentId,
+    props.checkmetaFileId,
+], ([show, bubble, FileId, FileInfo, ProjectId, isO, curId, cFid]) => {
+
+    isDrawer.value = show
+    isBubble.value = bubble
+    fileId.value = FileId
+    fileInfo.value = FileInfo
+    projectId.value = ProjectId
+    isOpinion.value = isO
+    currentId.value = curId
+    console.log(cFid, 'cFid')
+    
+    checkmetaFileId.value = cFid
+
+    // if (fileId.value && isDrawer.value) {
+    //     getArchiveFileListData()
+
+
+    // }
+    checkId.value = checkmetaFileId.value
+})
+
+onMounted(() => {
+ 
+   
+
+
+    
+})
+//抽屉显示const isDrawer = ref(props.show)
+watch(() => props.show, (val) => {
+    isDrawer.value = val
+    console.log(val, 'val111111')
+    
+    if (isDrawer.value) {
+        getArchiveFileListData()
+    }
+}, { immediate: true })
+
+//抽屉关闭事件
+
+//类型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 getArchiveFileListData = async () => {
+    cscTableLoading.value = true
+
+    const { error, code, msg, data } = await archiveQueryApi.getArchiveFileList({
+        id: fileId.value, //案卷id
+
+    })
+    cscTableLoading.value = false
+    //处理返回数据
+    if (!error && code === 200) {
+        //  fileInfo.value = data
+        fileInfo.value.pageNumber = data.pageNumber
+        fileInfo.value.storageTimeValue = data.storageTimeValue
+        fileInfo.value.secretLevelValue = data.secretLevelValue
+        fileInfo.value.endDate = data.endDate
+        fileInfo.value.startDate = data.startDate
+        fileInfo.value.name = data.name
+        fileInfo.value.unit = data.unit
+        cscTableData1.value = getArrValue(data['approvalFileList'])
+     
+        
+        if (cscTableData1.value.length > 0) {
+            if (!checkmetaFileId.value || checkmetaFileId.value === '') {
+                   checkmetaFileId.value = cscTableData1.value[0].id
+            // pdfUrl.value = cscTableData1.value[0].pdfFileUrl
+                let rawUrl = cscTableData1.value[0].pdfFileUrl
+                const encodedUrl = encodeURIComponent(rawUrl)
+                pdfUrl.value = encodedUrl
+                checkId.value = cscTableData1.value[0].id
+                getmetaInfo()
+            } else {
+      
+                changePdf(cscTableData1.value.find((item) => item.id === checkmetaFileId.value))
+
+                
+                 
+            }
+         
+        }
+
+    } else {
+
+        cscTableData1.value = []
+        pdfUrl.value = ''
+       
+        checkId.value = ''
+    }
+}
+const ishowFile = ref(false)
+const pdfLoading = ref(false)
+const pdfUrl = ref('')
+const ishowPdf = ref(true)
+const checkId = ref('')
+
+
+
+
+const changePdf = (row) => {
+    console.log(row, 'row')
+    ishowFile.value = true
+    pdfLoading.value = false
+    ishowPdf.value = false
+    setTimeout(() => {
+        ishowPdf.value = true
+    }, 100)
+
+    let rawUrl = row['pdfFileUrl'] || ''
+    const encodedUrl = encodeURIComponent(rawUrl)
+    pdfUrl.value = encodedUrl
+    checkId.value = row.id
+    checkmetaFileId.value = row.id
+    getmetaInfo()
+
+
+
+
+
+}
+
+
+
+//获取元数据
+const cscmetaTableLoading = ref(false)
+const cscmetaDataTabledata = ref([])
+const getmetaInfo = async (fileId) => {
+
+    cscmetaTableLoading.value = true
+    const { error, code, data } = await tuningApi.getMetadataFileByid({
+        fileId: checkmetaFileId.value,
+    })
+    cscmetaTableLoading.value = false
+    if (!error && code === 200) {
+        cscmetaDataTabledata.value = getArrValue(data)
+    } else {
+        cscmetaDataTabledata.value = []
+    }
+}
+//竣工资料
+const cscTableColumn2 = [
+    { key: 'name', name: '竣工图资料', align: 'center' },
+]
+const cscTableData2 = ref([
+   
+])
+
+//计量资料
+const cscTableColumn3 = [
+    { key: 'name', name: '计量资料', align: 'center' },
+]
+const cscTableData3 = ref([
+   
+])
+
+//计量资料
+const cscTableColumn4 = [
+    { key: 'name', name: '关联文件', align: 'center' },
+]
+const cscTableData4 = ref([
+ 
+])
+
+
+//验签包
+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 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 = () => {
+    isDrawer.value = false
+    ishowFile.value = false
+    checkmetaFileId.value = ''
+    checkId.value = ''
+    pdfUrl.value = ''
+    cscTableData1.value = []
+    emit('close', false)
+}
+
+
+
+//截取日期
+const splitDate = (val) => {
+    if (val) {
+        return val?.substring(0, 10)
+    } else {
+        return ''
+    }
+}
+//查阅案卷pdf
+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
+        } else {
+            window.$message?.warning('文件不存在')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.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% - 362px);
+        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: 240px;
+        .header-box {
+            position: relative;
+            display: flex;
+            align-items: center;
+            .title {
+                flex: 1;
+                color: #9A9A9A;
+                font-size: 15px;
+            }
+        }
+        .textarea-box {
+            margin-top: 12px;
+        }
+        .btn-box {
+            position: relative;
+            margin-top: 20px;
+            text-align: center;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.hc-carry-spot-checks-target-tuning.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;
+    }
+}
+
+html.dark {
+    .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: 1px solid var(--el-color-primary);
+            color: white;
+            // background: transparent;
+            background:var(--el-drawer-bg-color);
+            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: white;
+                }
+            }
+            .hc-info-text-item + .hc-info-text-item {
+                margin-top: 8px;
+            }
+        }
+        .hc-csc-data-box {
+            position: relative;
+            // background: #E7EEF4;
+            // background: transparent;
+                     background:var(--el-drawer-bg-color);
+            border-radius: 10px;
+            padding: 12px;
+            height: calc(100% - 362px);
+            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: transparent;
+            border-radius: 10px;
+         
+            padding: 12px;
+            height: 240px;
+            .header-box {
+                position: relative;
+                display: flex;
+                align-items: center;
+                .title {
+                    flex: 1;
+                    color: #9A9A9A;
+                    font-size: 15px;
+                }
+            }
+            .textarea-box {
+                margin-top: 12px;
+            }
+            .btn-box {
+                position: relative;
+                margin-top: 20px;
+                text-align: center;
+            }
+        }
+    }
+    
+}
+</style>

src/views/archives/manage/tuning.vue

@@ -1,5 +1,5 @@
 <template>
-    <hc-body :loading="treeLoading" :project-nmae="projectInfo?.name" split>
+    <hc-body id="carry-spot-checks-layout-target-tuning" :loading="treeLoading" :project-nmae="projectInfo?.name" split>
         <template #tree>
             <HcTree
                 :auto-expand-keys="treeAutoExpandKeys" :contract-id="contractId" :project-id="projectId"
@@ -135,13 +135,23 @@
                         @selection-change="tableSelection" @row-click="tableRowClick"
                     >
                         <template #name="{ row }">
-                            <span class="text-link" :class="row.colourStatus === 2 ? 'text-orange' : ''" @click="viewPdf(row.id)"> 
+                            <span class="text-link" :class="row.colourStatus === 2 ? 'text-orange' : ''"> 
                                 <HcIcon v-if="row.isLock === 1" name="lock" style=" color:red;font-weight: bold;" />
                                 <HcIcon v-else name="lock-unlock" style=" color:green;font-weight: bold;" /> 
                                     
                                 {{ row?.name }}
                             </span>
                         </template>
+                        <template #action="{ row }">
+                            <el-link
+                                v-loading="row.consultLoading"
+                                class="view-file-link"
+                                type="primary"
+                                @click.stop="consultFileClick(row, 1)"
+                            >
+                                查阅案卷
+                            </el-link>
+                        </template>
                     </HcTable>
                 </div>
                 <div v-if="tableFileShow" class="hc-f-table-box" :style="{ flex: tableFileShow ? 'auto' : '0' }">
@@ -164,7 +174,7 @@
                             <HcIcon class="hc-icon-close text-hover" name="close" style=" color:rgb(64, 149, 229);" @click="closetableFile" />
                         </div>
                     </div>
-                    <div class="hc-file-table-box">
+                    <div v-loading="intableLoading" class="hc-file-table-box">
                         <HcTable
                             ref="tableFileRef" :check-style="{ width: 29 }" :column="innertableColumn" :datas="intableData"
                             :index-style="{ width: 60 }" :loading="intableLoading" is-check is-new
@@ -180,6 +190,16 @@
                             <template #fileName="{ row }">
                                 <span class="text-link text-hover" @click="viewfilePdf(row)">{{ row?.fileName }}</span>
                             </template>
+                            <template #action="{ row }">
+                                <el-link
+                                    class="view-file-link"
+                         
+                                    type="primary"
+                                    @click.stop="viewfilePdf(row)"
+                                >
+                                    查阅文件
+                                </el-link>
+                            </template>
                         </HcTable>
                         <!-- <HcPages :pages="insearchForm" @change="inpageChange"/> -->
                     </div>
@@ -404,6 +424,8 @@
                 <el-radio value="2" size="large">按流水号排序</el-radio>
             </el-radio-group>
         </hc-new-dialog>
+        <!-- 展开案卷 -->
+        <CarrySpotChecksDrawer :show="spotChecksDrawer" :file-id="fileId" :checkmeta-file-id="checkmetaFileId" @close="onCarrySpotChecksClose" />
     </hc-body>
 </template>
 
@@ -421,6 +443,7 @@ import { HcDelMsg } from 'hc-vue3-ui'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
 import { toPdfPage } from '~uti/btn-auth'
 import { getDictionaryBiz } from '~api/other'
+import CarrySpotChecksDrawer from './carryDrawer/carrySpotChecksDrawer.vue'
 
 import { useRouter } from 'vue-router'
 
@@ -432,12 +455,15 @@ const contractId = ref(useAppState.getContractId)
 const projectInfo = ref(useAppState.getProjectInfo)
 const isCollapse = ref(useAppState.getCollapse)
 const hoverHand = ref(true)
+const AppTheme = ref(useAppState.getTheme)
 
 //监听
 watch(() => [
     useAppState.getCollapse,
-], ([Collapse]) => {
+    useAppState.getTheme,
+], ([Collapse, theme]) => {
     isCollapse.value = Collapse
+        AppTheme.value = theme
 })
 
 //渲染完成
@@ -515,6 +541,7 @@ const setTableColumns = () => {
         { key: 'name', name: '案卷题名', width: 500 },
         { key: 'storageTimeValue', name: '保管期限' },
         { key: 'pageN', name: '总页数' },
+        { key: 'action', name: '操作', width:100 },
     ]
 }
 
@@ -563,12 +590,15 @@ const intableData = ref([])
 
 //设置表头
 const setInnertableColumn = () => {
+
+
     innertableColumn.value = [
         { key: 'fileNumber', name: '文件编号' },
         { key: 'fileName', name: '文件题名', width: 500 },
         { key: 'fileTime', name: '文件日期' },
         { key: 'dutyUser', name: '责任者' },
         { key: 'filePage', name: '页数' },
+        { key: 'action', width:100, name:'操作' },
     ]
 }
 const intableLoading = ref(false)
@@ -793,9 +823,10 @@ const checkInid = ref('')
 const checkRow = ref({})
 const tableRowClick = ({ row }) => {
     tableFileShow.value = true
-
+    intableLoading.value = true
     checkRow.value = row
     checkInid.value = row.id
+     fileId.value = row.id
     setInnertableColumn()
     getintableData()
 
@@ -1105,36 +1136,24 @@ const unlockarchives = async () => {
         window.$message?.warning(msg)
     }
 }
-const viewPdf = async (id) => {
-    const message = window.$message?.info({
-        message: '预览案卷需要合并pdf，需要一点时间',
-        duration: 0, // 设置为0表示不自动关闭
-    })
-    const { error, code, data, msg } = await tuningApi.printArchive({
-        id: id,
-    })
-    message?.close() // 接口完成后手动关闭提示
-    if (!error && code === 200) {
-        if (data) {
-            toPdfPage(data)
-            //window.open(data, '_blank')
-        } else {
-            window.$message?.warning('文件不存在')
-        }
 
-    }
-    // else {
-    //     window.$message?.warning(msg)
-    // }
-}
+
 //查看卷内文件pdf
 const viewfilePdf = (row) => {
-    if (row?.pdfFileUrl) {
-        toPdfPage(row?.pdfFileUrl)
-        //window.open(row?.pdfFileUrl, '_blank')
-    } else {
-        window.$message?.warning('文件不存在')
-    }
+ 
+    fileId.value = row.archiveId
+
+    // 先重置值,确保每次点击都能触发变化
+    checkmetaFileId.value = ''
+    spotChecksDrawer.value = false
+    
+    // 使用nextTick确保DOM更新后再设置新值
+    nextTick(() => {
+        checkmetaFileId.value = row.id
+        spotChecksDrawer.value = true
+    })
+   
+
 }
 //档号整理
 const startNumber = ref('')
@@ -1416,6 +1435,24 @@ const tableSortClick = () => {
 
 }
 const sortTypeVal = ref('1')
+//查阅案卷// 2. 添加组件引用
+const spotChecksDrawer = ref(false)
+const fileId = ref('')//案卷id
+const checkmetaFileId = ref('')//卷内文件id
+const consultFileClick = (row) => {
+    spotChecksDrawer.value = true
+    fileId.value = row.id || ''
+    checkmetaFileId.value = ''
+}
+
+//关闭抽查
+const onCarrySpotChecksClose = () => {
+        spotChecksDrawer.value = false
+        fileId.value = ''
+        checkmetaFileId.value = ''
+
+
+}
 </script>
 
 <style lang="scss" scoped>
@@ -1514,4 +1551,13 @@ html.dark{
     }
 
 }
+</style>
+
+<style lang="scss" scoped>
+.view-file-link {
+    color: var(--el-color-primary);
+    &:hover {
+        color: var(--el-color-primary-light-3);
+    }
+}
 </style>