动态配置

packages/components/ListItem/Item.vue

@@ -159,7 +159,7 @@ export default {
           content: '*';
           color: #D24E4E;
           height: 8px;
-          padding-top: 4px;
+          padding-top: 2px;
           margin-left: 2px;
         }
       }

packages/components/STab/index.vue

@@ -75,9 +75,9 @@ export default {
   },
   mounted () {
     let vm = this
-    setTimeout(()=>{
+    setTimeout(() => {
       this.items[vm.current].$el.classList.add('activated')
-    },100)
+    }, 100)
     this.scrollToActiveTab(vm.current, this.items[vm.current].$el.clientWidth)
   },
   methods: {

src/pages/dynamicLayout.Vue

@@ -45,9 +45,9 @@
 
 <script>
     import layoutData from '../common/layout'
-    import ButtonTab from "vux/src/components/button-tab/button-tab";
+
     export default {
-      components: {ButtonTab},
+
       data() {
             return {
               layoutData: [],

src/pages/form.vue

@@ -4,7 +4,7 @@
 */
 
 <template>
-  <h-view>
+  <h-view class="form">
     <h-header>
       <div slot="left" class="h-header-btn" @click="$hlsExit()">
         <i class="ion-ios-arrow-back"/>
@@ -13,158 +13,173 @@
       <div slot="right" class="h-header-btn">右边</div>
     </h-header>
     <h-content>
-      <section v-for="(com, index) in component" :key="index">
-        <section v-if="com.name=='tab'">
-          <s-tab v-if="com.item" :class="com.class">
-            <tab-item v-for="(tab,key) in com.item" :key="key">{{ tab.name }}</tab-item>
+      <section v-for="(com, index) in layoutData" :key="index">
+        <s-tab
+          v-if="com.configType==='TAB' && com.layoutFiledList.length"
+          :default-active="tabIndex" :class="com.cssClass" @tabClick="layoutTabClick"
+          @click.native="tabClick(com)">
+          <tab-item v-for="(tab,key) in com.layoutFiledList" :key="key"><section v-html="tab.tabContent || tab.filedName"/></tab-item>
         </s-tab>
-        </section>
-        <section v-else-if="com.name=='form'">
-          <list-item v-if="com.fileds" :class="com.class">
-            <item v-for="(filed, index) in com.fileds" :key="index" :class="filed.class">
-              <div slot="name" :class="{'required':filed.request}">{{ filed.description }}</div>
-              <div slot="content">
+        <list-item v-if="com.configType==='FORM' && com.layoutFiledList.length" v-show="tabFromHide(com)" :class="com.cssClass">
+          <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">
+          </item>
+          <item
+            v-for="(filed, index) in com.layoutFiledList"
+            v-show="!com.hideForm" :key="index" :class="filed.cssClass" :has-border="filed.hasBorder"
+            :hasContent="filed.showContent" :proportion="proportionArray(filed.proportion)" :showName="filed.showName"
+            :showArrow="filed.showArrow"
+            :item-height="filed.filedHeight">
+            <img v-if="filed.leftIcon" slot="left-icon" :src="filed.leftIcon" class="left-icon">
+            <div slot="name" :class="{'required':filed.inputMode=='required'}">{{ filed.filedName }}</div>
             <input
-                  v-if="filed.type=='input'" v-model="data[com.dataName][filed.name]" :request="filed.request"
-                  :readonly="filed.readonly"
-                  :placeholder="filed.placeholder">
+              v-if="filed.filedType==='INPUT'" slot="content"
+              :readonly="filed.inputMode==='readOnly'"
+              :placeholder="filed.placeholder" :value="filed.defaultValue" :type="filed.inputType" :name="filed.filedName">
             <input
-                  v-if="filed.type=='select'" v-model="data[com.dataName][filed.name+'_n']" readonly="true"
-                  @click="showSelect(filed.selectList,filed.name,com.dataName)">
+              v-else-if="filed.filedType==='SELECT'"
+              slot="content" :name="filed.filedName"
+              readonly @click="showSelect(com,filed)">
             <input
-                  v-if="filed.type=='time'" v-model="data[com.dataName][filed.name]" readonly="true"
-                  @click="showTime(com.dataName,filed)">
-              </div>
+              v-else-if="filed.filedType=='TIME'"
+              slot="content" :name="filed.filedName"
+              readonly @click="showTime(com,filed)">
+            <h-switch v-else-if="filed.filedType==='SWITCH'" slot="content"/>
+            <div v-else slot="content" v-html="filed.defaultValue"/>
+            <img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
           </item>
         </list-item>
       </section>
-      </section>
     </h-content>
-
+    <section v-for="(com, index) in layoutData" :key="index">
+      <bottom-tab v-if="com.configType==='BOTTOM-BUTTON' && com.layoutFiledList.length" :show-divider="true">
+        <tab-button v-for="(btn, index) in com.layoutFiledList" :key="index"><section v-html="btn.btnContent || btn.filedName"/></tab-button>
+      </bottom-tab>
+    </section>
   </h-view>
 
 </template>
 
 <script>
+import layoutData from './layout.json'
+import ButtonTab from 'vux/src/components/button-tab/button-tab'
+
 export default {
   name: 'Form',
+  components: { ButtonTab },
   data () {
     return {
-      component: [
-        {
-          name: 'tab',
-          class: '',
-          item: [
-            {
-              name: 'APP',
-            }, {
-              name: 'WeiXin',
-            }, {
-              name: 'Vue',
-            },
-          ],
-        },
-        {
-          name: 'form',
-          readonly: false,
-          class: '',
-          dataName: 'person',
-          fileds: [
-            {
-              class: '',
-              type: 'input',
-              description: '手机号',
-              name: 'phone',
-              defaultValue: '',
-              request: false,
-              readonly: false,
-              placeholder: '请输入手机号',
-            }, {
-              class: '',
-              type: 'input',
-              description: '姓名',
-              name: 'name',
-              defaultValue: 'li',
-              request: true,
-              readonly: false,
-            }, {
-              class: '',
-              type: 'select',
-              description: '性别',
-              name: 'sex',
-              defaultValue: 'N',
-              defaultValueN: '男',
-              request: false,
-              readonly: false,
-              selectList: [{
-                code: 'man',
-                code_name: '男',
-              }, {
-                code: 'woman',
-                code_name: '女',
-              }],
-            }, {
-              class: '',
-              type: 'time',
-              description: '出生时间',
-              name: 'brithDay',
-              defaultValue: '2003-05-26',
-              request: true,
-              format: 'yyyy-mm-dd',
-            },
-          ],
-        },
-      ],
+      tabIndex: 1,
+      showFormTitle: true,
+      layoutData: null,
       data: {},
+      activeTab: null,
+      activeTabFiled: null,
     }
   },
   created () {
     let vm = this
-    vm.component.forEach((com, index) => {
-      if (com.name === 'form') {
+    if (layoutData.rows && layoutData.rows[0].layoutConfigList.length) {
+      vm.layoutData = layoutData.rows[0].layoutConfigList
+      vm.layoutData.forEach((com, index) => {
+        if (com.configType === 'FORM') {
           let form = com
-        let temp = {
-          readonly: form['readonly'],
-        }
-        if (form.fileds.length) {
-          let fileds = form.fileds
-          fileds.forEach((filed, index) => {
-            temp[filed.name] = filed.defaultValue
+          let temp = {}
+          if (form.layoutFiledList.length) {
+            let filed = form.layoutFiledList
+            filed.forEach((filed, index) => {
+              temp[filed.filedCode] = filed.defaultValue
               if (filed.type === 'select') {
-              temp[filed.name + '_n'] = filed.defaultValueN
+                temp[filed.filedCode + '_n'] = filed.defaultValueN
               }
             })
-          vm.$set(this.data, [form.dataName], temp)
+            vm.$set(this.data, [form.configCode], temp)
           }
+        } else if (com.configType === 'TAB') {
+          vm.activeTab = com.configCode
+          vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
         }
       })
+    }
   },
   methods: {
-    showSelect (list, code, dataName) {
+    proportionArray (proportion) {
+      return proportion.split(',')
+    },
+    layoutTabClick (index) {
       let vm = this
-      vm.hlsPopup.selectList({
-        list: list,
-        code: code,
-        object: {},
-        returnItem (index, obj) {
-          vm.data[dataName][code] = list[index].code
-          vm.data[dataName][code + '_n'] = list[index].code_name
+      vm.tabIndex = index
     },
-      })
+    tabClick (com) {
+      let vm = this
+      vm.activeTab = com.configCode
+      vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
     },
-    showTime (dataName, filed) {
+
+    hideFormClick (index) {
       let vm = this
-      vm.hlsPopup.showTime({
-        format: filed.format,
-        callback (value) {
-          vm.data[dataName][filed.name] = value
+      vm.layoutData[index]['hideForm'] = !vm.layoutData[index]['hideForm']
     },
-      })
+    tabFromHide (com) {
+      let vm = this
+      if (com.tabConfigCode && com.tabFiledCode) {
+        if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
+          return true
+        }
+      } return false
+    },
+    showSelect (com, filed) {
+
+    },
+    showTime (com, filed) {
+
     },
   },
 }
 </script>
 
-<style scoped lang="less">
+<style  lang="less">
+  .form {
+    .hls-switch-tab {
+      .tab-content {
+        .h-tab-item {
+          .h-item{
+            img{
+              width: 20px;
+            }
+          }
+        }
+      }
+    }
+    .content {
+      .form-title {
+        .contents {
+          .add-name {
+            font-weight: 500;
+          }
+        }
+      }
 
+      .hls-item {
+        .contents {
+          .add-content {
+            .right-icon {
+              height: 12px;
+            }
+
+            .hide-up-icon {
+              transform: rotate(90deg);
+            }
+
+            .hide-down-icon {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+    }
+  }
 </style>

src/pages/home.vue

@@ -17,7 +17,7 @@
         </div>
         <div v-show="item.isFromeMe" class="message-wrap">
           <img v-show="userImg" :src="userImg" class="head-pic-right">
-          <img v-show="!userImg" src="../assets/image/robot/user7.png" class="head-pic-right">
+          <img v-show="!userImg" src="@/assets/image/robot/user7.png" class="head-pic-right">
           <span class="triangle-right"/>
           <p class="message-right" v-text="item.content"/>
         </div>