vue-ant-patterns/biz-es/b-vm/components/SectionCard.js

vue-ant-patterns

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import extend from 'extend';
import { Card, Tooltip, Icon } from 'ant-design-vue';
import { DContainer, DIconButton } from '../../../es';
import props, { sectionOptions as vEditCfg, cardStatusToStr, cardHeadCls } from '../defaultProps';
import cx from 'classnames';
import EN from '../locale/en_US';
import CN from '../locale/zh_CN';

var langType = {
  'zh-cn': CN,
  'en-us': EN
};

var sectionSingleEdit = props.sectionSingleEdit,
    sectionOptions = props.sectionOptions;


export default {
  name: 'vm-section-card',
  props: {
    sectionSingleEdit: sectionSingleEdit,
    sectionOptions: sectionOptions,
    title: PropTypes.string,
    extraTitle: PropTypes.any,
    locale: PropTypes.string.def('zh-cn'),
    cardStatus: PropTypes.oneOf(['edit', 'view']).def('view')
  },
  model: {
    prop: 'status',
    event: 'cardStatus.change'
  },
  created: function created() {},
  data: function data() {
    var _$props = this.$props,
        sectionOptions = _$props.sectionOptions,
        cardStatus = _$props.cardStatus;

    var localEditCfg = extend(vEditCfg, sectionOptions);
    var isEdit = cardStatus === cardStatusToStr[1];
    var mouseIn = isEdit;
    return {
      localEditCfg: localEditCfg,
      v_status: cardStatus,
      isEdit: isEdit,
      langType: langType,
      mouseIn: mouseIn,
      saveButtonDisabled: false
    };
  },

  watch: {
    cardStatus: function cardStatus(val) {
      this.v_status = val;
    },
    sectionOptions: function sectionOptions(v) {
      this.localEditCfg = extend(vEditCfg, v);
    },
    v_status: function v_status(val) {
      this.isEdit = val === 'edit';
      this.$emit('cardStatus.cardStatus', val);
    }
  },
  mounted: function mounted() {},

  methods: {
    getProps: function getProps() {
      var _this = this;

      var h = this.$createElement;
      var _$props2 = this.$props,
          sectionSingleEdit = _$props2.sectionSingleEdit,
          title = _$props2.title,
          locale = _$props2.locale,
          extraTitle = _$props2.extraTitle,
          $listeners = _$props2.$listeners,
          $attrs = _$props2.$attrs;
      var localEditCfg = this.localEditCfg,
          isEdit = this.isEdit,
          langType = this.langType,
          mouseIn = this.mouseIn,
          saveButtonDisabled = this.saveButtonDisabled;
      var _langType$locale = langType[locale],
          langCancel = _langType$locale.cancel,
          langSave = _langType$locale.save,
          langEdit = _langType$locale.edit;

      var cls = cx({
        // 'mouse-in': mouseIn,
        'mouse-in': true
      });
      var cardProps = {
        props: {
          bordered: false,
          title: title
        },
        'class': cls,
        on: _extends({}, $listeners),
        attrs: _extends({}, $attrs),
        ref: 'cardRef'
      };
      if (sectionSingleEdit) {
        var _ref = localEditCfg || {},
            _ref$size = _ref.size,
            size = _ref$size === undefined ? 'small' : _ref$size,
            _ref$save = _ref.save,
            saveIcon = _ref$save === undefined ? 'save' : _ref$save,
            _ref$edit = _ref.edit,
            editIcon = _ref$edit === undefined ? 'edit' : _ref$edit,
            _ref$cancel = _ref.cancel,
            cancelIcon = _ref$cancel === undefined ? 'rollback' : _ref$cancel;

        cardProps.scopedSlots = {
          extra: function extra() {
            var editProps = {
              props: {
                size: 'small',
                icon: editIcon
              },
              on: {
                click: function click() {
                  _this.v_status = cardStatusToStr[1];
                }
              }
            };
            var cancelProps = {
              props: {
                size: size,
                icon: cancelIcon
              },
              on: {
                click: function click() {
                  if (saveButtonDisabled) {
                    _this.saveButtonDisabled = false;
                    _this.$emit('cancelLoading');
                    return;
                  }
                  _this.v_status = cardStatusToStr[0];
                }
              }
            };
            var saveProps = {
              props: {
                size: size
              },
              on: {
                click: function click() {
                  if (saveButtonDisabled) return;
                  _this.saveButtonDisabled = true;
                  _this.$emit('cardSave', function (V) {
                    _this.saveButtonDisabled = false;
                  });
                }
              }
            };
            var cardHeadExtraActionCls = cardHeadCls[1];
            return h(
              DContainer,
              {
                attrs: { flex: true, justify: 'center' },
                'class': cardHeadExtraActionCls },
              [extraTitle, h(
                'transition',
                {
                  attrs: { name: 'no-mode-translate-fade', mode: 'out-in' }
                },
                [!isEdit ? h(
                  Tooltip,
                  {
                    attrs: { title: langEdit }
                  },
                  [h(DIconButton, editProps)]
                ) : null, isEdit ? h(
                  DContainer,
                  {
                    attrs: { flex: true, justify: 'center' }
                  },
                  [h(
                    Tooltip,
                    {
                      attrs: { title: langCancel }
                    },
                    [h(DIconButton, cancelProps)]
                  ), h(
                    Tooltip,
                    {
                      attrs: { title: langSave }
                    },
                    [h(
                      DIconButton,
                      saveProps,
                      [!saveButtonDisabled ? h(Icon, {
                        attrs: { type: saveIcon }
                      }) : h(Icon, {
                        attrs: { type: 'loading' }
                      })]
                    )]
                  )]
                ) : null]
              )]
            );
          }
        };
      } else if (extraTitle) {
        cardProps.scopedSlots = {
          extra: function extra() {
            return extraTitle;
          }
        };
      }
      if (extraTitle || sectionSingleEdit) {
        cardProps.on = _extends({}, cardProps.on, {
          mouseenter: function mouseenter(e) {
            if (isEdit) return;
            _this.mouseIn = true;
          },
          mouseleave: function mouseleave(e) {
            if (isEdit) return;
            _this.mouseIn = false;
          }
        });
      }
      return cardProps;
    }
  },
  render: function render() {
    var h = arguments[0];
    var $slots = this.$slots;

    var props = this.getProps();
    return h(
      Card,
      props,
      [$slots['default']]
    );
  }
};