The business requirements

Total budget presentation needs

Total budget requirement point analysis

  • The first consideration of the technical selection is table rendering, there are native table, and the table component of the common UI components within the company. Considering that the use of native table will lead to high code complexity of business, which will be difficult to maintain later, and the sliding fixed right side will require additional development costs. Finally, I chose the table component in the company for development, which was more consistent with the design and reduced some changes in UI color margins, improving the development efficiency.
  • Then it analyzes the rendering rules from the data structure, which is divided into three layers, the outermost layer is the category, the second layer is the product category, and the third layer is the specific product. At first, we considered whether tree structure could be used for rendering, but the analysis data structure was not, because the outermost category was not consistent with the data structure of the second and third layers. A category could be directly traversed by the for loop, and the second and third layers could be directly expanded by the row provided by MTD-table, thus meeting the functional requirements of expansion.
  • Later analysis found that each column needs to be divided into three rows. Here, I used three divs to divide each column into three rows, cancelled the padding of the table, and added the border to achieve the purpose, which was mainly controlled by CSS.
  • The next point is to fix the right side. This can be done by using the API provided by the component.

Sub-budget editor submits requirements

Sub-budget requirements analysis

  • The rendering of the table here can refer to the rendering logic and methods of the total budget
  • There is also the logic to support the editing of the table, which needs to determine whether it is editable through the interface, and then verify whether the entry entered by the user conforms to it. If not, undo operation is performed.
  • Below is the user needs in real time after each input box complete submission to the database, so can avoid basic people edit the same form to cover each other’s questions, in addition it is important to note don’t submit input one number at a time, but with the lazy update mechanism, when a user loses focus, change the value of time again to submit, This can greatly reduce the load on the server.
  • Another requirement that needs to be noted is also based on the amount and amount of automatic calculation, but also automatically calculate the total amount, total amount and proportion. Each input box needs v-model data rendering items, so the processing of data structure also needs to be paid attention to, and a wave of Reduce is used.

conclusion

  • Recorded the business development of some requirements analysis and solutions, there are better implementation methods, welcome to give advice.