vue-ant-patterns/biz-lib/b-vm/Section.js

vue-ant-patterns

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _antDesignVue = require('ant-design-vue');

var _utils = require('../../lib/_utils');

var _components = require('../../lib');

var _bSearchHelper = require('../b-search-helper');

var _bSearchHelper2 = _interopRequireDefault(_bSearchHelper);

var _bConstant = require('../b-constant');

var _bConstant2 = _interopRequireDefault(_bConstant);

var _bTableCollection = require('../b-table-collection');

var _bTableCollection2 = _interopRequireDefault(_bTableCollection);

var _table = require('./table');

var _table2 = _interopRequireDefault(_table);

var _utils2 = require('./utils');

var _extend = require('extend');

var _extend2 = _interopRequireDefault(_extend);

var _SectionCard = require('./components/SectionCard');

var _SectionCard2 = _interopRequireDefault(_SectionCard);

var _mixinBase = require('./mixinBase');

var _mixinBase2 = _interopRequireDefault(_mixinBase);

var _mixinForm = require('./mixinForm');

var _mixinForm2 = _interopRequireDefault(_mixinForm);

var _defaultProps = require('./defaultProps');

var _defaultProps2 = _interopRequireDefault(_defaultProps);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var DListItem = _components.DList.ListItem;

var FormItem = _antDesignVue.Form.Item;
/**
 * 区段
 *
 * 区段有独立的编辑状态
 *
 * 1. panel 整体编辑
 * 2. section 编辑
 *
 * 单独编辑和整体编辑两者需互斥, 要么整体, 要么单独
 * 不管是单独还是整体都统一用一个 form
 */


/**
 * props
 *
 * panel, 留给向外传递用, 可能内部会用到
 * section, 通过 section 可取到 fieldList
 * status 编辑查看
 *
 * 显示隐藏
 *
 * 区段的显示隐藏由外层控制
 * 区段需要控制字段的显示/隐藏 启用/禁用
 */

var panelInfo = _defaultProps2['default'].panelInfo,
    sectionInfo = _defaultProps2['default'].sectionInfo,
    fieldInfo = _defaultProps2['default'].fieldInfo,
    vmStatus = _defaultProps2['default'].vmStatus,
    dataSource = _defaultProps2['default'].dataSource,
    dateFormat = _defaultProps2['default'].dateFormat,
    localeCode = _defaultProps2['default'].localeCode,
    formItemCol = _defaultProps2['default'].formItemCol,
    defaultCol = _defaultProps2['default'].defaultCol,
    tableAction = _defaultProps2['default'].tableAction,
    tableRowKey = _defaultProps2['default'].tableRowKey,
    tableCustomConfig = _defaultProps2['default'].tableCustomConfig,
    sectionSingleEdit = _defaultProps2['default'].sectionSingleEdit,
    sectionOptions = _defaultProps2['default'].sectionOptions,
    tableCollectionQueryParam = _defaultProps2['default'].tableCollectionQueryParam,
    tableCollectionKeys = _defaultProps2['default'].tableCollectionKeys;
