lihuilin
4 weeks ago
3 changed files with 313 additions and 561 deletions
@ -1,401 +1,127 @@ |
|||||
<script setup> |
|
||||
import {onMounted, reactive, ref} from 'vue' |
|
||||
import {ElMessage, ElMessageBox} from 'element-plus' |
|
||||
import request from '@/util/http' |
|
||||
import {useAdminStore} from "@/store/index.js"; |
|
||||
import {storeToRefs} from "pinia"; |
|
||||
import {permissionMapping, hasMenuPermission} from "@/utils/menuTreePermission.js" |
|
||||
|
|
||||
const adminStore = useAdminStore() |
|
||||
const {adminData, menuTree} = storeToRefs(adminStore) |
|
||||
const regeEdit = ref(false) |
|
||||
const editFormRef = ref(null) |
|
||||
const tableData = ref([]) |
|
||||
//搜索对象 |
|
||||
const getObj = ref({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10 |
|
||||
}) |
|
||||
const total = ref(0) |
|
||||
const rateEdit = ref({ |
|
||||
id: null, |
|
||||
rateName: '', |
|
||||
num: null, |
|
||||
adminId: null, |
|
||||
updateTime: Date.now(), |
|
||||
}) |
|
||||
//货币条目 |
|
||||
const rateNames = [ |
|
||||
{ |
|
||||
value: 'USD', |
|
||||
label: 'USD' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'HKD', |
|
||||
label: 'HKD' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'THB', |
|
||||
label: 'THB' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'VND', |
|
||||
label: 'VND' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'CAD', |
|
||||
label: 'CAD' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'MYR', |
|
||||
label: 'MYR' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'KRW', |
|
||||
label: 'KRW' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'JPY', |
|
||||
label: 'JPY' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'CNY', |
|
||||
label: 'CNY' |
|
||||
} |
|
||||
] |
|
||||
// 汇率校验 |
|
||||
const checkFreeGoldRadio = function (rule, value, callback) { |
|
||||
if (value == '0' || value == null || value == '') { |
|
||||
callback(new Error('请输入汇率比')) |
|
||||
} else if (value < 0 || isNaN(value)) { |
|
||||
callback(new Error('请输入正确的格式')) |
|
||||
} else { |
|
||||
callback() |
|
||||
} |
|
||||
} |
|
||||
// 定义表单验证规则 |
|
||||
const rules = reactive({ |
|
||||
num: [{validator: checkFreeGoldRadio, trigger: 'blur'}], |
|
||||
}) |
|
||||
// 表单大小 |
|
||||
const formSize = ref('default') |
|
||||
const getAllRate = async function (val) { |
|
||||
try { |
|
||||
const result = await request({ |
|
||||
url: '/rate/selectAll', |
|
||||
method: 'POST', |
|
||||
data: { |
|
||||
pageNum: getObj.value.pageNum, |
|
||||
pageSize: getObj.value.pageSize, |
|
||||
} |
|
||||
}) |
|
||||
console.log('这是汇率列表 请求成功', result) |
|
||||
tableData.value = result.data.list |
|
||||
total.value = result.data.total |
|
||||
} catch (error) { |
|
||||
console.log('请求失败', error); |
|
||||
ElMessage.error('请求失败'); |
|
||||
} |
|
||||
} |
|
||||
const handlePageSizeChange = function (val) { |
|
||||
getObj.value.pageSize = val |
|
||||
getAllRate() |
|
||||
} |
|
||||
const handleCurrentChange = function (val) { |
|
||||
getObj.value.pageNum = val |
|
||||
getAllRate() |
|
||||
} |
|
||||
const getEditData = async function (row) { |
|
||||
try { |
|
||||
console.log('搜索参数', getObj.value) |
|
||||
const result = await request({ |
|
||||
url: '/rate/selectById', |
|
||||
data: {id: row.id} |
|
||||
}) |
|
||||
console.log('根据id查 请求成功', result) |
|
||||
rateEdit.value.id = row.id |
|
||||
rateEdit.value.rateName = row.rateName |
|
||||
rateEdit.value.num = row.num |
|
||||
console.log('根据id获取的数据', rateEdit.value) |
|
||||
rateEdit.value.adminId = adminData.value.id |
|
||||
} catch (error) { |
|
||||
console.log('请求失败', error) |
|
||||
} |
|
||||
} |
|
||||
const hasrateShow = ref(false) |
|
||||
const hasrateEdit = ref(false) |
|
||||
|
|
||||
// 初始化权限状态 |
|
||||
const initPermissions = () => { |
|
||||
if (!menuTree.value || !menuTree.value.length) return; |
|
||||
hasrateShow.value = hasMenuPermission(menuTree.value, permissionMapping.rateShow); |
|
||||
hasrateEdit.value = hasMenuPermission(menuTree.value, permissionMapping.rateEdit); |
|
||||
|
|
||||
}; |
|
||||
// 编辑汇率 |
|
||||
const editRate = async function () { |
|
||||
if (!hasrateEdit) { |
|
||||
ElMessage.error('暂无权限') |
|
||||
return |
|
||||
} |
|
||||
// 提交前验证 汇率是否为数字 |
|
||||
rateEdit.value.num = parseFloat(rateEdit.value.num); |
|
||||
try { |
|
||||
console.log('搜索参数', rateEdit.value) |
|
||||
const result = await request({ |
|
||||
url: '/rate/update', |
|
||||
data: rateEdit.value |
|
||||
}) |
|
||||
console.log('请求成功', result) |
|
||||
await getAllRate() |
|
||||
} catch (error) { |
|
||||
console.log('请求失败', error) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
// 添加前验证 |
|
||||
const edit = () => { |
|
||||
editFormRef.value.validate(async (valid) => { |
|
||||
if (valid) { |
|
||||
try { |
|
||||
await ElMessageBox.confirm("确认修改？"); |
|
||||
await editRate(); |
|
||||
console.log("修改成功"); |
|
||||
regeEdit.value = false; |
|
||||
} catch (error) { |
|
||||
console.log("取消修改", error); |
|
||||
regeEdit.value = false; |
|
||||
} |
|
||||
} else { |
|
||||
ElMessage({ |
|
||||
type: "error", |
|
||||
message: "请检查输入内容", |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
const cancelEdit = () => { |
|
||||
regeEdit.value = false |
|
||||
} |
|
||||
const handleEditDialogClose = () => { |
|
||||
if (editFormRef.value) { |
|
||||
getAllRate() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 日期格式化 |
|
||||
function formatDate(value) { |
|
||||
if (!value) return '' |
|
||||
const date = new Date(value) |
|
||||
const year = date.getFullYear() |
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|
||||
const day = date.getDate().toString().padStart(2, '0') |
|
||||
const hours = date.getHours().toString().padStart(2, '0') |
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0') |
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0') |
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` |
|
||||
} |
|
||||
|
|
||||
// 输入框过滤 |
|
||||
function handleInput(value) { |
|
||||
// 检查是否使用了中文句号 |
|
||||
if (value.includes('。') || /[^\d.]/g.test(value)) { |
|
||||
ElMessage.warning('请输入正确的符号'); |
|
||||
// value = value.replace('。', '.'); |
|
||||
} |
|
||||
// 处理多个小数点的情况，保留第一个，移除后续的 |
|
||||
const parts = value.split('.'); |
|
||||
if (parts.length > 2) { |
|
||||
value = parts[0] + '.' + parts.slice(1).join(''); |
|
||||
ElMessage.warning('只能包含一个小数点'); |
|
||||
} |
|
||||
// 禁止输入负数 |
|
||||
if (value.startsWith('-')) { |
|
||||
ElMessage.warning('不允许输入负数'); |
|
||||
value = value.substring(1); |
|
||||
} |
|
||||
// 最多两位小数，超过时才显示提示 |
|
||||
if (value.includes('.')) { |
|
||||
const parts = value.split('.') |
|
||||
// 限制整数部分最多六位 |
|
||||
if (parts[0].length > 6) { |
|
||||
parts[0] = parts[0].slice(0, 6) |
|
||||
ElMessage.info('整数部分最多允许六位') |
|
||||
} |
|
||||
// 限制小数部分最多两位 |
|
||||
if (parts[1].length > 7) { |
|
||||
parts[1] = parts[1].slice(0, 7) |
|
||||
value = parts[0] + '.' + parts[1] |
|
||||
ElMessage.info('最多允许七位小数') |
|
||||
} else { |
|
||||
value = parts[0] + '.' + parts[1] |
|
||||
} |
|
||||
} else { |
|
||||
// 纯整数时限制最多六位 |
|
||||
if (value.length > 6) { |
|
||||
value = value.slice(0, 6) |
|
||||
ElMessage.info('整数部分最多允许六位') |
|
||||
} |
|
||||
} |
|
||||
// 小数点前没有数字时补0 |
|
||||
if (value.startsWith('.')) { |
|
||||
value = '0' + value; |
|
||||
// 需求没有，注释，先不显示 |
|
||||
// ElMessage.info('已自动补充前导0'); |
|
||||
} |
|
||||
// 更新表单值 |
|
||||
rateEdit.value.num = value |
|
||||
|
<template> |
||||
|
<el-card> |
||||
|
<div class="condition"> |
||||
|
<div class="condition-item1"> |
||||
|
<el-text size="large">活动名称：</el-text> |
||||
|
<el-input v-model="searchForm.activity" style="width: 10vw" placeholder="请输入活动名称" clearable /> |
||||
|
</div> |
||||
|
<div class="condition-item1"> |
||||
|
<el-text size="large">业绩归属：</el-text> |
||||
|
<el-input v-model="searchForm.achievement" style="width: 10vw" placeholder="请输入业绩归属" clearable /> |
||||
|
</div> |
||||
|
<div class="condition-item2"> |
||||
|
<el-text size="large">开始时间：</el-text> |
||||
|
<el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="请选择开始时间" |
||||
|
:default-time="defaultTime" /> |
||||
|
</div> |
||||
|
<div class="condition-item2"> |
||||
|
<el-text size="large">结束时间：</el-text> |
||||
|
<el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="请选择结束时间" |
||||
|
:default-time="defaultTime" /> |
||||
|
</div> |
||||
|
<el-button type="primary" @click="search">查询</el-button> |
||||
|
<el-button type="success" @click="reset">重置</el-button> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
return value |
|
||||
} |
|
||||
|
<el-button type="success" @click="showAdd = true" style="margin-top: 1vh;">新增活动</el-button> |
||||
|
|
||||
onMounted(async function () { |
|
||||
initPermissions() |
|
||||
await getAllRate() |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<el-card class="card2" style="width:82vw;height:85vh" v-if="hasrateShow"> |
|
||||
<el-table :data="tableData" v-if="(tableData.flag = 1)"> |
|
||||
|
<el-card style="margin-top: 1vh;"> |
||||
|
<el-table :data="tableData" style="width: 82vw;" :row-style="{ height: '50px' }"> |
||||
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
||||
<template #default="scope"> |
<template #default="scope"> |
||||
<span>{{ |
|
||||
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize |
|
||||
}}</span> |
|
||||
|
<span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column prop="rateName" label="货币名称" :span="2"/> |
|
||||
<el-table-column prop="num" label="汇率" :span="2"> |
|
||||
|
<el-table-column prop="name" label="活动名称" width="150px" show-overflow-tooltip /> |
||||
|
<el-table-column prop="jwcode" label="业绩归属地" width="150px" /> |
||||
|
<el-table-column prop="market" label="归属地" width="150px" /> |
||||
|
<el-table-column prop="payTime" label="开始时间" width="200px"> |
||||
<template #default="scope"> |
<template #default="scope"> |
||||
<p> |
|
||||
{{ scope.row.num }} ：1 |
|
||||
</p> |
|
||||
|
{{ moment(scope.row.payTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
|
|
||||
<el-table-column prop="updateTime" label="更新时间" :span="3"> |
|
||||
|
<el-table-column prop="createTime" label="结束时间" width="200px"> |
||||
<template #default="scope"> |
<template #default="scope"> |
||||
<span>{{ formatDate(scope.row.updateTime) }}</span> |
|
||||
|
{{ |
||||
|
activeName === 'wait' |
||||
|
? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') |
||||
|
: moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}} |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column v-if="hasrateEdit" label="操作" :span="3"> |
|
||||
<template #default="scope"> |
|
||||
<el-link :underline="false" class="edit-btn" @click="() => { |
|
||||
regeEdit = true |
|
||||
getEditData(scope.row) |
|
||||
}">编辑 |
|
||||
</el-link> |
|
||||
</template> |
|
||||
|
<el-table-column prop="market" label="状态" width="150px" /> |
||||
|
<el-table-column prop="operation" label="操作" width="150px"> |
||||
</el-table-column> |
</el-table-column> |
||||
</el-table> |
</el-table> |
||||
|
|
||||
<!-- 分页 --> |
|
||||
<div class="pagination"> |
|
||||
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]" |
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange" |
|
||||
@current-change="handleCurrentChange"></el-pagination> |
|
||||
</div> |
|
||||
</el-card> |
</el-card> |
||||
|
|
||||
<!-- 这是编辑弹窗 --> |
|
||||
<el-dialog align-center v-model="regeEdit" title="修改汇率" width="30vw" :close-on-click-modal="false" |
|
||||
@close="handleEditDialogClose"> |
|
||||
<el-form ref="editFormRef" :model="rateEdit" :rules="rules" label-width="auto" class="edit-form" :size="formSize" |
|
||||
status-icon> |
|
||||
<el-form-item prop="rateName" label="货币名称:"> |
|
||||
<el-input v-model="rateEdit.rateName" disabled style="width: 10vw"/> |
|
||||
</el-form-item> |
|
||||
|
|
||||
<el-form-item prop="num" label="汇率:"> |
|
||||
<el-input v-model="rateEdit.num" @update:modelValue="handleInput" style="width: 120px"/> |
|
||||
<span class="unit">:1</span> |
|
||||
<span class="rate-tip"> |
|
||||
(提示：当前规则每 |
|
||||
<span>{{ rateEdit.num }}</span> |
|
||||
<span>{{ rateEdit.rateName }}</span>可兑换 1 新币) |
|
||||
</span> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button type="primary" @click="edit">修改</el-button> |
|
||||
<el-button @click="cancelEdit">取消</el-button> |
|
||||
</div> |
|
||||
|
<el-dialog v-model="showAdd" width="20vw" draggable align-center style="background-color: rgb(243,250,254);"> |
||||
|
<div class="add-item"> |
||||
|
<el-text size="large">活动名称：</el-text> |
||||
|
<el-input v-model="addForm.activity" style="width: 12vw" placeholder="请输入活动名称" clearable /> |
||||
|
</div> |
||||
|
<div class="add-item"> |
||||
|
<el-text size="large">业绩归属：</el-text> |
||||
|
<el-input v-model="addForm.achievement" style="width: 12vw" placeholder="请输入业绩归属" clearable /> |
||||
|
</div> |
||||
|
<div class="add-item"> |
||||
|
<el-text size="large">开始时间：</el-text> |
||||
|
<el-date-picker v-model="addForm.startTime" type="datetime" placeholder="请选择付款时间" :default-time="defaultTime" style="width: 12vw" /> |
||||
|
</div> |
||||
|
<div class="add-item"> |
||||
|
<el-text size="large">结束时间：</el-text> |
||||
|
<el-date-picker v-model="addForm.endTime" type="datetime" placeholder="请选择付款时间" :default-time="defaultTime" style="width: 12vw" /> |
||||
|
</div> |
||||
|
<div style="display: flex; justify-content: center; margin-top: 5vh;"> |
||||
|
<el-button type="primary" @click="">取消</el-button> |
||||
|
<el-button type="primary" @click="">确定</el-button> |
||||
|
</div> |
||||
</el-dialog> |
</el-dialog> |
||||
</template> |
</template> |
||||
|
<script setup> |
||||
|
import { ElPagination } from 'element-plus'; |
||||
|
import { ref } from 'vue' |
||||
|
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
.card1 { |
|
||||
background: #F3FAFE; |
|
||||
} |
|
||||
|
|
||||
:deep(.el-table__header-wrapper), |
|
||||
:deep(.el-table__body-wrapper), |
|
||||
:deep(.el-table__cell), |
|
||||
/* 表格 */ |
|
||||
:deep(.el-table__body td) { |
|
||||
background-color: #F3FAFE !important; |
|
||||
} |
|
||||
|
|
||||
/* 表头 */ |
|
||||
:deep(.el-table__header th) { |
|
||||
background-color: #F3FAFE !important; |
|
||||
} |
|
||||
|
|
||||
/* 鼠标悬停 */ |
|
||||
:deep(.el-table__row:hover > .el-table__cell) { |
|
||||
background-color: #E5EBFE !important; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.pagination { |
|
||||
margin-top: 20px; |
|
||||
|
const tableData = ref([]) |
||||
|
const pagination = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0 |
||||
|
}) |
||||
|
const searchForm = ref({ |
||||
|
activity: '' |
||||
|
}) |
||||
|
const showAdd = ref(false) |
||||
|
const addForm = ref({ |
||||
|
activity: '', |
||||
|
achievement: '', |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
}) |
||||
|
</script> |
||||
|
<style> |
||||
|
.condition { |
||||
display: flex; |
display: flex; |
||||
|
align-items: center; |
||||
} |
} |
||||
|
|
||||
.edit-form { |
|
||||
width: 35vw; |
|
||||
height: 13vh; |
|
||||
} |
|
||||
|
|
||||
.dialog-footer { |
|
||||
|
.condition-item1 { |
||||
display: flex; |
display: flex; |
||||
margin-left: 5vw; |
|
||||
} |
|
||||
|
|
||||
.unit { |
|
||||
margin-left: 0.5vw; |
|
||||
} |
|
||||
|
|
||||
.rate-tip { |
|
||||
hyphens: auto; |
|
||||
|
align-items: center; |
||||
|
width: 15vw; |
||||
} |
} |
||||
|
|
||||
/**表单的卡片样式**/ |
|
||||
.card2 { |
|
||||
background: #E7F4FD; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/**表头背景等**/ |
|
||||
:deep(.el-table__header-wrapper), |
|
||||
:deep(.el-table__body-wrapper), |
|
||||
:deep(.el-table__cell), |
|
||||
/* 表格 */ |
|
||||
:deep(.el-table__body td) { |
|
||||
background-color: #F3FAFE !important; |
|
||||
} |
|
||||
|
|
||||
/* 表头 */ |
|
||||
:deep(.el-table__header th) { |
|
||||
background-color: #F3FAFE !important; |
|
||||
|
.condition-item2 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 17vw; |
||||
} |
} |
||||
|
|
||||
/* 鼠标悬停 */ |
|
||||
:deep(.el-table__row:hover > .el-table__cell) { |
|
||||
background-color: #E5EBFE !important; |
|
||||
|
.add-item{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 17vw; |
||||
|
margin-bottom: 1vh; |
||||
} |
} |
||||
|
|
||||
</style> |
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue