|
|
|
@ -1,75 +1,187 @@ |
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue' |
|
|
|
import { ref, onMounted} from 'vue' |
|
|
|
import { ElMessageBox } from 'element-plus' |
|
|
|
import axios from 'axios' |
|
|
|
|
|
|
|
const regeAdd = ref(false) |
|
|
|
const regeEdit = ref(false) |
|
|
|
|
|
|
|
const rateList = ref([]) |
|
|
|
// 查询方法 |
|
|
|
async function handleSearch(){ |
|
|
|
const response = await axios({ |
|
|
|
URL: 'http://192.168.8.93:10010/rates/search', |
|
|
|
method: 'post', |
|
|
|
data: { pageNum:1,pageSize:2} |
|
|
|
}) |
|
|
|
rateList.value = response.data.data.list |
|
|
|
}; |
|
|
|
handleSearch(); |
|
|
|
//汇率表格数据 |
|
|
|
const tableData = ref([]); |
|
|
|
//搜索对象 |
|
|
|
const getObj = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 5, |
|
|
|
}) |
|
|
|
//分页总条目 |
|
|
|
const get = async function () { |
|
|
|
try { |
|
|
|
console.log('搜索参数', getObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.174:10010/rates/search', { |
|
|
|
...getObj.value, |
|
|
|
rate:{ ...value1.value}, |
|
|
|
}); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
// 存储表格数据 |
|
|
|
tableData.value = result.data.data.list; |
|
|
|
console.log('tableData', tableData.value); |
|
|
|
// 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等 |
|
|
|
getObj.value.pageNum = result.data.data.pageNum; |
|
|
|
getObj.value.pageSize = result.data.data.pageSize; |
|
|
|
getObj.value.total = result.data.data.total; |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const rateAdd = ref({}) |
|
|
|
// 添加方法 |
|
|
|
const rateAdd = ref({}) |
|
|
|
const addRate = async function () { |
|
|
|
try { |
|
|
|
console.log('搜索参数', getObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.174:10010/rates/add', rateAdd.value); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
get(); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
const add = () => { |
|
|
|
ElMessageBox.confirm('确认添加？').then(() => { |
|
|
|
addRate(); |
|
|
|
rateAdd.value = {} |
|
|
|
value1.value = { |
|
|
|
startTime: '', |
|
|
|
endTime: '', |
|
|
|
}; |
|
|
|
regeAdd.value = false |
|
|
|
}).catch(() => { |
|
|
|
regeAdd.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 编辑方法 |
|
|
|
const rateEdit = ref({}) |
|
|
|
//查询已有的数据 |
|
|
|
const getEditData = async function (row) { |
|
|
|
try { |
|
|
|
console.log('搜索参数', getObj.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.174:10010/rates/search', {rate:{rateId:row.rateId}}); |
|
|
|
|
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
// 存储表格数据 |
|
|
|
rateEdit.value = result.data.data[0]; |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
const editRate = async function () { |
|
|
|
try { |
|
|
|
console.log('搜索参数', rateEdit.value); |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.174:10010/rates/update', rateEdit.value); |
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
get(); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
const edit = () => { |
|
|
|
ElMessageBox.confirm('确认修改？').then(() => { |
|
|
|
editRate(); |
|
|
|
regeEdit.value = false |
|
|
|
}).catch(() => { |
|
|
|
regeEdit.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
// 删除方法 |
|
|
|
|
|
|
|
// 删除方法 |
|
|
|
const deleteRate = async function (row) { |
|
|
|
try { |
|
|
|
// 发送POST请求 |
|
|
|
const result = await axios.post('http://192.168.8.174:10010/rates/delete/ '+ row.rateId); |
|
|
|
// 将响应结果存储到响应式数据中 |
|
|
|
console.log('请求成功', result); |
|
|
|
get(); |
|
|
|
} catch (error) { |
|
|
|
console.log('请求失败', error); |
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 假数据 |
|
|
|
const tableData = [ |
|
|
|
// 挂载 |
|
|
|
onMounted(async function(){ |
|
|
|
get(); |
|
|
|
}) |
|
|
|
//分页 |
|
|
|
function handlePageChange(currentPage,pageSize){ |
|
|
|
get(); |
|
|
|
} |
|
|
|
//货币条目 |
|
|
|
const options = [ |
|
|
|
{ |
|
|
|
currency: '币', |
|
|
|
exchangeRate: '111', |
|
|
|
createTime:'2016-05-03', |
|
|
|
updateTime:'2016-05-03', |
|
|
|
updateName:'帅哥' |
|
|
|
|
|
|
|
value: 'USD', |
|
|
|
label: 'USD', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'EUR', |
|
|
|
label: 'EUR', |
|
|
|
}, |
|
|
|
{ |
|
|
|
currency: '币', |
|
|
|
exchangeRate: '111', |
|
|
|
createTime:'2016-05-03', |
|
|
|
updateTime:'2016-05-03', |
|
|
|
updateName:'帅哥' |
|
|
|
value: 'JPY', |
|
|
|
label: 'JPY', |
|
|
|
}, |
|
|
|
{ |
|
|
|
currency: '币', |
|
|
|
exchangeRate: '111', |
|
|
|
createTime:'2016-05-03', |
|
|
|
updateTime:'2016-05-03', |
|
|
|
updateName:'帅哥' |
|
|
|
value: 'GBP', |
|
|
|
label: 'GBP', |
|
|
|
}, |
|
|
|
{ |
|
|
|
currency: '币', |
|
|
|
exchangeRate: '111', |
|
|
|
createTime:'2016-05-03', |
|
|
|
updateTime:'2016-05-03', |
|
|
|
updateName:'帅哥' |
|
|
|
value: 'AUD', |
|
|
|
label: 'AUD', |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
//时间选择器 |
|
|
|
const value1 = ref({ |
|
|
|
startTime: '', |
|
|
|
endTime: '', |
|
|
|
}); // 时间数组 |
|
|
|
function handleDateChange(value) { |
|
|
|
if (value && value.length === 2) { |
|
|
|
value1.value.startTime = value[0]; // 开始日期 |
|
|
|
value1.value.endTime = value[1]; // 结束日期 |
|
|
|
} |
|
|
|
console.log(value1); |
|
|
|
} |
|
|
|
|
|
|
|
filters: { |
|
|
|
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}`; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
@ -86,10 +198,12 @@ const response = await axios({ |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
@change="handleDateChange" |
|
|
|
:size="size" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
/> |
|
|
|
<!-- 按钮 --> |
|
|
|
<el-button class="button-item" type="primary" style="float:right" @click="handleSearchByTime">查询</el-button> |
|
|
|
<el-button class="button-item" type="primary" style="float:right" @click="get">查询</el-button> |
|
|
|
<el-button class="button-item" style="float:right" @click="handledelete">重置</el-button> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
@ -107,21 +221,31 @@ const response = await axios({ |
|
|
|
</div> |
|
|
|
<!-- 表格 --> |
|
|
|
<div> |
|
|
|
<el-table :data="rateList" style="width: 100%" > |
|
|
|
<el-table-column prop="currency" label="货币名称" :span="4" /> |
|
|
|
<el-table-column prop="exchangeRate" label="汇率" :span="4"/> |
|
|
|
<el-table-column prop="createTime" label="添加时间" :span="4"/> |
|
|
|
<el-table-column prop="updateTime" label="更新时间" :span="4"/> |
|
|
|
<el-table :data="tableData" v-if="tableData.flag=1" style="width: 100%" > |
|
|
|
<el-table-column prop="currency" label="货币名称" :span="3" /> |
|
|
|
<el-table-column prop="exchangeRate" label="汇率" :span="3"/> |
|
|
|
<el-table-column prop="createTime" label="添加时间" :span="5"/> |
|
|
|
<el-table-column prop="createTime" label="添加时间" :span="5"/> |
|
|
|
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" :span="5"/> |
|
|
|
|
|
|
|
<el-table-column prop="updateName" label="更新人" :span="4"/> |
|
|
|
<el-table-column label="操作" :span="4"> |
|
|
|
<el-button type="text" @click="regeEdit = true">编辑</el-button> |
|
|
|
<el-button type="text" @click="deleteRate">删除</el-button> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="text" @click="regeEdit=true; getEditData(scope.row)">编辑</el-button> |
|
|
|
<el-button type="text" @click="deleteRate(scope.row)">删除</el-button> |
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<!-- 分页 --> |
|
|
|
<div class="pagination" > |
|
|
|
<el-pagination background layout="prev, pager, next" :total="100" /> |
|
|
|
<el-pagination background layout="prev, pager, next" |
|
|
|
v-model:current-page="getObj.pageNum" |
|
|
|
v-model:page-size="getObj.pageSize" |
|
|
|
:total="getObj.total" |
|
|
|
@change="handlePageChange" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
@ -146,9 +270,12 @@ const response = await axios({ |
|
|
|
status-icon |
|
|
|
> |
|
|
|
<el-form-item label="货币名称:"> |
|
|
|
<el-select v-model="rateAdd.currency" placeholder="请选择" style="width: 240px"> |
|
|
|
<el-select v-model.number="rateAdd.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> |
|
|
|
@ -159,9 +286,27 @@ const response = await axios({ |
|
|
|
<el-form-item label="提交人:"> |
|
|
|
<el-input v-model="rateAdd.updateName" style="width: 240px;"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="开始时间:"> |
|
|
|
<el-date-picker |
|
|
|
v-model="rateAdd.startTime" |
|
|
|
type="date" |
|
|
|
placeholder="请选择时间" |
|
|
|
:default-value="new Date(2010, 9, 1)" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="结束时间:"> |
|
|
|
<el-date-picker |
|
|
|
v-model="rateAdd.endTime" |
|
|
|
type="date" |
|
|
|
placeholder="请选择时间" |
|
|
|
:default-value="new Date(2010, 9, 1)" |
|
|
|
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 type="primary" @click="add">添加</el-button> |
|
|
|
<el-button @click="regeAdd = false">取消</el-button> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
@ -172,14 +317,14 @@ const response = await axios({ |
|
|
|
<!-- 这是编辑弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="regeEdit" |
|
|
|
title="新增汇率" |
|
|
|
title="修改汇率" |
|
|
|
width="500" |
|
|
|
> |
|
|
|
<template #footer> |
|
|
|
<el-form |
|
|
|
ref="ruleFormRef" |
|
|
|
style="max-width: 600px" |
|
|
|
:model="ruleForm" |
|
|
|
:model="rateEdit" |
|
|
|
:rules="rules" |
|
|
|
label-width="auto" |
|
|
|
class="demo-ruleForm" |
|
|
|
@ -187,18 +332,21 @@ const response = await axios({ |
|
|
|
status-icon |
|
|
|
> |
|
|
|
<el-form-item label="货币名称:"> |
|
|
|
<el-select v-model="value" placeholder="请选择" style="width: 240px"> |
|
|
|
<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 style="width: 120px;"/><p class="unit">:1</p> |
|
|
|
<el-input v-model="rateEdit.exchangeRate" style="width: 120px;"/><p class="unit">:1</p> |
|
|
|
<p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="提交人:"> |
|
|
|
<el-input style="width: 240px;"/> |
|
|
|
<el-input v-model="rateEdit.updateName" style="width: 240px;"/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item > |
|
|
|
<div class="dialog-footer"> |
|
|
|
|
hongxilin
6 months ago