exports['default'] = {
  name: 'vm-section',
  mixins: [_mixinBase2['default'], _mixinForm2['default']],
  inject: ['form'],
  props: {
    panelInfo: panelInfo,
    sectionInfo: sectionInfo,
    fieldInfo: fieldInfo,
    vmStatus: vmStatus,
    dataSource: dataSource,
    dateFormat: dateFormat,
    panel: _vueTypes2['default'].object,
    section: _vueTypes2['default'].object,

    formItemCol: formItemCol,
    defaultCol: defaultCol,

    tableAction: tableAction,
    tableRowKey: tableRowKey,

    tableCustomConfig: tableCustomConfig,
    sectionSingleEdit: sectionSingleEdit,
    sectionOptions: sectionOptions,

    tableCollectionQueryParam: tableCollectionQueryParam,
    tableCollectionKeys: tableCollectionKeys,

    vActiveTab: _vueTypes2['default'].string,
    vActiveTabId: _vueTypes2['default'].string,
    localeCode: _vueTypes2['default'].string.def('zh-cn'),
    forceHideSection: _vueTypes2['default'].array.def([]),
    forceShowSection: _vueTypes2['default'].array.def([]),
    forceHideField: _vueTypes2['default'].array.def([]),
    forceShowField: _vueTypes2['default'].array.def([]),
    forceDisableField: _vueTypes2['default'].array.def([]),
    forceEnableField: _vueTypes2['default'].array.def([]),
    forceRequiredField: _vueTypes2['default'].array.def([]),
    forceUnRequiredField: _vueTypes2['default'].array.def([]),
    cardStatus: _vueTypes2['default'].oneOf(['edit', 'view']).def('view')
  },
  created: function created() {
    var _this = this;

    /**
     * 单区段编辑, 与完整编辑用另外变量变量区分
     */
    var unwatch = this.$watch('vmStatus', function (val) {
      _this.isEdit = val === _defaultProps.cardStatusToStr[1];
      _this.v_status = val;
    });
    if (this.sectionSingleEdit) {
      this.$watch('cardStatus', function (val) {
        _this.isEdit = val === _defaultProps.cardStatusToStr[1];
        _this.v_status = val;
      });
      unwatch();
    }
  },
  data: function data() {
    var _$props = this.$props,
        vmStatus = _$props.vmStatus,
        sectionSingleEdit = _$props.sectionSingleEdit,
        sectionOptions = _$props.sectionOptions,
        cardStatus = _$props.cardStatus;

    var localEditCfg = (0, _extend2['default'])(_defaultProps.sectionOptions, sectionOptions);
    var edit = sectionSingleEdit ? cardStatus === _defaultProps.cardStatusToStr[1] : vmStatus === _defaultProps.cardStatusToStr[1];
    return {
      isEdit: edit,
      v_status: vmStatus,
      localEditCfg: localEditCfg
    };
  },

  watch: {
    sectionOptions: function sectionOptions(v) {
      this.localEditCfg = (0, _extend2['default'])(_defaultProps.sectionOptions, v);
    }
  },
  methods: {
    returnSection: function returnSection() {
      var _this2 = this;

      var h = this.$createElement;
      var $listeners = this.$listeners,
          isEdit = this.isEdit,
          v_status = this.v_status,
          localEditCfg = this.localEditCfg,
          strConnector = this.strConnector,
          $scopedSlots = this.$scopedSlots;
      var _$props2 = this.$props,
          panel = _$props2.panel,
          item = _$props2.section,
          sectionInfo = _$props2.sectionInfo,
          panelInfo = _$props2.panelInfo,
          fieldInfo = _$props2.fieldInfo,
          dataSource = _$props2.dataSource,
          dateFormat = _$props2.dateFormat,
          localeCode = _$props2.localeCode,
          defaultCol = _$props2.defaultCol,
          tableAction = _$props2.tableAction,
          tableRowKey = _$props2.tableRowKey,
          tableCustomConfig = _$props2.tableCustomConfig,
          sectionSingleEdit = _$props2.sectionSingleEdit,
          sectionOptions = _$props2.sectionOptions;

      var _sectionInfo = (0, _slicedToArray3['default'])(sectionInfo, 3),
          sectionKey = _sectionInfo[0],
          sectionCode = _sectionInfo[1],
          sectionName = _sectionInfo[2];

      var _panelInfo = (0, _slicedToArray3['default'])(panelInfo, 3),
          _ = _panelInfo[0],
          panelCodeKey = _panelInfo[1],
          __ = _panelInfo[2];

      var panelCode = panel[panelCodeKey];
      var isDisplay = item.isDisplay,
          key = item[sectionKey],
          code = item[sectionCode],
          name = item[sectionName],
          style = item.style;
      var styleCode = style.code;


      var refName = code + '_' + key;

      var sectionId = '' + panelCode + strConnector.replace('#', '') + code;
      /**
       * 是否表格
       */
      var isGrid = styleCode === 'Grid';

      var listProps = {
        props: {
          col: defaultCol
        }
      };

      var titleSlot = $scopedSlots['section-title'];

      var titleSlotNode = titleSlot ? (0, _utils2.filterSlot)(titleSlot({ panel: panel, section: item })) : null;

      var tableProps = {
        props: {
          section: item,
          panel: panel,
          dataSource: dataSource,
          sectionInfo: sectionInfo,
          panelInfo: panelInfo,
          fieldInfo: fieldInfo,
          dateFormat: dateFormat,
          localeCode: localeCode,
          vmStatus: _defaultProps.cardStatusToStr[Number(isEdit)],
          tableAction: tableAction,
          tableRowKey: tableRowKey,
          tableCustomConfig: tableCustomConfig
        },
        on: (0, _extends3['default'])({}, $listeners)
      };
      var sectionCardProps = {
        props: {
          sectionSingleEdit: sectionSingleEdit,
          sectionOptions: sectionOptions,
          title: name,
          locale: localeCode,
          cardStatus: _defaultProps.cardStatusToStr[Number(isEdit)],
          extraTitle: titleSlotNode
        },
        attrs: { id: sectionId },
        scopedSlots: (0, _extends3['default'])({}, $scopedSlots),
        on: {
          'cardStatus.cardStatus': function cardStatusCardStatus(val) {
            _this2.isEdit = val === _defaultProps.cardStatusToStr[1];
            _this2.$emit('update.cardStatus', code, val);
          },
          cancelLoading: function cancelLoading() {
            _this2.$emit('cancelLoading');
          },
          cardSave: function cardSave(callback) {
            _this2.$emit('cardSave', code, _this2.form, function (V) {
              _this2.isEdit = V;
              callback && callback(V);
            });
          }
        },
        key: refName + '-card'
      };
      var card = h(
        _SectionCard2['default'],
        sectionCardProps,
        [isGrid ? h(_table2['default'], tableProps) : h(
          _components.DList,
          listProps,
          [this.renderFields(item, panel)]
        )]
      );
      return card;
    },

    /**
     * 进入渲染字段阶段
     */
    renderFields: function renderFields(section, panel) {
      var _this3 = this;

      var _$props3 = this.$props,
          fieldInfo = _$props3.fieldInfo,
          sectionInfo = _$props3.sectionInfo,
          panelInfo = _$props3.panelInfo;
      var fieldsList = section.fieldsList;

      var _getSlots = this.getSlots('field'),
          firstSlot = _getSlots.firstSlot,
          lastSlot = _getSlots.lastSlot;

      var hideKeys = this.forceHideField,
          showKeys = this.forceShowField,
          strConnector = this.strConnector;

      var _panelInfo2 = (0, _slicedToArray3['default'])(panelInfo, 2),
          _ = _panelInfo2[0],
          vPanelCodeKey /* , vPanelNameKey */ = _panelInfo2[1];

      var _sectionInfo2 = (0, _slicedToArray3['default'])(sectionInfo, 2),
          __ = _sectionInfo2[0],
          vSectionCodeKey /* , vSectionNameKey */ = _sectionInfo2[1];

      var _fieldInfo = (0, _slicedToArray3['default'])(fieldInfo, 2),
          ___ = _fieldInfo[0],
          vFieldCodeKey /* ,  vFiledShowNameKey */ = _fieldInfo[1];

      var panelCode = panel[vPanelCodeKey];
      var sectionCode = section[vSectionCodeKey];


      var cloneList = [].concat((0, _toConsumableArray3['default'])(fieldsList));
      /**
       * 排序, 根据后台返回的数据排序, 排序属性, displayNum
       */
      (0, _utils.sortList)(cloneList);

      cloneList = cloneList.map(function (field) {
        var isDisplay = field.isDisplay;

        var fieldId = _this3.combinationFieldName(null, sectionCode, field[vFieldCodeKey]);

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

        if (hideKeys.includes(fieldId)) {
          isDisplay = false;
        }
        if (showKeys.includes(fieldId)) {
          isDisplay = true;
        }
        if (!isDisplay) {
          return null;
        }
        return field;
      }).filter(function (T) {
        return T;
      });

      var firstSlotRes = firstSlot ? (0, _utils2.filterSlot)(firstSlot({ panel: panel, section: section })) : null;
      var lastSlotRes = lastSlot ? (0, _utils2.filterSlot)(lastSlot({ panel: panel, section: section })) : null;

      if (firstSlotRes) {
        cloneList = [].concat((0, _toConsumableArray3['default'])(firstSlotRes), (0, _toConsumableArray3['default'])(cloneList));
      }
      if (lastSlotRes) {
        cloneList = [].concat((0, _toConsumableArray3['default'])(cloneList), (0, _toConsumableArray3['default'])(lastSlotRes));
      }

      return cloneList.map(function (field) {
        if ((0, _utils.isVnode)(field)) return field;

        return _this3.renderFieldItem(field, section, panel);
      });
    },
    renderFieldItem: function renderFieldItem(field, section, panel) {
      var h = this.$createElement;

      var fieldPropertys = this.getFieldProperty({ field: field, section: section, panel: panel });
      var fieldName = fieldPropertys.fieldName,
          isReadOnly = fieldPropertys.isReadOnly,
          isDisabled = fieldPropertys.isDisabled,
          label = fieldPropertys.label,
          controlType = fieldPropertys.controlType,
          constantType = fieldPropertys.constantType,
          sectionId = fieldPropertys.sectionId,
          searchHelperCode = fieldPropertys.searchHelperCode,
          tempDefaultValue = fieldPropertys.tempDefaultValue;
      var _$props4 = this.$props,
          fieldInfo = _$props4.fieldInfo,
          sectionInfo = _$props4.sectionInfo,
          panelInfo = _$props4.panelInfo,
          formItemCol = _$props4.formItemCol,
          defaultCol = _$props4.defaultCol,
          tableCollectionQueryParam = _$props4.tableCollectionQueryParam,
          tableCollectionKeys = _$props4.tableCollectionKeys,
          dataSource = _$props4.dataSource;

      var _panelInfo3 = (0, _slicedToArray3['default'])(panelInfo, 2),
          _ = _panelInfo3[0],
          vPanelCodeKey /* , vPanelNameKey */ = _panelInfo3[1];

      var _sectionInfo3 = (0, _slicedToArray3['default'])(sectionInfo, 2),
          __ = _sectionInfo3[0],
          vSectionCodeKey /* , vSectionNameKey */ = _sectionInfo3[1];
      // const [___, vFieldCodeKey /* ,  vFiledShowNameKey */] = fieldInfo;

      var panelCode = panel[vPanelCodeKey];
      var sectionCode = section[vSectionCodeKey];
      // 是否编辑

      var isEdit = this.isEdit,
          sectionSingleEdit = this.sectionSingleEdit;

      if (sectionSingleEdit) {}
      // isEdit = this.editState;

      /**
       * 字段名用拼接
       * 面板 code, 区段 code, 字段名
       */
      var formFieldName = this.combinationFieldName(panelCode, sectionCode, fieldName);

      var labelCol = formItemCol.labelCol,
          wrapCol = formItemCol.wrapCol;


      var nLabelCol = labelCol / defaultCol;
      var wrapComputedCol = wrapCol;
      var spanCol = 1;
      if (controlType === 'TEXTAREA') {
        spanCol = defaultCol;
        wrapComputedCol = wrapCol + nLabelCol + defaultCol;
        // wrapComputedCol = (1 / (24 * defaultCol)) * labelCol * 100;
      }
      /**
       * 文本域控件类型
       * 文本域控件类型一般都是独占一行
       * 需要从新设置下 listItem spanCol
       */
      var isTextarea = controlType === 'TEXTAREA';
      var isText = controlType === 'TEXT';
      /**
       * 搜索助手
       * 查看编辑状态统一用统一组件, 利用搜索助手内置能力查询对应的内容
       */
      var isSelector = controlType === 'SELECTOR';
      /**
       * 常数代码
       */
      var isConstant = controlType === 'CONSTANT';

      /**
       * 常数代码
       */
      var isTableCollection = controlType === 'SETID';

      var formItemProps = {
        props: {
          labelCol: {
            // 后期完善
            span: isTextarea ? nLabelCol : labelCol,
            selfUpdate: true
          },
          wrapperCol: {
            // 后期完善
            span: wrapComputedCol
          },
          label: label,
          key: formFieldName + '-formItem'
          // selfUpdate: true,
        }
      };
      /**
       * 是否有作用未知
       */
      if (isEdit && (isTextarea || isText)) {
        formItemProps.props.selfUpdate = true;
      }
      if (isTextarea) {
        /**
         * TODO: 后续在完善
         */
        // formItemProps.props.wrapperCol = undefined;
        // formItemProps.props.labelCol = undefined;
      }
      var listItemProps = {
        props: {
          spanCol: spanCol
        },
        key: formFieldName + '-list'
      };
      /**
       * value date 类型返回的是 moment
       * 查看状态需要转换下载输出
       */
      var sectionData = this.getSectionData(sectionId);

      this.v_status = isEdit ? 'edit' : 'view';

      var value = this.getFieldValue(controlType, fieldName, sectionData, tempDefaultValue);

      /**
       * 搜索助手类型, 在查看时传递 searchStatus 为 view
       */
      var sRops = {
        props: {
          disabled: isDisabled,
          readonly: isReadOnly,
          allowClear: true,
          placeholder: label,
          code: searchHelperCode,
          searchStatus: 'view',
          value: value
        }
      };

      if (isConstant) {
        sRops.props.status = 'view';
        sRops.props.typeCode = constantType;
        delete sRops.props.code;
        delete sRops.props.searchStatus;
      }

      if (isTableCollection) {
        sRops.props.tableName = section.tableName;
        sRops.props.status = 'view';
        sRops.props.queryParam = tableCollectionQueryParam;
        sRops.props.keys = tableCollectionKeys;
        delete sRops.props.code;
        delete sRops.props.searchStatus;
      }

      var _getSlots2 = this.getSlots('field'),
          afterSlot = _getSlots2.afterSlot,
          customSlot = _getSlots2.customSlot;

      var listNode = h(
        DListItem,
        listItemProps,
        [h(
          FormItem,
          formItemProps,
          [isEdit ? this.renderFieldType(fieldPropertys) : isSelector ? h(_bSearchHelper2['default'], sRops) : isConstant ? h(_bConstant2['default'], sRops) : isTableCollection ? h(_bTableCollection2['default'], sRops) : h('span', [value])]
        )]
      );

      var fieldNodes = [listNode];

      var afterSlotRes = afterSlot ? (0, _utils2.filterSlot)(afterSlot({ panel: panel, section: section, field: field })) : null;
      var customSlotRes = customSlot ? (0, _utils2.filterSlot)(customSlot({ panel: panel, section: section, field: field })) : null;

      if (customSlotRes && customSlotRes.length) {
        fieldNodes = [customSlotRes];
      }

      if (afterSlotRes && afterSlotRes.length) {
        fieldNodes = [].concat((0, _toConsumableArray3['default'])(fieldNodes), (0, _toConsumableArray3['default'])(afterSlotRes));
      }

      return fieldNodes;
    },


    /**
     * 根据类型处理字段
     * 只有在编辑时才会走这里
     */
    renderFieldType: function renderFieldType(fieldPropertys) {
      var controlType = fieldPropertys.controlType;

      return this['render$' + controlType](fieldPropertys);
    }
  },
  render: function render() {
    return this.returnSection();
  }
};