dict.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { post } from './request.js'
  2. import { storage } from './storage.js'
  3. const DICT_KEY = 'dicts'
  4. /**
  5. * 字典工具模块 — 对标 PC 端 admin-web-new/src/utils/dict.ts
  6. */
  7. const COLOR_PALETTE = [
  8. '#1890FF', '#52C41A', '#FAAD14', '#F5222D', '#722ED1',
  9. '#13C2C2', '#EB2F96', '#FA8C16', '#2F54EB', '#009688',
  10. ]
  11. const BUILTIN_COLORS = {
  12. 'Order.status': {
  13. 0: '#1890FF', // 开机 — 蓝色
  14. 1: '#52C41A', // 成功 — 绿色
  15. 2: '#F5222D', // 失败 — 红色
  16. 3: '#999999', // 取消 — 灰色
  17. },
  18. 'Order.pay': {
  19. 0: '#FAAD14', // 未支付 — 橙色
  20. 1: '#52C41A', // 已支付 — 绿色
  21. },
  22. }
  23. const dictUtil = {
  24. /**
  25. * 加载全部字典数据,按 code 分组后存入 storage
  26. * @returns {Promise<Object>} 分组后的字典数据
  27. */
  28. loadDicts: async () => {
  29. try {
  30. const res = await post('/dataDict/list', { pageSize: 1024 })
  31. if (res && res.code === 200) {
  32. const list = res.data
  33. const dictGroup = dictUtil.groupByKey(list, 'code')
  34. storage.set(DICT_KEY, dictGroup)
  35. return dictGroup
  36. }
  37. return {}
  38. } catch (e) {
  39. console.error('加载字典数据失败:', e)
  40. return {}
  41. }
  42. },
  43. /**
  44. * 获取缓存的全部字典数据
  45. * @returns {Object} { code: [items] }
  46. */
  47. getDicts: () => {
  48. return storage.get(DICT_KEY) || {}
  49. },
  50. /**
  51. * 获取指定编码的字典项列表
  52. * @param {string} code - 字典编码
  53. * @returns {Array} 字典项数组
  54. */
  55. getDictList: (code) => {
  56. const dicts = dictUtil.getDicts()
  57. return dicts[code] || []
  58. },
  59. /**
  60. * 根据字典编码和值获取显示名称
  61. * @param {string} code - 字典编码
  62. * @param {*} value - 字典值
  63. * @returns {string} 显示名称
  64. */
  65. getDictLabel: (code, value) => {
  66. if (value === null || value === undefined || value === '') {
  67. return value
  68. }
  69. const dicts = dictUtil.getDicts()
  70. const list = dicts[code]
  71. if (!list || list.length === 0) {
  72. return String(value)
  73. }
  74. const item = list.find(k => k.value == value)
  75. return item ? item.name : String(value)
  76. },
  77. /**
  78. * 根据字典编码和名称反查值
  79. * @param {string} code - 字典编码
  80. * @param {string} name - 显示名称
  81. * @returns {*} 字典值
  82. */
  83. getDictValue: (code, name) => {
  84. const dicts = dictUtil.getDicts()
  85. const list = dicts[code]
  86. if (!list || list.length === 0) {
  87. return null
  88. }
  89. const item = list.find(k => k.name === name)
  90. return item ? item.value : null
  91. },
  92. /**
  93. * 根据字典编码和值获取颜色
  94. * 优先级:字典配置 → 内置语义色板 → 通用色板取模
  95. * @param {string} code - 字典编码
  96. * @param {*} value - 字典值
  97. * @returns {string} 颜色值
  98. */
  99. getDictColor: (code, value) => {
  100. if (value === null || value === undefined) {
  101. return ''
  102. }
  103. const list = dictUtil.getDictList(code)
  104. const item = list.find(k => k.value == value)
  105. if (item?.color) {
  106. return item.color
  107. }
  108. // 兜底:内置语义色板
  109. if (BUILTIN_COLORS[code] && BUILTIN_COLORS[code][value]) {
  110. return BUILTIN_COLORS[code][value]
  111. }
  112. // 兜底:通用色板取模
  113. const v = Number(value)
  114. if (!isNaN(v)) {
  115. return COLOR_PALETTE[Math.abs(v) % COLOR_PALETTE.length]
  116. }
  117. return ''
  118. },
  119. /**
  120. * 获取选项列表(用于下拉框等)
  121. * @param {string} code - 字典编码
  122. * @returns {Array<{label: string, value: any}>}
  123. */
  124. getDictOptions: (code) => {
  125. const list = dictUtil.getDictList(code)
  126. return list.map(item => ({
  127. label: item.name,
  128. value: item.value
  129. }))
  130. },
  131. /**
  132. * 获取带"全部"选项的筛选器选项列表
  133. * @param {string} code - 字典编码
  134. * @returns {Array<{label: string, value: any}>}
  135. */
  136. getDictFilterOptions: (code) => {
  137. const opts = dictUtil.getDictOptions(code)
  138. return [{ label: '全部', value: '' }, ...opts]
  139. },
  140. /**
  141. * 格式化字典值(返回显示名称)
  142. */
  143. formatDict: (code, value) => {
  144. return dictUtil.getDictLabel(code, value)
  145. },
  146. /**
  147. * 清除缓存的字典数据
  148. */
  149. clearDicts: () => {
  150. storage.remove(DICT_KEY)
  151. },
  152. /**
  153. * 按 key 分组
  154. * @param {Array} elements - 原始数组
  155. * @param {string} key - 分组字段
  156. * @returns {Object} 分组后的对象
  157. */
  158. groupByKey: (elements, key) => {
  159. const map = {}
  160. if (!elements || elements.length === 0) {
  161. return map
  162. }
  163. for (let i = 0; i < elements.length; i++) {
  164. if (!elements[i][key] && elements[i][key] !== 0) {
  165. continue
  166. }
  167. const k = String(elements[i][key])
  168. const tmp = map[k] || []
  169. tmp.push(elements[i])
  170. map[k] = tmp
  171. }
  172. return map
  173. }
  174. }
  175. export default dictUtil
  176. // 便捷导出(兼容旧的调用方式)
  177. export const fmtDictName = (code, value) => dictUtil.getDictLabel(code, value)
  178. export const getDictColor = (code, value) => dictUtil.getDictColor(code, value)
  179. export const loadDicts = dictUtil.loadDicts