foreign-admin-ui/src/views/capital/currency/index.vue

<template>
  <div class="table_form-container">
    <!-- 搜索 -->
    <FundDetailHeader title="入金货币" :buttons="buttonsOptions" @button-click="handleButtonClick">
    </FundDetailHeader>
    <!-- 表格 -->
    <FundDetailTable :table-data="tableData" :columns="tableColumnsOptions" @row-click="handleRowClick" row-key="id"
      :loading="loading" />
    <FundDetailDialog :visible="visible" :title="dialogTitle" :button-loading="buttonLoading" @close="visible = false"
      @cancel="visible = false" @confirm="handleConfirm">
      <FundDetailForm :formData="formData" ref="commissionRatioFormRef" :formItems="formItems" :formRules="formRules"
        :optionsMap="optionsMap">
      </FundDetailForm>
    </FundDetailDialog>
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'Currency'
})
import FundDetailHeader from '@/components/common/header.vue'
import FundDetailTable from '@/components/common/Table.vue'
import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
import FundDetailDialog from '@/components/common/Dialog.vue'
import FundDetailForm from '@/components/common/Form.vue'
import type { ButtonProps } from 'element-plus'
import type { Component } from 'vue'
import { buttons, tableColumns, form, rules } from './options'
import {
  getCurrencyList,
  createCurrency,
  delCurrency,
  editCurrency,
} from '@/api/modules/capital/currency.ts'

// 定义按钮接口
interface HeaderButton {
  label: string
  type?: ButtonProps['type']
  icon?: Component
  disabled?: boolean
  key?: string | number // 可选的唯一标识
}

const { loading, startLoading, stopLoading } = usePageLoading()
const { buttonLoading, startButtonLoading, stopButtonLoading } = useButtonLoading()
const buttonsOptions = ref(buttons)
const formItems = ref(form)
const tableData = ref([])
const tableColumnsOptions = ref(tableColumns)
const dialogTitle = ref('')
const commissionRatioFormRef = ref()
const formRules = ref(rules)
const formData = ref({
  name: '',
  symbol: '',
  rate: null,
  type: 1,
  status: 1,
})
const optionsMap = {
  type: [
    { label: '法币', value: 1 },
    { label: '数字货币', value: 2 },
  ],
  status: [
    { label: '正常', value: 1 },
    { label: '禁用', value: 2 },
  ],
}

let rowData: any = {}

const visible = ref<boolean>(false)

const getTableList = async () => {
  try {

    startLoading()
    const data = await getCurrencyList()

    tableData.value = (data || []).map((item: any) => {
      return {
        ...item,
        typeStr: ['', '法币', '数字货币'][item.type],
        statusStr: ['', '正常', '禁用'][item.status],
      }
    })
    console.log('tableData.value', tableData.value)
  } finally {
    stopLoading()
  }
}

const handleRowClick = (row: any) => {
  console.log(row)
  rowData = row
}

const resetForm = () => {
  formData.value = {
    name: '',
    symbol: '',
    rate: null,
    type: 1,
    status: 1,
  }
}

const handleButtonClick = (button: HeaderButton) => {
  console.log(button)
  switch (button.key) {
    case 'add':
      handleAdd()
      break

    case 'edit':
      if (!rowData.id) return ElMessage.warning('请选择数据')
      handleEdit()
      break

    case 'delete':
      ElMessageBox.confirm('你确定要删除此数据').then(async () => {
        await delCurrency({ id: rowData.id })
        ElMessage.success('删除成功')
        await getTableList()
      })
      break
  }
}

const handleAdd = () => {
  dialogTitle.value = '添加'
  visible.value = true
}

const handleEdit = () => {
  dialogTitle.value = '编辑'
  visible.value = true
  formData.value = {
    name: rowData.name,
    symbol: rowData.symbol,
    rate: rowData.rate,
    type: rowData.type,
    status: rowData.status,
  }
}

const handleConfirm = async () => {
  await commissionRatioFormRef.value.validate()
  startButtonLoading()
  try {
    if (dialogTitle.value === '添加') {
      await createCurrency(formData.value)
    } else {
      await editCurrency({ ...formData.value, id: rowData.id })
    }
    visible.value = false
    resetForm()
    await getTableList()
  } finally {
    stopButtonLoading()
  }
}

onMounted(() => {
  getTableList()
})
</script>

<style scoped lang="scss"></style>