archives/src/views/transfer/components/carry-spot-checks.vue

<template>
    <div>
        <HcDrawer
            :show="isDrawer" to-id="carry-spot-checks-layout-target"
            uis="hc-carry-spot-checks-target" @close="onCarrySpotChecksDrawerClose"
        >
            <div class="hc-carry-spot-checks-pdf">
                <tepmplate v-loading="pdfLoading"> 
                    <HcPdf :src="pdfUrl" />
                </tepmplate>
                <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 class="hc-csc-data-box" :style="{ height: checkId ? '' : 'calc(100% - 363px)' }">
                    <HcTable
                        v-if="tabTypeKey === 'tab1'" :column="cscTableColumn1" :datas="cscTableData1"
                        :is-index="false" :loading="cscTableLoading" is-new :index-style="{ width: 60 }"
                    >
                        <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'" :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata" :ishow-file="ishowFile" />

                    <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>
                <div v-if="checkId" class="hc-csc-action-box">
                    <div class="header-box">
                        <div class="title">抽检意见：</div>
                        <!-- <div class="extra">
                            <el-checkbox v-model="reform.type" class="size-xl">需要整改</el-checkbox>
                        </div> -->
                    </div>
                    <div class="textarea-box">
                        <div v-if="ishowAllopinion">
                            <el-input v-model="reform.content" type="textarea" :autosize="{ minRows: 5 }" resize="none" placeholder="请填写抽检意见" @focus="contentClick" />
                        </div>
                        <div v-else>
                            <el-input ref="saveTagInput" v-model="reform.myOpinion" type="textarea" :autosize="{ minRows: 5 }" resize="none" placeholder="请填写抽检意见" />
                        </div>
                    </div>
                    <div class="btn-box">
                        <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
                            <HcIcon name="close" />
                            <span>{{ closeText }}</span>
                        </el-button>
                        <el-button hc-btn type="primary" :loading="submitLoading" @click="submitOpinion">
                            <HcIcon name="check" />
                            <span>{{ checkText }}</span>
                        </el-button>
                    </div>
                </div>
                <div v-if="checkId.length == 0" class="btn-box" style="text-align: center;">
                    <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
                        <HcIcon name="close" />
                        <span>取消查阅</span>
                    </el-button>
                </div>
            </div>
        </HcDrawer>

        <!-- 使用弹窗查看数据 -->
        <hc-new-dialog v-model="cscTableDataModal" :footer="false" :title="cscTableDataTitle" is-table widths="1080px" @close="cscTableDataModalClose">
            <MetaTable v-if="tabTypeKey === 'tab5'" :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata" :ishow-file="ishowFile" />
            <HcTable
                v-if="tabTypeKey === 'tab6'" :column="cscTableColumn51" :datas="cscTableData5"
                :loading="cscTableLoading" is-new :index-style="{ width: 60 }"
            />
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { nextTick, onActivated, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import MetaTable from './meta-table.vue'
import archiveQueryApi from '~api/using/query.js'
import { getArrValue, getObjValue } from 'js-fast-way'
import tuningApi from '~api/archiveConfig/tuning.js'
import initialgApi from '~api/initial/initial'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    show: {
        type: Boolean,
        default: false,
    },
    closeText: {
        type: [String, Number],
        default: '取消查阅',
    },
    checkText: {
        type: [String, Number],
        default: '保存抽检意见',
    },
    fileId:{
        type: [String, Number],
        default: '', //案卷ID
    },
    fileInfo:{
        type: Object,
        default: () => ({}),
    },
    isOpinion:{
        type: Boolean,
        default: false,
    },
    currentId:{
        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)

//监听
watch(() => [
    props.show,
    useAppState.getBubble,
    props.fileId,
    props.fileInfo,
    props.projectId,
    props.isOpinion,
    props.currentId,
], ([show, bubble, FileId, FileInfo, ProjectId, isO, curId]) => {
  
    isDrawer.value = show
    isBubble.value = bubble
    fileId.value = FileId
    fileInfo.value = FileInfo
    projectId.value = ProjectId
    isOpinion.value = isO
    currentId.value = curId

    if (fileId.value && isDrawer.value) {
        getArchiveFileListData()
        let url
        viewPdf(fileId.value).then((res)=>{
            console.log(res, 'res')
            url = res
            pdfUrl.value = url
            if (pdfUrl.value && pdfUrl?.value.length > 0 ) {
                    setTimeout(() => {
                      
                        if (isDrawer.value) {
                            serReviewFile()
                        }
                       
                    }, 30000)
                }
        })
     
    }
    if (isO) {
        checkId.value = fileInfo.value.fileId || ''
        ishowAllopinion.value = true
        getopiniondata()
    } else {
        checkId.value = ''
    }
})

onMounted(()=>{
    console.log(fileId.value, 'fileId.value')
   
})
//类型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 ()=>{
    const { error, code, msg, data } = await archiveQueryApi.getArchiveFileList({
        id: fileId.value, //案卷id

    })
    //处理返回数据
    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) {
            checkmetaFileId.value = cscTableData1.value[0].id
            getmetaInfo()
        }

    } else {

        cscTableData1.value = []
    }
}
const ishowFile = ref(false)
const pdfLoading = ref(false)
const pdfUrl = ref('')
const checkId = ref('')
const checkmetaFileId = ref('')
const ishowAllopinion = ref(false)
const saveTagInput = ref(null)
const contentClick = ()=>{
    console.log(11111)
    ishowAllopinion.value = false
    nextTick(()=>{
        saveTagInput.value?.focus()
    })
}
const changePdf = (row)=>{
    console.log(row, 'row')
    ishowFile.value = true
    pdfLoading.value = false
    pdfUrl.value = row['pdfFileUrl'] || ''
    checkId.value = row.id
    checkmetaFileId.value = row.id
    getmetaInfo()
    ishowAllopinion.value = true

    getopiniondata()
    if (pdfUrl.value && pdfUrl?.value.length > 0) {
            setTimeout(() => {
                if (isDrawer.value) {
                    serReviewFile()
                }
              
            }, 10000)
     }


}
//设置为已查阅
const serReviewFile = async ()=>{
            const { error, code, data, msg } = await initialgApi.updateInspectStatus({
                archiveId: fileId.value,
                projectId:projectId.value,
                conclusionId:currentId.value,
            })
}
const opid = ref('')

