中间计量申请

package.json

@@ -18,7 +18,7 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
         "element-plus": "2.4.2",
-        "hc-vue3-ui": "^2.5.0",
+        "hc-vue3-ui": "^2.5.2",
         "js-base64": "^3.7.5",
         "js-fast-way": "^0.3.6",
         "js-md5": "^0.8.3",

src/components/index.js

@@ -8,6 +8,7 @@ import HcCharts from './echarts/echarts.vue'
 import HcTitle from './hc-title/hc-title.vue'
 import HcSearchInput from './search-input/search-input.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
+import HcViewReport from './view-report/view-report.vue'
 
 
 //注册全局组件
@@ -22,4 +23,5 @@ export const setupComponents = (App) => {
     App.component('HcTitle', HcTitle)
     App.component('HcSearchInput', HcSearchInput)
     App.component('HcTasksUser', HcTasksUser)
+    App.component('HcViewReport', HcViewReport)
 }

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

@@ -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>

src/views/debit-pay/admin/middlepay.vue

@@ -16,30 +16,12 @@
                     <div class="font-400 text-orange">收方总金额：0元</div>
                 </template>
                 <template #extra>
-                    <el-button hc-btn type="primary" @click="addModalClick">
-                        <HcIcon name="add" />
-                        <span>新增</span>
-                    </el-button>
-                    <el-button hc-btn type="warning" @click="reportClick">
-                        <HcIcon name="send-plane-2" />
-                        <span>按期上报</span>
-                    </el-button>
-                    <el-button hc-btn type="success" @click="detailsModalClick">
-                        <HcIcon name="file-list" />
-                        <span>清单明细</span>
-                    </el-button>
-                    <el-button hc-btn type="success">
-                        <HcIcon name="bar-chart-box" />
-                        <span>查看报表</span>
-                    </el-button>
-                    <el-button hc-btn color="#626aef">
-                        <HcIcon name="sort-desc" :line="false" />
-                        <span>按部位排序</span>
-                    </el-button>
-                    <el-button hc-btn color="#626aef">
-                        <HcIcon name="sort-desc" :line="false" />
-                        <span>按录入时间排序</span>
-                    </el-button>
+                    <el-button hc-btn type="primary" @click="addModalClick">新增</el-button>
+                    <el-button hc-btn type="warning" @click="reportClick">按期上报</el-button>
+                    <el-button hc-btn type="success" @click="detailsModalClick">清单明细</el-button>
+                    <el-button hc-btn type="success" @click="isReportDrawer = true">查看报表</el-button>
+                    <el-button hc-btn color="#626aef">按部位排序</el-button>
+                    <el-button hc-btn color="#626aef">按录入时间排序</el-button>
                 </template>
                 <hc-table
                     :column="tableColumn" :datas="tableData" :loading="tableLoading"
@@ -64,6 +46,9 @@
 
         <!-- 上报弹窗 -->
         <hc-report-dialog v-model="isReport" />
+
+        <!-- 查看报表 -->
+        <hc-view-report v-model="isReportDrawer" />
     </div>
 </template>
 
@@ -176,8 +161,6 @@ const isReport = ref(false)
 const reportClick = () => {
     isReport.value = true
 }
-</script>
 
-<style scoped lang="scss">
-
-</style>
+const isReportDrawer = ref(false)
+</script>

yarn.lock

@@ -899,6 +899,15 @@ axios@^1.6.1:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "http://47.110.251.215:9000/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 b4a@^1.6.4:
   version "1.6.4"
   resolved "http://47.110.251.215:9000/b4a/-/b4a-1.6.4.tgz#ef1c1422cae5ce6535ec191baeed7567443f36c9"
@@ -1568,15 +1577,15 @@ has-flag@^4.0.0:
   resolved "http://47.110.251.215:9000/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-hc-vue3-ui@^2.5.0:
-  version "2.5.0"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.5.0.tgz#a312e5359f4a9b953f00746d3e94780936ea2cf1"
-  integrity sha512-9tVS9/qo6dbFOf3djPZ/LZaYxCjYMdVEkYlPbDeiK1HQgTyW/Gplvyi2hV6lKjk5jkKfQdOdODPKppBwUz/U7Q==
+hc-vue3-ui@^2.5.2:
+  version "2.5.2"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-2.5.2.tgz#1d58d494c4d072265d7c30a899d5877847392c8e"
+  integrity sha512-r9v0ULaNo9aM2X7bdkjFp6vZfizhbAei3K6vF2JdJ8xKqA/OG0TTgcUdH6SbCEHU6Bgq/NwzdBCShWQ4lTN51A==
   dependencies:
-    axios "^1.6.1"
+    axios "^1.6.2"
     dayjs "^1.11.10"
     element-plus "2.4.2"
-    js-fast-way "^0.3.0"
+    js-fast-way "^0.3.7"
     js-md5 "^0.8.3"
     lottie-web "^5.12.2"
     simple-uploader.js "^0.6.0"
@@ -1714,16 +1723,16 @@ js-base64@^3.7.5:
   resolved "http://47.110.251.215:9000/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
   integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
 
-js-fast-way@^0.3.0:
-  version "0.3.7"
-  resolved "http://47.110.251.215:9000/js-fast-way/-/js-fast-way-0.3.7.tgz#b84c6fe151816f44d8453655bcaf122bf7e3a072"
-  integrity sha512-tdelAmrYlCJIykMv8o2BEFI+v+WKLiJyzPyCVlUGSZgxm2xewlXM4A307lXBPZwC1HdLuwTWctAoLeBNf6RdOg==
-
 js-fast-way@^0.3.6:
   version "0.3.6"
   resolved "https://registry.npmjs.org/js-fast-way/-/js-fast-way-0.3.6.tgz#97311c83a191218d1e32a05799e1a32c9e6a3e43"
   integrity sha512-MKyR4h1YuhmYppPgsZ/LlBg2idDTPbHlruOqN5n2Gpru03IVTJg3L4or73e37FlEbeL8DANbrZyYR/rigxvtKw==
 
+js-fast-way@^0.3.7:
+  version "0.3.7"
+  resolved "http://47.110.251.215:9000/js-fast-way/-/js-fast-way-0.3.7.tgz#b84c6fe151816f44d8453655bcaf122bf7e3a072"
+  integrity sha512-tdelAmrYlCJIykMv8o2BEFI+v+WKLiJyzPyCVlUGSZgxm2xewlXM4A307lXBPZwC1HdLuwTWctAoLeBNf6RdOg==
+
 js-md5@^0.8.3:
   version "0.8.3"
   resolved "http://47.110.251.215:9000/js-md5/-/js-md5-0.8.3.tgz#921bab7efa95bfc9d62b87ee08a57f8fe4305b69"