shop-front-end/src/views/qy/balance/index.vue

127 lines
3.8 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getQyUserListApi, getTotalBalanceApi, QyUserDTO, QyUserQuery } from "@/api/qy/qyUser";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { ElMessage } from "element-plus";
import { useWxStore } from "@/store/modules/wx";
defineOptions({
name: "UserBalance"
});
const wxStore = useWxStore(); // 微信相关状态管理
const formRef = ref();
const tableRef = ref();
// 搜索表单
const searchFormParams = ref<QyUserQuery>({
name: null,
mobile: null,
corpid: wxStore.corpid, // 企业ID
balancePage: 1
});
// 分页参数
const pagination = ref({
pageSize: 10,
currentPage: 1,
total: 0
});
const loading = ref(false);
const dataList = ref<QyUserDTO[]>([]);
const totalBalance = ref(0);
// 获取用户余额列表
const getList = async () => {
try {
loading.value = true;
const { data } = await getQyUserListApi({
...searchFormParams.value,
pageSize: pagination.value.pageSize,
pageNum: pagination.value.currentPage
});
dataList.value = data.rows;
pagination.value.total = data.total;
} finally {
loading.value = false;
}
};
// 搜索
const onSearch = () => {
pagination.value.currentPage = 1;
getList();
};
// 重置
const resetForm = () => {
formRef.value.resetFields();
onSearch();
};
// 分页变化
const handlePaginationChange = () => getList();
// 获取总余额
const getTotalBalance = async () => {
try {
const { data } = await getTotalBalanceApi(wxStore.corpid);
totalBalance.value = data;
} catch (error) {
console.error('获取总余额失败:', error);
}
};
// 在getList中调用获取总余额
getList().then(() => getTotalBalance());
</script>
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
<el-form-item label="姓名:" prop="name">
<el-input @keyup.enter.native.prevent="onSearch" v-model="searchFormParams.name" placeholder="请输入姓名" clearable
class="!w-[180px]" />
</el-form-item>
<el-form-item label="手机号:" prop="mobile">
<el-input @keyup.enter.native.prevent="onSearch" v-model="searchFormParams.mobile" placeholder="请输入手机号"
clearable class="!w-[180px]" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar :title="`用户总余额: ${totalBalance}元`" @refresh="getList">
<el-table ref="tableRef" v-loading="loading" :data="dataList" border>
<el-table-column label="用户ID" prop="id" width="80" />
<el-table-column label="姓名" prop="name" width="100" />
<el-table-column label="余额" prop="balance" width="130">
<template #default="{ row }">{{ row.balance || 0 }}</template>
</el-table-column>
<el-table-column label="手机号" prop="mobile" />
<!-- <el-table-column label="所属部门" prop="department" /> -->
</el-table>
<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
:page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
@size-change="handlePaginationChange" @current-change="handlePaginationChange" />
</PureTableBar>
</div>
</template>
<style scoped>
.main {
padding: 16px;
}
</style>