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

vue-ant-patterns

import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _extends from 'babel-runtime/helpers/extends';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { Form } from 'ant-design-vue';
import { sortList, isVnode } from '../../es/_utils';
import { DList } from '../../es';
import BSearchHelper from '../b-search-helper';
import BConstant from '../b-constant';
import BTableCollection from '../b-table-collection';
import VMTable from './table';
import { filterSlot } from './utils';
import extend from 'extend';

import SectionCard from './components/SectionCard';

var DListItem = DList.ListItem;

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

import props, { sectionOptions as vEditCfg, cardStatusToStr, cardHeadCls } from './defaultProps';

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

var panelInfo = props.panelInfo,
    sectionInfo = props.sectionInfo,
    fieldInfo = props.fieldInfo,
    vmStatus = props.vmStatus,
    dataSource = props.dataSource,
    dateFormat = props.dateFormat,
    localeCode = props.localeCode,
    formItemCol = props.formItemCol,
    defaultCol = props.defaultCol,
    tableAction = props.tableAction,
    tableRowKey = props.tableRowKey,
    tableCustomConfig = props.tableCustomConfig,
    sectionSingleEdit = props.sectionSingleEdit,
    sectionOptions = props.sectionOptions,
    tableCollectionQueryParam = props.tableCollectionQueryParam,
    tableCollectionKeys = props.tableCollectionKeys;


export default {
  name: 'vm-section',
  mixins: [mixin, mixinForm],
  inject: ['form'],
  props: {
    panelInfo: panelInfo,
    sectionInfo: sectionInfo,
    fieldInfo: fieldInfo,
    vmStatus: vmStatus,
    dataSource: dataSource,
    dateFormat: dateFormat,
    panel: PropTypes.object,
    section: PropTypes.object,

    formItemCol: formItemCol,
    defaultCol: defaultCol,

    tableAction: tableAction,
    tableRowKey: tableRowKey,

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

    tableCollectionQueryParam: tableCollectionQueryParam,
    tableCollectionKeys: tableCollectionKeys,

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

    /**
     * 单区段编辑, 与完整编辑用另外变量变量区分
     */
    var unwatch = this.$watch('vmStatus', function (val) {
      _this.isEdit = val === cardStatusToStr[1];
      _this.v_status = val;
    });
    if (this.sectionSingleEdit) {
      this.$watch('cardStatus', function (val) {
        _this.isEdit = val === 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 = extend(vEditCfg, sectionOptions);
    var edit = sectionSingleEdit ? cardStatus === cardStatusToStr[1] : vmStatus === cardStatusToStr[1];
    return {
      isEdit: edit,
      v_status: vmStatus,
      localEditCfg: localEditCfg
    };
  },

  watch: {
    sectionOptions: function sectionOptions(v) {
      this.localEditCfg = extend(vEditCfg, 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 = _slicedToArray(sectionInfo, 3),
          sectionKey = _sectionInfo[0],
          sectionCode = _sectionInfo[1],
          sectionName = _sectionInfo[2];

      var _panelInfo = _slicedToArray(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 ? 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: cardStatusToStr[Number(isEdit)],
          tableAction: tableAction,
          tableRowKey: tableRowKey,
          tableCustomConfig: tableCustomConfig
        },
        on: _extends({}, $listeners)
      };
      var sectionCardProps = {
        props: {
          sectionSingleEdit: sectionSingleEdit,
          sectionOptions: sectionOptions,
          title: name,
          locale: localeCode,
          cardStatus: cardStatusToStr[Number(isEdit)],
          extraTitle: titleSlotNode
        },
        attrs: { id: sectionId },
        scopedSlots: _extends({}, $scopedSlots),
        on: {
          'cardStatus.cardStatus': function cardStatusCardStatus(val) {
            _this2.isEdit = val === 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(
        SectionCard,
        sectionCardProps,
        [isGrid ? h(VMTable, tableProps) : h(
          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 = _slicedToArray(panelInfo, 2),
          _ = _panelInfo2[0],
          vPanelCodeKey /* , vPanelNameKey */ = _panelInfo2[1];

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

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

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


      var cloneList = [].concat(_toConsumableArray(fieldsList));
      /**
       * 排序, 根据后台返回的数据排序, 排序属性, displayNum
       */
      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 ? filterSlot(firstSlot({ panel: panel, section: section })) : null;
      var lastSlotRes = lastSlot ? filterSlot(lastSlot({ panel: panel, section: section })) : null;

      if (firstSlotRes) {
        cloneList = [].concat(_toConsumableArray(firstSlotRes), _toConsumableArray(cloneList));
      }
      if (lastSlotRes) {
        cloneList = [].concat(_toConsumableArray(cloneList), _toConsumableArray(lastSlotRes));
      }

      return cloneList.map(function (field) {
        if (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 = _slicedToArray(panelInfo, 2),
          _ = _panelInfo3[0],
          vPanelCodeKey /* , vPanelNameKey */ = _panelInfo3[1];

      var _sectionInfo3 = _slicedToArray(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(BSearchHelper, sRops) : isConstant ? h(BConstant, sRops) : isTableCollection ? h(BTableCollection, sRops) : h('span', [value])]
        )]
      );

      var fieldNodes = [listNode];

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

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

      if (afterSlotRes && afterSlotRes.length) {
        fieldNodes = [].concat(_toConsumableArray(fieldNodes), _toConsumableArray(afterSlotRes));
      }

      return fieldNodes;
    },


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

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