rwa-admin/src/views/tokenization/trading-pairs/index.vue

<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>