[Feature-3682][ui]Add form-create plug-in and alarm group management add sample demo (#3683)

* Add form-create plug-in and alarm group management add sample demo

* Modify node version

* fix

* fix

dolphinscheduler-dist/release-docs/LICENSE

@@ -484,6 +484,7 @@ The text of each license is also included at licenses/ui-licenses/LICENSE-[proje
 ========================================
 MIT licenses
 ========================================
+    @form-create/element-ui 1.0.18: https://github.com/xaboy/form-create MIT
     ans-UI 1.1.7: https://github.com/analysys/ans-ui MIT
     axios 0.16.2: https://github.com/axios/axios MIT
     bootstrap 3.3.7: https://github.com/twbs/bootstrap MIT

dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-@form-create-element-ui

+MIT License
+
+Copyright (c) 2018 xaboy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

dolphinscheduler-ui/package.json

@@ -12,6 +12,7 @@
     "build:release": "npm run clean && cross-env NODE_ENV=production PUBLIC_PATH=/dolphinscheduler/ui webpack --config ./build/webpack.config.release.js"
   },
   "dependencies": {
+    "@form-create/element-ui": "^1.0.18",
     "@riophae/vue-treeselect": "^0.4.0",
     "ans-ui": "1.1.9",
     "axios": "^0.16.2",
@@ -21,8 +22,8 @@
     "codemirror": "^5.43.0",
     "d3": "^3.5.17",
     "dayjs": "^1.7.8",
-    "element-ui": "2.13.2",
     "echarts": "4.1.0",
+    "element-ui": "2.13.2",
     "html2canvas": "^0.5.0-beta4",
     "jquery": "3.3.1",
     "jquery-ui": "^1.12.1",
@@ -31,7 +32,7 @@
     "lodash": "^4.17.11",
     "normalize.css": "^8.0.1",
     "vue": "^2.5.17",
-    "vue-router": "2.7.0",
+    "vue-router": "^2.7.0",
     "vuex": "^3.0.0",
     "vuex-router-sync": "^5.0.0"
   },

dolphinscheduler-ui/src/js/conf/home/index.js

@@ -38,6 +38,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.min.js'
 import 'canvg/dist/browser/canvg.min.js'
 
+import formCreate, {maker} from '@form-create/element-ui'
+
 // Component internationalization
 const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {}
 
@@ -46,6 +48,8 @@ Vue.use(ElementUI)
 // Vue.use(ans)
 Vue.use(ans, useOpt)
 
+Vue.use(formCreate, {maker})
+
 sync(store, router)
 
 Vue.config.devtools = true

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue

@@ -16,6 +16,9 @@
  */
 <template>
   <div class="list-model">
+    <div>
+      <form-create v-model="fApi" :rule="rule" :option="option"></form-create>
+    </div>
     <div class="table-box">
       <table>
         <tr>
@@ -97,7 +100,53 @@
     name: 'user-list',
     data () {
       return {
-        list: []
+        list: [],
+        fApi: {},
+        rule: [
+          {
+            type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
+            field: "userName", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
+            className: "user-name-dom", // 设置组件的class属性
+            title: "用户名称：", // 组件的名称, 选填
+            value: "", // 表单组件的字段值(就是表单的value值),自定义组件可以不用设置
+            props: {
+              placeholder: "请输入用户名称！",
+              disabled: false,
+              readonly: false,
+              clearable: true // 是否显示清空按钮
+            },
+            validate: [
+              {
+                trigger: "blur",
+                required: true,
+                message: "用户名称不能为空！"
+              }
+            ],
+            col: {
+              md: { span: 12 }
+            }
+          }
+        ],
+        option: {
+          // 显示重置表单按扭
+          resetBtn: true,
+  
+          // 表单提交按扭事件
+          onSubmit: formData => {
+            alert(JSON.stringify(formData));
+  
+            console.log("获取表单中的数据：", formData);
+  
+            //按钮进入提交状态
+            //   this.fApi.btn.loading();
+  
+            //重置按钮禁用
+            //   this.fApi.resetBtn.disabled();
+  
+            //按钮进入可点击状态
+            //   this.fApi.btn.finish();
+          }
+        }
       }
     },
     props: {

dolphinscheduler-ui/src/js/conf/login/index.js

@@ -29,10 +29,14 @@ import ans from 'ans-ui/lib/ans-ui.min'
 import 'sass/conf/login/index.scss'
 import 'bootstrap/dist/js/bootstrap.min.js'
 
+import formCreate, {maker} from '@form-create/element-ui'
+
 Vue.use(ElementUI)
 
 Vue.use(ans)
 
+Vue.use(formCreate, {maker})
+
 Vue.config.devtools = true
 Vue.config.productionTip = true
 Vue.config.silent = true