layout

packages/common/scripts/hlsPopup.js

@@ -43,13 +43,13 @@ export default {
         Vue.$vux.loading.hide()
         vm.isLoading = false
         // 弹出操作失败
-        Vue.$vux.toast.show({
+        /* Vue.$vux.toast.show({
           text: '操作失败',
           type: 'warn',
           time: vm.SHOW_TIMES,
           isShowMask: vm.IS_SHOW_MASK,
           position: 'middle',
-        })
+        }) */
       }
     }, 10000)
   },
@@ -68,19 +68,13 @@ export default {
   showLongTop: function (content) {
     let vm = this
     let text = content || '操作失败'
-    if (!process.env.isMobilePlatform) {
-      Vue.$vux.toast.show({
-        text: text,
-        type: 'text',
-        time: vm.SHOW_TIMES,
-        isShowMask: vm.IS_SHOW_MASK,
-        position: 'top',
-      })
-    } else {
-      window.plugins.toast.showLongTop(content, function (success) {
-      }, function (error) { // eslint-disable-line
-      })
-    }
+    Vue.$vux.toast.show({
+      text: text,
+      type: 'text',
+      time: vm.SHOW_TIMES,
+      isShowMask: vm.IS_SHOW_MASK,
+      position: 'top',
+    })
   },
 
   /**
@@ -90,19 +84,13 @@ export default {
   showLongCenter: function (content) {
     let vm = this
     let text = content || '操作失败'
-    if (!process.env.isMobilePlatform) {
-      Vue.$vux.toast.show({
-        text: text,
-        type: 'text',
-        time: vm.SHOW_TIMES,
-        isShowMask: vm.IS_SHOW_MASK,
-        position: 'middle',
-      })
-    } else {
-      window.plugins.toast.showLongCenter(content, function (success) {
-      }, function (error) { // eslint-disable-line
-      })
-    }
+    Vue.$vux.toast.show({
+      text: text,
+      type: 'text',
+      time: vm.SHOW_TIMES,
+      isShowMask: vm.IS_SHOW_MASK,
+      position: 'middle',
+    })
   },
   /**
    * 长时间中部提示toast
@@ -111,19 +99,13 @@ export default {
   showLongBottom: function (content) {
     let vm = this
     let text = content || '操作失败'
-    if (!process.env.isMobilePlatform) {
-      Vue.$vux.toast.show({
-        text: text,
-        time: vm.SHOW_TIMES,
-        type: 'text',
-        isShowMask: vm.IS_SHOW_MASK,
-        position: 'bottom',
-      })
-    } else {
-      window.plugins.toast.showLongBottom(content, function (success) {
-      }, function (error) { // eslint-disable-line
-      })
-    }
+    Vue.$vux.toast.show({
+      text: text,
+      time: vm.SHOW_TIMES,
+      type: 'text',
+      isShowMask: vm.IS_SHOW_MASK,
+      position: 'bottom',
+    })
   },
   /**
    * 成功提示框
@@ -160,35 +142,19 @@ export default {
    * @param confirmObject.onConfirm 确定函数
    */
   showConfirm: function (confirmObject) {
-    if (!process.env.isMobilePlatform) {
-      let def = {
-        title: confirmObject.title || '提示',
-        content: confirmObject.content || '',
-        confirmText: '确定',
-        cancelText: '取消',
-        onConfirm: () => {
-          confirmObject.onConfirm(1)
-        },
-        onCancel: () => {
-          confirmObject.onConfirm(0)
-        },
-      }
-      Vue.$vux.confirm.show(def)
-    } else {
-      let message = confirmObject.content || ''
-      let onConfirm = function (index) {
-        confirmObject.onConfirm(index)
-      }
-      let title = confirmObject.title || '提示'
-      navigator.notification.confirm(
-        message, // message
-        function (index) {
-          onConfirm(index - 1)
-        },
-        title, // title
-        ['取消', '确定'] // buttonLabels
-      )
+    let def = {
+      title: confirmObject.title || '提示',
+      content: confirmObject.content || '',
+      confirmText: '确定',
+      cancelText: '取消',
+      onConfirm: () => {
+        confirmObject.onConfirm(1)
+      },
+      onCancel: () => {
+        confirmObject.onConfirm(0)
+      },
     }
+    Vue.$vux.confirm.show(def)
   },
   /*
    * 弹出确认的窗口
@@ -198,30 +164,16 @@ export default {
    *
    */
   showPopup: function (confirmObject) {
-    if (!process.env.isMobilePlatform) {
-      let def = {
-        title: confirmObject.title || '提示',
-        content: confirmObject.content || '',
-        confirmText: '确定',
-        showCancelButton: false,
-        onConfirm: () => {
-          confirmObject.onConfirm()
-        },
-      }
-      Vue.$vux.confirm.show(def)
-    } else {
-      let alertDismissed = function (index) {
+    let def = {
+      title: confirmObject.title || '提示',
+      content: confirmObject.content || '',
+      confirmText: '确定',
+      showCancelButton: false,
+      onConfirm: () => {
         confirmObject.onConfirm()
-      }
-      let title = confirmObject.title || '提示'
-      let message = confirmObject.content || ''
-      navigator.notification.alert(
-        message, // message
-        alertDismissed, // callback
-        title || '提示', // title
-        '确定' // buttonName
-      )
+      },
     }
+    Vue.$vux.confirm.show(def)
   },
   /**
    * @param actionObject.titleText 弹出框的标题可空

packages/common/styles/ionic-public-style.less

 .has-footer {
-  padding-bottom: 1.6rem;
+  padding-bottom: 0.88rem;
   .scrollContent{
     padding-bottom: 1.76rem;
   }

packages/common/styles/platform-iosx.less

@@ -8,7 +8,7 @@
       bottom: 1.68rem;
     }
     .has-footer {
-      padding-bottom: 2rem;
+      padding-bottom: 1.6rem;
       .scrollContent{
         padding-bottom: 2.84rem;
       }
@@ -34,7 +34,7 @@
       bottom: 1.68rem;
     }
     .has-footer {
-      padding-bottom: 2rem;
+      padding-bottom: 1.6rem;
       .scrollContent{
         padding-bottom: 2.84rem;
       }

packages/common/ydui.flexible.js

 /* eslint-disable */
 /**
  * YDUI 可伸缩布局方案
- * rem计算方式：设计图尺寸px / 100 = 实际rem  例: 100px = 1rem
+ * rem计算方式：设计图尺寸px / 50 = 实际rem  例: 100px = 2rem
  */
 !(function(window) {
   /* 设计图文档宽度 */

packages/components/HForm/index.vue

+/**
+* @Author think
+* @Date 2019-07-16 20:00
+*/
+
+<template>
+  <section class="h-form">
+    <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"
+      :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>
+    </s-tab>
+    <h-content :class="{'has-footer':hasBottom}">
+      <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">
+        <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"
+          :showContent="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.filedType==='INPUT'" slot="content"
+            :readonly="filed.inputMode==='readOnly'"
+            :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)">
+          <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]"/>
+          <img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
+        </item>
+      </list-item>
+    </h-content>
+    <bottom-tab
+      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>
+    </bottom-tab>
+  </section>
+</template>
+<script>
+export default {
+  name: 'HForm',
+  props: {
+    layoutData: {
+      type: Array,
+      default: () => [],
+    },
+    showFormTitle: {
+      type: Boolean,
+      default: true,
+    },
+    showTabDivider: {
+      type: Boolean,
+      default: false,
+    },
+    showTabBorder: {
+      type: Boolean,
+      default: false,
+    },
+    showBtnDivider: {
+      type: Boolean,
+      default: true,
+    },
+    formData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data () {
+    return {
+      tabIndex: 0,
+      data: {},
+      layoutConfig: [],
+      activeTab: null,
+      activeTabFiled: null,
+      hasBottom: false,
+    }
+  },
+  computed: {
+    defaultTabActive () {
+      return this.tabIndex
+    },
+  },
+  created () {
+    let vm = this
+    if (vm.layoutData.length && vm.layoutData[0].layoutConfigList.length) {
+      vm.layoutConfig = vm.layoutData[0].layoutConfigList
+      vm.layoutConfig.forEach((com, index) => {
+        if (com.configType === 'bottomTab') {
+          vm.hasBottom = true
+        }
+        if (com.configType === 'FORM') {
+          let form = com
+          let temp = {}
+          if (form.layoutFiledList.length) {
+            let filed = form.layoutFiledList
+            filed.forEach((filed, index) => {
+              if (vm.formData[form.configCode]) {
+                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') {
+                temp[filed.filedCode] = !!filed.defaultValue
+              }
+            })
+            vm.$set(vm.data, [form.configCode], temp)
+          }
+        } else if (com.configType === 'TAB') {
+          vm.activeTab = com.configCode
+          vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
+        }
+      })
+      vm.$emit('input', vm.data)
+    }
+  },
+  methods: {
+    proportionArray (proportion) {
+      return proportion.split(',')
+    },
+    layoutTabClick (index) {
+      let vm = this
+      vm.tabIndex = index
+      this.$emit('tabClick', index)
+    },
+    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) {
+      let vm = this
+      if (com.tabConfigCode && com.tabFiledCode) {
+        if (com.tabConfigCode === vm.activeTab && com.tabFiledCode === vm.activeTabFiled) {
+          return true
+        }
+      } return false
+    },
+    showSelect (com, filed) {
+      this.$emit('showSelect', com.configCode, filed.filedCode)
+    },
+    showTime (com, filed) {
+      this.$emit('showTime', com.configCode, filed.filedCode)
+    },
+  },
+}
+</script>
+
+<style  lang="less">
+  .h-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>

packages/components/component.js

@@ -26,6 +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 errLoadingPic from '../common/picture/errloading.jpg'
 
@@ -57,4 +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)
 }

packages/index.js

@@ -23,6 +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 componentInstall from './components/component'
 
 // compontenPlugins
@@ -64,6 +65,7 @@ export {
   BottomTab,
   TabButton,
   HFile,
+  HForm,
   ActionSheetPlugin,
   ShowPicturePlugin,
   SelectPlugin,

src/pages/form.vue

@@ -12,130 +12,81 @@
       <div slot="center">From</div>
       <div slot="right" class="h-header-btn">右边</div>
     </h-header>
-    <h-content>
-      <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>
-        <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"
-            :has-content="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.filedType==='INPUT'" slot="content"
-              :readonly="filed.inputMode==='readOnly'"
-              :placeholder="filed.placeholder" :value="filed.defaultValue" :type="filed.inputType" :name="filed.filedName">
-            <input
-              v-else-if="filed.filedType==='SELECT'"
-              slot="content" :name="filed.filedName"
-              readonly @click="showSelect(com,filed)">
-            <input
-              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>
-    </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" :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>
-      </bottom-tab>
-    </section>
+    <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"/>
   </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 {
       tabIndex: 1,
       showFormTitle: true,
-      layoutData: null,
-      data: {},
-      activeTab: null,
-      activeTabFiled: null,
+      layoutData: [...layoutData],
+      data: {
+        contract: {
+          postion: '01',
+          postion_n: '技术顾问',
+        },
+      },
+      postionList: [
+        {code: '01', code_name: '技术顾问'},
+        {code: '02', code_name: '技术经理'},
+        {code: '03', code_name: '项目经理'},
+      ],
     }
   },
   created () {
-    let vm = this
-    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 = {}
-          if (form.layoutFiledList.length) {
-            let filed = form.layoutFiledList
-            filed.forEach((filed, index) => {
-              temp[filed.filedCode] = filed.defaultValue
-              if (filed.type === 'select') {
-                temp[filed.filedCode + '_n'] = filed.defaultValueN
-              }
-            })
-            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: {
-    proportionArray (proportion) {
-      return proportion.split(',')
+    tabClick (index) {
+      this.tabIndex = index
     },
-    layoutTabClick (index) {
+    showPostion (configCode, filedCode) {
       let vm = this
-      vm.tabIndex = index
+      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
+        },
+      })
     },
-    tabClick (com) {
+    showSelect (configCode, filedCode) {
       let vm = this
-      vm.activeTab = com.configCode
-      vm.activeTabFiled = com.layoutFiledList.length ? com.layoutFiledList[vm.tabIndex].filedCode : ''
+      switch (filedCode) {
+        case 'postion':
+          vm.showPostion(configCode, filedCode)
+          break
+        default:
+      }
     },
-
-    hideFormClick (index) {
+    showOrderDate (configCode, filedCode) {
       let vm = this
-      vm.layoutData[index]['hideForm'] = !vm.layoutData[index]['hideForm']
+      vm.hlsPopup.showTime({
+        callback (time) {
+          vm.data[configCode][filedCode] = time
+        },
+      })
     },
-    tabFromHide (com) {
+    showTime (configCode, filedCode) {
       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) {
-
+      switch (filedCode) {
+        case 'order_date':
+          vm.showOrderDate(configCode, filedCode)
+          break
+        default:
+      }
     },
   },
 }
@@ -143,43 +94,5 @@ export default {
 
 <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/layout.json

-{
-  "rows": [
+ [
     {
       "_token": "5c7ed163aabdb97edbb4023503ad33f8",
       "objectVersionNumber": null,
@@ -548,7 +547,7 @@
           "layoutId": "1",
           "configCode": "SAVE_BUTTON",
           "configName": "底部按钮",
-          "configType": "BOTTOM-BUTTON",
+          "configType": "bottomTab",
           "configOrder": "40",
           "tabFlag": "N",
           "tabConfigId": null,
@@ -620,7 +619,4 @@
         }
       ]
     }
-  ],
-  "success": true,
-  "total": 1
-}
+  ]

src/scripts/hlsPopup.js

@@ -275,7 +275,7 @@ export default {
       date = timeObject.nowDate
     }
     if (timeObject.format) {
-      format = timeObject.format
+      format = timeObject.format || 'YYYY-MM-DD'
     }
     Vue.$vux.datetime.show({
       cancelText: '取消',