layout

README.md

@@ -532,6 +532,9 @@ showActionSheetButton() {
 ```
 
 ### Note 
+ hls-easy-ui#0.0.5
+    
+   [添加动态配置组件 h-layout](/packages/components/HLayout/README.md)
  hls-easy-ui#0.0.4
   
    [添加懒加载组建](https://github.com/hilongjw/vue-lazyload)

packages/components/HLayout/README.md

+动态配置功能
+ 目前支持配置 form、s-tab、button 以及底部固定位置的按钮
+
+```html
+/**
+* @Author think
+* @Date 2019-07-16 20:00
+*/
+
+<template>
+  <h-view class="form">
+    <h-header>
+      <div slot="left" class="h-header-btn" @click="$hlsExit()">
+        <i class="ion-ios-arrow-back"/>
+      </div>
+      <div slot="center">From</div>
+      <div slot="right" class="h-header-btn">右边</div>
+    </h-header>
+    <h-layout
+      v-if="layoutShow"
+      :layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
+      :show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
+      @showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
+      @btnClick="btnClick"/>
+  </h-view>
+
+</template>
+```
+```javascript
+<script>
+import layoutData from './layout.json'
+
+export default {
+  name: 'Form',
+  data () {
+    return {
+      tabIndex: 1,
+      showFormTitle: true,
+      layoutData: [],
+      layoutShow: false,
+      data: {
+        contract: {
+          postion: '01',
+          postion_n: '技术顾问',
+          enable_flag: false,
+        },
+      },
+      postionList: [
+        {code: '01', code_name: '技术顾问'},
+        {code: '02', code_name: '技术经理'},
+        {code: '03', code_name: '项目经理'},
+      ],
+    }
+  },
+  created () {
+    let vm = this
+    /* axios.get('http://leafservice.hand-china.com/r/api/get/layoutCode?layoutCode=CON_QURERY', {
+      header: {'Content-Type': 'application/json',
+        'Authorization': 'bearer SRHJVdrftyGUYguyhiHiuiojmgrrcgv' },
+    }).then(res => {
+      vm.layoutData = res.rows
+      vm.layoutShow = true
+    }) */
+
+    setTimeout(() => {
+      vm.layoutData = layoutData
+      vm.layoutShow = true
+    }, 100)
+  },
+  methods: {
+    /**
+     * tab的点击事件
+     * @param index
+     */
+    tabClick (index) {
+      this.tabIndex = index
+    },
+    showPostion (configCode, filedCode) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.postionList,
+        code: filedCode,
+        object: vm.data[configCode],
+        returnItem (index) {
+          vm.data[configCode][filedCode] = vm.postionList[index].code
+          vm.data[configCode][filedCode + '_n'] = vm.postionList[index].code_name
+        },
+      })
+    },
+    /**
+     * 下拉框点击事件
+     * @param configCode
+     * @param filedCode
+     */
+    showSelect (configCode, filedCode) {
+      let vm = this
+      switch (filedCode) {
+        case 'postion':
+          vm.showPostion(configCode, filedCode)
+          break
+        default:
+      }
+    },
+    showOrderDate (configCode, filedCode) {
+      let vm = this
+      vm.hlsPopup.showTime({
+        callback (time) {
+          vm.data[configCode][filedCode] = time
+        },
+      })
+    },
+    /**
+     * 事件选择事件
+     * @param configCode
+     * @param filedCode
+     */
+    showTime (configCode, filedCode) {
+      let vm = this
+      switch (filedCode) {
+        case 'order_date':
+          vm.showOrderDate(configCode, filedCode)
+          break
+        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) {
+      console.log(JSON.stringify(this.data, '', 2))
+      if (btn.btnType === 'BottomTab') {
+        if (btn.btnCode === 'save') {
+          alert('底部固定按钮的保存')
+        }
+        if (btn.btnCode === 'submit') {
+          alert('底部固定按钮的提交')
+        }
+      } if (btn.btnType === 'Button') {
+        if (btn.btnCode === 'nextBtn') {
+          alert('按钮继续')
+        }
+      }
+    },
+  },
+}
+</script>
+```
+```less
+<style  lang="less">
+  .form {
+  }
+</style>
+``` 
+1. 动态布局目前仅仅支持一个 s-tab组件，一个底部按钮bottom-tab 组件
+2. 组件名为h-layout，需要在布局查询出来之后再去渲染此组件否则渲染失败
+3. 布局的查询在created生命周期函数内查询，查询成功再去渲染组件
+4. 应无法在data里面直接set数据，故需在data里面新建data数据对象用于组件解析成功以及数据双向绑定使用
+5. 支持在自定义data对象设置默认值，默认值的优先级高于组件定义的默认值
+6. 组件使用v-model与formData进行传递data数据实现双向绑定，两者缺一不可
+7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。已btns数组反馈给父组件，用于按钮点击事件
+8. 所有的下拉框、时间以及按钮的触发逻辑全部交由父组件处理，子组件通知父组件，子组件内不做任何业务处理逻辑
+
+
+props
+* layoutData:组件布局默认数组
+* showFormTitle:是否展示form表单上的title，title也可以点击实现form的缩放 默认 true
+* showTabDivider:是否显示s-tab的分割线 默认true
+* showTabBorder:是否显示s-tab的下边框 默认false
+* showBtnDivider:是否底部按钮的分割线 默认true
+* formData:组件数据，用于双向绑定
+
+emit
+* tabClick s-tab组件切换点击事件 返回当前点击的index
+* showSelect 下拉框点开事件 返回布局组件code，字端的code，用于判断是哪个下拉框
+* showTime  事件点开事件 返回组件code，字端的code，用于判断是哪个时间选择
+* switchClick switch切换开关点击事件，返回组件code，字端的code以及value值
+* filedClick 其它字端点击事件，字端类型为其它的点击事件 返回组件code，字端的code，可用于超链接，提示等
+* btnClick 按钮点击事件，返回当前btn对象，包含组件code、按钮code、以及按钮描述，可根据此判断点击的是哪个按钮
+
+

packages/components/HForm/index.vue → packages/components/HLayout/index.vue

@@ -6,7 +6,7 @@
 <template>
   <section class="h-form">
     <s-tab
-      v-for="com in layoutConfig" v-if="com.configType==='TAB' && com.layoutFiledList.length"
+      v-for="com in layoutConfig" v-if="com.configType==='Stab' && com.layoutFiledList.length"
       :key="com.configId"
       :default-active="tabIndex" :class="com.cssClass" :has-border="showTabBorder"
       :show-divider="showTabDivider"
@@ -19,7 +19,7 @@
     <h-content :class="{'has-footer':hasBottom}">
       <template v-for="(com, index) in layoutConfig">
         <list-item
-          v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="checkFromHide(com)"
+          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>
@@ -58,17 +58,17 @@
             <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">
+        <section v-else-if="com.configType==='Button' && com.layoutFiledList.length" class="layout-button">
           <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>
+        </section>
       </template>
     </h-content>
     <bottom-tab
-      v-for="(com, index) in layoutConfig" v-if="com.configType==='bottomTab' && com.layoutFiledList.length"
+      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 in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass" @click.native="btnClick(com,btn)">
@@ -79,7 +79,7 @@
 </template>
 <script>
 export default {
-  name: 'HForm',
+  name: 'HLayout',
   props: {
     layoutData: {
       type: Array,
@@ -91,7 +91,7 @@ export default {
     },
     showTabDivider: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     showTabBorder: {
       type: Boolean,
@@ -130,10 +130,10 @@ export default {
       vm.layoutConfig = vm.layoutData[0].layoutConfigList
       let btns = []
       vm.layoutConfig.forEach((com, index) => {
-        if (com.configType === 'bottomTab') {
+        if (com.configType === 'BottomTab') {
           vm.hasBottom = true
         }
-        if (com.configType === 'FORM') {
+        if (com.configType === 'Form') {
           let form = com
           let temp = {}
           if (form.layoutFiledList.length) {
@@ -157,10 +157,10 @@ export default {
             })
             vm.$set(vm.data, [form.configCode], temp)
           }
-        } else if (com.configType === 'TAB') {
+        } else if (com.configType === 'Stab') {
           vm.activeTab = com.configCode
           vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
-        } else if (com.configType === 'BUTTON' || com.configType === 'bottomTab') {
+        } else if (com.configType === 'Button' || com.configType === 'BottomTab') {
           if (com.layoutFiledList.length) {
             let btnFileds = com.layoutFiledList
             btnFileds.forEach((btnFiled, index) => {
@@ -267,7 +267,7 @@ export default {
      * @param filed 当前字端
      */
     btnClick (com, filed) {
-      let btnType = com.configCode
+      let btnType = com.configType
       let btnCode = filed.filedCode
       this.data.btns.forEach((btn, index) => {
         if (btn.btnType === btnType && btn.btnCode === btnCode) {
@@ -302,6 +302,19 @@ export default {
           }
         }
       }
+      .layout-button{
+        margin-top: 30px;
+        display: flex;
+        justify-content: center;
+        .hls-h-button{
+          width: 50%;
+          border-radius: 20px;
+          background-color:@theme-color;
+          border: none;
+          color: #fff;
+        }
+
+      }
 
       .hls-item {
         .contents {

packages/components/component.js

@@ -26,7 +26,7 @@ import HFile from './HFile/index'
 import BottomTab from './BottomTab/index'
 import TabButton from './BottomTab/tab-button'
 import Modal from './Modal/Modal'
-import HForm from './HForm/index'
+import HLayout from './HLayout/index'
 
 import errLoadingPic from '../common/picture/errloading.jpg'
 
@@ -58,5 +58,5 @@ export default (Vue) => {
   Vue.component('radio-group', RadioGroup)
   Vue.component('h-radio', Radio)
   Vue.component('h-file', HFile)
-  Vue.component('h-form', HForm)
+  Vue.component('h-layout', HLayout)
 }

packages/index.js

@@ -23,7 +23,7 @@ import Stab from './components/STab/index'
 import TabItem from './components/STab/tab-item'
 import TabButton from './components/BottomTab/tab-button'
 import HFile from './components/HFile/index'
-import HForm from './components/HForm/index'
+import HLayout from './components/HLayout/index'
 import componentInstall from './components/component'
 
 // compontenPlugins
@@ -65,7 +65,7 @@ export {
   BottomTab,
   TabButton,
   HFile,
-  HForm,
+  HLayout,
   ActionSheetPlugin,
   ShowPicturePlugin,
   SelectPlugin,

src/main.js

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import FastClick from 'fastclick'
+import axios from 'axios'
 import App from './App'
 import router from './router/index'
 
@@ -48,6 +49,7 @@ Vue.use(filter)
 
 Vue.prototype.hlsPopup = window.hlsPopup = hlsPopup
 Vue.prototype.$devicePixelRatio = 2
+Vue.prototype.axios = window.axios = axios
 
 Vue.prototype.$post = post
 Vue.prototype.$get = get

src/pages/form.vue

@@ -12,7 +12,8 @@
       <div slot="center">From</div>
       <div slot="right" class="h-header-btn">右边</div>
     </h-header>
-    <h-form
+    <h-layout
+      v-if="layoutShow"
       :layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
       :show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
       @showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
@@ -30,7 +31,8 @@ export default {
     return {
       tabIndex: 1,
       showFormTitle: true,
-      layoutData: [...layoutData],
+      layoutData: [],
+      layoutShow: false,
       data: {
         contract: {
           postion: '01',
@@ -46,7 +48,19 @@ export default {
     }
   },
   created () {
+    let vm = this
+    /* axios.get('http://leafservice.hand-china.com/r/api/get/layoutCode?layoutCode=CON_QURERY', {
+      header: {'Content-Type': 'application/json',
+        'Authorization': 'bearer SRHJVdrftyGUYguyhiHiuiojmgrrcgv' },
+    }).then(res => {
+      vm.layoutData = res.rows
+      vm.layoutShow = true
+    }) */
 
+    setTimeout(() => {
+      vm.layoutData = layoutData
+      vm.layoutShow = true
+    }, 100)
   },
   methods: {
     /**
@@ -126,7 +140,19 @@ export default {
      * @param btn
      */
     btnClick (btn) {
-      debugger
+      console.log(JSON.stringify(this.data, '', 2))
+      if (btn.btnType === 'BottomTab') {
+        if (btn.btnCode === 'save') {
+          alert('底部固定按钮的保存')
+        }
+        if (btn.btnCode === 'submit') {
+          alert('底部固定按钮的提交')
+        }
+      } if (btn.btnType === 'Button') {
+        if (btn.btnCode === 'nextBtn') {
+          alert('按钮继续')
+        }
+      }
     },
   },
 }