127 lines
3.7 KiB
Vue
127 lines
3.7 KiB
Vue
|
<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="onSearch" v-model="searchFormParams.name" placeholder="请输入姓名" clearable
|
||
|
class="!w-[180px]" />
|
||
|
</el-form-item>
|
||
|
<el-form-item label="手机号:" prop="mobile">
|
||
|
<el-input @keyup.enter="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>
|