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==='Stab' && com.layoutFiledList.length"
      :key="com.configId"
      :default-active="tabIndex" :class="com.cssClass" :has-border="showTabBorder"
      :show-divider="showTabDivider"
      @tabClick="layoutTabClick"
      @click.native="tabNativeClick(com)">
      <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-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="./right-arrow@2x.png">
          </item>
          <item
            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">
            <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="filedReadOnly(filed)"
              :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"
              :disable="filedReadOnly(filed)"/>
            <h-check
              v-else-if="filed.filedType==='CHECKBOX'" slot="content" v-model="data[com.configCode][filed.filedCode]"
              :name="filed.filedCode"
              :disable="filedReadOnly(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-if="showBtn">
          <section v-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>
          </section>
        </template>
      </template>
    </h-content>
    <template v-if="showBtn">
      <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 in com.layoutFiledList" :key="btn.filedId" :disabled="filedReadOnly(btn)" :class="btn.cssClass"
          @click.native="btnClick(com,btn)">
          <section v-html="btn.btnContent || btn.filedName"/>
        </tab-button>
      </bottom-tab>
    </template>
  </section>
</template>
<script>
export default {
  name: 'HLayout',
  props: {
    layoutData: {
      type: Array,
      default: () => [],
    },
    showFormTitle: {
      type: Boolean,
      default: true,
    },
    showTabDivider: {
      type: Boolean,
      default: true,
    },
    showTabBorder: {
      type: Boolean,
      default: false,
    },
    showBtnDivider: {
      type: Boolean,
      default: true,
    },
    showBtn: {
      type: Boolean,
      default: true,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      tabIndex: 0,
      data: {},
      layoutConfig: [],
      activeTab: null,
      activeTabFiled: null,
      hasBottom: false,
    }
  },
  computed: {

  },
  /**
   * 通过布局代码解析出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
        }
        if (com.configType === 'Form') {
          let form = com
          let temp = {}
          if (form.layoutFiledList.length) {
            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]
                if (filed.filedType === 'SELECT') {
                  temp[filed.filedCode + '_n'] = vm.formData[form.configCode][filed.filedCode + '_n']
                }
              } 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 if (filed.filedType === 'CHECKBOX') {
                  temp[filed.filedCode] = !!filed.defaultValue
                } else {
                  temp[filed.filedCode] = filed.defaultValue
                }
              }
            })
            // 保留父组件data的值
            if (vm.formData[form.configCode]) {
              temp = Object.assign(temp, vm.formData[form.configCode])
            }
            vm.$set(vm.data, [form.configCode], temp)
          }
        } 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') {
          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: {
    filedReadOnly (filed) {
      let vm = this
      return vm.readOnly ? true : (filed.inputMode === 'readOnly')
    },
    /**
     * 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 : ''
    },
    /**
     * 根据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
    },
    /**
     * 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 (this.readOnly) return
      if (filed.inputMode !== 'readOnly') {
        this.$emit('showSelect', com.configCode, filed.filedCode)
      }
    },
    /**
     * 时间点击函数 交由父组件处理 传递父组件当前点击对象以及字端名
     * @param com 当前组件
     * @param filed 当前字端
     */
    showTime (com, filed) {
      if (this.readOnly) return
      if (filed.inputMode !== 'readOnly') {
        this.$emit('showTime', com.configCode, filed.filedCode)
      }
    },
    /**
     * 其他非input的字端点击函数 用于超链接等其他字端的逻辑处理 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名
     * @param com 当前组件
     * @param filed 当前字端
     */
    filedClick (com, filed) {
      if (!this.readOnly) {
        this.$emit('filedClick', com.configCode, filed.filedCode)
      }
    },
    /**
     * 按钮点击事件 交由父组件处理 传递当前的按钮对象
     * @param com 当前组件
     * @param filed 当前字端
     */
    btnClick (com, filed) {
      if (!this.readOnly) {
        let btnType = com.configType
        let btnCode = filed.filedCode
        this.data.btns.forEach((btn, index) => {
          if (btn.btnType === btnType && btn.btnCode === btnCode) {
            this.$emit('btnClick', btn)
          }
        })
      }
    },
  },
}
</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;
          }
        }
      }
      .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 {
          .add-content {
            .right-icon {
              height: 12px;
            }

            .hide-up-icon {
              transform: rotate(90deg);
            }

            .hide-down-icon {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
  }
</style>