huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 汇率页面修改

lihui/feature-20250623144029-金币前端lihui
lihui 1 week ago
parent
b0e960d844
commit
49f6ac08d3
1 changed files with 164 additions and 401 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 429
      src/views/managerecharge/rate.vue

429
src/views/managerecharge/rate.vue
View File

@ -1,8 +1,6 @@
<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios'
import { createApp } from 'vue'
import moment from 'moment'
import _ from 'lodash'
@ -22,7 +20,6 @@ const getAdminData = async function () {
rateAdd.value.adminId = adminData.value.adminId
rateEdit.value.adminId = adminData.value.adminId
console.log('请求成功', result)
// console.log('用户信息', user.value)
} catch (error) {
console.log('请求失败', error)
}
@ -31,6 +28,8 @@ getAdminData()
const regeAdd = ref(false)
const regeEdit = ref(false)
// 表单引用
const editFormRef = ref(null)
//汇率表格数据
const tableData = ref([])
//搜索对象
@ -51,33 +50,8 @@ const formatDateTime = (date) => {
return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
// 今天
const getToday = () => {
const today = new Date()
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// 昨天
const getYesterday = () => {
const yesterday = new Date()
yesterday.setDate(yesterday.getDate() - 1)
const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0)
const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// 近 7 天
const get7Days = () => {
const today = new Date()
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
timeRange.value = [formatDateTime(start), formatDateTime(end)]
search()
}
// const startTime = ref('2023-01-01 00:00:00')
// const endTime = ref('2025-12-31 23:59:59')
const get = async function (val) {
try {
@ -91,9 +65,9 @@ const get = async function (val) {
if (timeRange.value.length === 2) {
time.startTime = moment(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
time.endTime = moment(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
} else {
time.startTime = ''
time.endTime = ''
} else { // 这是对时间的模拟，根据需求不需要传时间
time.startTime = '2023-01-01 00:00:00'
time.endTime = '2025-12-31 23:59:59'
}
console.log('搜索参数', {
@ -114,10 +88,8 @@ const get = async function (val) {
console.log('请求成功', result);
// 存储表格数据
tableData.value = result.data.list;
console.log('tableData', tableData.value);
// 存储分页总条目
total.value = result.data.total;
console.log('total', total.value);
} catch (error) {
console.log('请求失败', error);
ElMessage.error('请求失败');
@ -167,7 +139,6 @@ const addRate = async function () {
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
@ -210,6 +181,11 @@ const throttledAdd = _.throttle(add, 5000, { trailing: false })
const rateEdit = ref({})
//查询已有的数据
const getEditData = async function (row) {
// 重置表单
if (editFormRef.value) {
editFormRef.value.resetFields()
}
try {
console.log('搜索参数', getObj.value)
// 发送POST请求
@ -224,10 +200,8 @@ const getEditData = async function (row) {
rateEdit.value = result.data
rateEdit.value.adminId = adminData.value.adminId
console.log('这是编辑的数值', rateEdit.value)
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
const editRate = async function () {
@ -257,7 +231,6 @@ const editRate = async function () {
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
}
}
const edit = () => {
@ -271,20 +244,17 @@ const edit = () => {
})
}
// 删除方法
const deleteRate = async function (row) {
try {
// 发送POST请求
const result = await request({
url: '/rates/delete/ ' + row.rateId,
data: {}
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
get()
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
// 关闭编辑弹窗时重置表单
const cancelEdit = () => {
regeEdit.value = false
if (editFormRef.value) {
editFormRef.value.resetFields()
}
}
const handleEditDialogClose = () => {
if (editFormRef.value) {
editFormRef.value.resetFields()
}
}
@ -292,10 +262,12 @@ const deleteRate = async function (row) {
onMounted(async function () {
get()
})
//分页
function handlePageChange(currentPage, pageSize) {
get()
}
//货币条目
const options = [
{
@ -347,6 +319,7 @@ function formatDate(value) {
const seconds = date.getSeconds().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
function formatDateTwe(value) {
if (!value) return ''
const date = new Date(value)
@ -356,11 +329,6 @@ function formatDateTwe(value) {
return `${year}-${month}-${day}`
}
// //表格高度
// const tableHeight = computed(function () {
// return (getObj.value.pageSize + 1) * 50 + "px";
// });
// 新增数据规则
// 表单验证ref
const Ref = ref(null)
@ -395,152 +363,74 @@ const checkFreeGoldRadio = function (rule, value, callback) {
const rules = reactive({
currency: [{required: true, message: '请选择货币名称', trigger: 'blur'}],
exchangeRate: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
startTime: [
{ required: true, message: '请选择开始时间', trigger: 'blur' },
{ validator: checkStartTime, trigger: 'blur' }
],
endTime: [
{ required: true, message: '请选择结束时间', trigger: 'blur' },
{ validator: checkEndTime, trigger: 'blur' }
]
// startTime: [
// {required: true, message: '请选择开始时间', trigger: 'blur'},
// {validator: checkStartTime, trigger: 'blur'}
// ],
// endTime: [
// {required: true, message: '请选择结束时间', trigger: 'blur'},
// {validator: checkEndTime, trigger: 'blur'}
// ]
})
// 重置的按钮
const handledelete = function () {
timeRange.value={}
getObj.value.pageNum = 1
}
// 验证跳转输入框的数字是否合法
const checkNumber = function () {
if (typeof parseInt(getObj.value.pageNum) === 'number') {
console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
if (
getObj.value.pageNum > 0 &&
getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
) {
getObj.value.pageNum = parseInt(getObj.value.pageNum)
console.log('输入的数字合法')
get()
} else {
//提示
ElMessage({
type: 'error',
message: '请检查输入内容'
})
}
} else {
//提示
ElMessage({
type: 'error',
message: '请检查输入内容'
})
// 这是限制输入小数不超过七位并验证格式的方法
function handleInput(value) {
// 检测是否包含非法符号
const invalidChars = /[^0-9.]/.test(value);
if (invalidChars) {
ElMessage.warning('只能输入数字和小数点');
}
// 过滤非法字符，只保留数字、小数点
let validValue = value.replace(/[^\d.]/g, '');
// 确保只有一个小数点
validValue = validValue.replace(/\.{2,}/g, '.');
// 限制只能有一个小数点
if (validValue.split('.').length > 2) {
validValue = validValue.replace(/\.$/, '');
ElMessage.warning('注意！只能使用一个小数点');
}
// 删除=========================================================
// 删除按钮
// 限制小数点后7位
const originalDecimalPart = validValue.split('.')[1] || '';
validValue = validValue.replace(/(\.\d{7})\d+/, '$1');
// 删除按钮的气泡弹出框确认按钮
const delConfirm = async function (row) {
try {
// 发送POST请求
const result = await request({
url: '/rates/delete/ ' + row.rateId,
data: {}
})
if (result.code == 200) {
ElMessage({
type: 'success',
message: '删除成功'
})
// 将响应结果存储到响应式数据中
console.log('请求成功', result)
// 刷新表格数据
get()
} else {
ElMessage({
type: 'error',
message: '删除失败'
})
// 如果截断了小数部分，提示用户
const newDecimalPart = validValue.split('.')[1] || '';
if (originalDecimalPart.length > 7 && originalDecimalPart !== newDecimalPart) {
ElMessage.warning('最多只能输入7位小数');
}
} catch (error) {
console.log('请求失败', error)
// 在这里可以处理错误逻辑，比如显示错误提示等
// 根据需求这里先不用，这里是用防御性编程，直接不允许输入，先留一下，之后可能用
// 应用最终处理后的值
// rateAdd.value.exchangeRate = validValue;
// rateEdit.value.exchangeRate = validValue;
// 验证最终格式
if (validValue && !/^\d+(\.\d{0,7})?$/.test(validValue)) {
ElMessage.warning('请输入正确的数字格式');
}
}
//这是限制输入小数不超过七位的限制方法
function handleInput(value) {
// 限制小数点后7位，这里使用正则表达式来实现
rateAdd.value.exchangeRate = value
.replace(/(\.\d{7})\d+/, '$1')
.replace(/^(\d+)(\.\d{0,7})?$/, '$1$2')
}
// 表单大小
const formSize = ref('default')
</script>
<template>
<!-- 这是主页面 -->
<el-row>
<el-col>
<el-card>
<!-- 这是时间 -->
<div class="demo-range">
<el-row>
<el-col :span="9">
<el-form-item>
<el-text class="mx-1" size="large">时间范围：</el-text>
<el-date-picker
v-model="timeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 300px"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button @click="getToday">今</el-button>
<el-button @click="getYesterday">昨</el-button>
<el-button @click="get7Days">近7天</el-button>
</el-col>
<el-col :span="4">
<el-button
class="button-item"
type="success"
@click="handledelete()"
>重置</el-button>
<el-button
type="primary"
@click="search"
>查询</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card class="box-card" style="max-width: 100%">
<!-- 添加 -->
<div class="add-item">
<el-button
style="color: #048efb; border: 1px solid #048efb"
@click="regeAdd = true"
>新增汇率</el-button
>
</div>
<!-- 表格 -->
<div>
<!-- 这里有个小bug，应该是>0-->
<el-table
:data="tableData"
v-if="(tableData.flag = 1)"
:height="tableHeight"
style="width: 100%"
>
<el-table-column
type="index"
@ -558,7 +448,7 @@ function handleInput(value) {
<el-table-column prop="exchangeRate" label="汇率" :span="2">
<template #default="scope">
<p>
{{ scope.row.exchangeRate }}{{ scope.row.currency }} ：1新币
{{ scope.row.exchangeRate }} ：1
</p>
</template>
</el-table-column>
@ -568,36 +458,6 @@ function handleInput(value) {
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="adminName" label="提交人" :span="1" />
<el-table-column prop="status" label="状态">
<template #default="scope">
<span v-if="scope.row.status === 1">
<div class="status">
<span class="green-dot"></span>
<span>使用中</span>
</div>
</span>
<span v-if="scope.row.status === 0">
<div class="status">
<span class="red-dot"></span>
<span>未开始</span>
</div>
</span>
<span v-if="scope.row.status === 2">
<div class="status">
<span class="grey-dot"></span>
<span>已过期</span>
</div>
</span>
</template>
</el-table-column>
<el-table-column prop="startTime" label="持续时间" :span="10">
<template #default="scope">
<span>{{ formatDateTwe(scope.row.startTime) }}</span>
<span>---</span>
<span>{{ formatDateTwe(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" :span="3">
<template #default="scope">
<el-button
@ -608,26 +468,9 @@ function handleInput(value) {
getEditData(scope.row)
}
"
>编辑</el-button
>
<el-popconfirm
title="确定将此条活动删除吗？"
@confirm="delConfirm"
>编辑
</el-button
>
<template #reference>
<el-button type="primary" text> 删除 </el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button
type="primary"
size="small"
@click="confirm(scope.row)"
>
确定
</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
@ -648,18 +491,19 @@ function handleInput(value) {
</el-col>
</el-row>
<!-- 这是添加弹窗 -->
<!-- 这是编辑弹窗 -->
<el-dialog
v-model="regeAdd"
title="新增汇率"
v-model="regeEdit"
title="修改汇率"
width="500"
:close-on-click-modal="false"
@close="handleEditDialogClose"
>
<template #footer>
<el-form
ref="Ref"
ref="editFormRef"
style="max-width: 600px"
:model="rateAdd"
:model="rateEdit"
:rules="rules"
label-width="auto"
class="demo-ruleForm"
@ -668,7 +512,7 @@ function handleInput(value) {
>
<el-form-item prop="currency" label="货币名称:">
<el-select
v-model.number="rateAdd.currency"
v-model="rateEdit.currency"
placeholder="请选择"
style="width: 240px"
>
@ -682,113 +526,25 @@ function handleInput(value) {
</el-form-item>
<el-form-item prop="exchangeRate" label="汇率:">
<el-input
v-model="rateAdd.exchangeRate"
v-model="rateEdit.exchangeRate"
@update:modelValue="handleInput"
style="width: 120px"
/>
<p class="unit">:1</p>
<p>
(提示：当前规则每 {{ rateAdd.exchangeRate }}
{{ rateAdd.currency }}可兑换 1 新币)
</p>
</el-form-item>
<el-form-item prop="adminId" label="提交人:">
<el-input :value="adminData.name" disabled style="width: 240px" />
</el-form-item>
<el-form-item prop="startTime" label="开始时间:">
<el-date-picker
v-model="rateAdd.startTime"
type="date"
placeholder="请选择时间"
:default-value="new Date()"
@change="handleStartTimeChange"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item prop="endTime" label="结束时间:">
<el-date-picker
v-model="rateAdd.endTime"
type="date"
placeholder="请选择时间"
:default-value="new Date()"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<div class="dialog-footer">
<el-button type="primary" @click="throttledAdd">添加</el-button>
<el-button @click="regeAdd = false">取消</el-button>
</div>
</el-form-item>
</el-form>
</template>
</el-dialog>
<!-- 这是编辑弹窗 -->
<el-dialog
v-model="regeEdit"
title="修改汇率"
width="500"
:close-on-click-modal="false"
>
<template #footer>
<el-form
ref="ruleFormRef"
style="max-width: 600px"
:model="rateEdit"
:rules="rules"
label-width="auto"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<el-form-item label="货币名称:">
<el-select
v-model="rateEdit.currency"
placeholder="请选择"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="汇率:">
<el-input v-model="rateEdit.exchangeRate" style="width: 120px" />
<p class="unit">:1</p>
<p>
(提示：当前规则每 {{ rateEdit.exchangeRate }}
{{ rateEdit.currency }}可兑换 1 新币)
<p class="rate-tip">
(提示：当前规则每
<span>{{ rateEdit.exchangeRate }}</span>
<span>{{ rateEdit.currency }}</span>
可兑换 1 新币)
</p>
</el-form-item>
<el-form-item label="提交人:">
<el-input disabled :value="adminData.name" style="width: 240px"/>
</el-form-item>
<el-form-item label="开始时间:">
<el-date-picker
v-model="rateEdit.startTime"
type="date"
placeholder="请选择时间"
:default-value="new Date()"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="结束时间:">
<el-date-picker
v-model="rateEdit.endTime"
type="date"
placeholder="请选择时间"
:default-value="new Date()"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<div class="dialog-footer">
<el-button type="primary" @click="edit">修改</el-button>
<el-button @click="regeEdit = false">取消</el-button>
<el-button @click="cancelEdit">取消</el-button>
</div>
</el-form-item>
</el-form>
@ -796,6 +552,7 @@ function handleInput(value) {
</el-dialog>
</template>
<style scoped>
p {
margin: 0px;
@ -840,10 +597,16 @@ p {
.el-card {
padding: 0px;
}
.pagination {
display: flex;
}
.status {
display: flex;
}
.rate-tip {
hyphens: auto;
}
</style>
Write Preview
Loading…
Cancel
Save