layout

packages/components/HForm/index.vue

@@ -8,25 +8,28 @@
     <s-tab
       v-for="com in layoutConfig" v-if="com.configType==='TAB' && com.layoutFiledList.length"
       :key="com.configId"
-      :default-active="tabIndex" v-model="tabIndex" :class="com.cssClass" :has-border="showTabBorder"
+      :default-active="tabIndex" :class="com.cssClass" :has-border="showTabBorder"
       :show-divider="showTabDivider"
       @tabClick="layoutTabClick"
       @click.native="tabNativeClick(com)">
-      <tab-item v-for="(tab,key) in com.layoutFiledList" :key="key"><section v-html="tab.tabContent || tab.filedName"/></tab-item>
+      <tab-item v-for="tab in com.layoutFiledList" :key="tab.filedId">
+        <section v-html="tab.tabContent || tab.filedName"/>
+      </tab-item>
     </s-tab>
     <h-content :class="{'has-footer':hasBottom}">
+      <template v-for="(com, index) in layoutConfig">
         <list-item
-        v-for="(com, index) in layoutConfig" v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="tabFromHide(com)" :key="index"
-        :class="com.cssClass">
+          v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="checkFromHide(com)"
+          :class="com.cssClass" :key="com.configId">
           <item v-show="showFormTitle" class="form-title" @click.native="hideFormClick(index)">
             <div slot="name">{{ com.configName }}</div>
             <img
               slot="right-icon" :class="{'hide-down-icon':!com.hideForm,'hide-up-icon':com.hideForm}"
-            class="right-icon " src="@/assets/image/right-arrow@2x.png">
+              class="right-icon " src="./right-arrow@2x.png">
           </item>
           <item
-          v-for="(filed, index) in com.layoutFiledList"
-          v-show="!com.hideForm" :key="index" :class="filed.cssClass" :has-border="filed.hasBorder"
+            v-for="filed in com.layoutFiledList"
+            v-show="!com.hideForm" :key="filed.filedId" :class="filed.cssClass" :has-border="filed.hasBorder"
             :showContent="filed.showContent" :proportion="proportionArray(filed.proportion)" :showName="filed.showName"
             :showArrow="filed.showArrow"
             :item-height="filed.filedHeight">
@@ -35,25 +38,42 @@
             <input
               v-if="filed.filedType==='INPUT'" slot="content"
               :readonly="filed.inputMode==='readOnly'"
-            :placeholder="filed.placeholder" v-model="data[com.configCode][filed.filedCode]" :type="filed.inputType" :name="filed.filedCode">
+              :placeholder="filed.placeholder" v-model="data[com.configCode][filed.filedCode]" :type="filed.inputType"
+              :name="filed.filedCode">
             <input
               v-else-if="filed.filedType==='SELECT'"
               slot="content" :name="filed.filedCode"
-            v-model="data[com.configCode][filed.filedCode+'_n']" :placeholder="filed.placeholder" readonly @click="showSelect(com,filed)">
+              v-model="data[com.configCode][filed.filedCode+'_n']" :placeholder="filed.placeholder" readonly
+              @click="showSelect(com,filed)">
             <input
               v-else-if="filed.filedType=='TIME'"
               slot="content" :name="filed.filedCode"
-            v-model="data[com.configCode][filed.filedCode]" :placeholder="filed.placeholder" readonly @click="showTime(com,filed)">
-          <h-switch v-else-if="filed.filedType==='SWITCH'" slot="content" v-model="data[com.configCode][filed.filedCode]" :name="filed.filedCode"/>
-          <div v-else slot="content" v-html="data[com.configCode][filed.filedCode]"/>
+              v-model="data[com.configCode][filed.filedCode]" :placeholder="filed.placeholder" readonly
+              @click="showTime(com,filed)">
+            <h-switch
+              v-else-if="filed.filedType==='SWITCH'" slot="content" v-model="data[com.configCode][filed.filedCode]"
+              :name="filed.filedCode"
+              :disable="filed.inputMode==='readOnly'" @click.native="switchNativeClick(com,filed)"/>
+            <div v-else slot="content" @click="filedClick(com,filed)" v-html="data[com.configCode][filed.filedCode]"/>
             <img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
           </item>
         </list-item>
