feat: 重命名交易对管理为代币化交易对管理，并新增交易对的添加和编辑功能
This commit is contained in:
251
src/views/tokenization/trading-pairs/index.vue
Normal file
251
src/views/tokenization/trading-pairs/index.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<script lang="ts" setup>
|
||||
import { h, useTemplateRef } from 'vue';
|
||||
import { NInput, NSelect, NTag, useDialog } from 'naive-ui';
|
||||
import { client, safeClient } from '@/service/api';
|
||||
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
|
||||
import Add from './components/add.vue';
|
||||
import Edit from './components/edit.vue';
|
||||
|
||||
const dialog = useDialog();
|
||||
const tableInst = useTemplateRef<TableInst>('tableInst');
|
||||
|
||||
const fetchData: TableFetchData = ({ pagination, filter }) => {
|
||||
return safeClient(() =>
|
||||
client.api.admin.trading_pairs.get({
|
||||
query: {
|
||||
...pagination,
|
||||
...filter
|
||||
}
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const columns: TableBaseColumns = [
|
||||
{
|
||||
title: '交易对标识',
|
||||
key: 'symbol',
|
||||
width: 150,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '基础资产代码',
|
||||
key: 'baseAsset',
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
title: '计价资产代码',
|
||||
key: 'quoteAsset',
|
||||
width: 130
|
||||
},
|
||||
|
||||
{
|
||||
title: '挂单手续费率',
|
||||
key: 'makerFeeRate',
|
||||
width: 140,
|
||||
render: row => {
|
||||
return `${(Number(row.makerFeeRate) * 100).toFixed(2)}%`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '成交手续费率',
|
||||
key: 'takerFeeRate',
|
||||
width: 140,
|
||||
render: row => {
|
||||
return `${(Number(row.takerFeeRate) * 100).toFixed(2)}%`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最小下单金额（USDT）',
|
||||
key: 'minOrderAmount',
|
||||
width: 170,
|
||||
render: row => {
|
||||
return Number(row.minOrderAmount).toFixed(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最大下单金额（USDT）',
|
||||
key: 'maxOrderAmount',
|
||||
width: 170,
|
||||
render: row => {
|
||||
return Number(row.maxOrderAmount).toFixed(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最小下单数量',
|
||||
key: 'minOrderQuantity',
|
||||
width: 130,
|
||||
render: row => {
|
||||
return Number(row.minOrderQuantity).toFixed(8);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最大下单数量',
|
||||
key: 'maxOrderQuantity',
|
||||
width: 130,
|
||||
render: row => {
|
||||
return Number(row.maxOrderQuantity).toFixed(8);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '价格小数位数',
|
||||
key: 'pricePrecision',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '数量小数位数',
|
||||
key: 'quantityPrecision',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '排序权重',
|
||||
key: 'sortOrder',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
key: 'isActive',
|
||||
width: 140,
|
||||
align: 'center',
|
||||
render: row => {
|
||||
return row.isActive ? '是' : '否';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
key: 'operation',
|
||||
width: 200,
|
||||
operations: (row: any) => [
|
||||
{
|
||||
contentText: '编辑',
|
||||
ghost: true,
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
handleEdit(row);
|
||||
}
|
||||
},
|
||||
{
|
||||
contentText: '删除',
|
||||
type: 'error',
|
||||
ghost: true,
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
dialog.create({
|
||||
title: '删除确认',
|
||||
content: '确认删除该交易对吗，删除后不可恢复。',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await safeClient(() =>
|
||||
client.api.admin.trading_pairs.delete(undefined, { query: { symbol: row.symbol } })
|
||||
);
|
||||
tableInst.value?.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const filterColumns: TableFilterColumns = [
|
||||
{
|
||||
title: '关键词',
|
||||
key: 'keyword',
|
||||
component: NInput,
|
||||
componentProps: {
|
||||
placeholder: '请输入交易对名称或标识',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '基础资产',
|
||||
key: 'baseAsset',
|
||||
component: NInput,
|
||||
componentProps: {
|
||||
placeholder: '请输入基础资产代码',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '计价资产',
|
||||
key: 'quoteAsset',
|
||||
component: NInput,
|
||||
componentProps: {
|
||||
placeholder: '请输入计价资产代码',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
key: 'isActive',
|
||||
component: NSelect,
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false }
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function handleAdd() {
|
||||
const dialogInstance = dialog.create({
|
||||
title: '添加交易对',
|
||||
showIcon: false,
|
||||
content: () =>
|
||||
h(Add, {
|
||||
onClose: () => {
|
||||
dialogInstance?.destroy();
|
||||
tableInst.value?.reload();
|
||||
}
|
||||
}),
|
||||
style: { width: '800px' },
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
function handleEdit(row: any) {
|
||||
const dialogInstance = dialog.create({
|
||||
title: '编辑交易对',
|
||||
showIcon: false,
|
||||
content: () =>
|
||||
h(Edit, {
|
||||
data: row,
|
||||
onClose: () => {
|
||||
dialogInstance?.destroy();
|
||||
tableInst.value?.reload();
|
||||
}
|
||||
}),
|
||||
style: { width: '800px' },
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableBase
|
||||
ref="tableInst"
|
||||
:columns="columns"
|
||||
:filter-columns="filterColumns"
|
||||
:fetch-data="fetchData"
|
||||
:scroll-x="3000"
|
||||
@add="handleAdd"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped></style>
|
||||
Reference in New Issue
Block a user