[Feature][Workflow Configuration Page] Dynamic rendering of the related functions of the workflow configuration page.

[songjianet]

Search before asking

• I had searched in the issues and found no similar feature requirement.

Description

The configuration of the current workflow is not divided into different components according to different tools, which is not convenient for subsequent maintenance and update of function points. Therefore, it is planned to split different tools into different components by refactoring the workflow configuration. At the same time, part of the access points of upper-level components, data access methods, and method invocation methods will be part of the reconstruction process. optimization.

The refactored workflow configuration is a way to drive view rendering with data components. The tool configuration of the left toolbar remains unchanged, and the form configuration of different tools is completely written in accordance with the standard in form-create + element-ui. In addition, there must be complete Chinese and English support for the refactored components, so in the subsequent functional changes and expansion, the Chinese and English need to be improved or modified. Under normal circumstances, most of the subsequent custom development and expansion scenarios will be supported in this refactoring, and the code changes and labor costs involved in the subsequent changes are not very large.

Use case

• Keep the tasksType constant in config.js, and use this constant to render the tools in the toolbar
• The forms of all tools are rendered in the existing formModel.vue, so all form-related code in this file is discarded, including the structure and validation of the form
• Manage the form configuration of different tool components through form-create to facilitate subsequent expansion, such as increasing the management function of tool components or changing low-code configurations, etc.
• Create a new module folder under the formModel folder to create a new base.js and the js file of the corresponding tool. The base.js file stores the common configuration in the tool form, and the rest js stores the configuration of the corresponding tool. Conditional rendering is performed in the formModel.vue according to the tasksType in the config.js
• The formModel.vue file does not use the Message component to prompt for form verification errors, and uniformly uses the form of form verification
• The formModel.vue file no longer uses the position layout method after refactoring
• Optimize how the parent component calls form-create
• Deal with the problem of data confusion as much as possible. In this part of the function, the existing implementation uses a variety of data transfer and method invocation methods, such as mixins, provide, inject, props, localStorage, vuex, emit and directly calling child component methods through ref in the parent component are not conducive to subsequent maintenance
• Change the irregular naming, such as the method addTaskInfo that is exposed to the parent in formModel.vue is replaced with confirm, etc.

Related issues

No response

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hi:

• Thank you for your feedback, we have received your issue, Please wait patiently for a reply.
• In order for us to understand your request as soon as possible, please provide detailed information、version or pictures.
• If you haven't received a reply for a long time, you can subscribe to the developer's email，Mail subscription steps reference https://dolphinscheduler.apache.org/en-us/community/development/subscribe.html ,Then write the issue URL in the email content and send question to dev@dolphinscheduler.apache.org.

[zhongjiajie]

Looking forward!

[wangyizhi1]

Note that the formModel is not just called in the DAG page

[songjianet]

Note that the formModel is not just called in the DAG page

Thanks for reminding