vhb-table/packages/form/src/form-item.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

import XEUtils from 'xe-utils'
import GlobalConfig from '../../v-h-b-table/src/conf'
import VHBTable from '../../v-h-b-table'
import { isEnableConf, getFuncText } from '../../tools/utils'
import { createItem, destroyItem, assemItem } from './util'
import { renderTitle } from './render'

const props = {
  title: String,
  field: String,
  size: String,
  span: [String, Number],
  align: String,
  titleAlign: String,
  titleWidth: [String, Number],
  className: [String, Function],
  titleOverflow: { type: [Boolean, String], default: null },
  titlePrefix: Object,
  titleSuffix: Object,
  resetValue: { default: null },
  visible: { type: Boolean, default: null },
  visibleMethod: Function,
  folding: Boolean,
  collapseNode: Boolean,
  itemRender: Object
}

const watch = {}
Object.keys(props).forEach(name => {
  watch[name] = function (value) {
    this.itemConfig.update(name, value)
  }
})

const renderItem = (h, _vm, item, slots) => {
  const { rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
  const { title, folding, visible, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
  const compConf = isEnableConf(itemRender) ? VHBTable.renderer.get(itemRender.name) : null
  const span = item.span || _vm.span
  const align = item.align || _vm.align
  const titleAlign = item.titleAlign || _vm.titleAlign
  const titleWidth = item.titleWidth || _vm.titleWidth
  let itemVisibleMethod = visibleMethod
  const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
  const showEllipsis = itemOverflow === 'ellipsis'
  const showTitle = itemOverflow === 'title'
  const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
  const hasEllipsis = showTitle || showTooltip || showEllipsis
  const params = { data, property: field, item, $form: _vm }
  let isRequired
  if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
    itemVisibleMethod = compConf.itemVisibleMethod
  }
  if (rules) {
    const itemRules = rules[field]
    if (itemRules) {
      isRequired = itemRules.some(rule => rule.required)
    }
  }
  let contentVNs = []
  if (slots && slots.default) {
    contentVNs = _vm.callSlot(slots.default, params, h)
  } else if (compConf && compConf.renderItemContent) {
    contentVNs = compConf.renderItemContent.call(_vm, h, itemRender, params)
  } else if (compConf && compConf.renderItem) {
    contentVNs = compConf.renderItem.call(_vm, h, itemRender, params)
  } else if (field) {
    contentVNs = [`${XEUtils.get(data, field)}`]
  }
  const ons = showTooltip ? {
    mouseenter (evnt) {
      _vm.triggerTitleTipEvent(evnt, params)
    },
    mouseleave: _vm.handleTitleTipLeaveEvent
  } : {}
  return h('div', {
    class: ['vhb-form--item', item.id, span ? `vhb-col--${span} is--span` : null, className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
      'is--title': title,
      'is--required': isRequired,
      'is--hidden': visible === false || (folding && collapseAll),
      'is--active': !itemVisibleMethod || itemVisibleMethod(params),
      'is--error': showError
    }]
  }, [
    h('div', {
      class: 'vhb-form--item-inner'
    }, [
      title || (slots && slots.title) ? h('div', {
        class: ['vhb-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
          'is--ellipsis': hasEllipsis
        }],
        style: titleWidth ? {
          width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
        } : null,
        attrs: {
          title: showTitle ? getFuncText(title) : null
        },
        on: ons
      }, renderTitle(h, _vm, item)) : null,
      h('div', {
        class: ['vhb-form--item-content', align ? `align--${align}` : null]
      }, contentVNs.concat(
        [
          collapseNode ? h('div', {
            class: 'vhb-form--item-trigger-node',
            on: {
              click: _vm.toggleCollapseEvent
            }
          }, [
            h('span', {
              class: 'vhb-form--item-trigger-text'
            }, collapseAll ? GlobalConfig.i18n('vhb.form.unfolding') : GlobalConfig.i18n('vhb.form.folding')),
            h('i', {
              class: ['vhb-form--item-trigger-icon', collapseAll ? GlobalConfig.icon.FORM_FOLDING : GlobalConfig.icon.FORM_UNFOLDING]
            })
          ]) : null,
          errRule && validOpts.showMessage ? h('div', {
            class: 'vhb-form--item-valid',
            style: errRule.maxWidth ? {
              width: `${errRule.maxWidth}px`
            } : null
          }, errRule.message) : null
        ])
      )
    ])
  ])
}

export default {
  name: 'VhbFormItem',
  props,
  inject: {
    $xeform: {
      default: null
    },
    xeformgather: {
      default: null
    }
  },
  data () {
    return {
      itemConfig: null
    }
  },
  watch,
  mounted () {
    assemItem(this)
  },
  created () {
    this.itemConfig = createItem(this.$xeform, this)
  },
  destroyed () {
    destroyItem(this)
  },
  render (h) {
    const { $xeform } = this
    return $xeform && $xeform.customLayout ? renderItem(h, $xeform, this.itemConfig, this.$scopedSlots) : h('div')
  }
}