|
|
@@ -1,410 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="table-box">
|
|
|
- <el-card style="margin-bottom: 15px">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
|
|
- <div class="form-search">
|
|
|
- <div class="form-search-title">本期账单排名</div>
|
|
|
- <el-select
|
|
|
- v-model="queryType"
|
|
|
- placeholder="Select"
|
|
|
- style="width: 240px; margin-left: 10px"
|
|
|
- @change="getTotalStatistics()"
|
|
|
- >
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <el-table :data="totalStatistics?.billingRanking" height="250">
|
|
|
- <el-table-column type="index" label="排名" width="80" />
|
|
|
- <el-table-column prop="storeName" label="商家名称" />
|
|
|
- <el-table-column label="核销金额">
|
|
|
- <template #default="{ row }">
|
|
|
- <span v-if="Number(row.incomeMoney) >= 1000"> {{ (row.incomeMoney / 10000).toFixed(2) }}万元 </span>
|
|
|
- <span v-else> {{ row.incomeMoney }}元 </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
|
|
|
- <el-button type="primary" @click="handleLockUpPeriod" style="float: right"> 冻结期设置 </el-button>
|
|
|
- <el-row>
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box borderRight">
|
|
|
- <div class="form-title">
|
|
|
- 总交易金额
|
|
|
- <el-tooltip class="box-item" effect="dark" content="总成交金额" placement="top">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.totalTransactionAmount) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box borderRight">
|
|
|
- <div class="form-title">
|
|
|
- 已提现金额
|
|
|
- <el-tooltip class="box-item" effect="dark" content="用户已成功提现的金额" placement="top">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.withdrawalAmount) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box borderRight">
|
|
|
- <div class="form-title">未核销金额</div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.amountNotWrittenOff) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box">
|
|
|
- <div class="form-title">
|
|
|
- 冻结金额
|
|
|
- <el-tooltip class="box-item" effect="dark" content="当前冻结中的金额(未可提现)" placement="top">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.freezeAmounts) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row style="margin-top: 20px">
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box borderRight">
|
|
|
- <div class="form-title">
|
|
|
- 交易总笔数
|
|
|
- <el-tooltip class="box-item" effect="dark" content="成交订单总数" placement="top">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount2(totalStatistics?.transactionNumber) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box borderRight">
|
|
|
- <div class="form-title">解冻未提现金额</div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.unwithdrawnAmountsFrozen) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="form-box">
|
|
|
- <div class="form-title">
|
|
|
- 已核销金额
|
|
|
- <el-tooltip class="box-item" effect="dark" content="已完成核销的金额" placement="top">
|
|
|
- <el-icon><QuestionFilled /></el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="form-num">
|
|
|
- {{ formatAmount(totalStatistics?.amountWrittenOff) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
|
|
|
- <!-- Expand -->
|
|
|
- <template #expand="scope">
|
|
|
- {{ scope.row }}
|
|
|
- </template>
|
|
|
- <!-- usernameHeader -->
|
|
|
- <template #usernameHeader="scope">
|
|
|
- <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
|
|
|
- {{ scope.column.label }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <!-- createTime -->
|
|
|
- <template #createTime="scope">
|
|
|
- <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
|
|
|
- {{ scope.row.createTime }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 套餐购买金额格式化 -->
|
|
|
- <template #mealOrderAmount="scope">
|
|
|
- {{ formatAmount(scope.row.mealOrderAmount) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 用户核验套餐金额格式化 -->
|
|
|
- <template #mealIncomeMoney="scope">
|
|
|
- {{ formatAmount(scope.row.mealIncomeMoney) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 代金券购买金额格式化 -->
|
|
|
- <template #couponOrderAmount="scope">
|
|
|
- {{ formatAmount(scope.row.couponOrderAmount) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 用户核验代金券金额格式化 -->
|
|
|
- <template #couponIncomeMoney="scope">
|
|
|
- {{ formatAmount(scope.row.couponIncomeMoney) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 结算金额格式化 -->
|
|
|
- <template #cashoutMoney="scope">
|
|
|
- {{ formatAmount(scope.row.cashoutMoney) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 冻结金额格式化 -->
|
|
|
- <template #accountFrozen="scope">
|
|
|
- {{ formatAmount(scope.row.accountFrozen) }}
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 表格操作 -->
|
|
|
- <template #operation="scope">
|
|
|
- <el-button type="primary" link @click="toDetail(scope.row)"> 查看详情 </el-button>
|
|
|
- </template>
|
|
|
- </ProTable>
|
|
|
-
|
|
|
- <!-- 冻结期弹窗 -->
|
|
|
- <el-dialog v-model="dialogFormVisibleLockUpPeriod" title="冻结期设置" width="500">
|
|
|
- <el-radio-group v-model="radioLockUpPeriod" @change="handleRadioChange">
|
|
|
- <el-radio value="1" size="large">
|
|
|
- 核销后 <el-input type="number" v-model="LockUpPeriodValue" @input="handleInput" /> 天解冻
|
|
|
- </el-radio>
|
|
|
- <el-radio value="0" size="large"> 无解冻期 </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button @click="dialogFormVisibleLockUpPeriod = false"> 取消 </el-button>
|
|
|
- <el-button type="primary" @click="handleLockUpPeriodOk"> 确定 </el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="tsx" name="useProTable">
|
|
|
-import { ref, reactive, onMounted, onActivated } from "vue";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
-import { Reconciliation } from "@/api/interface";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
-import ProTable from "@/components/ProTable/index.vue";
|
|
|
-import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
|
|
-import { getReconciliationList, getStatistics, editConfig, getConfig } from "@/api/modules/Reconciliation";
|
|
|
-import { QuestionFilled } from "@element-plus/icons-vue";
|
|
|
-const dialogFormVisibleLockUpPeriod = ref(false);
|
|
|
-const radioLockUpPeriod = ref("2");
|
|
|
-const LockUpPeriodValue = ref(null);
|
|
|
-const router = useRouter();
|
|
|
-const queryType = ref("week");
|
|
|
-const options = ref([
|
|
|
- {
|
|
|
- value: "week",
|
|
|
- label: "本周"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "month",
|
|
|
- label: "本月"
|
|
|
- },
|
|
|
- {
|
|
|
- value: "year",
|
|
|
- label: "本年"
|
|
|
- }
|
|
|
-]);
|
|
|
-const totalStatistics = ref<Reconciliation.ResReconciliation>();
|
|
|
-// 跳转详情页
|
|
|
-const toDetail = row => {
|
|
|
- router.push(`/store/ReconciliationDetail?id=${row.storeId}`);
|
|
|
-};
|
|
|
-
|
|
|
-// ProTable 实例
|
|
|
-const proTable = ref<ProTableInstance>();
|
|
|
-// 如果表格需要初始化请求参数,直接定义传给 ProTable (之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
|
|
|
-const initParam = reactive({});
|
|
|
-// 页面加载时触发查询
|
|
|
-onMounted(() => {
|
|
|
- proTable.value?.getTableList();
|
|
|
- getTotalStatistics();
|
|
|
-});
|
|
|
-
|
|
|
-// 从其他页面返回时触发查询
|
|
|
-onActivated(() => {
|
|
|
- proTable.value?.getTableList();
|
|
|
-});
|
|
|
-
|
|
|
-// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
|
|
-const dataCallback = (data: any) => {
|
|
|
- return {
|
|
|
- list: data.records,
|
|
|
- total: data.total
|
|
|
- };
|
|
|
-};
|
|
|
-const handleGetConfig = () => {
|
|
|
- LockUpPeriodValue.value = null;
|
|
|
- getConfig({
|
|
|
- dictType: "freeze"
|
|
|
- }).then(res => {
|
|
|
- radioLockUpPeriod.value = res.data.configValue1;
|
|
|
- if (res.data.configValue1 === "1") {
|
|
|
- LockUpPeriodValue.value = res.data.configValue2;
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
|
|
|
-// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
|
|
-const getTableList = (params: any) => {
|
|
|
- let newParams = JSON.parse(JSON.stringify(params));
|
|
|
- newParams.page = newParams.pageNum;
|
|
|
- newParams.size = newParams.pageSize;
|
|
|
- delete newParams.pageNum;
|
|
|
- delete newParams.pageSize;
|
|
|
- return getReconciliationList(newParams);
|
|
|
-};
|
|
|
-// 添加金额格式化函数
|
|
|
-const formatAmount = (amount: number | string) => {
|
|
|
- const num = Number(amount);
|
|
|
- if (isNaN(num)) return "0";
|
|
|
-
|
|
|
- if (Math.abs(num) >= 1000) {
|
|
|
- return `${(num / 10000).toFixed(2)}万元`;
|
|
|
- } else if (num === 0) {
|
|
|
- return "0";
|
|
|
- } else {
|
|
|
- return `${num.toFixed(2)}元`;
|
|
|
- }
|
|
|
-};
|
|
|
-// 交易金额格式化
|
|
|
-const formatAmount2 = (amount: number | string) => {
|
|
|
- const num = Number(amount);
|
|
|
- if (isNaN(num)) return "0";
|
|
|
-
|
|
|
- if (Math.abs(num) >= 1000) {
|
|
|
- return `${num / 10000}万笔`;
|
|
|
- } else if (num === 0) {
|
|
|
- return "0";
|
|
|
- } else {
|
|
|
- return `${num}`;
|
|
|
- }
|
|
|
-};
|
|
|
-// 表格配置项
|
|
|
-const columns = reactive<ColumnProps<Reconciliation.ReconciliationList>[]>([
|
|
|
- { prop: "index", label: "排名", type: "index", width: 100 },
|
|
|
- { prop: "storeName", label: "商家名称", search: { el: "input" } },
|
|
|
- { prop: "storeId", label: "商家ID" },
|
|
|
- { prop: "mealOrderCount", label: "套餐购买数量" },
|
|
|
- { prop: "mealOrderAmount", label: "套餐购买金额" },
|
|
|
- { prop: "mealIncomeCount", label: "用户核验套餐数量" },
|
|
|
- { prop: "mealIncomeMoney", label: "用户核验套餐金额" },
|
|
|
- { prop: "couponOrderCount", label: "代金券购买数量" },
|
|
|
- { prop: "couponOrderAmount", label: "代金券购买金额" },
|
|
|
- { prop: "couponIncomeCount", label: "用户核验代金券数量" },
|
|
|
- { prop: "couponIncomeMoney", label: "用户核验代金券金额" },
|
|
|
- { prop: "cashoutMoney", label: "结算金额" },
|
|
|
- { prop: "accountFrozen", label: "冻结金额" },
|
|
|
- { prop: "operation", label: "操作", fixed: "right", width: 120 }
|
|
|
-]);
|
|
|
-
|
|
|
-const getTotalStatistics = async () => {
|
|
|
- try {
|
|
|
- totalStatistics.value = {};
|
|
|
- let resdata = await getStatistics({ queryType: queryType.value });
|
|
|
- if (resdata.code == 200) {
|
|
|
- totalStatistics.value = resdata.data;
|
|
|
- }
|
|
|
- console.log(resdata);
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
-};
|
|
|
-const handleInput = value => {
|
|
|
- // 确保值在允许范围内
|
|
|
- if (value !== "" && value < 1) {
|
|
|
- LockUpPeriodValue.value = 1;
|
|
|
- } else if (value > 999) {
|
|
|
- LockUpPeriodValue.value = 999;
|
|
|
- }
|
|
|
-};
|
|
|
-// 打开设置冻结期的弹窗
|
|
|
-const handleLockUpPeriod = () => {
|
|
|
- handleGetConfig();
|
|
|
- dialogFormVisibleLockUpPeriod.value = true;
|
|
|
-};
|
|
|
-// 确定设置冻结期
|
|
|
-const handleLockUpPeriodOk = async () => {
|
|
|
- if (!LockUpPeriodValue.value && radioLockUpPeriod.value === "1") {
|
|
|
- ElMessage.error("请输入解冻期");
|
|
|
- return;
|
|
|
- }
|
|
|
- const FREEZE_TYPE = "freeze";
|
|
|
- const baseConfig = {
|
|
|
- dictType: FREEZE_TYPE,
|
|
|
- configValue1: radioLockUpPeriod.value === "1" ? 1 : 0
|
|
|
- };
|
|
|
- const enhancedConfig = radioLockUpPeriod.value === "1" ? { ...baseConfig, configValue2: LockUpPeriodValue.value } : baseConfig;
|
|
|
-
|
|
|
- try {
|
|
|
- const res = await editConfig(enhancedConfig);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("设置成功");
|
|
|
- dialogFormVisibleLockUpPeriod.value = false;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error(error.message);
|
|
|
- }
|
|
|
-};
|
|
|
-const handleRadioChange = value => {
|
|
|
- if (value === "0") {
|
|
|
- LockUpPeriodValue.value = null;
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.form-search {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10px;
|
|
|
- &-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-}
|
|
|
-.form-box {
|
|
|
- margin-bottom: 20px;
|
|
|
- text-align: center;
|
|
|
- .form-title {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .form-num {
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-}
|
|
|
-.borderRight {
|
|
|
- border-right: 1px solid #e6e6e6;
|
|
|
-}
|
|
|
-
|
|
|
-// 确保整个页面可以滚动
|
|
|
-.table-box {
|
|
|
- min-height: 150vh; // 超过视窗高度以确保可滚动
|
|
|
- padding-bottom: 50px;
|
|
|
-}
|
|
|
-
|
|
|
-// 针对 ProTable 组件的样式调整
|
|
|
-:deep(.pro-table) {
|
|
|
- // transition: height 0.3s ease; // 平滑高度变化
|
|
|
- height: auto !important;
|
|
|
-}
|
|
|
-:deep(.el-radio-group) {
|
|
|
- display: flex;
|
|
|
- flex-direction: column !important;
|
|
|
- align-items: baseline;
|
|
|
-}
|
|
|
-</style>
|