refactor(用户借呗): 重构借呗相关字段命名和显示逻辑
将"余额"统一改为"借呗"相关命名,包括剩余借呗、已用借呗和借呗额度 添加借呗额度字段并在各界面展示 统一金额格式化逻辑到工具函数 移除不再使用的currentBalance变量
This commit is contained in:
parent
908ff3e191
commit
33408d023d
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue