vue3 页面基础模板(里边包括弹窗以及暴露方法出去，父组件调用），也是一个格子报表统计的模板，基础的请求，常用的变量定义等

电脑版发表于：2025/4/30 16:30

[TOC]

### 页面模板如下，里边包括的弹窗
还包括了一个格子报表统计的模板，基础的请求等

代码如下：
```
<template>
	<el-dialog v-model="userWaterFeeStatisticsDialogVisible" title="水费统计" width="789px" destroy-on-close>
		<div class="userWaterFeeStatistics-container">
            
			<div style=" position: relative">
				<div class="boxContainer">
					<div class="boxitem boxitem1">
						<div class="contentWrap">
							<div class="item-title">总缴费</div>
							<div class="item-content">1</div>
							<div class="item-icon"></div>
						</div>
					</div>
					<div class="boxitem boxitem2">
						<div class="contentWrap">
							<div class="item-title">缴费次数</div>
							<div class="item-content">15030</div>
							<div class="item-icon"></div>
						</div>
					</div>
					<div class="boxitem boxitem3">
						<div class="contentWrap">
							<div class="item-title">欠费</div>
							<div class="item-content">216.3万</div>
							<div class="item-icon"></div>
						</div>
					</div>
					
					<div class="boxitem boxitem5">
						<div class="contentWrap">
							<div class="item-title">总用水量</div>
							<div class="item-content">120</div>
							<div class="item-icon"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts" name="tasks">
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
import request from '/@/utils/requestTools';

const searchForm = ref({
	userNickname: '',
    userId:''
});

// 表格数据
const tableData = ref<any[]>([]);

// 统计数据
const statisticsData = ref<any>({});

onMounted(() => {
	
});

const userWaterFeeStatistics = async () => {
	const result: any = await request.get('/watertap/api/WaterFeeCollection/UserWaterFeeStatistics', {
        userId: searchForm.value.userId
	});
	
	statisticsData.value = result.data
}

const userWaterFeeStatisticsDialogVisible = ref(false);
// 打开弹窗的方法
const openUserWaterFeeStatistics = (row: any) => {

	searchForm.value.userId = row.id

	// 调用查询的数据
	userWaterFeeStatistics()

	userWaterFeeStatisticsDialogVisible.value = true;
};

//暴露方法出去
defineExpose({
	openUserWaterFeeStatistics,
});



</script>
<style scoped="scoped" lang="scss">
.userWaterFeeStatistics-container {
    margin-top: -20px;

	.boxContainer {
		display: flex;
	}

	.contentWrap {
		align-self: center;
	}

	.boxitem {
		position: relative;
		flex: 1;
		height: 75px;
		border-radius: 6px;
		/* padding-left: 15px;*/
		display: flex;
		text-align: center;
		justify-content: center;
	}

	.boxitem .item-title {
		font-size: 14px;
		text-align: center;
		font-weight: bold;
	}

	.boxitem .item-content {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-top: 4px;
		text-align: center;
		font-weight: bold;
	}

	.boxitem .item-icon {
		position: absolute;
		bottom: 8px;
		right: 10px;
	}

	.boxitem1 {
		background: linear-gradient(135deg, #ddf6f2, #f1fffd);
	}

	.boxitem1 .item-title {
		color: #27cda7;
	}

	.boxitem1 .item-content {
		color: #27cda7;
	}

	.boxitem2 {
		background: linear-gradient(135deg, #e1edfe, #f2f7fe);
	}

	.boxitem2 .item-title {
		color: #60a2ff;
	}

	.boxitem2 .item-content {
		color: #60a2ff;
	}

	.boxitem3 {
		background: linear-gradient(135deg, #fff1f1, #fff9f9);
	}

	.boxitem3 .item-title {
		color: #ff6f6f;
	}

	.boxitem3 .item-content {
		color: #ff6f6f;
	}

	.boxitem4 {
		background: linear-gradient(135deg, #ddfaff, #effdff);
	}

	.boxitem4 .item-title {
		color: #13c6cd;
	}

	.boxitem4 .item-content {
		color: #13c6cd;
	}

	.boxitem5 {
		background: linear-gradient(135deg, #eae6ff, #f1eeff);
	}

	.boxitem5 .item-title {
		color: #8c7aff;
	}

	.boxitem5 .item-content {
		color: #8c7aff;
	}

	/*间距相等*/
	.boxContainer .boxitem + .boxitem {
		margin-left: 20px;
	}
}
</style>
```

### 父组件使用上面的
```
<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">

			<el-table :data="state.tableData.data" v-loading="state.tableData.loading">
			
				<el-table-column label="操作" width="169">
					<template #default="scope">
						<el-button  size="small" text type="primary" @click="openUserWaterFeeStatistics(scope.row)"
							>水费统计</el-button>
					</template>
				</el-table-column>
				
			</el-table>
		</el-card>

		
		<UserWaterFeeStatistics ref="userWaterFeeStatisticsRef"></UserWaterFeeStatistics>

	</div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import request from '/@/utils/requestTools';
import { dayjs } from 'element-plus';

import UserWaterFeeStatistics from './component/userWaterFeeStatistics.vue';

const userWaterFeeStatisticsRef = ref()
const openUserWaterFeeStatistics = (row:any) =>{
	userWaterFeeStatisticsRef.value.openUserWaterFeeStatistics(row)
}

</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
```

只若初见

vue3 页面基础模板(里边包括弹窗以及暴露方法出去，父组件调用），也是一个格子报表统计的模板，基础的请求，常用的变量定义等

{{item.title}}