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

页面模板如下，里边包括的弹窗

还包括了一个格子报表统计的模板，基础的请求等

代码如下：

<template>
    <el-dialog v-model="userWaterFeeStatisticsDialogVisible" title="水费统计" width="789px" destroy-on-close>
        <div class="userWaterFeeStatistics-container">
            <!-- border-bottom: 1px solid #eee; padding: 16px 0px;-->
            <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 boxitem4">
                        <div class="contentWrap">
                            <div class="item-title">粉丝数</div>
                            <div class="item-content">30</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>