//获取抽检意见
const getopiniondata = async ()=>{

    const { error, code, data, msg } = await initialgApi.getArchiveFileOpinion({
        fileId: checkId.value,
        projectId:projectId.value,
        conclusionId:currentId.value,
    })
    if (!error && code === 200) {
        console.log(data, 'data')
        let opiniondata = getObjValue(data)
        reform.value.content = opiniondata?.allOpinion
        // reform.value.type = opiniondata?.allOpinion?.length > 0 ? true : false
        reform.value.myOpinion = opiniondata?.opinion
        opid.value = opiniondata?.id
    }
}
//获取元数据信息
//获取元数据
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([
    // {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 = () => {
    isDrawer.value = false
    ishowFile.value = false
    checkmetaFileId.value = ''
    checkId.value = ''
    emit('close', false)
}

const checkClick = () => {
    emit('check')
}
const submitLoading = ref(false)
const submitOpinion = async ()=>{
    submitLoading.value = true
    const { error, code, data, msg } = await initialgApi.saveInspect({
        fileId: checkId.value,
        archiveId: fileId.value,
        // opinion:reform.value.content,
        opinion:reform.value.myOpinion,
        projectId:projectId.value,
        userId:userInfo.value.user_id,
        archiveName:fileInfo.value.name,
        id:  opid.value || null,
        conclusionId:currentId.value,

    })
    submitLoading.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
        serReviewFile()
      

    }
    // addOpinion
}
//截取日期
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% - 562px);
        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.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;
    }
}
</style>