From c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 18 九月 2025 17:02:22 +0800
Subject: [PATCH] 2025.9.18 数据产品（待完成）
---
src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 44 insertions(+), 16 deletions(-)
diff --git a/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue b/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue
index 356a41d..8d533e7 100644
--- a/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue
+++ b/src/views/fysp/data-product/base-data-product/components/BaseProdProcess.vue
@@ -22,7 +22,7 @@
<div
v-show="showStep1Thumbnail"
class="prod-thumbnail-wrapper"
- :style="{ height: viewHeight }"
+ :style="{ height: viewHeight + 'px' }"
@click="changeActive(1)"
>
<div class="prod-thumbnail">鈶犱慨鏀归�夐」</div>
@@ -38,6 +38,9 @@
<div v-show="showStep2Content">
<div ref="titleRef" class="prod-title">
<el-text tag="b" size="large">鏁版嵁浜у搧棰勮</el-text>
+ <el-button type="primary" @click="$emit('onStep2')">
+ 涓嬭浇鏁版嵁浜у搧
+ </el-button>
</div>
<slot name="step2" :contentHeight="contentHeight"></slot>
</div>
@@ -49,7 +52,7 @@
<div
v-show="showStep2Thumbnail"
class="prod-thumbnail-wrapper"
- :style="{ height: viewHeight }"
+ :style="{ height: viewHeight + 'px' }"
@click="changeActive(2)"
>
<div
@@ -74,7 +77,11 @@
<slot name="step3"></slot>
</template>
<template v-else>
- <ProdDownload></ProdDownload>
+ <ProdDownload
+ :loading="loading"
+ :queryOpt="queryOpt"
+ @submit="onDownload"
+ ></ProdDownload>
</template>
</div>
</transition>
@@ -85,7 +92,7 @@
<div
v-show="showStep3Thumbnail"
class="prod-thumbnail-wrapper"
- :style="{ height: viewHeight }"
+ :style="{ height: viewHeight + 'px' }"
@click="changeActive(3)"
>
<div
@@ -102,7 +109,7 @@
</el-row>
</template>
<script setup>
-import { computed, inject, ref, watch, onMounted } from 'vue';
+import { computed, inject, ref, watch, onMounted, onUnmounted } from 'vue';
import { unCalc } from '@/utils/css-util';
import ProdQueryOpt from '@/views/fysp/data-product/base-data-product/components/ProdQueryOpt.vue';
import ProdDownload from '@/views/fysp/data-product/base-data-product/components/ProdDownload.vue';
@@ -118,9 +125,10 @@
}
});
-const emit = defineEmits(['update:active', 'onStep1']);
+const emit = defineEmits(['update:active', 'onStep1', 'onStep2', 'onStep3']);
-const viewHeight = inject('viewHeight');
+const contentMaxHeight = inject('contentMaxHeight');
+const viewHeight = inject('viewHeight', contentMaxHeight.value);
const btnDisabled = ref(false);
@@ -128,13 +136,13 @@
const contentHeight = ref('50vh');
function calContentHeight() {
- console.log(titleRef.value.offsetHeight);
- contentHeight.value = `calc(${unCalc(viewHeight.value)} - ${
- titleRef.value?.offsetHeight || 0
- }px)`;
- console.log(contentHeight.value);
-
+ // console.log(titleRef.value.offsetHeight);
+ contentHeight.value = viewHeight.value - (titleRef.value?.offsetHeight || 0);
+ // console.log(contentHeight.value);
}
+
+// 鏁版嵁浜у搧鐢熸垚閫夐」
+const queryOpt = ref({});
// 姝ラ寮曠敤
const step1Ref = ref(null);
@@ -217,7 +225,11 @@
}
function onSearch(opt) {
+ queryOpt.value = opt;
emit('onStep1', opt);
+}
+function onDownload(val) {
+ emit('onStep3', val);
}
function changeActive(index) {
let isAnimate = false;
@@ -234,8 +246,21 @@
// emit('update:active', index);
}
+let resizeObserver = null;
+
onMounted(() => {
- calContentHeight();
+ if (titleRef.value) {
+ resizeObserver = new ResizeObserver(() => {
+ calContentHeight();
+ });
+ resizeObserver.observe(titleRef.value);
+ }
+});
+// 鍦ㄧ粍浠跺嵏杞芥椂娓呯悊
+onUnmounted(() => {
+ if (resizeObserver && titleRef.value) {
+ resizeObserver.unobserve(titleRef);
+ }
});
</script>
<style scoped>
@@ -263,7 +288,10 @@
}
.prod-title {
- padding: 10px;
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.prod-thumbnail-wrapper {
@@ -285,7 +313,7 @@
text-orientation: upright;
letter-spacing: 8px;
font-size: 18px;
- font-weight: 500;
+ font-weight: 600;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
cursor: pointer;
--
Gitblit v1.9.3