refactor(用户借呗): 重构借呗相关字段命名和显示逻辑

将"余额"统一改为"借呗"相关命名,包括剩余借呗、已用借呗和借呗额度
添加借呗额度字段并在各界面展示
统一金额格式化逻辑到工具函数
移除不再使用的currentBalance变量
This commit is contained in:
dzq 2025-05-29 15:57:45 +08:00
parent 908ff3e191
commit 33408d023d
5 changed files with 50 additions and 30 deletions

View File

@ -5,10 +5,12 @@ import { UserDTO } from "../system/user";
* *
*/ */
export interface QyUserStatsDTO { export interface QyUserStatsDTO {
/** 用户余额 */ /** 剩余借呗 */
balance?: number; balance?: number;
/** 已使用余额 */ /** 已使用借呗 */
useBalance?: number; useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
} }
export interface QyUserDTO { export interface QyUserDTO {
@ -59,8 +61,12 @@ export interface QyUserDTO {
corpid?: string; corpid?: string;
/** 应用ID导出列应用ID */ /** 应用ID导出列应用ID */
appid?: string; appid?: string;
/** 用户余额 */ /** 剩余借呗 */
balance?: number; balance?: number;
/** 已使用借呗 */
useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
/** 角色id */ /** 角色id */
roleId?: number; roleId?: number;
/** 角色 */ /** 角色 */
@ -84,8 +90,12 @@ export interface AddQyUserCommand {
mobile?: string; mobile?: string;
department?: string; department?: string;
corpid?: string; corpid?: string;
/** 用户余额 */ /** 剩余借呗 */
balance?: number; balance?: number;
/** 已使用借呗 */
useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
roleId?: number; roleId?: number;
sysRoleId?: number; sysRoleId?: number;
} }

View File

@ -35,6 +35,13 @@ const pagination = ref({
const loading = ref(false); const loading = ref(false);
const dataList = ref<QyUserDTO[]>([]); const dataList = ref<QyUserDTO[]>([]);
const formatCurrency = (value) => {
return value.toLocaleString('en-US', {
minimumFractionDigits: 0,
maximumFractionDigits: 2
}) || 0 + '元';
};
const balanceData = ref([ const balanceData = ref([
{ {
name: '用户总借呗', value: '0元', name: '用户总借呗', value: '0元',
@ -42,6 +49,9 @@ const balanceData = ref([
{ {
name: '已用总借呗', value: '0元', name: '已用总借呗', value: '0元',
}, },
{
name: '剩余总借呗', value: '0元',
},
]); ]);
// //
@ -93,12 +103,9 @@ const handlePaginationChange = () => getList();
const getTotalBalance = async () => { const getTotalBalance = async () => {
try { try {
const { data } = await getTotalBalanceApi(wxStore.corpid); const { data } = await getTotalBalanceApi(wxStore.corpid);
balanceData.value[0].value = data.balance.toLocaleString('en-US', balanceData.value[0].value = formatCurrency(data.balanceLimit);
{ minimumFractionDigits: 2, maximumFractionDigits: 2 }) balanceData.value[1].value = formatCurrency(data.useBalance);
+ '元'; balanceData.value[2].value = formatCurrency(data.balance);
balanceData.value[1].value = data.useBalance.toLocaleString('en-US',
{ minimumFractionDigits: 2, maximumFractionDigits: 2 })
+ '元';
} catch (error) { } catch (error) {
console.error('获取总余额失败:', error); console.error('获取总余额失败:', error);
} }
@ -158,15 +165,15 @@ getList().then(() => getTotalBalance());
<el-table ref="tableRef" v-loading="loading" :data="dataList" border> <el-table ref="tableRef" v-loading="loading" :data="dataList" border>
<el-table-column label="用户ID" prop="id" width="80" /> <el-table-column label="用户ID" prop="id" width="80" />
<el-table-column label="姓名" prop="name" width="200" /> <el-table-column label="姓名" prop="name" width="200" />
<el-table-column label="借呗" prop="balance" width="230"> <el-table-column label="借呗" prop="balanceLimit" width="230">
<template #default="{ row }">{{ row.balance.toLocaleString('en-US', { minimumFractionDigits: 0, <template #default="{ row }">{{ formatCurrency(row.balanceLimit) }}</template>
maximumFractionDigits: 2 }) || 0 }}</template>
</el-table-column> </el-table-column>
<el-table-column label="已用借呗" prop="balance" width="230"> <el-table-column label="已用借呗" prop="useBalance" width="230">
<template #default="{ row }">{{ row.useBalance.toLocaleString('en-US', { <template #default="{ row }">{{ formatCurrency(row.useBalance) }}
minimumFractionDigits: 0, </template>
maximumFractionDigits: 2 </el-table-column>
}) || 0 }} <el-table-column label="剩余借呗" prop="balance" width="230">
<template #default="{ row }">{{ formatCurrency(row.balance) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="手机号" prop="mobile" /> <el-table-column label="手机号" prop="mobile" />

View File

@ -21,11 +21,11 @@ const emit = defineEmits(["update:visible", "refresh"]);
const formRef = ref(); const formRef = ref();
const formData = reactive({ const formData = reactive({
balance: 0 balanceLimit: 0
}); });
const rules = reactive<FormRules>({ const rules = reactive<FormRules>({
balance: [ balanceLimit: [
{ required: true, message: "请输入金额", trigger: "blur" }, { required: true, message: "请输入金额", trigger: "blur" },
{ type: 'number', message: '必须为数字类型' }, { type: 'number', message: '必须为数字类型' },
{ validator: (_, v, cb) => v >= 0 ? cb() : cb(new Error('金额不能小于0')), trigger: 'blur' } { validator: (_, v, cb) => v >= 0 ? cb() : cb(new Error('金额不能小于0')), trigger: 'blur' }
@ -37,7 +37,7 @@ const handleConfirm = async () => {
await formRef.value.validate(); await formRef.value.validate();
await updateQyUserApi(props.row.id, { await updateQyUserApi(props.row.id, {
id: props.row.id, id: props.row.id,
balance: formData.balance balanceLimit: formData.balanceLimit
}); });
ElMessage.success("余额修改成功"); ElMessage.success("余额修改成功");
emit("refresh"); emit("refresh");
@ -54,16 +54,16 @@ const closeDialog = () => {
watch(() => props.row, (val) => { watch(() => props.row, (val) => {
if (val) { if (val) {
formData.balance = val.balance || 0; formData.balanceLimit = val.balanceLimit || 0;
} }
}, { immediate: true }); }, { immediate: true });
</script> </script>
<template> <template>
<el-dialog title="修改余额" :model-value="visible" width="500px" @close="closeDialog"> <el-dialog title="修改借呗额度" :model-value="visible" width="500px" @close="closeDialog">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="金额" prop="balance"> <el-form-item label="金额" prop="balanceLimit">
<el-input-number v-model="formData.balance" :precision="2" :step="0.1" :min="0" controls-position="right" <el-input-number v-model="formData.balanceLimit" :precision="2" :step="0.1" :min="0" controls-position="right"
class="!w-[200px]" /> class="!w-[200px]" />
</el-form-item> </el-form-item>
</el-form> </el-form>

View File

@ -15,7 +15,6 @@ const router = useRouter();
const userInfo = ref<QyUserDTO>({}); const userInfo = ref<QyUserDTO>({});
const loading = ref(false); const loading = ref(false);
const balanceVisible = ref(false); const balanceVisible = ref(false);
const currentBalance = ref(0);
const roleVisible = ref(false); const roleVisible = ref(false);
const roleList = ref<RoleDTO[]>([]); const roleList = ref<RoleDTO[]>([]);
const selectedRoleId = ref<number>(); const selectedRoleId = ref<number>();
@ -102,7 +101,6 @@ onMounted(() => {
fetchUserDetail(); fetchUserDetail();
}); });
async function handleModifyBalance(row: QyUserDTO) { async function handleModifyBalance(row: QyUserDTO) {
currentBalance.value = row.balance || 0;
balanceVisible.value = true; balanceVisible.value = true;
} }
@ -128,8 +126,13 @@ async function handleModifyBalance(row: QyUserDTO) {
<el-descriptions class="user-details" :column="1" border> <el-descriptions class="user-details" :column="1" border>
<el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item> <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
<el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item> <el-descriptions-item label="手机号">{{ userInfo.mobile }}</el-descriptions-item>
<el-descriptions-item label="余额">¥{{ userInfo.balance?.toFixed(2) }} <el-button type="primary" size="small" <el-descriptions-item label="借呗">¥{{ userInfo.balanceLimit?.toFixed(2) }}
@click="handleModifyBalance(userInfo)">修改</el-button></el-descriptions-item> <el-button type="primary" size="small" @click="handleModifyBalance(userInfo)">
修改
</el-button>
</el-descriptions-item>
<el-descriptions-item label="已用借呗">{{ userInfo.useBalance?.toFixed(2) }}</el-descriptions-item>
<el-descriptions-item label="剩余借呗">¥{{ userInfo.balance?.toFixed(2) }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<el-card class="info-card"> <el-card class="info-card">

View File

@ -91,7 +91,7 @@ watch(
<div class="user-info"> <div class="user-info">
<div class="name">姓名{{ item.name }}</div> <div class="name">姓名{{ item.name }}</div>
<div class="tel">电话{{ item.mobile }}</div> <div class="tel">电话{{ item.mobile }}</div>
<div class="balance">余额{{ item.balance }}</div> <div class="balance">剩余借呗{{ item.balance }}</div>
</div> </div>
</div> </div>
<div class="card-gap"></div> <div class="card-gap"></div>