From 6925cf0ecaa2c77c147c5974c49a375752f36f2f Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Mon, 30 Dec 2024 20:07:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=85=E5=80=BC=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=E3=80=81=E6=9B=B4=E6=96=B0=E4=BD=99=E9=A2=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/wallet/wallet-transaction.ts          |  16 ++
 src/utils/convert.ts                          |   5 +
 src/utils/formatMoney.ts                      |  10 ++
 .../wallet/wallet-manage/change-balance.vue   | 165 ++++++++++++++++++
 src/views/wallet/wallet-manage/form.vue       | 110 ------------
 src/views/wallet/wallet-manage/index.vue      |  66 +++++--
 .../wallet/wallet-manage/transaction-list.vue |  96 ++++++++++
 7 files changed, 339 insertions(+), 129 deletions(-)
 create mode 100644 src/utils/convert.ts
 create mode 100644 src/utils/formatMoney.ts
 create mode 100644 src/views/wallet/wallet-manage/change-balance.vue
 delete mode 100644 src/views/wallet/wallet-manage/form.vue
 create mode 100644 src/views/wallet/wallet-manage/transaction-list.vue

diff --git a/src/api/wallet/wallet-transaction.ts b/src/api/wallet/wallet-transaction.ts
index a365770..6c8679d 100644
--- a/src/api/wallet/wallet-transaction.ts
+++ b/src/api/wallet/wallet-transaction.ts
@@ -1,5 +1,13 @@
 import request from "/@/utils/request"
 