+        <template v-else-if="com.configType==='BUTTON' && com.layoutFiledList.length">
+          <h-button
+            v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass"
+            size="normal" @click.native="btnClick(com,btn)">
+            <section v-html="btn.btnContent || btn.filedName"/>
+          </h-button>
+        </template>
+      </template>
     </h-content>
     <bottom-tab
-      v-for="(com, index) in layoutConfig" v-if="com.configType==='bottomTab' && com.layoutFiledList.length" :key="index" :show-divider="showBtnDivider"
+      v-for="(com, index) in layoutConfig" v-if="com.configType==='bottomTab' && com.layoutFiledList.length"
+      :key="index" :show-divider="showBtnDivider"
       :class="com.cssClass">
-      <tab-button v-for="(btn, index) in com.layoutFiledList" :key="index" :class="btn.cssClass"><section v-html="btn.btnContent || btn.filedName"/></tab-button>
+      <tab-button v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass" @click.native="btnClick(com,btn)">
+        <section v-html="btn.btnContent || btn.filedName"/>
+      </tab-button>
     </bottom-tab>
   </section>
 </template>
@@ -97,14 +117,18 @@ export default {
     }
   },
   computed: {
-    defaultTabActive () {
-      return this.tabIndex
-    },
+
   },
+  /**
+   * 通过布局代码解析出form表单中定义了那些字端。取出字端的默认值等
+   * 取出布局中的全部按钮，返回给父组件，用于按钮逻辑的处理
+   * 取出后通过$set以及$email函数把值传递给父组件
+   */
   created () {
     let vm = this
     if (vm.layoutData.length && vm.layoutData[0].layoutConfigList.length) {
       vm.layoutConfig = vm.layoutData[0].layoutConfigList
+      let btns = []
       vm.layoutConfig.forEach((com, index) => {
         if (com.configType === 'bottomTab') {
           vm.hasBottom = true
@@ -113,20 +137,22 @@ export default {
           let form = com
           let temp = {}
           if (form.layoutFiledList.length) {
-            let filed = form.layoutFiledList
-            filed.forEach((filed, index) => {
-              if (vm.formData[form.configCode]) {
+            let fileds = form.layoutFiledList
+            fileds.forEach((filed, index) => {
+              if (vm.formData[form.configCode] && (vm.formData[form.configCode][filed.filedCode] !== undefined)) {
                 temp[filed.filedCode] = vm.formData[form.configCode][filed.filedCode]
-              } else {
-                temp[filed.filedCode] = filed.defaultValue
-              }
                 if (filed.filedType === 'SELECT') {
-                if (vm.formData[form.configCode]) {
                   temp[filed.filedCode + '_n'] = vm.formData[form.configCode][filed.filedCode + '_n']
                 }
-              }
-              if (filed.filedType === 'SWITCH') {
+              } else {
+                if (filed.filedType === 'SELECT') {
+                  temp[filed.filedCode] = filed.defaultValue
+                  temp[filed.filedCode + '_n'] = filed.defaultValueN
+                } else if (filed.filedType === 'SWITCH') {
                   temp[filed.filedCode] = !!filed.defaultValue
+                } else {
+                  temp[filed.filedCode] = filed.defaultValue
+                }
               }
             })
             vm.$set(vm.data, [form.configCode], temp)
@@ -134,44 +160,122 @@ export default {
         } else if (com.configType === 'TAB') {
           vm.activeTab = com.configCode
           vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
+        } else if (com.configType === 'BUTTON' || com.configType === 'bottomTab') {
+          if (com.layoutFiledList.length) {
+            let btnFileds = com.layoutFiledList
+            btnFileds.forEach((btnFiled, index) => {
+              let btn = {'btnType': com.configType, 'btnCode': btnFiled.filedCode, 'btnName': btnFiled.filedName}
+              btns.push(btn)
+            })
+            vm.$set(vm.data, 'btns', btns)
+          }
         }
       })
       vm.$emit('input', vm.data)
     }
   },
   methods: {
+    /**
+     * item左右距离查询出来为字符串 在此转换为数组
+     * @param proportion
+     * @returns {*}
+     */
     proportionArray (proportion) {
       return proportion.split(',')
     },
+    /**
+     * STAB的点击事件
+     * @param index
+     */
     layoutTabClick (index) {
       let vm = this
       vm.tabIndex = index
       this.$emit('tabClick', index)
     },
+    /**
+     * tab的点击事件用于判断当前的哪个tab的哪个子元素是活跃状态，用于动态切换显示form
+     * @param com 当前组件
+     */
     tabNativeClick (com) {
       let vm = this
       vm.activeTab = com.configCode
       vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
     },
-
-    hideFormClick (index) {
-      let vm = this
-      vm.layoutConfig[index]['hideForm'] = !vm.layoutConfig[index]['hideForm']
-    },
-    tabFromHide (com) {
+    /**
+     * 根据tab的显示动态判断tab下的form显示情况
+     * @param com 当前的form组件
+     */
+    checkFromHide (com) {
       let vm = this
       if (com.tabConfigCode && com.tabFiledCode) {
         if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
           return true
         }
-      } return false
+      }
+      return false
     },
+    /**
+     * Form title点击事件用于隐藏form下的内容
+     * @param index
+     */
+    hideFormClick (index) {
+      let vm = this
+      vm.layoutConfig[index]['hideForm'] = !vm.layoutConfig[index]['hideForm']
+    },
+    /**
+     * 下拉框点击函数 交由父组件处理 传递父组件当前点击对象以及字端名
+     * @param com 当前组件
+     * @param filed 当前字端
+     */
     showSelect (com, filed) {
+      if (filed.inputMode !== 'readOnly') {
         this.$emit('showSelect', com.configCode, filed.filedCode)
+      }
     },
+    /**
+     * 时间点击函数 交由父组件处理 传递父组件当前点击对象以及字端名
+     * @param com 当前组件
+     * @param filed 当前字端
+     */
     showTime (com, filed) {
+      if (filed.inputMode !== 'readOnly') {
         this.$emit('showTime', com.configCode, filed.filedCode)
+      }
     },
+    /**
+     * switch点击函数 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名以及vaule值，用于其他处理逻辑
+     * @param com 当前组件
+     * @param filed 当前字端
+     */
+    switchNativeClick (com, filed) {
+      let vm = this
+      if (filed.inputMode !== 'readOnly') {
+        this.$emit('switchClick', com.configCode, filed.filedCode, vm.data[com.configCode][filed.filedCode])
+      }
+    },
+    /**
+     * 其他非input的字端点击函数 用于超链接等其他字端的逻辑处理 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名
+     * @param com 当前组件
+     * @param filed 当前字端
+     */
+    filedClick (com, filed) {
+      this.$emit('filedClick', com.configCode, filed.filedCode)
+    },
+    /**
+     * 按钮点击事件 交由父组件处理 传递当前的按钮对象
+     * @param com 当前组件
+     * @param filed 当前字端
+     */
+    btnClick (com, filed) {
+      let btnType = com.configCode
+      let btnCode = filed.filedCode
+      this.data.btns.forEach((btn, index) => {
+        if (btn.btnType === btnType && btn.btnCode === btnCode) {
+          this.$emit('btnClick', btn)
+        }
+      })
+    },
+
   },
 }
 </script>
@@ -181,14 +285,15 @@ export default {
     .hls-switch-tab {
       .tab-content {
         .h-tab-item {
-          .h-item{
-            img{
+          .h-item {
+            img {
               width: 20px;
             }
           }
         }
       }
     }
+
     .content {
       .form-title {
         .contents {

packages/components/Switch/index.vue

@@ -32,19 +32,14 @@ export default {
     }
   },
   computed: {
-    /* value() {
-        return value ? value : false
-      } */
+
   },
   watch: {
-    value (val) {
-      this.$emit('input', val)
-      this.value = val
-    },
   },
   methods: {
     checked () {
       if (!this.disable) {
+        this.$emit('input', !this.value)
         this.$emit('switchClick', !this.value)
       }
     },

src/pages/form.vue

@@ -14,8 +14,9 @@
     </h-header>
     <h-form
       :layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
-      :show-tab-divider="true" :formData.sync="data" v-model="data" @tabClick="tabClick"
-      @showSelect="showSelect" @showTime="showTime"/>
+      :show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
+      @showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
+      @btnClick="btnClick"/>
   </h-view>
 
 </template>
@@ -34,6 +35,7 @@ export default {
         contract: {
           postion: '01',
           postion_n: '技术顾问',
+          enable_flag: false,
         },
       },
       postionList: [
@@ -47,6 +49,10 @@ export default {
 
   },
   methods: {
+    /**
+     * tab的点击事件
+     * @param index
+     */
     tabClick (index) {
       this.tabIndex = index
     },
@@ -62,6 +68,11 @@ export default {
         },
       })
     },
+    /**
+     * 下拉框点击事件
+     * @param configCode
+     * @param filedCode
+     */
     showSelect (configCode, filedCode) {
       let vm = this
       switch (filedCode) {
@@ -79,6 +90,11 @@ export default {
         },
       })
     },
+    /**
+     * 事件选择事件
+     * @param configCode
+     * @param filedCode
+     */
     showTime (configCode, filedCode) {
       let vm = this
       switch (filedCode) {
@@ -88,6 +104,30 @@ export default {
         default:
       }
     },
+    /**
+     * switch的点开事件
+     * @param configCode
+     * @param filedCode
+     * @param value
+     */
+    switchClick (configCode, filedCode, value) {
+      debugger
+    },
+    /**
+     * 其他字端的点击事件
+     * @param configCode
+     * @param filedCode
+     */
+    filedClick (configCode, filedCode) {
+      debugger
+    },
+    /**
+     * 按钮点击事件
+     * @param btn
+     */
+    btnClick (btn) {
+      debugger
+    },
   },
 }
 </script>

src/pages/layout.json

@@ -201,7 +201,7 @@
               "inputType": "text",
               "placeholder": "请选择岗位",
               "filedOrder": "3",
-              "inputMode": "other",
+              "inputMode": "readOnly",
               "leftIcon": null,
               "rightIcon": null,
               "format": "N",
@@ -616,6 +616,83 @@
               "cssClass": null
             }
           ]
+        },
+        {
+          "_token": "db3ad35d036691c5b0caa2e273d31f25",
+          "objectVersionNumber": null,
+          "configId": "5c95cde581a64f42a86900712c53502a",
+          "layoutId": "1",
+          "configCode": "BUTTON",
+          "configName": "底部按钮",
+          "configType": "BUTTON",
+          "configOrder": "40",
+          "tabFlag": "N",
+          "tabConfigId": null,
+          "tabFiledId": null,
+          "cssClass": "btn-button",
+          "enableFlag": "Y",
+          "hideForm": false,
+          "tabConfigCode": null,
+          "tabFiledCode": null,
+          "tabFiledName": null,
+          "layoutFiledList": [
+            {
+              "_token": "7e61d576cfa5d12ee68bdf7ec36d99b2",
+              "objectVersionNumber": 2,
+              "filedId": "3d7ba60e16594e1fb170790d166c8bb1",
+              "layoutId": "1",
+              "configId": "5c95cde581a64f42a86900712c53502a",
+              "filedCode": "save",
+              "filedName": "保存",
+              "defaultValue": null,
+              "filedType": "OTHES",
+              "inputType": "text",
+              "placeholder": null,
+              "filedOrder": "1",
+              "inputMode": "other",
+              "leftIcon": null,
+              "rightIcon": null,
+              "format": "N",
+              "proportion": "1,2",
+              "showName": true,
+              "showContent": true,
+              "showArrow": false,
+              "hasBorder": true,
+              "filedHeight": 45,
+              "enableFlag": "Y",
+              "tabContent": null,
+              "btnContent": null,
+              "cssClass": "save-btn"
+            },
+            {
+              "_token": "974a18dedc6a0960a4ad0f6be96dacea",
+              "objectVersionNumber": 1,
+              "filedId": "f64a1e6b0c834f5fa0db15e999e84eb0",
+              "layoutId": "1",
+              "configId": "5c95cde581a64f42a86900712c53502a",
+              "filedCode": "submit",
+              "filedName": "提交",
+              "defaultValue": null,
+              "filedType": "OTHES",
+              "inputType": "text",
+              "placeholder": null,
+              "filedOrder": "2",
+              "inputMode": "other",
+              "leftIcon": null,
+              "rightIcon": null,
+              "format": "N",
+              "proportion": "1,2",
+              "showName": true,
+              "showContent": true,
+              "showArrow": false,
+              "hasBorder": true,
+              "filedHeight": 45,
+              "enableFlag": "Y",
+              "tabContent": null,
+              "btnContent": null,
+              "cssClass": null
+            }
+          ]
         }
       ]
     }