step-item.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { wxComponent, SuperComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './step-item-props';
  10. const { prefix } = config;
  11. let StepItem = class StepItem extends SuperComponent {
  12. constructor() {
  13. super(...arguments);
  14. this.options = {
  15. multipleSlots: true,
  16. };
  17. this.relations = {
  18. './steps': {
  19. type: 'ancestor',
  20. },
  21. };
  22. this.externalClasses = [
  23. `${prefix}-class`,
  24. `${prefix}-class-inner`,
  25. `${prefix}-class-content`,
  26. `${prefix}-class-title`,
  27. `${prefix}-class-description`,
  28. `${prefix}-class-extra`,
  29. `${prefix}-class-sub`,
  30. `${prefix}-class-sub-dot`,
  31. `${prefix}-class-sub-content`,
  32. ];
  33. this.properties = props;
  34. this.data = {
  35. classPrefix: `${prefix}-steps-item`,
  36. prefix,
  37. rootClassName: '',
  38. parent: null,
  39. index: 0,
  40. isDot: false,
  41. curStatus: '',
  42. curSubStepItems: [],
  43. curSubStepItemsStatus: [],
  44. layout: 'vertical',
  45. type: 'default',
  46. isLastChild: false,
  47. isLarge: false,
  48. readonly: false,
  49. computedIcon: '',
  50. };
  51. this.observers = {
  52. icon(val) {
  53. this.setData({
  54. computedIcon: val,
  55. });
  56. },
  57. };
  58. this.lifetimes = {
  59. ready() {
  60. const [parent] = this.getRelationNodes('./steps') || [];
  61. if (parent) {
  62. this.setData({
  63. parent,
  64. });
  65. }
  66. },
  67. };
  68. this.methods = {
  69. updateStatus(current, currentStatus, index, theme, layout, steps, readonly) {
  70. const _current = String(current);
  71. const connectLine = '-';
  72. const judgeObjAttr = (data, attr) => {
  73. return Array.isArray(data[attr]) && data[attr].length;
  74. };
  75. const getStepLevel = (s) => {
  76. const reg = new RegExp(`(.*)${connectLine}{1}.*`);
  77. return s.replace(reg, '$1');
  78. };
  79. const isSameLevelStep = (stepsTag, current) => {
  80. return stepsTag.length < current.length && getStepLevel(stepsTag) === getStepLevel(current);
  81. };
  82. const stepFinalStatus = (item, itemTag, current, currentStatus) => {
  83. let tempStepStatus = '';
  84. if (item.status !== 'default' && item.status !== undefined) {
  85. tempStepStatus = item.status === '' ? 'default' : item.status;
  86. }
  87. else {
  88. tempStepStatus = 'default';
  89. if (itemTag < current) {
  90. tempStepStatus = 'finish';
  91. }
  92. else if (itemTag === current && item.status !== '') {
  93. tempStepStatus = currentStatus;
  94. }
  95. if (isSameLevelStep(itemTag, current)) {
  96. if (judgeObjAttr(item, 'subStepItems')) {
  97. const tempStepItemsStatus = item.subStepItems.map((subItem, subIndex) => {
  98. const subItemTag = `${itemTag}${connectLine}${subIndex}`;
  99. return stepFinalStatus(subItem, subItemTag, current, currentStatus);
  100. });
  101. if (tempStepItemsStatus[tempStepItemsStatus.length - 1] === 'finish') {
  102. tempStepStatus = 'finish';
  103. return tempStepStatus;
  104. }
  105. if (tempStepItemsStatus.includes('process') || tempStepItemsStatus.every((item) => item === 'default')) {
  106. tempStepStatus = 'process';
  107. }
  108. if (tempStepItemsStatus.includes('error')) {
  109. tempStepStatus = 'error';
  110. }
  111. }
  112. }
  113. }
  114. return tempStepStatus;
  115. };
  116. this.data.tempStatus = stepFinalStatus(this.data, String(index), _current, currentStatus);
  117. const tempStatusList = [];
  118. if (judgeObjAttr(this.data, 'subStepItems')) {
  119. this.data.subStepItems.forEach((subItem, subIndex) => {
  120. tempStatusList.push(stepFinalStatus(subItem, `${index}${connectLine}${subIndex}`, _current, currentStatus));
  121. });
  122. }
  123. const tempIcon = new Map([
  124. ['finish', 'check'],
  125. ['error', 'close'],
  126. ]);
  127. let iconStatus = '';
  128. if (readonly && tempIcon.has(this.data.tempStatus)) {
  129. iconStatus = tempIcon.get(this.data.tempStatus);
  130. }
  131. this.setData({
  132. curStatus: this.data.tempStatus,
  133. curSubStepItems: this.data.subStepItems || [],
  134. curSubStepItemsStatus: tempStatusList || [],
  135. computedIcon: this.data.icon || iconStatus,
  136. index,
  137. isDot: theme === 'dot' && layout === 'vertical',
  138. layout,
  139. theme,
  140. isLastChild: steps.length - 1 === index,
  141. });
  142. },
  143. click() {
  144. this.data.parent.handleClick(this.data.index);
  145. },
  146. };
  147. }
  148. };
  149. StepItem = __decorate([
  150. wxComponent()
  151. ], StepItem);
  152. export default StepItem;