remoteComponentsList.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. // 得到用户自定义的远程组件列表
  2. import { dataConfig, settingConfig } from './settingConfig'
  3. // import _ from 'lodash'
  4. import cloneDeep from 'lodash/cloneDeep'
  5. const files = require.context('./innerComponents/', true, /index.vue$/)
  6. const innerRemoteComponents = []
  7. files.keys().forEach(key => {
  8. const title = key.split('/')[1].replace('.vue', '')
  9. const img = require(`./innerComponents/${title}/component.png`)
  10. const config = require(`./innerComponents/${title}/config.js`).default
  11. innerRemoteComponents.push({
  12. title: config.title || title,
  13. vueSysComponentDirName: 'inner_' + title,
  14. vueFile: files(key).default,
  15. ...config,
  16. img
  17. })
  18. })
  19. // 抛出内置系统组件
  20. export default getRemoteComponents(innerRemoteComponents)
  21. // 抛出外部的用户系统组件
  22. export function getRemoteComponents (comList) {
  23. const customList = (comList || window.BS_CONFIG?.remoteComponents) || []
  24. const list = []
  25. customList.forEach((config) => {
  26. list.push({
  27. name: config.name,
  28. title: config.title,
  29. icon: null,
  30. img: config.img,
  31. border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [16, 16, 16, 16] },
  32. className:
  33. 'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
  34. w: 450,
  35. h: 320,
  36. x: 0,
  37. y: 0,
  38. rotateX: config.rotateX || 0,
  39. rotateY: config.rotateY || 0,
  40. rotateZ: config.rotateZ || 0,
  41. perspective: config.perspective || 500,
  42. type: 'remoteComponent',
  43. option: {
  44. ...cloneDeep(settingConfig),
  45. ...config.option
  46. },
  47. // 右侧面板自定义配置
  48. setting: config.setting,
  49. ...cloneDeep(dataConfig),
  50. // 自定义配置
  51. customize: {
  52. ...config.customize,
  53. vueSysComponentDirName: config.vueSysComponentDirName,
  54. vueFile: config.vueFile
  55. }
  56. })
  57. })
  58. return list
  59. }
  60. export function getRemoteComponentConfig (code, name) {
  61. const config = {
  62. name,
  63. title: name,
  64. icon: null,
  65. img: null,
  66. border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [16, 16, 16, 16] },
  67. className:
  68. 'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
  69. w: 450,
  70. h: 320,
  71. x: 0,
  72. y: 0,
  73. rotateX: 0,
  74. rotateY: 0,
  75. rotateZ: 0,
  76. perspective: 0,
  77. type: 'remoteComponent',
  78. option: {
  79. ...cloneDeep(settingConfig)
  80. },
  81. // 右侧面板自定义配置
  82. setting: [],
  83. ...cloneDeep(dataConfig),
  84. // 自定义配置
  85. customize: {
  86. // 文件路径
  87. vueSysComponentDirName: null,
  88. // 用户上传的vue文件编码,根据此编码获取文件内容
  89. vueBizComponentCode: code,
  90. // vue文本内容
  91. vueFileContent: null
  92. }
  93. }
  94. return config
  95. }