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 v-for="(item, index1) in pdfData" :key="index1" class="hc-pdf-view-report-item" :class="pdfIndex === index1 ? 'cur' : ''" @click="changePdf(item, index1)">
                        <hc-icon name="printer" />
                        <span class="name">{{ item.title }}</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="pdfUrl" />
                </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()
        pdfIndex.value = 0
    }
})

//初始化设置拖动分割线
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)
    console.log( pdfData.value, ' pdfData.value')
    pdfUrl.value = pdfData.value[0].url
}, { deep: true })


//深度监听索引
const pdfIndex = ref(0)



//返回
const backClick = () => {
    isShow.value = false
    pdfIndex.value = 0
}
const pdfUrl = ref('')
const changePdf = (item, index)=>{
    pdfIndex.value = index
    pdfUrl.value = item.url
}
</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>