|
|
@@ -0,0 +1,133 @@
|
|
|
+<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-pdf src="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>
|
