ibizdev提交

app_Default/src/App.vue

@@ -17,6 +17,10 @@
               <a-icon type="upload" />
               <span>表单项动态逻辑示例</span>
             </a-menu-item>
+             <a-menu-item key="3">
+              <a-icon type="user" />
+              <span>DemoForm</span>
+            </a-menu-item>
           </a-menu>
         </a-layout-sider>
         <a-layout>
@@ -24,6 +28,7 @@
               <ExampleEditorType v-show="curSelected == '0'"/>
               <ExampleEditView v-show="curSelected == '1'"/>
               <ExampleDLFEditView v-show="curSelected == '2'"/>
+              <ExampleMain2EditView v-show="curSelected == '3'"/>
           </a-layout-content>
         </a-layout>
       </a-layout>
@@ -39,13 +44,15 @@ import AppService from "@service/AppService";
 import ExampleEditorType from '@pages/exapmple/example-editor-type/example-editor-type.vue';
 import ExampleEditView from '@pages/exapmple/example-edit-view/example-edit-view.vue';
 import ExampleDLFEditView from '@pages/exapmple/example-dlfedit-view/example-dlfedit-view.vue';
+import ExampleMain2EditView from '@pages/exapmple/example-main2-edit-view/example-main2-edit-view.vue';
 
 export default {
   name: "app",
   components: {
     ExampleEditorType,
     ExampleEditView,
-    ExampleDLFEditView
+    ExampleDLFEditView,
+    ExampleMain2EditView
   },
   data() {
     return {

app_Default/src/forms/example/main2/main2.vue

+<template>
+<div class="app-form">
+  <a-form class=""  style="">
+        <a-row>
+        <a-tabs  @change="formPageSelected">
+        </a-tabs>
+        </a-row>
+    </a-form>
+</div>
+</template>
+
+<script>
+import  { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel}  from "@models/index.js";
+import Schema from "async-validator";
+import ComUtil from '@utils/ComUtil';
+import AppService from "@service/AppService";
+export default {
+  
+  name: "Main2form",
+
+  props:{
+      formData:Object
+  },
+
+  watch: {
+    'formData': {
+      handler: 'onFormDataChanged',
+      immediate: true,
+      deep: true
+    }
+  },
+
+  data() {
+    return {
+
+      /**
+      * 当前语言
+      *
+      */
+      local:"",
+    
+      /**
+      * 激活分组
+      *
+      */
+      activeGroup:[],
+      
+      /**
+      * 激活分组
+      *
+      */
+      data:{
+        srfupdatedate: null,
+        srforikey: null,
+        srfkey: null,
+        srfmajortext: null,
+        srftempmode: null,
+        srfuf: null,
+        srfdeid: null,
+        srfsourcekey: null,
+        exampleid: null,
+      },
+
+      /**
+      * 表单模型
+      *
+      */
+      detailsModel:{
+        form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [] }),
+      },
+
+      /**
+      * 代码表模型
+      *
+      */      
+      codelistModel:{
+      },
+
+      /**
+      *   表单值规则
+      *
+      */
+      formRules:{
+        
+      },
+
+      /**
+      * 默认值规则
+      *
+      */
+      rules:{
+      }
+    };
+  },
+
+  created(){
+        this.initForm();
+        this.initlangu();
+  },
+
+  methods: {
+
+    /**
+     * 初始化表单
+     *
+     */
+    initForm(){
+        if(Object.keys(this.data).length >0){
+             Object.keys(this.data).forEach((item) =>{
+                     this.formItemChange(item,this.data[item],true);
+             })   
+        }
+    },
+
+    /**
+     * 初始化语言
+     * 
+     */
+    initlangu(){
+        if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
+                this.local ="zh_CN";
+        } else {
+                this.local ="en_GB";
+        }
+        AppService.getInstance().subject.subscribe(res => {
+            if (Object.is(res, "zh")) {
+                this.local ="zh_CN";
+            } else {
+                this.local ="en_GB";
+            }
+        });
+    },
+
+    /**
+     * 分页选中
+     *
+     */
+    formPageSelected(key){
+      console.log("表单选中了"+key);
+    },
+
+    /**
+     *  按钮点击事件
+     *
+     */
+    button_click($event,caption){
+      this.$message.success("点击了"+caption);
+    },
+
+    /**
+     * 表单项值变化
+     *
+     */
+    formItemChange(name,value,isFirst){
+      this.formLogic(name,value);
+      if(!isFirst){
+        this.validateItem(name, value);
+        this.$emit('formItemChange',{name:name,value:value});
+      }
+    },
+
+    /**
+     * 校验单个表单项
+     * @param item 
+     * @param value 
+     */
+    validateItem(item, value) {
+        // 做校验
+        // 1.获取数值和规则
+        const rule = this.rules[item];
+        // 2.创建校验规则
+        const schema = new Schema({ [item]: rule })
+        // 校验返回Promise
+        return schema.validate({ [item]: value },undefined,errors => {
+            if (errors) {
+                // 有错
+                this.detailsModel[item].setError(errors[0].message);
+            } else {
+                this.detailsModel[item].setError('');
+            }
+        })
+    },
+
+    /**
+     * 校验表单
+     * 
+     * @memberof Main
+     */
+     validateForm(callback) {
+        let tasks;
+        if (Object.keys(this.data).length > 0) {
+            tasks = Object.keys(this.data).map((item) => {
+                this.validateItem(item, this.data[item]);
+            })
+        }
+        Promise.all(tasks)
+            .then(() => callback(true))
+            .catch(() => callback(false))
+    },
+
+    /**
+     * 表单逻辑
+     *
+     */
+    formLogic( name, newVal, oldVal) {
+              
+    },
+
+    onFormDataChanged(val,oldVal){
+        if(val && val !== oldVal){
+                Object.keys(this.data).forEach(item =>{
+                        this.data[item] = null;
+                })
+                Object.assign(this.data,val);
+        }
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

app_Default/src/pages/exapmple/example-main2-edit-view/example-main2-edit-view.vue

+<template>
+<div>
+    <Main2form :formData="formData"  @formItemChange="formItemChange"></Main2form></div>
+
+
+</template>
+
+<script>
+import Main2form from '@forms/example/main2/main2.vue';
+
+
+export default {
+  name: "ExampleMain2EditView",
+  components: {
+  Main2form
+  },
+  data(){
+    return {
+      formData:{
+        "bookname":"test1",
+        "input":"文本test",
+        "label":"标签test",
+        "group1":"书籍基本信息test",
+        "formpage1":"基本信息test",
+        "createman":"建立人test",
+        "createdate":"建立时间test",
+        "updateman":"更新人test",
+        "updatedate":"更新时间test",
+        "group2":"操作信息test",
+        "formpage2":"其它test"
+      }
+    }
+  },
+  methods:{
+    formItemChange(value){
+      console.log(value);
+    }
+  }
+}
+</script>
+<style scoped>
+
+
+</style>