useOrderFields.ts 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { computed, } from 'vue'
  2. import { useI18n } from 'vue-i18n'
  3. /**
  4. * 订单字段处理 Composable
  5. * 将 detailData 中的字段数据转换为分组列表,支持缓存数据立即渲染
  6. */
  7. export function useOrderFields(detailData: any) {
  8. const { t } = useI18n()
  9. /** 1️⃣ 字段解析(一维数组) */
  10. const fieldList = computed(() => {
  11. const dt = detailData.value
  12. if (!dt || !dt.fieldDtos || !Array.isArray(dt.fieldDtos)) {
  13. return []
  14. }
  15. return [...dt.fieldDtos]
  16. .sort((a, b) => (a.sorting || 0) - (b.sorting || 0))
  17. .map(item => {
  18. const key = Object.keys(dt).find(
  19. k => k.toLowerCase() === item.fieldName.toLowerCase()
  20. )
  21. const i18nKey = `global.fieldName.${item.fieldName}.fieldTitle`
  22. let name = t(i18nKey)
  23. if (name === i18nKey) {
  24. name = item.fieldName
  25. }
  26. let value = key ? dt[key] : item.fixedValue
  27. if (
  28. item.fieldType === 'select' &&
  29. key &&
  30. !['transferType', 'payoutMethod'].includes(key)
  31. ) {
  32. value = dt[key + 'Value'] || value
  33. }
  34. if (item.fieldName === 'transferAmount' && dt.payoutCurrency) {
  35. value = `${value} ${dt.payoutCurrency}`
  36. }
  37. return {
  38. name,
  39. value: value ?? '',
  40. type: item.fieldUserType || 'other',
  41. fieldName: item.fieldName,
  42. fieldType: item.fieldType,
  43. options: item.options || null
  44. }
  45. })
  46. })
  47. /** 2️⃣ 分组字段(按类型分组) */
  48. const fieldGroups = computed(() => {
  49. const groups: Record<string, any[]> = {}
  50. fieldList.value.forEach(field => {
  51. const type = field.type || 'other'
  52. if (!groups[type]) {
  53. groups[type] = []
  54. }
  55. groups[type].push(field)
  56. })
  57. return groups
  58. })
  59. return {
  60. fieldList,
  61. fieldGroups
  62. }
  63. }