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

vue-ant-patterns

import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import _extends from 'babel-runtime/helpers/extends';
/*
 * @Author: w.pengfei
 * @Date: 2020-06-22 13:29:49
 * @LastEditTime: 2021-04-22 10:21:34
 * @Description: ''
 * @LastEditors: w.pengfei
 */
import { isEmptyObj, sortList, isVnode } from '../../es/_utils';
import props, { sectionOptions as vEditCfg } from './defaultProps';
import mixin from './mixinBase';
import { filterSlot } from './utils';
import extend from 'extend';
import Section from './Section';
var cardStatusToStr = ['view', 'edit'];

export default {
  name: 'RenderMixin',
  mixins: [mixin],
  props: _extends({}, props),
  data: function data() {
    // 获取到 区段插槽
    var sectionSlot = this.getSectionSlots();
    // 获取到字段插槽
    var fieldSlot = this.getFieldSlots();
    return {
      sectionSlot: sectionSlot,
      fieldSlot: fieldSlot,
      singleEditStatus: {}
    };
  },
  mounted: function mounted() {
    this.sectionSlot = this.getSectionSlots();
    this.fieldSlot = this.getFieldSlots();
  },


  methods: {
    /**
     * 渲染区段
     */
    renderSection: function renderSection(panel) {
      var _panel$sectionList = panel.sectionList,
          sectionList = _panel$sectionList === undefined ? [] : _panel$sectionList;

      var _getSlots = this.getSlots('section'),
          firstSlot = _getSlots.firstSlot,
          lastSlot = _getSlots.lastSlot;
      /**
       * 新需求实现
       * 在没有区段的情况下, 需要能正常渲染区段插槽
       * 在判断是否有区段信息时, 同时也需要判断下是否有 首尾插槽
       * 在没有区段信息时, 需支持首尾插槽
       */


      var isSlot = !firstSlot && !lastSlot;
      if ((!sectionList || !sectionList.length) && isSlot) {
        return this.renderEmpty();
      }

      return this.renderSectionItem(panel);
    },

    /**
     * 渲染区段
     */
    renderSectionItem: function renderSectionItem(panel) {
      var _this = this;

      var h = this.$createElement;
      var $listeners = this.$listeners,
          isEdit = this.isEdit,
          langType = this.langType,
          $scopedSlots = this.$scopedSlots;
      var _panel$sectionList2 = panel.sectionList,
          sectionList = _panel$sectionList2 === undefined ? [] : _panel$sectionList2;
      var _$props = this.$props,
          vmStatus = _$props.vmStatus,
          sectionInfo = _$props.sectionInfo,
          sectionOptions = _$props.sectionOptions,
          sectionDefaultEdit = _$props.sectionDefaultEdit,
          sectionSingleEdit = _$props.sectionSingleEdit,
          hideKeys = _$props.forceHideSection,
          showKeys = _$props.forceShowSection;

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

      var _getSlots2 = this.getSlots('section'),
          firstSlot = _getSlots2.firstSlot,
          lastSlot = _getSlots2.lastSlot,
          afterSlot = _getSlots2.afterSlot,
          customSlot = _getSlots2.customSlot;

      /**
       * 排序
       */

      var cloneList = [].concat(_toConsumableArray(sectionList));

      cloneList = cloneList.map(function (item) {
        if (isVnode(item)) return item;

        var isDisplay = item.isDisplay,
            code = item[sectionCode];


        if (hideKeys.includes(code)) {
          isDisplay = false;
        }
        if (!isDisplay && showKeys.includes(code)) {
          isDisplay = true;
        }

        if (isDisplay) {
          return item;
        }
        return null;
      }).filter(function (T) {
        return T;
      });

      /**
       * 排序, 根据后台返回的数据排序, 排序属性, displayNum
       */
      sortList(cloneList);

      var clonePanel = extend({}, panel);
      var firstSlotRes = firstSlot ? filterSlot(firstSlot({ panel: clonePanel })) : null;
      var lastSlotRes = lastSlot ? filterSlot(lastSlot({ panel: clonePanel })) : null;

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

      return cloneList.map(function (item) {
        if (isVnode(item)) return item;
        var sCode = item[sectionCode];
        var vStatus = cardStatusToStr[Number(isEdit)];
        var vSingleEdit = sectionSingleEdit;
        var isConfig = item.isConfig;
        /**
         * 默认开启编辑的区段
         * 单区段编辑, 是否有默认编辑的区段
         * 默认开启编辑的区段, 优先级高于数据返回的配置项
         */

        if (sectionSingleEdit) {
          vStatus = cardStatusToStr[0];
          if (sectionDefaultEdit && sectionDefaultEdit.length) {
            vStatus = cardStatusToStr[Number(sectionDefaultEdit.includes(sCode))];
          }
        }
        /**
         * vm 模板数据返回的区段编辑, 优先级高于 vm.props.sectionSingleEdit
         * 同时需要 vm.props.sectionSingleEdit 为 true
         */
        if (isConfig !== 'undefined' && sectionSingleEdit) {
          vSingleEdit = isConfig;
        }
        var sectionProps = {
          props: _extends({}, _this.$props, {
            sectionSingleEdit: vSingleEdit,
            section: item,
            vmStatus: vStatus,
            // 单区段编辑, 控制编辑状态
            cardStatus: vStatus,
            panel: panel
          }),
          scopedSlots: _extends({}, $scopedSlots),
          on: _extends({}, $listeners),
          ref: sCode,
          key: sCode + '-section'
        };
        var card = h(Section, sectionProps);

        var sectionNodes = [card];

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

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

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

        return sectionNodes;
      });
    }
  }
};