selectBox.plantuml 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. @startuml
  2. title selectBoxCom
  3. 'skinparam packageStyle rect/' 加入这行代码,样式纯矩形'/
  4. skinparam backgroundColor #EEEBDC
  5. skinparam roundcorner 20
  6. skinparam sequenceArrowThickness 2
  7. 'skinparam handwritten true
  8. namespace selectBox #purple{
  9. ' 这里是公共类
  10. class TreeNode <<节点属性>>{
  11. +public id
  12. +public pid
  13. +public ...defaultProps
  14. }
  15. TreeNode --> DefaultProps
  16. interface DefaultProps <<树组件属性配置>>{
  17. +public label <指定节点标签为节点对象的某个属性值>
  18. +public children <指定子树为节点对象的某个属性值>
  19. +public disabled <指定节点选择框是否禁用为节点对象的某个属性值>
  20. +public isLeaf <指定节点是否为叶子节点,仅在指定了 lazy 属性的情况下生效>
  21. }
  22. class ListConfig <<左侧数据配置>>{
  23. + public items
  24. + public default
  25. }
  26. ListConfig --|> Items
  27. ListConfig --|> Default
  28. class Items <<左侧多选所有数据>>{
  29. +Object[] TreeNode
  30. }
  31. Items "1" -- "n..*" TreeNode
  32. class Default <<左侧多选默认选中数据>>{
  33. +Object[] TreeNode
  34. }
  35. Default "1" -- "n..*" TreeNode
  36. class AllNode <<所有节点>>{
  37. +Object[] TreeNode
  38. }
  39. AllNode "1" -- "n..*" TreeNode
  40. class CheckedNode <<被选中节点>>{
  41. + Object[] TreeNode
  42. }
  43. CheckedNode "1" -- "n..*" TreeNode
  44. ' 整个组件暴露的方fa
  45. class SelectBox <<entry,export>>{
  46. +public export
  47. -private leftSelect
  48. +public rightSelect
  49. -private init(entry)
  50. + public Export:save()
  51. }
  52. SelectBox o-- Export
  53. SelectBox o-- leftSelect
  54. SelectBox --|> SelectBoxInsideFn.Init
  55. SelectBox o-- rightSelect
  56. SelectBox o-- Entry
  57. class leftSelect <<选人组件左侧选人控件>>{
  58. + Object leftList
  59. }
  60. leftSelect --|> ListConfig
  61. class rightSelect <<选人组件右侧选人控件>>{
  62. + Object rightList
  63. }
  64. rightSelect --|> ListConfig
  65. class Style <<选人组件自定义样式>>{
  66. + public listStyle String:'tree|list'
  67. + public inDep Boolean
  68. }
  69. ' 入参
  70. class Entry <<组件入参>>{
  71. ' 所有节点(一维数组)
  72. +public allNode Array<TreeNode>
  73. ' 被选中的节点
  74. +public checkedNode Array<TreeNode>
  75. ' 默认节点配置
  76. +public defaultProps
  77. ' 样式配置
  78. +public style
  79. }
  80. note left of Entry : 这是一个入参
  81. Entry o-- DefaultProps
  82. Entry o-- AllNode
  83. Entry o-- CheckedNode
  84. Entry o-- Style
  85. ' 出参
  86. interface Export <<组件出参>>{
  87. {abstract} addList&deleteList methods()
  88. {static} rightList callback()
  89. }
  90. note top of Export: 这是一个组件出参
  91. }
  92. namespace SelectBoxInsideFn #yellow {
  93. ' 右侧组件init方法
  94. interface Init extends InitData,InitleftData,InitrightData,disable {
  95. - private InitData()
  96. - void disable()
  97. - void initLeftData()
  98. - void InitrightData()
  99. }
  100. note top of InitData : 初始化数据
  101. Init ...> selectBox.Entry
  102. interface InitData{
  103. - void initData()
  104. }
  105. interface InitleftData extends InitTree,initList {
  106. - void JudgeStyle()
  107. - void InitTree()
  108. - void initList()
  109. }
  110. interface InitrightData {
  111. - void JudgeStyle()
  112. }
  113. interface disable {
  114. + void disable()
  115. }
  116. InitleftData --|> JudgeStyle
  117. interface JudgeStyle {
  118. - String<'tree'|'list'> judgeStyle
  119. }
  120. note left of JudgeStyle: 判断左侧选择框样式
  121. interface InitTree{
  122. - InitTree()
  123. }
  124. note right : 如果是树运行initTree
  125. interface initList{
  126. - initList()
  127. }
  128. note left : 如果是列运行initList
  129. }
  130. @enduml