vue-ant-patterns/es/d-form/mixinForm.js

vue-ant-patterns

import _extends from 'babel-runtime/helpers/extends';
/*
 * @Author: w.pengfei
 * @Date: 2020-06-22 13:29:35
 * @LastEditTime: 2021-05-19 17:05:16
 * @Description: ''
 * @LastEditors: daibing
 */
import moment from 'moment';
import extend from 'extend';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { Input, InputNumber, DatePicker, TimePicker, Select, Cascader } from 'ant-design-vue';
import BConstant from '../../biz-es/b-constant';
import BSearchHelper from '../../biz-es/b-search-helper';
import BTableCollection from '../../biz-es/b-table-collection';

import EN from './locale/en_US';
import CN from './locale/zh_CN';
var langType = {
  'zh-cn': CN,
  'en-us': EN
};

var TextArea = Input.TextArea;

var inputAttr_err = 'data-___err';
var getElAttr = function getElAttr(el, val) {
  if (el && el.nodeType && el.nodeType === 1) {
    if (val) {
      el.setAttribute(inputAttr_err, val);
      return;
    }
    return el.getAttribute(inputAttr_err);
  }
};

export default {
  name: 'mixin-form-item',
  props: {
    localeCode: PropTypes.string.def('zh-cn')
  },
  // inject: ['subFields'],
  created: function created() {
    // 去掉防抖, 输入框看起来稍微好一点
    // this.onFieldInput = debounceHandler(this.onFieldInput);
  },
  data: function data() {
    return {
      textareaCache: {},
      langType: langType
    };
  },

  methods: {
    getDisable: function getDisable(sectionCode, fieldName, rawDis) {
      var strConnector = this.strConnector;
      var _$props = this.$props,
          forceDisableField = _$props.forceDisableField,
          forceEnableField = _$props.forceEnableField;

      var isDisabled = rawDis;
      var fieldId = this.combinationFieldName(null, sectionCode, fieldName);

      fieldId = fieldId.replace('null' + strConnector, '');

      if (forceDisableField.includes(fieldId)) {
        isDisabled = true;
      }
      if (forceEnableField.includes(fieldId)) {
        isDisabled = false;
      }
      if ((forceEnableField.length || forceDisableField.length) && (forceDisableField.includes(fieldId) || forceEnableField.includes(fieldId))) {
        return isDisabled;
      }
      return isDisabled;
    },
    getRequired: function getRequired(sectionCode, fieldName, rawReq) {
      var strConnector = this.strConnector;
      var forceRequiredField = this.forceRequiredField,
          forceUnRequiredField = this.forceUnRequiredField;

      var isRequired = rawReq;
      var fieldId = this.combinationFieldName(null, sectionCode, fieldName);

      fieldId = fieldId.replace('null' + strConnector, '');

      if (forceRequiredField.includes(fieldId)) {
        isRequired = true;
      }
      if (forceUnRequiredField.includes(fieldId)) {
        isRequired = false;
      }
      if ((forceRequiredField.length || forceUnRequiredField.length) && (forceRequiredField.includes(fieldId) || forceUnRequiredField.includes(fieldId))) {
        return isRequired;
      }
      return isRequired;
    },


    // 文本框
    render$TEXT: function render$TEXT(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          rules = fieldPropertys.rules,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          isDisabled = fieldPropertys.isDisabled,
          value = fieldPropertys.value;
      var _$props2 = this.$props,
          form = _$props2.form,
          localeCode = _$props2.localeCode;

      var getFieldDecorator = form.getFieldDecorator;
      var langType = this.langType;

      var pleaseEnter = langType[localeCode].pleaseEnter;
      var inpRops = {
        props: _extends({
          disabled: isDisabled || isReadOnly,
          allowClear: true,
          placeholder: pleaseEnter + label
        }, slotprops),
        on: sloton,
        ref: nFieldName + '_TEXT'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h('a-input', inpRops));
    },

    // 数字文本框
    render$NUMBER: function render$NUMBER(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          label = fieldPropertys.label,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          isDisabled = fieldPropertys.isDisabled,
          sloton = fieldPropertys.sloton,
          rules = fieldPropertys.rules,
          value = fieldPropertys.value;
      var _$props3 = this.$props,
          form = _$props3.form,
          localeCode = _$props3.localeCode;

      var getFieldDecorator = form.getFieldDecorator;
      var langType = this.langType;

      var pleaseEnter = langType[localeCode].pleaseEnter;
      var inpRops = {
        props: _extends({
          disabled: isDisabled || isReadOnly,
          readonly: isReadOnly,
          placeholder: pleaseEnter + label
        }, slotprops),
        on: sloton,
        ref: nFieldName + '_NUMBER'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(InputNumber, inpRops));
    },

    // 文本域
    render$TEXTAREA: function render$TEXTAREA(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          rules = fieldPropertys.rules,
          isDisabled = fieldPropertys.isDisabled,
          value = fieldPropertys.value;
      var _$props4 = this.$props,
          form = _$props4.form,
          localeCode = _$props4.localeCode;
      var langType = this.langType;
      var getFieldDecorator = form.getFieldDecorator;

      var pleaseEnter = langType[localeCode].pleaseEnter;
      var inpRops = {
        props: _extends({
          disabled: isDisabled || isReadOnly,
          placeholder: pleaseEnter + label,
          allowClear: true,
          readonly: isReadOnly,
          autoSize: {
            minRows: 3,
            maxRows: 8
          }
        }, slotprops),
        on: sloton,
        ref: nFieldName + '_TEXTAREA'
      };

      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(TextArea, inpRops));
    },

    // 日期控件
    render$DATE: function render$DATE(fieldPropertys, _time) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          value = fieldPropertys.value,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          isDisabled = fieldPropertys.isDisabled,
          rules = fieldPropertys.rules,
          dateFormat = fieldPropertys.dateFormat;
      var _$props5 = this.$props,
          form = _$props5.form,
          localeCode = _$props5.localeCode;
      var langType = this.langType;

      var getFieldDecorator = form.getFieldDecorator;
      var pleaseEnter = langType[localeCode].pleaseEnter;
      var inpRops = {
        props: _extends({
          disabled: isDisabled || isReadOnly,
          readonly: isReadOnly,
          format: dateFormat || 'YYYY-MM-DD',
          placeholder: pleaseEnter + label
        }, slotprops),
        'class': 'vm-width-full-item',
        on: sloton,
        ref: nFieldName + '_DATE'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(DatePicker, inpRops));
    },

    // 时间控件
    render$TIME: function render$TIME(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          value = fieldPropertys.value,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          isDisabled = fieldPropertys.isDisabled,
          rules = fieldPropertys.rules;
      var _$props6 = this.$props,
          form = _$props6.form,
          localeCode = _$props6.localeCode;
      var langType = this.langType;

      var getFieldDecorator = form.getFieldDecorator;
      var pleaseEnter = langType[localeCode].pleaseEnter;
      var inpRops = {
        props: _extends({
          disabled: isDisabled,
          readonly: isReadOnly,
          placeholder: pleaseEnter + label
        }, slotprops),
        on: sloton
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(TimePicker, inpRops));
    },

    // 搜索助手, slotprops里需要有code
    render$SELECTOR: function render$SELECTOR(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          value = fieldPropertys.value,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          slotprops = fieldPropertys.slotprops,
          isDisabled = fieldPropertys.isDisabled,
          rules = fieldPropertys.rules;
      var form = this.$props.form;
      var getFieldDecorator = form.getFieldDecorator;

      var inpRops = {
        props: _extends({
          disabled: isDisabled || isReadOnly,
          readonly: isReadOnly || isDisabled,
          allowClear: true,
          placeholder: label
        }, slotprops),

        on: sloton,
        ref: nFieldName + '_SELECTOR'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(BSearchHelper, inpRops));
    },

    // 常数代码
    render$CONSTANT: function render$CONSTANT(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          value = fieldPropertys.value,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          typeCode = fieldPropertys.typeCode,
          isDisabled = fieldPropertys.isDisabled,
          rules = fieldPropertys.rules;
      var form = this.$props.form;
      var getFieldDecorator = form.getFieldDecorator;


      var inpRops = {
        props: {
          disabled: isDisabled || isReadOnly,
          readonly: isReadOnly,
          allowClear: true,
          placeholder: label,
          typeCode: typeCode
        },
        on: sloton,
        ref: nFieldName + '_CONSTANT'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(BConstant, inpRops));
    },

    /**
     * 下拉列表控件
     * 表集合
     */
    render$SETID: function render$SETID(fieldPropertys) {
      var h = this.$createElement;
      var nFieldName = fieldPropertys.nFieldName,
          value = fieldPropertys.value,
          label = fieldPropertys.label,
          sloton = fieldPropertys.sloton,
          isReadOnly = fieldPropertys.isReadOnly,
          typeCode = fieldPropertys.typeCode,
          isDisabled = fieldPropertys.isDisabled,
          rules = fieldPropertys.rules,
          tableCollectionQueryParam = fieldPropertys.tableCollectionQueryParam,
          tableCollectionKeys = fieldPropertys.tableCollectionKeys,
          tableName = fieldPropertys.tableName;
      var form = this.$props.form;
      var getFieldDecorator = form.getFieldDecorator;

      var inpRops = {
        props: {
          disabled: isDisabled || isReadOnly,
          readonly: isReadOnly,
          allowClear: true,
          placeholder: label,
          tableName: tableName,
          status: 'edit',
          type: 'select',
          queryParam: tableCollectionQueryParam,
          keys: tableCollectionKeys
          // value,
        },
        on: sloton,
        ref: nFieldName + '_SETID'
      };
      return getFieldDecorator(nFieldName, {
        initialValue: value,
        rules: rules
      })(h(BTableCollection, inpRops));
    },
    render$COMBOBOX: function render$COMBOBOX(fieldPropertys) {
      return this.render$CONSTANT(fieldPropertys);
    },

    // 多选框控件
    render$CHECKBOX: function render$CHECKBOX() {
      var h = this.$createElement;

      return h('span', ['CHECKBOX \u63A7\u4EF6']);
    },

    // 多选框控件
    render$SELECTBOX: function render$SELECTBOX() {
      var h = this.$createElement;

      return h('span', ['SELECTBOX \u63A7\u4EF6']);
    },

    // 上传图片控件
    render$IMG: function render$IMG() {
      var h = this.$createElement;

      return h('span', ['IMG \u4E0A\u4F20\u56FE\u7247\u63A7\u4EF6']);
    },

    // 上传附件控件
    render$FILE: function render$FILE() {
      var h = this.$createElement;

      return h('span', ['FILE \u4E0A\u4F20\u9644\u4EF6\u63A7\u4EF6']);
    },

    // 货币控件
    render$MONEY: function render$MONEY(fieldPropertys) {
      return this.render$TEXT(fieldPropertys);
    },

    // 身份证
    render$IDCARD: function render$IDCARD() {
      var h = this.$createElement;

      return h('span', ['IDCARD \u8EAB\u4EFD\u8BC1']);
    },

    // CKEDIT 文本编辑器
    render$CKEDIT: function render$CKEDIT() {
      var h = this.$createElement;

      return h('span', ['CKEDIT \u6587\u672C\u7F16\u8F91\u5668']);
    },
    onFieldChange: function onFieldChange(arg) {
      this.$emit('fieldChange', _extends({}, arg));
    },
    onFieldInput: function onFieldInput(arg) {
      this.$emit('fieldChange', _extends({}, arg));
    },
    onSearchChange: function onSearchChange(_ref) {
      var arg = _ref.arg;

      this.$emit('searchChange', _extends({}, arg));
    },
    onFieldSelect: function onFieldSelect(arg) {
      this.$emit('fieldSelect', _extends({}, arg));
    }
  }
};