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 {
/** 用户余额 */
/** 剩余借呗 */
balance?: number;
/** 已使用余额 */
/** 已使用借呗 */
useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
}
export interface QyUserDTO {
@ -59,8 +61,12 @@ export interface QyUserDTO {
corpid?: string;
/** 应用ID导出列应用ID */
appid?: string;
/** 用户余额 */
/** 剩余借呗 */
balance?: number;
/** 已使用借呗 */
useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
/** 角色id */
roleId?: number;
/** 角色 */
@ -84,8 +90,12 @@ export interface AddQyUserCommand {
mobile?: string;
department?: string;
corpid?: string;
/** 用户余额 */
/** 剩余借呗 */
balance?: number;
/** 已使用借呗 */
useBalance?: number;
/** 借呗额度 */
balanceLimit?: number;
roleId?: number;
sysRoleId?: number;
}

View File

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

View File

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

View File

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

View File

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