measure/src/components/view-report/view-report.vue

<template>
    <hc-new-drawer v-model="isShow" ui="hc-view-report-drawer" to-id="hc-main-box">
        <div class="relative h-full flex">
            <div :id="`hc_tree_card_${uuid}`">
                <hc-new-card scrollbar>
                    <div class="hc-pdf-view-report-item">
                        <hc-icon name="printer" />
                        <span class="name">中间支付报表封面</span>
                    </div>
                    <div class="hc-pdf-view-report-item cur">
                        <hc-icon name="printer" />
                        <span class="name">工程进度款审核表</span>
                    </div>
                    <div class="hc-pdf-view-report-item">
                        <hc-icon name="printer" />
                        <span class="name">中间计量支付证书</span>
                    </div>
                    <div class="hc-pdf-view-report-item">
                        <hc-icon name="printer" />
                        <span class="name">中间计量支付申请表</span>
                    </div>
                </hc-new-card>
            </div>
            <div :id="`hc_table_card_${uuid}`" class="flex-1">
                <hc-new-card>
                    <template #header>
                        <div class="text-18px font-bold">工程进度款审核表</div>
                    </template>
                    <template #extra>
                        <el-button hc-btn type="warning" @click="backClick">返回</el-button>
                    </template>
                    <hc-pdfs url="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf" />
                </hc-new-card>
            </div>
        </div>
    </hc-new-drawer>
</template>

<script setup>
import { getArrValue, getRandom } from 'js-fast-way'
import { nextTick, ref, watch } from 'vue'

const props = defineProps({
    index: {
        type: [String, Number],
        default: '0',
    },
    datas: {
        type: Array,
        default: () => ([]),
    },
})

const emit = defineEmits(['search'])

defineOptions({
    name: 'HcViewReport',
})

const uuid = getRandom(4)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: '',
})

//监听
watch(isShow, (val) => {
    if (val) {
        setSplitRef()
    }
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [50, 500],
        })
    })
}

//深度监听数据
const pdfData = ref(props.datas)
watch(() => props.datas, (data) => {
    pdfData.value = getArrValue(data)
}, { deep: true })


//深度监听索引
const pdfIndex = ref(props.index)
watch(() => props.index, (val) => {
    pdfIndex.value = val ?? 0
}, { deep: true })


//返回
const backClick = () => {
    isShow.value = false
}
</script>

<style lang="scss" scoped>
.hc-pdf-view-report-item {
    position: relative;
    padding: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color .2s;
    .name {
        margin-left: 5px;
    }
    &:hover {
        background-color: var(--el-color-primary-light-8);
    }
    &.cur {
        background-color: var(--el-color-primary-light-8);
        color: var(--el-color-primary);
    }
}
</style>

<style lang="scss">
.el-overlay .el-drawer.hc-view-report-drawer {
    background-color: #F1F5F8;
}
</style>