+export function updateBalance(obj?: Object) {
+  return request({
+    url: '/wallet/walletTransaction/update-balance',
+    method: 'put',
+    data: obj
+  })
+}
+
 export function fetchList(query?: Object) {
   return request({
     url: '/wallet/walletTransaction/page',
@@ -8,6 +16,14 @@ export function fetchList(query?: Object) {
   })
 }
 
+export function pageJoin(query?: Object) {
+  return request({
+    url: '/wallet/walletTransaction/page-join',
+    method: 'get',
+    params: query
+  })
+}
+
 export function addObj(obj?: Object) {
   return request({
     url: '/wallet/walletTransaction',
diff --git a/src/utils/convert.ts b/src/utils/convert.ts
new file mode 100644
index 0000000..4b67cd5
--- /dev/null
+++ b/src/utils/convert.ts
@@ -0,0 +1,5 @@
+export const convertToInteger = (num: number | string | undefined): number => {
+    if (typeof num === 'undefined') return 0
+    const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+    return Math.round(parsedNumber * 100)
+}
\ No newline at end of file
diff --git a/src/utils/formatMoney.ts b/src/utils/formatMoney.ts
new file mode 100644
index 0000000..ad89ae9
--- /dev/null
+++ b/src/utils/formatMoney.ts
@@ -0,0 +1,10 @@
+/**
+ * 显示价格把分转换到元
+ * @param price 
+ * @returns 
+ */
+export function displayPrice(price: any, suffix: string = "元") {
+	if (typeof price === 'undefined') return '0.0' + suffix
+	const parsedNumber = typeof price === 'string' ? parseFloat(price) : price
+	return (parsedNumber / 100.0).toFixed(1) + suffix
+}
\ No newline at end of file
diff --git a/src/views/wallet/wallet-manage/change-balance.vue b/src/views/wallet/wallet-manage/change-balance.vue
new file mode 100644
index 0000000..fa6c2dd
--- /dev/null
+++ b/src/views/wallet/wallet-manage/change-balance.vue
@@ -0,0 +1,165 @@
+<template>
+    <el-dialog title="修改余额" v-model="visible" width="30%" :close-on-click-modal="false" draggable>
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px"
+            v-loading="loading">
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="用户编号" prop="id">
+                        <el-input v-model="form.id" placeholder="" disabled />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="用户昵称" prop="nickname">
+                        <el-input v-model="form.nickname" placeholder="" disabled />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="变动前余额(元)" prop="balance">
+                        <el-input v-model="form.balance" placeholder="" disabled />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="变动类型" prop="changeType">
+                        <el-radio-group v-model="form.changeType">
+                            <el-radio :label="1">充值</el-radio>
+                            <el-radio :label="-1">减少</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="变动余额(元)" prop="changeBalance">
+                        <el-input-number v-model="form.changeBalance" :min="0" :precision="2" :step="0.1"
+                            class="!w-240px" />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="变动后余额(元)" prop="balanceResult">
+                        <el-input v-model="balanceResult" placeholder="" disabled />
+                    </el-form-item>
+                </el-col>
+
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="WalletManageDialog">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import * as walletApi from "/@/api/wallet/wallet-manage"
+import * as walletTransactionApi from "/@/api/wallet/wallet-transaction"
+import * as AdminUserApi from '/@/api/admin/user'
+import { rule } from '/@/utils/validate';
+import { displayPrice } from "/@/utils/formatMoney"
+import { convertToInteger } from "/@/utils/convert"
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive<any>({
+    id: undefined,
+    walletId: undefined,
+    nickname: undefined,
+    balance: '0',
+    changeBalance: 0,
+    changeType: 1
+});
+
+/** 变动后的余额 */
+const balanceResult = computed(() =>
+    displayPrice(
+        convertToInteger(form.balance) +
+        convertToInteger(form.changeBalance) * form.changeType
+    )
+)
+
+// 定义校验规则
+const dataRules = ref({
+    changeBalance: [{ required: true, message: '变动余额不能为空', trigger: 'blur' }]
+})
+
+// 打开弹窗
+const openDialog = (userId: string, id: string) => {
+    visible.value = true
+    form.id = ''
+    // 重置表单数据
+    nextTick(() => {
+        dataFormRef.value?.resetFields();
+    });
+    // 获取walletManage信息
+    if (id) {
+        form.id = id
+        getwalletManageData(userId, id)
+    }
+};
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+    if (form.changeBalance <= 0) {
+        useMessage().error('变动余额不能为零')
+        return
+    }
+    if (convertToInteger(balanceResult.value) < 0) {
+        useMessage().error('变动后的余额不能小于 0')
+        return
+    }
+    try {
+        loading.value = true;
+        const pa = {
+            ...form,
+            userId: form.id,
+            walletId: form.walletId,
+            balance: form.changeBalance * 100,
+        }
+        await walletTransactionApi.updateBalance(pa)
+        useMessage().success("操作成功");
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 初始化表单数据
+const getwalletManageData = async (userId: string, id: string) => {
+    // 获取数据
+    loading.value = true
+    try {
+        const { data: user } = await AdminUserApi.getObj(userId)
+        const { data: wallet } = await walletApi.getObj(id)
+        form.id = user.userId
+        form.walletId = wallet.id
+        form.nickname = user.nickname
+        form.balance = displayPrice(wallet.balance, "")
+        form.changeType = 1
+        form.changeBalance = 0
+    } finally {
+        loading.value = false
+    }
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>
\ No newline at end of file
diff --git a/src/views/wallet/wallet-manage/form.vue b/src/views/wallet/wallet-manage/form.vue
deleted file mode 100644
index 78ace96..0000000
--- a/src/views/wallet/wallet-manage/form.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
-      <el-row :gutter="24">
-        <el-col :span="12" class="mb20">
-          <el-form-item label="是否冻结饭卡" prop="isFreeze">
-            <el-input v-model="form.isFreeze" placeholder="请输入是否冻结饭卡" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="绑定饭卡时间" prop="activeBindTime">
-            <el-input v-model="form.activeBindTime" placeholder="请输入绑定饭卡时间" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="12" class="mb20">
-          <el-form-item label="饭卡绑定状态" prop="activeBindStatus">
-            <el-input v-model="form.activeBindStatus" placeholder="请输入饭卡绑定状态" />
-          </el-form-item>
-        </el-col>
-
-      </el-row>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup lang="ts" name="WalletManageDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/wallet/wallet-manage'
-import { rule } from '/@/utils/validate';
-const emit = defineEmits(['refresh']);
-
-// 定义变量内容
-const dataFormRef = ref();
-const visible = ref(false)
-const loading = ref(false)
-// 定义字典
-
-// 提交表单数据
-const form = reactive({
-  id: '',
-  isFreeze: '',
-  activeBindTime: '',
-  activeBindStatus: '',
-});
-
-// 定义校验规则
-const dataRules = ref({
-})
-
-// 打开弹窗
-const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
-
-  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
-
-  // 获取walletManage信息
-  if (id) {
-    form.id = id
-    getwalletManageData(id)
-  }
-};
-
-// 提交
-const onSubmit = async () => {
-  const valid = await dataFormRef.value.validate().catch(() => { });
-  if (!valid) return false;
-
-  try {
-    loading.value = true;
-    form.id ? await putObj(form) : await addObj(form);
-    useMessage().success(form.id ? '修改成功' : '添加成功');
-    visible.value = false;
-    emit('refresh');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  } finally {
-    loading.value = false;
-  }
-};
-
-
-// 初始化表单数据
-const getwalletManageData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
-};
-
-// 暴露变量
-defineExpose({
-  openDialog
-});
-</script>
\ No newline at end of file
diff --git a/src/views/wallet/wallet-manage/index.vue b/src/views/wallet/wallet-manage/index.vue
index 73631fe..a8355d5 100644
--- a/src/views/wallet/wallet-manage/index.vue
+++ b/src/views/wallet/wallet-manage/index.vue
@@ -17,31 +17,56 @@
         @sort-change="sortChangeHandle">
         <el-table-column type="selection" width="40" align="center" />
         <el-table-column type="index" label="#" width="40" />
-        <el-table-column prop="cardNumber" label="用户" show-overflow-tooltip />
-        <el-table-column prop="cardNumber" label="头像" show-overflow-tooltip />
-        <el-table-column prop="cardNumber" label="手机号" show-overflow-tooltip />
-        <el-table-column prop="cardNumber" label="部门" show-overflow-tooltip />
-        <el-table-column prop="cardNumber" label="饭卡类型" show-overflow-tooltip />
+        <el-table-column prop="username" label="用户" show-overflow-tooltip />
+        <el-table-column prop="userAvatar" label="头像" show-overflow-tooltip>
+          <template #default="{ row }">
+            <preview-image :src="row.userAvatar" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="userMobile" width="120" label="手机号" show-overflow-tooltip />
+        <el-table-column prop="deptName" label="部门" show-overflow-tooltip />
+        <el-table-column prop="walletTypeUniqueCode" label="饭卡类型" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="wallet_type" :value="row.walletTypeUniqueCode" />
+          </template>
+        </el-table-column>
         <el-table-column prop="cardNumber" label="饭卡卡号" show-overflow-tooltip />
-        <el-table-column prop="balance" label="余额" show-overflow-tooltip />
-        <el-table-column prop="totalExpense" label="累计支出" show-overflow-tooltip />
-        <el-table-column prop="totalRecharge" label="累计充值" show-overflow-tooltip />
-        <el-table-column prop="isFreeze" label="是否冻结饭卡" show-overflow-tooltip />
-        <el-table-column prop="activeBindStatus" label="饭卡绑定状态" show-overflow-tooltip />
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
+        <el-table-column prop="balance" label="余额" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="color-primary">{{ displayPrice(row.balance) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalExpense" label="累计支出" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="color-danger">{{ displayPrice(row.totalExpense) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalRecharge" label="累计充值" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="color-warning">{{ displayPrice(row.totalRecharge) }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isFreeze" width="120" label="是否冻结饭卡" show-overflow-tooltip>
+          <template #default="{ row }">
+            <dict-tag :options="yes_no_type" :value="row.isFreeze" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="activeBindStatus" width="120" label="饭卡绑定状态" show-overflow-tooltip />
+        <el-table-column prop="createTime" width="200" label="创建时间" show-overflow-tooltip />
+        <el-table-column label="操作" fixed="right" width="200">
+          <template #default="{ row }">
             <el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletManage_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'wallet_walletManage_del'"
-              @click="handleDelete([scope.row.id])">删除</el-button>
+              @click="formDialogRef.openDialog(row.id)">详情</el-button>
+            <el-button icon="edit-pen" text type="primary" v-auth="'wallet_walletManage_edit'"
+              @click="changeBalanceRef.openDialog(row.userId, row.id)">充值/扣款</el-button>
           </template>
         </el-table-column>
       </el-table>
       <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
     </div>
 
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+    <transaction-list ref="formDialogRef" @refresh="getDataList(false)" />
+    <change-balance ref="changeBalanceRef" @refresh="getDataList(false)" />
 
   </div>
 </template>
@@ -51,13 +76,16 @@ import { BasicTableProps, useTable } from "/@/hooks/table";
 import { fetchList, fetchListJoin, delObjs } from '/@/api/wallet/wallet-manage'
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { useDict } from '/@/hooks/dict';
+import { displayPrice } from "/@/utils/formatMoney"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const TransactionList = defineAsyncComponent(() => import('./transaction-list.vue'));
+const ChangeBalance = defineAsyncComponent(() => import('./change-balance.vue'));
 // 定义查询字典
-
+const { wallet_type, yes_no_type } = useDict('wallet_type', 'yes_no_type');
 // 定义变量内容
 const formDialogRef = ref()
+const changeBalanceRef = ref()
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
diff --git a/src/views/wallet/wallet-manage/transaction-list.vue b/src/views/wallet/wallet-manage/transaction-list.vue
new file mode 100644
index 0000000..0221f73
--- /dev/null
+++ b/src/views/wallet/wallet-manage/transaction-list.vue
@@ -0,0 +1,96 @@
+<template>
+  <el-dialog title="钱包余额明细" v-model="visible" :close-on-click-modal="false" draggable>
+    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+      :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
+      <el-table-column align="center" width="200" label="编号" prop="id" />
+      <el-table-column align="center" width="200" label="钱包编号" prop="walletId" />
+      <el-table-column align="center" label="交易类型" prop="title" />
+      <el-table-column align="center" label="交易金额" prop="price">
+        <template #default="{ row }"> {{ displayPrice(row.price) }} </template>
+      </el-table-column>
+      <el-table-column align="center" label="钱包余额" prop="balance">
+        <template #default="{ row }"> {{ displayPrice(row.balance) }} </template>
+      </el-table-column>
+      <el-table-column align="center" label="交易时间" prop="createTime" width="180px" />
+    </el-table>
+    <template #footer>
+      <Pagination v-model:limit="state.queryForm.pageSize" v-model:page="state.queryForm.pageNo" :total="total"
+        @pagination="getDataList" />
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="WalletManageDialog">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import * as walletTransactionApi from '/@/api/wallet/wallet-transaction'
+import { rule } from '/@/utils/validate';
+import { displayPrice } from "/@/utils/formatMoney"
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive({
+  id: '',
+  isFreeze: '',
+  activeBindTime: '',
+  activeBindStatus: '',
+});
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: walletTransactionApi.pageJoin
+})
+
+// 定义校验规则
+const dataRules = ref({
+})
+
+//  table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  downBlobFile,
+  tableStyle
+} = useTable(state)
+
+// 打开弹窗
+const openDialog = (id: string) => {
+  visible.value = true
+  form.id = ''
+
+  // 重置表单数据
+  nextTick(() => {
+    dataFormRef.value?.resetFields();
+  });
+
+  // 获取walletManage信息
+  if (id) {
+    form.id = id
+    getwalletManageData(id)
+  }
+};
+
+
+
+// 初始化表单数据
+const getwalletManageData = (id: string) => {
+  // 获取数据
+  loading.value = true
+  const res = walletTransactionApi.pageJoin({ walletId: id });
+  console.log(res);
+
+};
+
+// 暴露变量
+defineExpose({
+  openDialog
+});
+</script>
\ No newline at end of file