useOrderFields.ts 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { computed, } from 'vue'
  2. import { useI18n } from 'vue-i18n'
  3. import useCardStore from '@/stores/use-card-store';
  4. /**
  5. * 订单字段处理 Composable
  6. * 将 detailData 中的字段数据转换为分组列表,支持缓存数据立即渲染
  7. */
  8. export function useOrderFields(detailData: any) {
  9. const { t } = useI18n()
  10. const cardStore = useCardStore()
  11. /** 1️⃣ 字段解析(一维数组) */
  12. const fieldList = computed(() => {
  13. const dt = detailData.value
  14. if (!dt) {
  15. return []
  16. }
  17. // 检查 dt 是否已经加载了数据(通过检查是否有属性)
  18. const hasData = Object.keys(dt).length > 0
  19. if (!hasData) {
  20. console.log('数据尚未加载,返回空数组');
  21. return []
  22. }
  23. // fieldDtos 存在且不为空数组时使用 fieldDtos
  24. if (dt.fieldDtos && Array.isArray(dt.fieldDtos) && dt.fieldDtos.length > 0) {
  25. console.log('使用 fieldDtos 分支,数量:', dt.fieldDtos.length);
  26. return [...dt.fieldDtos]
  27. .sort((a, b) => (a.sorting || 0) - (b.sorting || 0))
  28. .map(item => {
  29. const key = Object.keys(dt).find(
  30. k => k.toLowerCase() === item.fieldName.toLowerCase()
  31. )
  32. const i18nKey = `global.fieldName.${item.fieldName}.fieldTitle`
  33. let name = t(i18nKey)
  34. if (name === i18nKey) {
  35. name = item.fieldName
  36. }
  37. let value = key ? dt[key] : item.fixedValue
  38. if (
  39. item.fieldType === 'select' &&
  40. key &&
  41. !['transferType', 'payoutMethod'].includes(key)
  42. ) {
  43. value = dt[key + 'Value'] || value
  44. }
  45. if (item.fieldName === 'transferAmount' && dt.payoutCurrency) {
  46. value = `${value} ${dt.payoutCurrency}`
  47. }
  48. return {
  49. name,
  50. value: value ?? '',
  51. type: item.fieldUserType || 'other',
  52. fieldName: item.fieldName,
  53. fieldType: item.fieldType,
  54. options: item.options || null
  55. }
  56. })
  57. }
  58. // 使用 globalFieldParams
  59. console.log('使用 globalFieldParams 分支');
  60. console.log('globalFieldParams:', cardStore.globalFieldParams);
  61. return cardStore.globalFieldParams
  62. .map((item: any) => {
  63. const key = Object.keys(dt).find(
  64. k => k === item.fieldName
  65. )
  66. const i18nKey = `global.fieldName.${item.fieldName}.fieldTitle`
  67. let name = t(i18nKey)
  68. if (name === i18nKey) {
  69. name = item.fieldName
  70. }
  71. let value = key ? dt[key] : ''
  72. if (
  73. item.fieldType === 'select' &&
  74. key &&
  75. !['transferType', 'payoutMethod'].includes(key)
  76. ) {
  77. value = dt[key + 'Value'] || value
  78. }
  79. if (item.fieldName === 'transferAmount' && dt.payoutCurrency) {
  80. value = `${value} ${dt.payoutCurrency}`
  81. }
  82. return {
  83. name,
  84. value: value ?? '',
  85. type: item.fieldUserType || 'other',
  86. fieldName: item.fieldName,
  87. fieldType: item.fieldType,
  88. options: item.options || null
  89. }
  90. })
  91. .filter(field => {
  92. // 过滤掉 value 为空的字段
  93. const val = field.value
  94. return val !== '' && val !== null && val !== undefined
  95. })
  96. })
  97. /** 2️⃣ 分组字段(按类型分组) */
  98. const fieldGroups = computed(() => {
  99. const groups: Record<string, any[]> = {}
  100. fieldList.value.forEach(field => {
  101. const type = field.type || 'other'
  102. if (!groups[type]) {
  103. groups[type] = []
  104. }
  105. groups[type].push(field)
  106. })
  107. return groups
  108. })
  109. return {
  110. fieldList,
  111. fieldGroups
  112. }
  113. }